vuetify/lib/components/VNavigationDrawer/sticky.mjs.map

Vue Material Component Framework

{"version":3,"file":"sticky.mjs","names":["computed","onBeforeUnmount","onMounted","ref","watch","convertToUnit","useSticky","rootEl","isSticky","layoutItemStyles","isStuck","stuckPosition","stickyStyles","side","value","top","bottom","height","undefined","val","window","addEventListener","onScroll","passive","removeEventListener","immediate","document","lastScrollTop","direction","scrollY","rect","getBoundingClientRect","layoutTop","parseFloat","Math","max","innerHeight"],"sources":["../../../src/components/VNavigationDrawer/sticky.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'vue'\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { convertToUnit } from '@/util'\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 = ref<boolean | 'top' | 'bottom'>(false)\n  const stuckPosition = ref(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    document.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\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\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      stuckPosition.value = rect.top + top\n      isStuck.value = 'top'\n    }\n\n    lastScrollTop = window.scrollY\n  }\n\n  return { isStuck, stickyStyles }\n}\n"],"mappings":"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"}