diff --git a/aioli/src/Content.vue b/aioli/src/Content.vue index d8e54fa..64af5cf 100644 --- a/aioli/src/Content.vue +++ b/aioli/src/Content.vue @@ -29,10 +29,9 @@ } " @interact-outside="emit('interactOutside', $event)" - v-on="maybeMouseEvents" - @touchstart.passive="onPress" - @touchmove.passive="onDrag" - @touchend.passive="onRelease" + @pointerdown.passive="onPress" + @pointermove.passive="onDrag" + @pointerup.passive="onRelease" > @@ -40,13 +39,13 @@ diff --git a/aioli/src/Root.vue b/aioli/src/Root.vue index 2088fec..25434d2 100644 --- a/aioli/src/Root.vue +++ b/aioli/src/Root.vue @@ -264,6 +264,7 @@ function shouldDrag(el: EventTarget, isDraggingUp: boolean) { let dragStartY = 0 function onPress(event: PointerEvent) { + if (!allowMouseDrag.value && event.pointerType === 'mouse') return if (!cancellableClosing.value && !openProp.value) return // Don't allow dragging if the drawer is closed and cancellableClosing is false if (persistent.value || isDragging.value) return if (drawerRef.value && !drawerRef.value.contains(event.target as Node)) return @@ -273,29 +274,17 @@ function onPress(event: PointerEvent) { // Ensure we maintain correct pointer capture even when going outside of the drawer ;(event.target as HTMLElement).setPointerCapture(event.pointerId) - pointerStartY.value = getScreenY(event) + pointerStartY.value = event.screenY dragStartY = getTranslateY(drawerRef.value!) ?? 0 // get current translate e.g. intercepting a close animation resetDrawerStyles() onDrag(event) // transition cancelling shouldn't require mouse movement } -function getScreenY(event: PointerEvent | TouchEvent) { - let y = 0 - if ('touches' in event) { - y = event.touches[0]?.screenY - if (y === undefined) { - y = event.changedTouches[0].screenY - } - } else { - y = event.screenY - } - return y -} - function onDrag(event: PointerEvent) { + if (!allowMouseDrag.value && event.pointerType === 'mouse') return // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly if (isDragging.value) { - const y = getScreenY(event) + const y = event.screenY const draggedDistance = pointerStartY.value - y - dragStartY const isDraggingUp = draggedDistance > 0 @@ -346,6 +335,7 @@ function onDrag(event: PointerEvent) { } function onRelease(event: PointerEvent) { + if (!allowMouseDrag.value && event.pointerType === 'mouse') return if (!drawerRef.value) return const swipeAmount = getTranslateY(drawerRef.value) @@ -368,7 +358,7 @@ function onRelease(event: PointerEvent) { if (dragStartTime.value === null) return const timeTaken = dragEndTime.value.getTime() - dragStartTime.value.getTime() - const distMoved = pointerStartY.value - getScreenY(event) + const distMoved = pointerStartY.value - event.screenY const velocity = Math.abs(distMoved) / timeTaken const visibleDrawerHeight = Math.min(drawerRef.value.getBoundingClientRect().height ?? 0, window.innerHeight) diff --git a/website/app.vue b/website/app.vue index 7444bac..f705399 100644 --- a/website/app.vue +++ b/website/app.vue @@ -39,7 +39,7 @@ -
+

Drawer for Vue.