-
-
Notifications
You must be signed in to change notification settings - Fork 72
/
index.ts
38 lines (33 loc) · 1.1 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react';
export const hasSupport = (): boolean => Boolean('PointerEvent' in window);
let flag = false;
function onPointerMove(event: React.PointerEvent<Element>) {
const timeline = document.querySelector('#red-timeline') as HTMLElement;
if (flag) {
const rect = timeline.getBoundingClientRect();
timeline.style.width = `${event.clientX - rect.left}px`;
const childTag = document.querySelector('#dot') as HTMLElement;
childTag.style.left = `${event.clientX - rect.left - 20}px`;
}
}
function onPointerDown(event: React.PointerEvent<Element>, isCapture: boolean) {
const timeline = document.querySelector('#red-timeline') as HTMLElement;
if (isCapture) {
timeline.setPointerCapture(event.pointerId);
}
flag = true;
onPointerMove(event);
}
function onPointerUp(event: React.PointerEvent<Element>, isCapture: boolean) {
const timeline = document.querySelector('#red-timeline') as HTMLElement;
if (isCapture) {
timeline.releasePointerCapture(event.pointerId);
}
flag = false;
}
const run = {
onPointerDown,
onPointerUp,
onPointerMove,
};
export default run;