aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/composables/useScrollspy.ts
diff options
context:
space:
mode:
author简律纯 <hsiangnianian@outlook.com>2023-04-19 17:50:02 +0800
committer简律纯 <hsiangnianian@outlook.com>2023-04-19 17:50:02 +0800
commit56a6240bf700ac307342ed494d8bfbabe5c822dc (patch)
tree0b1288a2ec1cbb538c11f4c122b6a97b9c55a05f /docs/composables/useScrollspy.ts
parent3adc965dd09490b7efa1cce9f09b0a3b30970277 (diff)
downloadHydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.tar.gz
HydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.zip
✨docs init
Diffstat (limited to 'docs/composables/useScrollspy.ts')
-rw-r--r--docs/composables/useScrollspy.ts39
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
- }
-}