1 line
5.8 KiB
Plaintext
1 line
5.8 KiB
Plaintext
{"version":3,"file":"sticky.mjs","names":["computed","onBeforeUnmount","onMounted","shallowRef","watch","convertToUnit","useSticky","_ref","rootEl","isSticky","layoutItemStyles","isStuck","stuckPosition","stickyStyles","side","value","top","bottom","height","undefined","val","window","addEventListener","onScroll","passive","removeEventListener","immediate","lastScrollTop","direction","scrollY","rect","getBoundingClientRect","layoutTop","parseFloat","Math","max","innerHeight","bodyScroll","getComputedStyle","getPropertyValue"],"sources":["../../../src/components/VNavigationDrawer/sticky.ts"],"sourcesContent":["// Utilities\nimport { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport { convertToUnit } from '@/util'\n\n// Types\nimport type { CSSProperties, Ref } from 'vue'\n\ninterface StickyProps {\n rootEl: Ref<HTMLElement | undefined>\n isSticky: Ref<boolean>\n layoutItemStyles: Ref<CSSProperties>\n}\n\nexport function useSticky ({ rootEl, isSticky, layoutItemStyles }: StickyProps) {\n const isStuck = shallowRef<boolean | 'top' | 'bottom'>(false)\n const stuckPosition = shallowRef(0)\n\n const stickyStyles = computed(() => {\n const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value\n return [\n isSticky.value ? { top: 'auto', bottom: 'auto', height: undefined } : undefined,\n isStuck.value\n ? { [side]: convertToUnit(stuckPosition.value) }\n : { top: layoutItemStyles.value.top },\n ]\n })\n\n onMounted(() => {\n watch(isSticky, val => {\n if (val) {\n window.addEventListener('scroll', onScroll, { passive: true })\n } else {\n window.removeEventListener('scroll', onScroll)\n }\n }, { immediate: true })\n })\n\n onBeforeUnmount(() => {\n window.removeEventListener('scroll', onScroll)\n })\n\n let lastScrollTop = 0\n function onScroll () {\n const direction = lastScrollTop > window.scrollY ? 'up' : 'down'\n const rect = rootEl.value!.getBoundingClientRect()\n const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0)\n const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop)\n const bottom =\n rect.height +\n Math.max(stuckPosition.value, layoutTop) -\n window.scrollY -\n window.innerHeight\n const bodyScroll = parseFloat(getComputedStyle(rootEl.value!).getPropertyValue('--v-body-scroll-y')) || 0\n\n if (rect.height < window.innerHeight - layoutTop) {\n isStuck.value = 'top'\n stuckPosition.value = layoutTop\n } else if (\n (direction === 'up' && isStuck.value === 'bottom') ||\n (direction === 'down' && isStuck.value === 'top')\n ) {\n stuckPosition.value = window.scrollY + rect.top - bodyScroll\n isStuck.value = true\n } else if (direction === 'down' && bottom <= 0) {\n stuckPosition.value = 0\n isStuck.value = 'bottom'\n } else if (direction === 'up' && top <= 0) {\n if (!bodyScroll) {\n stuckPosition.value = rect.top + top\n isStuck.value = 'top'\n } else if (isStuck.value !== 'top') {\n stuckPosition.value = -top + bodyScroll + layoutTop\n isStuck.value = 'top'\n }\n }\n\n lastScrollTop = window.scrollY\n }\n\n return { isStuck, stickyStyles }\n}\n"],"mappings":"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"} |