Merge pull request #12222 from hasezoey/boldNav

docs: highlight current top-most visible header in navbar
Automattic · Aug 8, 2022 · 8a181c3 · 8a181c3
2 parents 265c658 + dca81f2
commit 8a181c3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/docs/api.pug b/docs/api.pug
@@ -2,6 +2,7 @@ extends layout
 
 append style
   link(rel="stylesheet", href="/docs/css/api.css")
+  script(src="/docs/js/api-bold-current-nav.js")
 
 block content
   h1 API Docs
@@ -64,30 +65,3 @@ block content
           li <span class="method-type">&laquo;#{prop.type}&raquo;</span>
       div
         | !{prop.description}
-
-  script(type="text/javascript").
-    var headers = document.querySelectorAll('.item-header');
-    var navItems = document.querySelectorAll('.nav-item .nav-item-title');
-    var navSubs = document.querySelectorAll('.nav-item-sub');
-    var cur = '';
-    window.addEventListener('scroll', function() {
-      var scrollY = window.scrollY;
-      var highlight = headers[0];
-      for (var i = 0; i < headers.length; ++i) {
-        if (headers[i].offsetTop > scrollY) {
-          break;
-        }
-        highlight = headers[i];
-      }
-      if (highlight.id !== cur) {
-        cur = highlight.id;
-        for (var j = 0; j < navItems.length; ++j) {
-          navItems[j].style.fontWeight = '';
-        }
-        for (j = 0; j < navSubs.length; ++j) {
-          navSubs[j].style.display = 'none';
-        }
-        document.querySelector('#nav-' + highlight.id + ' .nav-item-title').style.fontWeight = 'bold';
-        document.querySelector('#nav-' + highlight.id + ' .nav-item-sub').style.display = 'block';
-      }
-    });
diff --git a/docs/api_split.pug b/docs/api_split.pug
@@ -2,6 +2,7 @@ extends layout
 
 append style
   link(rel="stylesheet", href="/docs/css/api.css")
+  script(src="/docs/js/api-bold-current-nav.js")
 
   style.
     .api-nav .nav-item-sub {

diff --git a/docs/js/api-bold-current-nav.js b/docs/js/api-bold-current-nav.js
@@ -0,0 +1,40 @@
+// this script changes the nav-bar entry that is current visible on the screen as a header (most to the top) to be bold
+
+let headers = undefined;
+let curNavEntry = undefined;
+let curElem = undefined;
+window.addEventListener('scroll', function() {
+    // set these values if undefined, because otherwise in global scope they will not be defined because the window did not finish loading
+    if (headers === undefined) {
+        headers = document.querySelectorAll('.api-content > h3');
+    }
+    if (curNavEntry === undefined) {
+        const entries = document.querySelectorAll('.api-nav-content .nav-item .nav-item-sub');
+        for (const entry of entries) {
+            if (window.getComputedStyle(entry).visibility !== "hidden") {
+                curNavEntry = entry.parentElement;
+                break;
+            }
+        }
+    }
+
+    const scrollY = window.scrollY;
+    let highlight = headers[0];
+    for (const header of headers) {
+        if (header.offsetTop > scrollY) {
+            break;
+        }
+        highlight = header;
+    }
+    if (curElem == undefined || highlight.id !== curElem.id) {
+        // reset old element before re-assign
+        if (curElem !== undefined) {
+            document.querySelector('#' + curNavEntry.id + ' a[href="#' + curElem.id + '"]').style.fontWeight = "inherit";
+        }
+
+        curElem = highlight;
+
+        // add bold and visible to current ones
+        document.querySelector('#' + curNavEntry.id + ' a[href="#' + curElem.id + '"]').style.fontWeight = 'bold';
+    }
+});