Added TOC current items highlighting

Ticket: ENT-9758 Signed-off-by: Ihor Aleksandrychiev <[email protected]>
cfengine · Dec 11, 2023 · 2b5d97e · 2b5d97e
1 parent 1209bed
commit 2b5d97e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 7 deletions.
diff --git a/generator/_assets/js/custom.js b/generator/_assets/js/custom.js
@@ -310,8 +310,13 @@ function selectVersion(value) {
 document.addEventListener("DOMContentLoaded", function () {
     fillVersionWrapperSelect('/docs/branches.json')
 
-    document.querySelectorAll(".article h1, .article h2, .article h3, .article h4, .article h5, .article h6").forEach(function(el){
+    var anchorsOffsets = [];
+    var anchors = document.querySelectorAll(
+        ".article h1[id], .article h2[id], .article h3[id], .article h4[id], .article h5[id], .article h6[id]"
+    );
+    anchors.forEach(function(el){
         var url = new URL(window.location.href);
+        anchorsOffsets.push(el.offsetTop);
         el.insertAdjacentHTML('beforeend', '<a class="anchor" href="' + url.origin + url.pathname + '#' + el.id + '"><i class="bi bi-link-45deg"></i></a>');
     });
 
@@ -322,5 +327,43 @@ document.addEventListener("DOMContentLoaded", function () {
             a.classList.add('url-copied');
             setTimeout(function ()  { a.classList.remove('url-copied') }, 2000);
         }
-    })
+    });
+
+    const tocLinks = document.querySelectorAll('#TOCbox_list li a');
+
+    if (!anchors.length || !tocLinks.length) {
+        return;
+    }
+
+    var timeout = undefined;
+
+    function updateActiveTocItem() {
+        if (timeout) {
+            clearTimeout(timeout)
+        }
+
+        // The current TOC menu item will be calculated in 100 ms after the user stops scrolling.
+        // Otherwise, there might be redundant calculations.
+        timeout = setTimeout(function () {
+            let scrollTop = window.scrollY;
+            tocLinks.forEach(link => link.classList.remove('current'));
+
+            for (let i = anchorsOffsets.length - 1; i >= 0; i--) {
+                if (scrollTop > anchorsOffsets[i]) {
+                    setActiveLink(anchors[i].id);
+                    break;
+                }
+            }
+        }, 100); // 100 ms threshold
+
+    }
+
+    function setActiveLink(id) {
+        const activeLink = document.querySelector(`#TOCbox_list li a[href$="#${id}"]`);
+        if (activeLink) {
+            activeLink.classList.add('current');
+        }
+    }
+
+    window.addEventListener('scroll', updateActiveTocItem);
 });
diff --git a/generator/_assets/styles/less/pages.less b/generator/_assets/styles/less/pages.less
@@ -117,33 +117,45 @@
     }
 
     #TOCbox_list {
-      background: #F7F7F7;
       border-radius: 2px;
-      color: @blue-700;
+      color: @gray-600;
       font-weight: 500;
       font-size: 14px;
       line-height: 22px;
-      padding: .8rem 1.2rem;
+      padding: .8rem 0;
       max-height: 420px;
       overflow: auto;
 
       ul {
         list-style: none;
+        border-left: 1px solid #E1E1E1;
       }
 
       li {
         margin-bottom: 8px;
+        padding-left: 2.4rem;
+        &:has(.current) {
+          border-left: 3px solid @blue-700;
+          transition: border 0.1s linear;
+        }
       }
 
       a {
-        color: @blue-700;
+        color: @gray-600;
         font-weight: 500;
         font-size: 14px;
         line-height: 22px;
         text-decoration: none;
+        display: inline-block;
 
         &:hover {
-          border-bottom: 1px solid @blue-700;
+          border-bottom: 1px solid @gray-600;
+        }
+
+        &.current {
+          color: @blue-700;
+          font-weight: 700;
+          margin-left: -.3rem
         }
       }
     }