@san-siva/blogkit 1.1.19 → 1.1.21

package/dist/esm/hooks/useSectionObserver.js

@@ -0,0 +1,87 @@
+'use client';
+import { useRef, useEffect, useCallback } from 'react';
+import lockScrollUpdates from '../utils/lockScrollUpdates.js';
+
+const getSectionFromUrl = () => {
+    const url = new URL(window.location.href);
+    return url.searchParams.get('section');
+};
+const updateUrl = (id) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('section', id);
+    window.history.replaceState({}, '', url.toString());
+};
+const scrollIntoView = (element) => {
+    if (!element)
+        return;
+    const top = element.getBoundingClientRect().top + document.body.scrollTop - 100;
+    document.body.scrollTo({ top, behavior: 'smooth' });
+};
+function useSectionObserver({ categoryTitles, setVisibleTitle }) {
+    const isClickScrolling = useRef(false);
+    const scrollEndHandlerRef = useRef(null);
+    const intersectionObserversRef = useRef(new Map());
+    // Set up IntersectionObservers whenever the set of sections changes
+    useEffect(() => {
+        for (const [id, { el }] of categoryTitles) {
+            const observer = new IntersectionObserver(([entry]) => {
+                if (!entry.isIntersecting)
+                    return;
+                if (isClickScrolling.current)
+                    return;
+                if (document.body.scrollTop === 0)
+                    return;
+                setVisibleTitle(visibleId => {
+                    if (visibleId === id && !entry.isIntersecting)
+                        return null;
+                    if (entry.isIntersecting)
+                        return id;
+                    return visibleId;
+                });
+                updateUrl(id);
+            }, { threshold: 0.1 });
+            intersectionObserversRef.current.set(id, observer);
+            observer.observe(el);
+        }
+    }, [categoryTitles.size, setVisibleTitle]);
+    // On initial load, scroll to section specified in URL
+    useEffect(() => {
+        if (categoryTitles.size === 0)
+            return;
+        const section = getSectionFromUrl();
+        if (!section)
+            return;
+        const entry = categoryTitles.get(section);
+        if (!entry)
+            return;
+        scrollIntoView(entry.el);
+        lockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
+    }, [categoryTitles.size, setVisibleTitle]);
+    // Cleanup observers on unmount
+    useEffect(() => {
+        return () => {
+            if (scrollEndHandlerRef.current) {
+                document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
+            }
+            for (const observer of intersectionObserversRef.current.values()) {
+                observer.disconnect();
+            }
+        };
+    }, []);
+    const handleClickCategoryTitle = useCallback((event) => {
+        const id = event.currentTarget.dataset.id;
+        const index = event.currentTarget.dataset.idx;
+        if (!id || !index)
+            return;
+        const { el } = categoryTitles.get(id) || {};
+        if (!el)
+            return;
+        updateUrl(id);
+        scrollIntoView(el);
+        lockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
+    }, [categoryTitles, setVisibleTitle]);
+    return { handleClickCategoryTitle };
+}
+
+export { useSectionObserver };
+//# sourceMappingURL=useSectionObserver.js.map

package/dist/esm/hooks/useSectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSectionObserver.js","sources":["../../../src/hooks/useSectionObserver.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport type { Dispatch, MouseEvent, SetStateAction } from 'react';\n\nimport lockScrollUpdates from '../utils/lockScrollUpdates';\nimport type { CategoryTitle } from './useCategoryTitles';\n\nconst getSectionFromUrl = () => {\n\tconst url = new URL(window.location.href);\n\treturn url.searchParams.get('section');\n};\n\nconst updateUrl = (id: string) => {\n\tconst url = new URL(window.location.href);\n\turl.searchParams.set('section', id);\n\twindow.history.replaceState({}, '', url.toString());\n};\n\nconst scrollIntoView = (element: HTMLElement) => {\n\tif (!element) return;\n\tconst top =\n\t\telement.getBoundingClientRect().top + document.body.scrollTop - 100;\n\tdocument.body.scrollTo({ top, behavior: 'smooth' });\n};\n\ninterface Options {\n\tcategoryTitles: CategoryTitle;\n\tsetVisibleTitle: Dispatch<SetStateAction<string | null>>;\n}\n\nexport function useSectionObserver({ categoryTitles, setVisibleTitle }: Options) {\n\tconst isClickScrolling = useRef(false);\n\tconst scrollEndHandlerRef = useRef<(() => void) | null>(null);\n\tconst intersectionObserversRef = useRef<Map<string, IntersectionObserver>>(\n\t\tnew Map()\n\t);\n\n\t// Set up IntersectionObservers whenever the set of sections changes\n\tuseEffect(() => {\n\t\tfor (const [id, { el }] of categoryTitles) {\n\t\t\tconst observer = new IntersectionObserver(\n\t\t\t\t([entry]) => {\n\t\t\t\t\tif (!entry.isIntersecting) return;\n\t\t\t\t\tif (isClickScrolling.current) return;\n\t\t\t\t\tif (document.body.scrollTop === 0) return;\n\t\t\t\t\tsetVisibleTitle(visibleId => {\n\t\t\t\t\t\tif (visibleId === id && !entry.isIntersecting) return null;\n\t\t\t\t\t\tif (entry.isIntersecting) return id;\n\t\t\t\t\t\treturn visibleId;\n\t\t\t\t\t});\n\t\t\t\t\tupdateUrl(id);\n\t\t\t\t},\n\t\t\t\t{ threshold: 0.1 }\n\t\t\t);\n\t\t\tintersectionObserversRef.current.set(id, observer);\n\t\t\tobserver.observe(el as HTMLElement);\n\t\t}\n\t}, [categoryTitles.size, setVisibleTitle]);\n\n\t// On initial load, scroll to section specified in URL\n\tuseEffect(() => {\n\t\tif (categoryTitles.size === 0) return;\n\t\tconst section = getSectionFromUrl();\n\t\tif (!section) return;\n\t\tconst entry = categoryTitles.get(section);\n\t\tif (!entry) return;\n\t\tscrollIntoView(entry.el);\n\t\tlockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);\n\t}, [categoryTitles.size, setVisibleTitle]);\n\n\t// Cleanup observers on unmount\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (scrollEndHandlerRef.current) {\n\t\t\t\tdocument.body.removeEventListener('scrollend', scrollEndHandlerRef.current);\n\t\t\t}\n\t\t\tfor (const observer of intersectionObserversRef.current.values()) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleClickCategoryTitle = useCallback(\n\t\t(event: MouseEvent<HTMLParagraphElement>) => {\n\t\t\tconst id = event.currentTarget.dataset.id;\n\t\t\tconst index = event.currentTarget.dataset.idx;\n\t\t\tif (!id || !index) return;\n\n\t\t\tconst { el } = categoryTitles.get(id) || {};\n\t\t\tif (!el) return;\n\n\t\t\tupdateUrl(id);\n\t\t\tscrollIntoView(el);\n\t\t\tlockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);\n\t\t},\n\t\t[categoryTitles, setVisibleTitle]\n\t);\n\n\treturn { handleClickCategoryTitle };\n}\n"],"names":[],"mappings":"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"}