Merge pull request #3148 from aleksandrychev/ENT-9758

Added TOC current items highlighting
cfengine · Jan 4, 2024 · 3fd35e1 · 3fd35e1
2 parents c74a0c4 + 2091824
commit 3fd35e1
Show file tree

Hide file tree

Showing 15 changed files with 3,230 additions and 97 deletions.
diff --git a/generator/.gitignore b/generator/.gitignore
@@ -6,4 +6,4 @@ _generated/*
 /pages/*
 *.pyc
 .DS_Store
-
+node_modules
diff --git a/generator/_assets/js/custom.js b/generator/_assets/js/custom.js
@@ -1,4 +1,6 @@
 'use strict';
+import '../styles/cfengine.less';
+
 var is_mobile = true;
 $(document).ready(function() {
     if ($(window).width() > 800)
@@ -145,7 +147,8 @@ if (tableOfContents) {
 var menu = document.querySelector('.top_menu ul');
 var overlay = document.querySelector('#overlay');
 var openedClass = "opened";
-var openMenuHandler = function (collapseMenu) {
+
+window.openMenuHandler = function (collapseMenu) {
     if (collapseMenu.className.indexOf(openedClass) == -1) {
         collapseMenu.classList.add(openedClass);
         menu.classList.add('d-b');
@@ -157,7 +160,7 @@ var openMenuHandler = function (collapseMenu) {
     }
 }
 
-var openNavigationHandler = function () {
+window.openNavigationHandler = function () {
     document.querySelector('.left-menu').classList.add(openedClass);
     overlay.style.display = "block";
 }
@@ -307,11 +310,16 @@ 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 url = new URL(window.location.href);
+    const 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){
+        const url = new URL(window.location.href);
         el.insertAdjacentHTML('beforeend', '<a class="anchor" href="' + url.origin + url.pathname + '#' + el.id + '"><i class="bi bi-link-45deg"></i></a>');
     });
 
@@ -323,5 +331,78 @@ document.addEventListener("DOMContentLoaded", function () {
             history.replaceState(null, null, a.href);
             setTimeout(function ()  { a.classList.remove('url-copied') }, 2000);
         }
-    })
+    });
+
+    /**
+     * Highlight the current TOC item when a user scrolls to the corresponding page section.
+     */
+    (() => {
+        const tocLinks = document.querySelectorAll('#TOCbox_list li a');
+
+        if (!tocLinks || !anchors) {
+            return;
+        }
+
+        // offsetTop returns offset to the offsetParent, which is main wrapper, we need to add 130px to get actual offset
+        const fetchOffsets = anchors => [...anchors].map(a => a.offsetTop + 130);
+        let anchorsOffsets = fetchOffsets(anchors);
+
+        let timeout = undefined;
+        const 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( () => {
+                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;
+                    }
+                }
+            }, 50); // 0.05s threshold
+
+        }
+
+        const setActiveLink = (id) => {
+            const activeLink = document.querySelector(`#TOCbox_list li a[href$="#${id}"]`);
+            if (activeLink) {
+                activeLink.classList.add('current');
+            }
+        }
+
+        window.addEventListener('scroll', updateActiveTocItem);
+        window.addEventListener("resize", () => {
+            // anchors position change when the window is resized
+            anchorsOffsets = fetchOffsets(anchors);
+        });
+    })();
+
+    /**
+     * Display scroll to top button when the scroll reaches 350px
+     * from the top and window width less than 1280px
+     */
+    (() => {
+        const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+        const showClass = 'show';
+
+        if (!scrollToTopBtn) {
+            return;
+        }
+
+        const handleScrollToTopVisibility = () => {
+            if (window.scrollY > 350 && window.innerWidth <= 1280) {
+                scrollToTopBtn.classList.add(showClass);
+            } else {
+                scrollToTopBtn.classList.remove(showClass);
+            }
+        }
+
+        window.addEventListener('scroll', handleScrollToTopVisibility);
+    })();
 });
diff --git a/generator/_assets/styles/less/base.less b/generator/_assets/styles/less/base.less
@@ -452,3 +452,25 @@ article {
     margin-right: 0 !important;
   }
 }
+
+#scrollToTopBtn {
+  position: fixed;
+  bottom: 4rem;
+  right: 3.2rem;
+  height: 4.4rem;
+  width: 4.4rem;
+  background-color: #aaa;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transform: scale(0);
+  transition: all .6s ease-out 0s;
+  i {
+    font-size: 1.6rem;
+  }
+  &.show {
+    transform: scale(1);
+    transition: all .6s ease-in 0s;
+  }
+}
diff --git a/generator/_assets/styles/less/dropdown.less b/generator/_assets/styles/less/dropdown.less
@@ -23,7 +23,7 @@
     }
 
     &:after {
-      content: url("../media/images/chevron-down.svg");
+      content: url("../../../media/images/chevron-down.svg");
       position: absolute;
       right: 9px;
       top: 50%;
@@ -69,7 +69,7 @@
 
       &[selected="selected"] {
         &:after {
-          content: url("../media/images/check.svg");
+          content: url("../../../media/images/check.svg");
           position: absolute;
           left: 1.4rem;
         }

diff --git a/generator/_assets/styles/less/font.less b/generator/_assets/styles/less/font.less
@@ -1,56 +1,56 @@
 // bootstrap icons
-@import 'node_modules/bootstrap-icons/font/bootstrap-icons.css';
+@import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
 
 // red hat display
-@import "node_modules/@fontsource/red-hat-display/300.css";
-@import "node_modules/@fontsource/red-hat-display/300-italic.css";
-@import "node_modules/@fontsource/red-hat-display/400.css";
-@import "node_modules/@fontsource/red-hat-display/400-italic.css";
-@import "node_modules/@fontsource/red-hat-display/500.css";
-@import "node_modules/@fontsource/red-hat-display/500-italic.css";
-@import "node_modules/@fontsource/red-hat-display/600.css";
-@import "node_modules/@fontsource/red-hat-display/600-italic.css";
-@import "node_modules/@fontsource/red-hat-display/700.css";
-@import "node_modules/@fontsource/red-hat-display/700-italic.css";
-@import "node_modules/@fontsource/red-hat-display/800.css";
-@import "node_modules/@fontsource/red-hat-display/800-italic.css";
-@import "node_modules/@fontsource/red-hat-display/900.css";
-@import "node_modules/@fontsource/red-hat-display/900-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/300.css";
+@import "../node_modules/@fontsource/red-hat-display/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/400.css";
+@import "../node_modules/@fontsource/red-hat-display/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/500.css";
+@import "../node_modules/@fontsource/red-hat-display/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/600.css";
+@import "../node_modules/@fontsource/red-hat-display/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/700.css";
+@import "../node_modules/@fontsource/red-hat-display/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/800.css";
+@import "../node_modules/@fontsource/red-hat-display/800-italic.css";
+@import "../node_modules/@fontsource/red-hat-display/900.css";
+@import "../node_modules/@fontsource/red-hat-display/900-italic.css";
 
 // red hat text
-@import "node_modules/@fontsource/red-hat-text/300.css";
-@import "node_modules/@fontsource/red-hat-text/300-italic.css";
-@import "node_modules/@fontsource/red-hat-text/400.css";
-@import "node_modules/@fontsource/red-hat-text/400-italic.css";
-@import "node_modules/@fontsource/red-hat-text/500.css";
-@import "node_modules/@fontsource/red-hat-text/500-italic.css";
-@import "node_modules/@fontsource/red-hat-text/600.css";
-@import "node_modules/@fontsource/red-hat-text/600-italic.css";
-@import "node_modules/@fontsource/red-hat-text/700.css";
-@import "node_modules/@fontsource/red-hat-text/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/300.css";
+@import "../node_modules/@fontsource/red-hat-text/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/400.css";
+@import "../node_modules/@fontsource/red-hat-text/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/500.css";
+@import "../node_modules/@fontsource/red-hat-text/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/600.css";
+@import "../node_modules/@fontsource/red-hat-text/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-text/700.css";
+@import "../node_modules/@fontsource/red-hat-text/700-italic.css";
 
 // red hat mono
-@import "node_modules/@fontsource/red-hat-mono/300.css";
-@import "node_modules/@fontsource/red-hat-mono/300-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/400.css";
-@import "node_modules/@fontsource/red-hat-mono/400-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/500.css";
-@import "node_modules/@fontsource/red-hat-mono/500-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/600.css";
-@import "node_modules/@fontsource/red-hat-mono/600-italic.css";
-@import "node_modules/@fontsource/red-hat-mono/700.css";
-@import "node_modules/@fontsource/red-hat-mono/700-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/300.css";
+@import "../node_modules/@fontsource/red-hat-mono/300-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/400.css";
+@import "../node_modules/@fontsource/red-hat-mono/400-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/500.css";
+@import "../node_modules/@fontsource/red-hat-mono/500-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/600.css";
+@import "../node_modules/@fontsource/red-hat-mono/600-italic.css";
+@import "../node_modules/@fontsource/red-hat-mono/700.css";
+@import "../node_modules/@fontsource/red-hat-mono/700-italic.css";
 
 // roboto
-@import "node_modules/@fontsource/roboto/100.css";
-@import "node_modules/@fontsource/roboto/100-italic.css";
-@import "node_modules/@fontsource/roboto/300.css";
-@import "node_modules/@fontsource/roboto/300-italic.css";
-@import "node_modules/@fontsource/roboto/400.css";
-@import "node_modules/@fontsource/roboto/400-italic.css";
-@import "node_modules/@fontsource/roboto/500.css";
-@import "node_modules/@fontsource/roboto/500-italic.css";
-@import "node_modules/@fontsource/roboto/700.css";
-@import "node_modules/@fontsource/roboto/700-italic.css";
-@import "node_modules/@fontsource/roboto/900.css";
-@import "node_modules/@fontsource/roboto/900-italic.css";
+@import "../node_modules/@fontsource/roboto/100.css";
+@import "../node_modules/@fontsource/roboto/100-italic.css";
+@import "../node_modules/@fontsource/roboto/300.css";
+@import "../node_modules/@fontsource/roboto/300-italic.css";
+@import "../node_modules/@fontsource/roboto/400.css";
+@import "../node_modules/@fontsource/roboto/400-italic.css";
+@import "../node_modules/@fontsource/roboto/500.css";
+@import "../node_modules/@fontsource/roboto/500-italic.css";
+@import "../node_modules/@fontsource/roboto/700.css";
+@import "../node_modules/@fontsource/roboto/700-italic.css";
+@import "../node_modules/@fontsource/roboto/900.css";
+@import "../node_modules/@fontsource/roboto/900-italic.css";
diff --git a/generator/_assets/styles/less/header.less b/generator/_assets/styles/less/header.less
@@ -126,7 +126,7 @@
         right: 2.1rem;
         top: 50%;
         transform: translateY(-50%);
-        background-image: url("./../media/images/zoom-in.svg");
+        background-image: url("./../../../media/images/zoom-in.svg");
         background-repeat: no-repeat;
         width: 24px;
         height: 24px;

diff --git a/generator/_assets/styles/less/pages.less b/generator/_assets/styles/less/pages.less
@@ -77,23 +77,22 @@
     }
 
     &-title {
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      border-bottom: 1px solid #E2E2E2;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
       margin-bottom: .6rem;
+      display: inline-block;
       @media @desktop-down {
         font-weight: 500;
         line-height: 4.5rem;
-        background: #F8F8FA;
         padding-left: .8rem;
         position: relative;
         cursor: pointer;
         &:after {
           content: "\F286";
           font-family: bootstrap-icons;
           position: absolute;
-          right: 2rem;
+          right: -2.8rem;
           top: 50%;
           transform: translateY(-50%);
         }
@@ -117,56 +116,57 @@
     }
 
     #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;
-      max-height: 420px;
+      padding: .8rem 0;
       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;
-        font-weight: 500;
+        color: @gray-600;
+        font-weight: 400;
         font-size: 14px;
         line-height: 22px;
         text-decoration: none;
+        display: inline-block;
 
         &:hover {
-          border-bottom: 1px solid @blue-700;
+          text-decoration: underline;
+          border: none;
+        }
+
+        &.current {
+          color: @blue-700;
+          font-weight: 700;
+          margin-left: -.3rem
         }
       }
     }
 
     #TOCbox_list .link_h3,
     #TOCbox_list_mobile .sidr-class-link_h3 {
-      margin-left: 1rem;
-    }
-
-    #TOCbox_list .link_h3:before,
-    #TOCbox_list_mobile .sidr-class-link_h3:before,
-    #TOCbox_list .link_h4:before,
-    #TOCbox_list_mobile .sidr-class-link_h4:before {
-      font-size: 11px;
-      margin: 0 6px 0 0;
-      font-family: bootstrap-icons;
-      content: "\F280";
-      color: #000000;
+      padding-left: 4rem;
     }
 
     #TOCbox_list .link_h4,
     #TOCbox_list_mobile .sidr-class-link_h4 {
-      margin-left: 2rem;
+      padding-left: 5.6rem;
     }
   }
 }