tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 10.3 kB
Source Map (JSON)
{"version":3,"file":"useSwipe.mjs","sources":["../../src/swipe-cell/useSwipe.ts"],"sourcesContent":["/* eslint-disable no-undef */\n\nimport type { ComputedRef, Ref, MaybeRef } from 'vue';\nimport { computed, reactive, ref } from 'vue';\nimport { useEventListener } from '@vueuse/core';\nimport { isObject } from 'lodash-es';\nimport { preventDefault } from '../shared/dom';\nimport { isBrowser } from '../shared';\n\nconst noop = () => {};\n\ntype Position = {\n x: number;\n y: number;\n};\n\nexport type UseSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';\n\nexport interface UseSwipeOptions {\n /**\n * @default 50\n */\n threshold?: number;\n\n /**\n * Listener options\n */\n listenerOptions?: boolean | { passive?: boolean; capture?: boolean };\n\n /**\n * Callback on swipe start\n */\n onSwipeStart?: (e: TouchEvent) => void;\n\n /**\n * Callback on swipe moves\n */\n onSwipe?: (e: TouchEvent) => void;\n\n /**\n * Callback on swipe ends\n */\n onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void;\n}\n\nexport interface UseSwipeReturn {\n isPassiveEventSupported: boolean;\n isSwiping: Ref<boolean>;\n direction: ComputedRef<UseSwipeDirection>;\n coordsStart: Readonly<Position>;\n coordsEnd: Readonly<Position>;\n lengthX: ComputedRef<number>;\n lengthY: ComputedRef<number>;\n stop: () => void;\n}\n\n/**\n * Reactive swipe detection.\n *\n * @param target\n * @param options\n */\nexport function useSwipe(\n target: MaybeRef<EventTarget | null | undefined>,\n options = {} as UseSwipeOptions,\n): UseSwipeReturn {\n const { threshold = 50, onSwipe, onSwipeEnd, onSwipeStart, listenerOptions = false } = options;\n\n const coordsStart = reactive<Position>({ x: 0, y: 0 });\n const coordsEnd = reactive<Position>({ x: 0, y: 0 });\n\n const diffX = computed(() => coordsStart.x - coordsEnd.x);\n const diffY = computed(() => coordsStart.y - coordsEnd.y);\n\n const { max, abs } = Math;\n const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold);\n\n const isSwiping = ref(false);\n\n const direction = computed((): UseSwipeDirection => {\n if (!isThresholdExceeded.value) return 'none';\n\n if (abs(diffX.value) > abs(diffY.value)) {\n return diffX.value > 0 ? 'left' : 'right';\n }\n\n return diffY.value > 0 ? 'up' : 'down';\n });\n\n const getTouchEventCoords = (e: TouchEvent) => [e.touches[0].clientX, e.touches[0].clientY];\n\n const updateCoordsStart = (x: number, y: number) => {\n coordsStart.x = x;\n coordsStart.y = y;\n };\n\n const updateCoordsEnd = (x: number, y: number) => {\n coordsEnd.x = x;\n coordsEnd.y = y;\n };\n\n const isPassiveEventSupported = checkPassiveEventSupport();\n\n const onTouchEnd = (e: TouchEvent) => {\n if (isSwiping.value) onSwipeEnd?.(e, direction.value);\n\n isSwiping.value = false;\n };\n\n const stops = [\n useEventListener(\n target,\n 'touchstart',\n (e: TouchEvent) => {\n if (e.touches.length !== 1) return;\n if (\n listenerOptions === true ||\n (isObject(listenerOptions) && listenerOptions.capture && !listenerOptions.passive)\n )\n preventDefault(e, false);\n const [x, y] = getTouchEventCoords(e);\n updateCoordsStart(x, y);\n updateCoordsEnd(x, y);\n onSwipeStart?.(e);\n },\n listenerOptions,\n ),\n\n useEventListener(\n target,\n 'touchmove',\n (e: TouchEvent) => {\n if (e.touches.length !== 1) return;\n const [x, y] = getTouchEventCoords(e);\n updateCoordsEnd(x, y);\n if (!isSwiping.value && isThresholdExceeded.value) isSwiping.value = true;\n if (isSwiping.value) onSwipe?.(e);\n },\n listenerOptions,\n ),\n\n useEventListener(target, 'touchend', onTouchEnd, listenerOptions),\n useEventListener(target, 'touchcancel', onTouchEnd, listenerOptions),\n ];\n\n const stop = () => stops.forEach((s) => s());\n\n return {\n isPassiveEventSupported,\n isSwiping,\n direction,\n coordsStart,\n coordsEnd,\n lengthX: diffX,\n lengthY: diffY,\n stop,\n };\n}\n\n/**\n * This is a polyfill for passive event support detection\n * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n */\nfunction checkPassiveEventSupport(document = isBrowser ? window.document : undefined) {\n if (!document) return false;\n let supportsPassive = false;\n const optionsBlock: AddEventListenerOptions = {\n get passive() {\n supportsPassive = true;\n return false;\n },\n };\n document.addEventListener('x', noop, optionsBlock);\n document.removeEventListener('x', noop);\n return supportsPassive;\n}\n"],"names":["noop","useSwipe","target","options","arguments","length","undefined","_options$threshold","threshold","onSwipe","onSwipeEnd","onSwipeStart","_options$listenerOpti","listenerOptions","coordsStart","reactive","x","y","coordsEnd","diffX","computed","diffY","max","Math","abs","isThresholdExceeded","value","isSwiping","ref","direction","getTouchEventCoords","e","touches","clientX","clientY","updateCoordsStart","updateCoordsEnd","isPassiveEventSupported","checkPassiveEventSupport","onTouchEnd","stops","useEventListener","isObject","capture","passive","preventDefault","_getTouchEventCoords","_getTouchEventCoords2","_slicedToArray","_getTouchEventCoords3","_getTouchEventCoords4","stop","forEach","s","lengthX","lengthY","document","isBrowser","window","supportsPassive","optionsBlock","addEventListener","removeEventListener"],"mappings":"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"}