@newthink/ui 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/headless/dragScroll.d.ts.map +1 -1
- package/dist/headless/dragScroll.js +11 -7
- package/dist/headless/dragScroll.js.map +1 -1
- package/dist/headless/swipeDetect.js +2 -1
- package/dist/headless/swipeDetect.js.map +1 -1
- package/package.json +1 -1
- package/src/headless/dragScroll.ts +11 -11
- package/src/headless/swipeDetect.ts +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragScroll.d.ts","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"dragScroll.d.ts","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAkBxC,eAAO,MAAM,UAAU,EAAE,YAUrB,CAAC"}
|
|
@@ -11,13 +11,15 @@ const center = async (el) => {
|
|
|
11
11
|
el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
|
|
12
12
|
el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
|
|
13
13
|
};
|
|
14
|
+
const forEach = Array.prototype.forEach;
|
|
14
15
|
export const dragScroll = (Alpine) => Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
|
|
15
16
|
const autoCenter = modifiers.includes('center');
|
|
16
|
-
registerDragScroll(el);
|
|
17
|
-
if (autoCenter)
|
|
18
|
-
Array.prototype.forEach.call(el.children, (el) => resizeCenterer.observe(el));
|
|
17
|
+
cleanup(registerDragScroll(el));
|
|
19
18
|
el.classList.add('overscroll-contain', 'cursor-grab');
|
|
20
|
-
|
|
19
|
+
if (!autoCenter)
|
|
20
|
+
return;
|
|
21
|
+
forEach.call(el.children, (el) => resizeCenterer.observe(el));
|
|
22
|
+
cleanup(() => forEach.call(el.children, (el) => resizeCenterer.unobserve(el)));
|
|
21
23
|
});
|
|
22
24
|
const preventStop = (e) => {
|
|
23
25
|
e.preventDefault();
|
|
@@ -37,7 +39,7 @@ const registerDragScroll = (el) => {
|
|
|
37
39
|
el.classList.add('cursor-grab');
|
|
38
40
|
await nextTick();
|
|
39
41
|
document.removeEventListener('click', preventStop, true);
|
|
40
|
-
cancelEvents.
|
|
42
|
+
cancelEvents.forEach((event) => document.removeEventListener(event, upHandler, {
|
|
41
43
|
capture: true,
|
|
42
44
|
}));
|
|
43
45
|
};
|
|
@@ -50,13 +52,15 @@ const registerDragScroll = (el) => {
|
|
|
50
52
|
el.classList.remove('cursor-grab');
|
|
51
53
|
document.body.classList.add('!cursor-grabbing', '[&>*]:pointer-events-none');
|
|
52
54
|
document.addEventListener('pointermove', moveHandler, { capture: true });
|
|
53
|
-
cancelEvents.
|
|
55
|
+
cancelEvents.forEach((event) => document.addEventListener(event, upHandler, {
|
|
54
56
|
capture: true,
|
|
55
57
|
}));
|
|
56
58
|
document.addEventListener('click', preventStop, { capture: true });
|
|
57
59
|
};
|
|
58
60
|
el.addEventListener('pointerdown', downHandler);
|
|
61
|
+
return () => el.removeEventListener('pointerdown', downHandler);
|
|
59
62
|
};
|
|
60
63
|
const nextTick = () => new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
|
|
61
|
-
const isTouch = (e) => e instanceof TouchEvent
|
|
64
|
+
const isTouch = (e) => e instanceof TouchEvent ||
|
|
65
|
+
(e instanceof PointerEvent && e.pointerType === 'touch');
|
|
62
66
|
//# sourceMappingURL=dragScroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragScroll.js","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;IACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC3B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,CAAC,EAAE,YAAY,WAAW,CAAC;YAAE,SAAS;QAC3C,MAAM,CAAC,EAAE,CAAC,CAAC;KACZ;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,KAAK,EAAE,EAAe,EAAE,EAAE;IACvC,MAAM,QAAQ,EAAE,CAAC;IACjB,EAAE,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACtD,EAAE,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAiB,CAAC,MAAM,EAAE,EAAE,CACjD,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"dragScroll.js","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"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"}
|
|
@@ -48,6 +48,7 @@ const touchUp = (ev) => {
|
|
|
48
48
|
if (direction === SwipeDirection.None)
|
|
49
49
|
return;
|
|
50
50
|
swipeData.dispatch(direction);
|
|
51
|
+
delete swipeData.start;
|
|
51
52
|
};
|
|
52
53
|
const findNearest = (el, predicate) => {
|
|
53
54
|
if (predicate(el))
|
|
@@ -58,7 +59,7 @@ const findNearest = (el, predicate) => {
|
|
|
58
59
|
};
|
|
59
60
|
const getDirection = (start, end) => {
|
|
60
61
|
const vector = [end.x - start.x, end.y - start.y];
|
|
61
|
-
if (vector.every((v) => Math.abs(v) <
|
|
62
|
+
if (vector.every((v) => Math.abs(v) < 50))
|
|
62
63
|
return SwipeDirection.None;
|
|
63
64
|
// normalize vector
|
|
64
65
|
const magnitude = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swipeDetect.js","sourceRoot":"","sources":["../../src/headless/swipeDetect.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"swipeDetect.js","sourceRoot":"","sources":["../../src/headless/swipeDetect.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -14,19 +14,17 @@ const center = async (el: HTMLElement) => {
|
|
|
14
14
|
el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
+
const forEach = Array.prototype.forEach;
|
|
18
|
+
|
|
17
19
|
export const dragScroll: AlpinePlugin = (Alpine) =>
|
|
18
20
|
Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
|
|
19
21
|
const autoCenter = modifiers.includes('center');
|
|
20
|
-
registerDragScroll(el);
|
|
21
|
-
if (autoCenter)
|
|
22
|
-
Array.prototype.forEach.call(el.children, (el: Element) =>
|
|
23
|
-
resizeCenterer.observe(el),
|
|
24
|
-
);
|
|
22
|
+
cleanup(registerDragScroll(el));
|
|
25
23
|
el.classList.add('overscroll-contain', 'cursor-grab');
|
|
24
|
+
if (!autoCenter) return;
|
|
25
|
+
forEach.call(el.children, (el: Element) => resizeCenterer.observe(el));
|
|
26
26
|
cleanup(() =>
|
|
27
|
-
|
|
28
|
-
resizeCenterer.unobserve(el),
|
|
29
|
-
),
|
|
27
|
+
forEach.call(el.children, (el: Element) => resizeCenterer.unobserve(el)),
|
|
30
28
|
);
|
|
31
29
|
});
|
|
32
30
|
|
|
@@ -53,7 +51,7 @@ const registerDragScroll = (el: HTMLElement) => {
|
|
|
53
51
|
el.classList.add('cursor-grab');
|
|
54
52
|
await nextTick();
|
|
55
53
|
document.removeEventListener('click', preventStop, true);
|
|
56
|
-
cancelEvents.
|
|
54
|
+
cancelEvents.forEach((event) =>
|
|
57
55
|
document.removeEventListener(event, upHandler, {
|
|
58
56
|
capture: true,
|
|
59
57
|
}),
|
|
@@ -69,7 +67,7 @@ const registerDragScroll = (el: HTMLElement) => {
|
|
|
69
67
|
'[&>*]:pointer-events-none',
|
|
70
68
|
);
|
|
71
69
|
document.addEventListener('pointermove', moveHandler, { capture: true });
|
|
72
|
-
cancelEvents.
|
|
70
|
+
cancelEvents.forEach((event) =>
|
|
73
71
|
document.addEventListener(event, upHandler, {
|
|
74
72
|
capture: true,
|
|
75
73
|
}),
|
|
@@ -77,10 +75,12 @@ const registerDragScroll = (el: HTMLElement) => {
|
|
|
77
75
|
document.addEventListener('click', preventStop, { capture: true });
|
|
78
76
|
};
|
|
79
77
|
el.addEventListener('pointerdown', downHandler);
|
|
78
|
+
return () => el.removeEventListener('pointerdown', downHandler);
|
|
80
79
|
};
|
|
81
80
|
|
|
82
81
|
const nextTick = () =>
|
|
83
82
|
new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
|
|
84
83
|
|
|
85
84
|
const isTouch = (e: PointerEvent | MouseEvent | TouchEvent): e is TouchEvent =>
|
|
86
|
-
e instanceof TouchEvent
|
|
85
|
+
e instanceof TouchEvent ||
|
|
86
|
+
(e instanceof PointerEvent && e.pointerType === 'touch');
|
|
@@ -67,6 +67,7 @@ const touchUp = (ev: TouchEvent) => {
|
|
|
67
67
|
const direction = getDirection(swipeData.start, { x: clientX, y: clientY });
|
|
68
68
|
if (direction === SwipeDirection.None) return;
|
|
69
69
|
swipeData.dispatch(direction);
|
|
70
|
+
delete swipeData.start;
|
|
70
71
|
};
|
|
71
72
|
|
|
72
73
|
const findNearest = <T extends HTMLElement>(
|
|
@@ -80,7 +81,7 @@ const findNearest = <T extends HTMLElement>(
|
|
|
80
81
|
|
|
81
82
|
const getDirection = (start: TouchPosition, end: TouchPosition) => {
|
|
82
83
|
const vector = [end.x - start.x, end.y - start.y];
|
|
83
|
-
if (vector.every((v) => Math.abs(v) <
|
|
84
|
+
if (vector.every((v) => Math.abs(v) < 50)) return SwipeDirection.None;
|
|
84
85
|
// normalize vector
|
|
85
86
|
const magnitude = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
|
|
86
87
|
const [x, y] = vector.map((v) => v / magnitude);
|