| 1 | import type { Ref } from 'vue' |
| 2 | import { timestamp, usePointerSwipe } from '@vueuse/core' |
| 3 | import { ref } from 'vue' |
| 4 | import { useNav } from '../composables/useNav' |
| 5 | import { useDrawings } from './useDrawings' |
| 6 | |
| 7 | export function useSwipeControls(root: Ref<HTMLElement | undefined>) { |
| 8 | const { next, nextSlide, prev, prevSlide } = useNav() |
| 9 | const { isDrawing } = useDrawings() |
| 10 | |
| 11 | const swipeBegin = ref(0) |
| 12 | const { direction, distanceX, distanceY } = usePointerSwipe(root, { |
| 13 | pointerTypes: ['touch'], |
| 14 | onSwipeStart() { |
| 15 | if (isDrawing.value) |
| 16 | return |
| 17 | swipeBegin.value = timestamp() |
| 18 | }, |
| 19 | onSwipeEnd() { |
| 20 | if (!swipeBegin.value) |
| 21 | return |
| 22 | if (isDrawing.value) |
| 23 | return |
| 24 | |
| 25 | const x = Math.abs(distanceX.value) |
| 26 | const y = Math.abs(distanceY.value) |
| 27 | if (x / window.innerWidth > 0.3 || x > 75) { |
| 28 | if (direction.value === 'left') |
| 29 | next() |
| 30 | |
| 31 | else |
| 32 | prev() |
| 33 | } |
| 34 | else if (y / window.innerHeight > 0.4 || y > 200) { |
| 35 | if (direction.value === 'down') |
| 36 | prevSlide() |
| 37 | |
| 38 | else |
| 39 | nextSlide() |
| 40 | } |
| 41 | }, |
| 42 | }) |
| 43 | } |
| 44 |