1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
|
{"version":3,"file":"touch.mjs","names":["useVelocity","computed","onBeforeUnmount","onMounted","shallowRef","useTouch","_ref","isActive","isTemporary","width","touchless","position","window","addEventListener","onTouchstart","passive","onTouchmove","onTouchend","removeEventListener","isHorizontal","includes","value","addMovement","endTouch","getVelocity","maybeDragging","isDragging","dragProgress","offset","start","getOffset","pos","active","document","documentElement","clientWidth","clientHeight","oops","getProgress","limit","arguments","length","undefined","progress","Math","max","min","e","touchX","changedTouches","clientX","touchY","clientY","touchZone","inTouchZone","inElement","cancelable","dx","abs","dy","thresholdMet","preventDefault","velocity","identifier","vx","x","vy","y","direction","left","right","top","bottom","dragStyles","transform","transition","Error"],"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"sourcesContent":["// Composables\nimport { useVelocity } from '@/composables/touch'\n\n// Utilities\nimport { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport function useTouch ({ isActive, isTemporary, width, touchless, position }: {\n isActive: Ref<boolean>\n isTemporary: Ref<boolean>\n width: Ref<number>\n touchless: Ref<boolean>\n position: Ref<'left' | 'right' | 'top' | 'bottom'>\n}) {\n onMounted(() => {\n window.addEventListener('touchstart', onTouchstart, { passive: true })\n window.addEventListener('touchmove', onTouchmove, { passive: false })\n window.addEventListener('touchend', onTouchend, { passive: true })\n })\n\n onBeforeUnmount(() => {\n window.removeEventListener('touchstart', onTouchstart)\n window.removeEventListener('touchmove', onTouchmove)\n window.removeEventListener('touchend', onTouchend)\n })\n\n const isHorizontal = computed(() => ['left', 'right'].includes(position.value))\n\n const { addMovement, endTouch, getVelocity } = useVelocity()\n let maybeDragging = false\n const isDragging = shallowRef(false)\n const dragProgress = shallowRef(0)\n const offset = shallowRef(0)\n let start: [number, number] | undefined\n\n function getOffset (pos: number, active: boolean): number {\n return (\n position.value === 'left' ? pos\n : position.value === 'right' ? document.documentElement.clientWidth - pos\n : position.value === 'top' ? pos\n : position.value === 'bottom' ? document.documentElement.clientHeight - pos\n : oops()\n ) - (active ? width.value : 0)\n }\n\n function getProgress (pos: number, limit = true): number {\n const progress = (\n position.value === 'left' ? (pos - offset.value) / width.value\n : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value\n : position.value === 'top' ? (pos - offset.value) / width.value\n : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value\n : oops()\n )\n return limit ? Math.max(0, Math.min(1, progress)) : progress\n }\n\n function onTouchstart (e: TouchEvent) {\n if (touchless.value) return\n\n const touchX = e.changedTouches[0].clientX\n const touchY = e.changedTouches[0].clientY\n\n const touchZone = 25\n const inTouchZone: boolean =\n position.value === 'left' ? touchX < touchZone\n : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone\n : position.value === 'top' ? touchY < touchZone\n : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone\n : oops()\n\n const inElement: boolean = isActive.value && (\n position.value === 'left' ? touchX < width.value\n : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value\n : position.value === 'top' ? touchY < width.value\n : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value\n : oops()\n )\n\n if (\n
|