vuetify/lib/components/VParallax/VParallax.mjs.map

Vue Material Component Framework

{"version":3,"file":"VParallax.mjs","names":["VImg","useDisplay","useIntersectionObserver","useResizeObserver","clamp","genericComponent","getScrollParent","useRender","computed","onBeforeUnmount","ref","watch","watchEffect","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","clientHeight","documentElement","scrollPos","scrollTop","window","scrollY","top","offsetTop","center","translate","sizeScale","max","style","setProperty"],"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 { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, genericComponent, getScrollParent, useRender } from '@/util'\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\n\n// Types\nimport type { VImgSlots } from '../VImg/VImg'\n\nfunction floor (val: number) {\n  return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const VParallax = genericComponent<VImgSlots>()({\n  name: 'VParallax',\n\n  props: {\n    scale: {\n      type: [Number, String],\n      default: 0.5,\n    },\n  },\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\n    watch(isIntersecting, val => {\n      if (val) {\n        scrollParent = getScrollParent(intersectionRef.value)\n        scrollParent = scrollParent === document.scrollingElement ? document as any : 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.clientHeight ?? document.documentElement.clientHeight\n        const scrollPos = scrollParent.scrollTop ?? window.scrollY\n        const top = intersectionRef.value!.offsetTop\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        ]}\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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"}