revise TOC logic

fix bugs in fallback, markVisibleSection; refine rAF and connectedCb
saicaca · Dec 8, 2024 · bb33d96 · bb33d96
1 parent cbf17e8
commit bb33d96
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 32 deletions.
diff --git a/src/components/widget/TOC.astro b/src/components/widget/TOC.astro
@@ -78,27 +78,19 @@ class TableOfContents extends HTMLElement {
     }
 
     markVisibleSection = (entries: IntersectionObserverEntry[]) => {
-        requestAnimationFrame(() => {
-            entries.forEach((entry) => {
-                const id = entry.target.children[0]?.getAttribute("id");
-
-                const idx = id ? this.headingIdxMap.get(id) : undefined;
-
-                if (entry.isIntersecting && this.anchorNavTarget == entry.target)
-                    this.anchorNavTarget = null;
-
-                if (idx != undefined)
-                    this.active[idx] = entry.isIntersecting;
-            });
-
-            requestAnimationFrame(() => {
-                if (!document.querySelector(`#toc .${this.visibleClass}`)) {
-                    this.fallback();
-                }
-                this.toggleActiveHeading();
-                this.scrollToActiveHeading();
-            });
+        entries.forEach((entry) => {
+            const id = entry.target.children[0]?.getAttribute("id");
+            const idx = id ? this.headingIdxMap.get(id) : undefined;
+            if (idx != undefined)
+                this.active[idx] = entry.isIntersecting;
+
+            if (entry.isIntersecting && this.anchorNavTarget == entry.target.firstChild)
+                this.anchorNavTarget = null;            
         });
+
+        if (!this.active.includes(true))
+            this.fallback();
+        this.update();
     };
 
     toggleActiveHeading = () => {
@@ -132,7 +124,7 @@ class TableOfContents extends HTMLElement {
 
         if (this.anchorNavTarget || !this.tocEl) return;
         const activeHeading =
-            document.querySelectorAll<HTMLDivElement>("#toc .visible");
+            document.querySelectorAll<HTMLDivElement>(`#toc .${this.visibleClass}`);
         if (!activeHeading.length) return;
 
         const topmost = activeHeading[0];
@@ -153,6 +145,15 @@ class TableOfContents extends HTMLElement {
         });
     };
 
+    update = () => {
+        requestAnimationFrame(() => {
+            this.toggleActiveHeading();
+            // requestAnimationFrame(() => {
+            this.scrollToActiveHeading();
+            // });
+        });
+    }
+
     fallback = () => {
         if (!this.sections.length) return;
 
@@ -162,15 +163,11 @@ class TableOfContents extends HTMLElement {
 
             if (this.isInRange(offsetTop, 0, window.innerHeight)
                 || this.isInRange(offsetBottom, 0, window.innerHeight)
-                || (offsetTop < 0 && offsetBottom > window.innerHeight)) {
+                || (offsetTop < 0 && offsetBottom > window.innerHeight)) {                    
                 this.markActiveHeading(i);
             }
-            else break;
+            else if (offsetTop > window.innerHeight) break;
         }
-
-        requestAnimationFrame(() => {
-            this.toggleActiveHeading();
-        })
     };
 
     markActiveHeading = (idx: number)=> {
@@ -199,9 +196,14 @@ class TableOfContents extends HTMLElement {
 
     connectedCallback() {
         // wait for the onload animation to finish, which makes the `getBoundingClientRect` return correct values
-        setTimeout(() => {
-            this.init();
-        }, 250);
+        const element = document.querySelector('.prose');
+        if (element) {
+            element.addEventListener('animationend', () => {
+                this.init();
+            }, { once: true });
+        } else {
+            console.warn('Animation element not found');
+        }
     }
 
     init() {
@@ -240,7 +242,7 @@ class TableOfContents extends HTMLElement {
         );
 
         this.fallback();
-        this.scrollToActiveHeading();
+        this.update();
     }
 
     disconnectedCallback() {

diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
@@ -93,7 +93,7 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
 <div class="absolute w-full z-0 hidden 2xl:block">
     <div class="relative max-w-[var(--page-width)] mx-auto">
         <!-- TOC component -->
-        {siteConfig.toc.enable && <div id="toc-wrapper" class:list={["hidden lg:block transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",
+        {siteConfig.toc.enable && headings.length !== 0 && <div id="toc-wrapper" class:list={["hidden lg:block transition absolute top-0 -right-[var(--toc-width)] w-[var(--toc-width)] flex items-center",
             {"toc-hide": siteConfig.banner.enable}]}
         >
             <div id="toc-inner-wrapper" class="fixed top-14 w-[var(--toc-width)] h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">