Merge pull request rails#51504 from MooseCowBear/navigation-highlight

Add navbar highlighting to guides when scrolling [ci skip]

Author: carlosantoniodasilva

guides/assets/javascripts/guides.js

@@ -52,6 +52,7 @@
     backToTop.addEventListener("click", function(e) {
       e.preventDefault();
       window.scrollTo({ top: 0, behavior: "smooth" });
+      resetNavPosition();
     });
 
     var toggleBackToTop = function() {
@@ -102,5 +103,87 @@
       }, 3000);
       e.clearSelection();
     });
+
+    var mainColElems = Array.from(document.getElementById("mainCol").children);
+    var subCol = document.querySelector("#subCol");
+    var navLinks = subCol.querySelectorAll("a");
+    var DESKTOP_THRESHOLD = 1024;
+
+    var matchingNavLink = function (elem) {
+      if(!elem) return;
+      var index = mainColElems.indexOf(elem);
+
+      var match;
+      while (index >= 0 && !match) {
+        var link = mainColElems[index].querySelector(".anchorlink");
+        if (link) {
+          match = subCol.querySelector('[href="' + link.getAttribute("href") + '"]');
+        }
+        index--;
+      }
+      return match;
+    }
+
+    var removeHighlight = function () {
+      for (var i = 0, n = navLinks.length; i < n; i++) {
+        navLinks[i].classList.remove("active");
+      }
+    }
+
+    var updateHighlight = function (elem) {
+      if (window.innerWidth > DESKTOP_THRESHOLD && !elem?.classList.contains("active")) {
+        removeHighlight();
+        if (!elem) return;
+        elem.classList.add("active");
+        elem.scrollIntoView({ block: 'center', inline: 'end' });
+      }
+    }
+
+    var resetNavPosition = function () {
+      var chapters = subCol.querySelector(".chapters");
+      chapters?.scroll({ top: 0 });
+    }
+
+    var belowBottomHalf = function (i) {
+      return i.boundingClientRect.bottom > (i.rootBounds.bottom + i.rootBounds.top) / 2;
+    }
+
+    var prevElem = function (elem) {
+      var index = mainColElems.indexOf(elem);
+      if (index <= 0) {
+        return null;
+      }
+      return mainColElems[index - 1];
+    }
+
+    var PAGE_LOAD_BUFFER = 1000;
+
+    var navHighlight = function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          updateHighlight(matchingNavLink(entry.target));
+        } else if (entry.time >= PAGE_LOAD_BUFFER && belowBottomHalf(entry)) {
+          updateHighlight(matchingNavLink(prevElem(entry.target)));
+        }
+      });
+    }
+
+    var observer = new IntersectionObserver(navHighlight, {
+      threshold: 0,
+      rootMargin: "0% 0px -95% 0px"
+    });
+
+    mainColElems.forEach(function (elem) {
+      observer.observe(elem);
+    })
+
+    observer.observe(document.getElementById("feature"));
+
+    subCol.addEventListener("click", function(e) {
+      var link = e.target.closest("a");
+      if (link) {
+        setTimeout(function() { updateHighlight(link) }, 100);
+      }
+    })
   });
 }).call(this);

guides/assets/stylesrc/_main.scss

@@ -726,6 +726,9 @@ body.guide {
       }
 
       ol.chapters {
+        padding-inline-start: 3.5em;
+        padding-inline-end: 1em;
+
         &::-webkit-scrollbar
         {
           width: 6px;
@@ -760,6 +763,12 @@ body.guide {
         li {
           font-weight: bold;
 
+          a {
+            position: relative;
+            display: block;
+            word-wrap: break-word;
+          }
+
           a,
           a:link,
           a:visited {
@@ -777,19 +786,68 @@ body.guide {
             margin-top: 0.5em;
             margin-bottom: 0.75em;
             padding-inline-start: 1em;
-            @include media('>desktop') {
-              max-width: 310px;
-              width: 310px;
-            }
+            padding-inline-end: 0.25em;
 
             li {
               font-weight: 400;
-              @include media('>desktop') {
-                width: 310px;
+
+              a.active::after { // highlight
+                @include media('>desktop') {
+                  width: 328px;
+                }
+                left: -3em;
+              }
+
+              a.active::before { // red square
+                left: -2.5em;
+                top: 7px;
               }
             } // li
           } // ul
+
+          a::after { // highlight
+            content: '';
+            position: absolute;
+            display: block;
+            height: calc(100% + 10px);
+            @include media('>desktop') {
+              width: 352px;
+            }
+            top: 50%;
+            transform: translateY(-50%);
+            left: -3.5em;
+            border-radius: 8px;
+            background-color: $stop-bkgnd;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+          }
+
+          a.active::after {
+            opacity: 1;
+          }
+
+          a::before { // red square
+            content: '';
+            display: block;
+            position: absolute;
+            height: 10px;
+            width: 10px;
+            top: 6px;
+            left: -3em;
+            border-radius: 3px;
+            background-color: $rf-brand;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+          }
+
+          a.active::before {
+            opacity: 1;
+          }
         } // li
+
+        > li:first-child {
+          margin-top: 0.5em;
+        }
       } // ol
     }
   }