1 line
7.4 KiB
Plaintext
1 line
7.4 KiB
Plaintext
{"version":3,"file":"VParallax.mjs","names":["VImg","useDisplay","makeComponentProps","useIntersectionObserver","useResizeObserver","computed","onBeforeUnmount","ref","watch","watchEffect","clamp","genericComponent","getScrollParent","propsFactory","useRender","floor","val","Math","abs","sign","makeVParallaxProps","scale","type","Number","String","default","VParallax","name","props","setup","_ref","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","Document","documentElement","clientHeight","scrollPos","window","scrollY","scrollTop","top","getBoundingClientRect","center","translate","sizeScale","max","style","setProperty","_createVNode","class"],"sources":["../../../src/components/VParallax/VParallax.tsx"],"sourcesContent":["// Styles\nimport './VParallax.sass'\n\n// Components\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { makeComponentProps } from '@/composables/component'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\nimport { clamp, genericComponent, getScrollParent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VImgSlots } from '@/components/VImg/VImg'\n\nfunction floor (val: number) {\n return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const makeVParallaxProps = propsFactory({\n scale: {\n type: [Number, String],\n default: 0.5,\n },\n\n ...makeComponentProps(),\n}, 'VParallax')\n\nexport const VParallax = genericComponent<VImgSlots>()({\n name: 'VParallax',\n\n props: makeVParallaxProps(),\n\n setup (props, { slots }) {\n const { intersectionRef, isIntersecting } = useIntersectionObserver()\n const { resizeRef, contentRect } = useResizeObserver()\n const { height: displayHeight } = useDisplay()\n\n const root = ref<VImg>()\n\n watchEffect(() => {\n intersectionRef.value = resizeRef.value = root.value?.$el\n })\n\n let scrollParent: Element | Document\n watch(isIntersecting, val => {\n if (val) {\n scrollParent = getScrollParent(intersectionRef.value)\n scrollParent = scrollParent === document.scrollingElement ? document : scrollParent\n scrollParent.addEventListener('scroll', onScroll, { passive: true })\n onScroll()\n } else {\n scrollParent.removeEventListener('scroll', onScroll)\n }\n })\n\n onBeforeUnmount(() => {\n scrollParent?.removeEventListener('scroll', onScroll)\n })\n\n watch(displayHeight, onScroll)\n watch(() => contentRect.value?.height, onScroll)\n\n const scale = computed(() => {\n return 1 - clamp(+props.scale)\n })\n\n let frame = -1\n function onScroll () {\n if (!isIntersecting.value) return\n\n cancelAnimationFrame(frame)\n frame = requestAnimationFrame(() => {\n const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img')\n if (!el) return\n\n const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight\n const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop\n const top = intersectionRef.value!.getBoundingClientRect().top + scrollPos\n const height = contentRect.value!.height\n\n const center = top + (height - scrollHeight) / 2\n const translate = floor((scrollPos - center) * scale.value)\n const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height)\n\n el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`)\n })\n }\n\n useRender(() => (\n <VImg\n class={[\n 'v-parallax',\n { 'v-parallax--active': isIntersecting.value },\n props.class,\n ]}\n style={ props.style }\n ref={ root }\n cover\n onLoadstart={ onScroll }\n onLoad={ onScroll }\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"mappings":"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"} |