diff options
| author | 2023-04-19 17:50:02 +0800 | |
|---|---|---|
| committer | 2023-04-19 17:50:02 +0800 | |
| commit | 56a6240bf700ac307342ed494d8bfbabe5c822dc (patch) | |
| tree | 0b1288a2ec1cbb538c11f4c122b6a97b9c55a05f /docs/composables/useScrollspy.ts | |
| parent | 3adc965dd09490b7efa1cce9f09b0a3b30970277 (diff) | |
| download | HydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.tar.gz HydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.zip | |
✨docs init
Diffstat (limited to 'docs/composables/useScrollspy.ts')
| -rw-r--r-- | docs/composables/useScrollspy.ts | 39 |
1 files changed, 0 insertions, 39 deletions
diff --git a/docs/composables/useScrollspy.ts b/docs/composables/useScrollspy.ts deleted file mode 100644 index 5962d0d..0000000 --- a/docs/composables/useScrollspy.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { Ref } from 'vue' - -/** - * Scrollspy allows you to watch visible headings in a specific page. - * Useful for table of contents live style updates. - */ -export const useScrollspy = () => { - const observer = ref() as Ref<IntersectionObserver> - const visibleHeadings = ref([]) as Ref<string[]> - const activeHeadings = ref([]) as Ref<string[]> - - const observerCallback = (entries: IntersectionObserverEntry[]) => - entries.forEach((entry) => { - const id = entry.target.id - - if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) } - }) - - const updateHeadings = (headings: Element[]) => - headings.forEach((heading) => { - observer.value.observe(heading) - }) - - watch(visibleHeadings, (val, oldVal) => { - if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val } - }, { deep: true }) - - // Create intersection observer - onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback))) - - // Destroy it - onBeforeUnmount(() => observer.value?.disconnect()) - - return { - visibleHeadings, - activeHeadings, - updateHeadings - } -} |
