1 files changed, 57 insertions, 0 deletions
diff --git a/templates/partials/doc/page_toc_script.html b/templates/partials/doc/page_toc_script.html
new file mode 100644
index 0000000..efe4bac
--- /dev/null
+++ b/templates/partials/doc/page_toc_script.html
@@ -0,0 +1,57 @@
+<script>
+
+const menuBarHeight = document.querySelector("nav.navbar").clientHeight;
+const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
+const tocItems = document.querySelectorAll(".toc");
+const navSections = new Array(tocItems.length);
+
+// Page content
+/*
+    Focus effect on current section anchor when user scrolls.
+*/
+
+tocItems.forEach((el, i) => {
+    let id = el.getAttribute("id").substring(5);
+    navSections[i] = document.getElementById(id);
+})
+
+function isVisible(tocIndex) {
+    const current = navSections[tocIndex];
+    const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1]
+        : document.querySelectorAll("section.section").item(1);
+
+    const c = current.getBoundingClientRect();
+    if (next) {
+      const n = next.getBoundingClientRect();
+      const h = (window.innerHeight || document.documentElement.clientHeight);
+
+      return (c.top <= h) && (n.top - menuBarHeight >= 0);
+    } else {
+      const h = (window.innerHeight || document.documentElement.clientHeight);
+
+      return (c.top <= h);
+    }
+}
+
+function activateIfVisible() {
+    for (b = true, i = 0; i < tocItems.length; i++) {
+        if (b && isVisible(i)) {
+            tocItems[i].classList.add('is-active');
+            b = false;
+        } else
+            tocItems[i].classList.remove('is-active');
+    }
+}
+
+var isTicking = null;
+window.addEventListener('scroll', () => {
+    if (!isTicking) {
+        window.requestAnimationFrame(() => {
+            activateIfVisible();
+            isTicking = false;
+        });
+        isTicking = true;
+    }
+}, false);
+
+</script>