Merge pull request #183 from opendevise/nav-with-fragment

add support for navigation entries that contain a fragment identifier
couchbase · Jun 14, 2024 · 25c4ff3 · 25c4ff3
2 parents 8642f41 + e385671
commit 25c4ff3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
@@ -1,5 +1,5 @@
 antoraVersion: '2.3.1'
-navMode: template # set value to client to generate navigation on the client
+navMode: client # set value to client to generate navigation on the client
 site:
   title: Couchbase Docs
   url: http://localhost:5252
@@ -65,6 +65,8 @@ site:
               urlType: fragment
             - content: Monitoring Statistics
               url: /index.html
+            - content: Glossaries
+              url: /index.html#_glossaries
             - content: Monitoring XDCR Timestamp-based Conflict Resolution
               url: '#'
               urlType: fragment

diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -218,7 +218,7 @@
         navTextEl.href = relativize(page.url, item.url)
         if (page.url === item.url) {
           navItemEl.classList.add('is-current-page')
-          navTextEl.classList.add('is-current-page')
+          navTextEl.classList.add('is-current-page', 'is-initial-page')
         }
       } else {
         navTextEl = createElement('span', 'menu_title menu_text')
@@ -247,6 +247,39 @@
     return parent.appendChild(navListEl)
   }
 
+  function onHashChange () {
+    var navLink
+    var hash = window.location.hash
+    if (hash) {
+      if (hash.indexOf('%')) hash = decodeURIComponent(hash)
+      navLink = navContainer.querySelector('a.menu_link[href="' + hash + '"]')
+    }
+    if (!(navLink || (navLink = navContainer.querySelector('a.is-initial-page')))) return
+    var currentPageLink = navContainer.querySelector('a.is-current-page')
+    if (navLink === currentPageLink) return
+    if (currentPageLink) toggleCurrentPath(navContainer, currentPageLink, 'clear')
+    toggleCurrentPath(navContainer, navLink, 'activate')
+    scrollItemToMidpoint(nav.querySelector('.components'), navLink)
+    return true
+  }
+
+  function toggleCurrentPath (container, navLink, operation) {
+    navLink.classList[operation === 'clear' ? 'remove' : 'add']('is-current-page')
+    var navItem = navLink.parentNode.parentNode
+    var ancestor = navLink.parentNode
+    while (ancestor !== container) {
+      if (ancestor.tagName === 'LI') {
+        var ancestorClassList = ancestor.classList
+        if (ancestor === navItem) {
+          ancestorClassList[operation === 'clear' ? 'remove' : 'add']('is-current-page')
+        } else if (ancestorClassList.contains('is-parent')) {
+          ancestorClassList[operation === 'clear' ? 'add' : 'remove']('closed')
+        }
+      }
+      ancestor = ancestor.parentNode
+    }
+  }
+
   function relativize (from, to) {
     if (!(from && to.charAt() === '/')) { return to }
     var hash = ''
@@ -316,7 +349,12 @@
 
     var components = container.querySelector('.components')
 
-    scrollItemToMidpoint(components, container.querySelector('a.is-current-page'))
+    let scrolled
+    if (container.querySelector('a.menu_link[href^="#"]')) {
+      window.location.hash && (scrolled = onHashChange())
+      window.addEventListener('hashchange', onHashChange)
+    }
+    scrolled || scrollItemToMidpoint(components, container.querySelector('a.is-current-page'))
 
     if (!components.classList.contains('is-revealed')) {
       find('a.is-current-page', container).forEach(function (currentPage) {