1 line
6.2 KiB
Plaintext
1 line
6.2 KiB
Plaintext
|
{"version":3,"file":"scroll.mjs","names":["computed","onBeforeUnmount","onMounted","ref","shallowRef","watch","clamp","consoleWarn","propsFactory","makeScrollProps","scrollTarget","type","String","scrollThreshold","Number","default","useScroll","props","args","arguments","length","undefined","canScroll","previousScroll","target","currentScroll","savedScroll","currentThreshold","isScrollActive","isScrollingUp","scrollRatio","value","onScroll","targetEl","pageYOffset","scrollTop","Math","abs","newTarget","document","querySelector","window","removeEventListener","addEventListener","passive","immediate"],"sources":["../../src/composables/scroll.ts"],"sourcesContent":["// Utilities\nimport {\n computed,\n onBeforeUnmount,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { clamp, consoleWarn, propsFactory } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport interface ScrollProps {\n scrollTarget?: string\n scrollThreshold?: string | number\n}\n\nexport interface ThresholdMetCallbackData {\n isScrollingUp: boolean\n currentThreshold: number\n savedScroll: Ref<number>\n}\n\n// Composables\nexport const makeScrollProps = propsFactory({\n scrollTarget: {\n type: String,\n },\n scrollThreshold: {\n type: [String, Number],\n default: 300,\n },\n}, 'scroll')\n\nexport interface ScrollArguments {\n canScroll?: Readonly<Ref<boolean>>\n}\n\nexport function useScroll (\n props: ScrollProps,\n args: ScrollArguments = {},\n) {\n const { canScroll } = args\n let previousScroll = 0\n const target = ref<Element | Window | null>(null)\n const currentScroll = shallowRef(0)\n const savedScroll = shallowRef(0)\n const currentThreshold = shallowRef(0)\n const isScrollActive = shallowRef(false)\n const isScrollingUp = shallowRef(false)\n\n const scrollThreshold = computed(() => {\n return Number(props.scrollThreshold)\n })\n\n /**\n * 1: at top\n * 0: at threshold\n */\n const scrollRatio = computed(() => {\n return clamp(((scrollThreshold.value - currentScroll.value) / scrollThreshold.value) || 0)\n })\n\n const onScroll = () => {\n const targetEl = target.value\n\n if (!targetEl || (canScroll && !canScroll.value)) return\n\n previousScroll = currentScroll.value\n currentScroll.value = ('window' in targetEl) ? targetEl.pageYOffset : targetEl.scrollTop\n\n isScrollingUp.value = currentScroll.value < previousScroll\n currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value)\n }\n\n watch(isScrollingUp, () => {\n savedScroll.value = savedScroll.value || currentScroll.value\n })\n\n watch(isScrollActive, () => {\n savedScroll.value = 0\n })\n\n onMounted(() => {\n watch(() => props.scrollTarget, scrollTarget => {\n const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window\n\n if (!newTarget) {\n consoleWarn(`Unable to locate element with identifier ${scrollTarget}`)\n return\n }\n\n if (newTarget === target.value) return\n\n target.value?.removeEventListener('scroll', onScroll)\n target.value = newTarget\n target.value.addEventListener('scroll', onScroll, { passive: true })\n }, { immediate: true })\n })\n\n onBeforeUnmount(() => {\n target.value?.removeEventListener('scroll', onScroll)\n })\n\n // Do we need this? If yes - seems that\n // there's no need to expose onScroll\n canScroll && watch(canScroll, onScroll, { immediate: true })\n\n return {\n scrollThreshold,\n currentScroll,\n currentThreshold,\n isScrollActive,\n scrollRatio,\n\n // required only for testing\n // probably can be removed\n // later (2 chars chlng)\n isScrollingUp,\n savedScroll,\n }\n}\n"],"mappings":"AAAA;AACA,SACEA,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,GAAG,EACHC,UAAU,EACVC,KAAK,QACA,KAAK;AAAA,SACHC,KAAK,EAAEC,WAAW,EAAEC,YAAY,6BAEzC;AAcA;AACA,OAAO,MAAMC,eAAe,GAAGD,YAAY,CAAC;EAC1CE,YAAY,EAAE;IACZC,IAAI,EAAEC;EACR,CAAC;EACDC,eAAe,EAAE;IACfF,IAAI,EAAE,CAACC,MAAM,EAAEE,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX;AACF,CAAC,EAAE,QAAQ,CAAC;AAMZ,OA
|