forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat: make useDraggableScroll touch event compatible
+33
-27
+33
-27
src/composables/useDraggableScroll.ts
+33
-27
src/composables/useDraggableScroll.ts
···
28
28
else element.value.style.transform = ''
29
29
}
30
30
31
-
const onMouseDown = (e: MouseEvent) => {
31
+
/** normalises mouse & touch events to get pageX */
32
+
const getPageX = (e: MouseEvent | TouchEvent) => {
33
+
return 'touches' in e ? e.touches[0]?.pageX : e.pageX
34
+
}
35
+
36
+
const handleStart = (e: MouseEvent | TouchEvent) => {
32
37
if (!element.value) return
33
38
stopAnimation()
34
39
35
40
isDown.value = true
36
41
isDragging.value = false
37
42
38
-
startX = e.pageX
39
-
lastPageX = e.pageX
43
+
const x = getPageX(e)
44
+
if (!x) return
45
+
46
+
startX = x
47
+
lastPageX = x
40
48
lastTime = performance.now()
41
49
velocity = 0
42
50
}
43
51
44
-
const onMouseLeave = () => {
45
-
if (isDown.value) {
46
-
isDown.value = false
47
-
isDragging.value = false
48
-
beginPhysicsLoop()
49
-
}
50
-
}
51
-
52
-
const onMouseUp = () => {
53
-
if (!isDown.value) return
54
-
isDown.value = false
55
-
setTimeout(() => {
56
-
isDragging.value = false
57
-
}, 0)
58
-
beginPhysicsLoop()
59
-
}
52
+
const handleMove = (e: MouseEvent | TouchEvent) => {
53
+
if (!isDown.value || !element.value) return
54
+
if ('touches' in e) e.preventDefault()
60
55
61
-
const onMouseMove = (e: MouseEvent) => {
62
-
if (!isDown.value || !element.value) return
63
-
e.preventDefault()
56
+
const x = getPageX(e)
57
+
if (!x) return
64
58
65
-
const x = e.pageX
66
59
const now = performance.now()
67
60
const deltaX = x - lastPageX
68
61
const dt = now - lastTime
···
94
87
if (Math.abs(x - startX) > 5) {
95
88
isDragging.value = true
96
89
}
90
+
}
91
+
92
+
const handleEnd = () => {
93
+
if (!isDown.value) return
94
+
isDown.value = false
95
+
setTimeout(() => {
96
+
isDragging.value = false
97
+
}, 0)
98
+
beginPhysicsLoop()
97
99
}
98
100
99
101
const beginPhysicsLoop = () => {
···
173
175
isDown,
174
176
isDragging,
175
177
events: {
176
-
mousedown: onMouseDown,
177
-
mouseleave: onMouseLeave,
178
-
mouseup: onMouseUp,
179
-
mousemove: onMouseMove,
178
+
mousedown: handleStart,
179
+
touchstart: handleStart,
180
+
mousemove: handleMove,
181
+
touchmove: handleMove,
182
+
mouseup: handleEnd,
183
+
touchend: handleEnd,
184
+
mouseleave: handleEnd,
185
+
touchcancel: handleEnd,
180
186
},
181
187
}
182
188
}