interactive menu

ts-dev-inc · Feb 7, 2021 · f68418d · f68418d
1 parent f6b55a6
commit f68418d
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 35 deletions.
diff --git a/js/guide-menu.js b/js/guide-menu.js
@@ -5,22 +5,61 @@ function toggle(button) {
 function closeSideNav() {
     document.getElementById("guide-nav-button")?.classList.remove("active");
 }
-document.querySelectorAll('h2, h3, h4').forEach((header) => {
-    const link = document.createElement("a");
-    link.href = "#" + header.id;
-    link.classList.add('clipboard');
-    link.innerText = "📋";
-    link.addEventListener('click', (event) => {
-        event.preventDefault(); // do not navigate on click.
-        navigator.clipboard.writeText(link.href).then(() => {
-            const toast = document.createElement('span');
-            toast.classList.add('clipboard-confirm');
-            toast.innerText = "Copied";
-            link.append(toast);
-            setTimeout(() => {
-                toast.remove();
-            }, 1000);
+window.addEventListener("load", loaded);
+function loaded() {
+    const options = {
+        root: document.querySelector(".sg-container"),
+        rootMargin: `0px 0px -90% 0px`,
+        threshold: 0.5,
+    };
+    const tocElement = document.querySelector(".toc");
+    const tocAnchors = tocElement.querySelectorAll("a");
+    const headers = document.querySelectorAll("h2, h3, h4");
+    tocAnchors.forEach((anchor) => {
+        anchor.addEventListener("click", () => {
+            tocAnchors.forEach((other) => {
+                if (other.classList.contains("active")) {
+                    other.classList.remove("active");
+                }
+            });
+            anchor.classList.add("active");
         });
     });
-    header.append(link);
-});
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                const href = entry.target.getElementsByTagName("a")[0].href;
+                for (const navItem of tocAnchors) {
+                    if (navItem.classList.contains("active")) {
+                        navItem.classList.remove("active");
+                    }
+                    if (navItem.href === href) {
+                        navItem.classList.add("active");
+                        navItem.scrollIntoView({ behavior: "smooth", block: "center" });
+                        history.pushState({}, document.title, href);
+                    }
+                }
+            }
+        });
+    }, options);
+    headers.forEach((header) => {
+        observer.observe(header);
+        const link = document.createElement("a");
+        link.href = "#" + header.id;
+        link.classList.add("clipboard");
+        link.innerText = "📋";
+        link.addEventListener("click", (event) => {
+            event.preventDefault(); // do not navigate on click.
+            navigator.clipboard.writeText(link.href).then(() => {
+                const toast = document.createElement("span");
+                toast.classList.add("clipboard-confirm");
+                toast.innerText = "Copied";
+                link.append(toast);
+                setTimeout(() => {
+                    toast.remove();
+                }, 1000);
+            });
+        });
+        header.append(link);
+    });
+}
diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -115,7 +115,15 @@
     @apply p-5 w-guide md:w-guide-md;
   }
   aside li {
-    @apply ml-2.5 p-2.5;
+    @apply ml-2.5;
+  }
+
+  .toc a {
+    @apply p-2.5 w-full inline-block pl-6;
+  }
+
+  .toc a.active {
+    @apply bg-yellow text-gray-dark;
   }
 
   .toc > ol > li > a {

diff --git a/ts/guide-menu.ts b/ts/guide-menu.ts
@@ -1,28 +1,72 @@
-
 function toggle(button: HTMLButtonElement) {
-    button.classList.toggle("active");
+  button.classList.toggle("active");
 }
 
 function closeSideNav() {
-    document.getElementById("guide-nav-button")?.classList.remove("active");
+  document.getElementById("guide-nav-button")?.classList.remove("active");
 }
 
-document.querySelectorAll('h2, h3, h4').forEach((header) => {
+window.addEventListener("load", loaded);
+
+function loaded() {
+  const options = {
+    root: document.querySelector(".sg-container"),
+    rootMargin: `0px 0px -90% 0px`,
+    threshold: 0.5,
+  };
+
+  const tocElement = document.querySelector(".toc")!;
+  const tocAnchors = tocElement.querySelectorAll("a")!;
+  const headers = document.querySelectorAll("h2, h3, h4");
+
+  tocAnchors.forEach((anchor) => {
+    anchor.addEventListener("click", () => {
+      tocAnchors.forEach((other) => {
+        if (other.classList.contains("active")) {
+          other.classList.remove("active");
+        }
+      });
+      anchor.classList.add("active");
+    });
+  });
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const href = entry.target.getElementsByTagName("a")[0].href;
+        for (const navItem of tocAnchors) {
+          if (navItem.classList.contains("active")) {
+            navItem.classList.remove("active");
+          }
+          if (navItem.href === href) {
+            navItem.classList.add("active");
+            navItem.scrollIntoView({ behavior: "smooth", block: "center" });
+            history.pushState({}, document.title, href);
+          }
+        }
+      }
+    });
+  }, options);
+
+  headers.forEach((header) => {
+    observer.observe(header);
+
     const link = document.createElement("a");
     link.href = "#" + header.id;
-    link.classList.add('clipboard');
+    link.classList.add("clipboard");
     link.innerText = "📋";
-    link.addEventListener('click', (event) => {
-        event.preventDefault(); // do not navigate on click.
-        navigator.clipboard.writeText(link.href).then(() => {
-            const toast = document.createElement('span');
-            toast.classList.add('clipboard-confirm');
-            toast.innerText = "Copied";
-            link.append(toast);
-            setTimeout(() => {
-                toast.remove();
-            }, 1000);
-        });
+    link.addEventListener("click", (event) => {
+      event.preventDefault(); // do not navigate on click.
+      navigator.clipboard.writeText(link.href).then(() => {
+        const toast = document.createElement("span");
+        toast.classList.add("clipboard-confirm");
+        toast.innerText = "Copied";
+        link.append(toast);
+        setTimeout(() => {
+          toast.remove();
+        }, 1000);
+      });
     });
     header.append(link);
-});
+  });
+}