select nav item on hash change (and initial page load)

- select nav item that points to anchor when hash in window.location changes (or present at initial page load)
- if nav item is not found, but points to a parent of the fragment, select that nav item

diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index d07cf0f..5cc1df7 100644 (file)
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -49,6 +49,8 @@ This is an example paragraph.
 [example]
 This is an example paragraph.
 
+=== Some Code
+
 How about some code?
 
 [source,js]

diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 87628bc..5cf85ba 100644 (file)
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -96,9 +96,12 @@ page:
       - content: Brand’s Hardware & Software Requirements
         url: /xyz/5.2/index.html
         urlType: internal
-      - content: IDE Integration
-        url: '#'
-        urlType: fragment
+      - content: Cu Solet
+        url: '/xyz/5.2/index.html#cu-solet'
+        urlType: internal
+      - content: English + 中文
+        url: '/xyz/5.2/index.html#english+中文'
+        urlType: internal
     - content: Liber Recusabo
       url: '#liber-recusabo'
       urlType: fragment

diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 3d1a8a7..c73a808 100644 (file)
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -1,6 +1,8 @@
 ;(function () {
   'use strict'
 
+  var SECT_CLASS_RX = /^sect(\d)$/
+
   var navContainer = document.querySelector('.nav-container')
   var navToggle = document.querySelector('.nav-toggle')
 
@@ -13,6 +15,7 @@
   var nav = navContainer.querySelector('.nav')
 
   var currentPageItem = menuPanel.querySelector('.is-current-page')
+  var originalPageItem = currentPageItem
   if (currentPageItem) {
     activateCurrentPath(currentPageItem)
     scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
@@ -42,6 +45,49 @@
     if (e.detail > 1) e.preventDefault()
   })
 
+  function onHashChange () {
+    var navLink
+    var hash = window.location.hash
+    if (hash) {
+      if (hash.indexOf('%')) hash = decodeURIComponent(hash)
+      navLink = menuPanel.querySelector('.nav-link[href="' + hash + '"]')
+      if (!navLink) {
+        var targetNode = document.getElementById(hash.slice(1))
+        if (targetNode) {
+          var current = targetNode
+          var ceiling = document.querySelector('article.doc')
+          while ((current = current.parentNode) && current !== ceiling) {
+            var id = current.id
+            // NOTE: look for section heading
+            if (!id && (id = current.className.match(SECT_CLASS_RX))) id = (current.firstElementChild || {}).id
+            if (id && (navLink = menuPanel.querySelector('.nav-link[href="#' + id + '"]'))) break
+          }
+        }
+      }
+    }
+    var navItem
+    if (navLink) {
+      navItem = navLink.parentNode
+    } else if (originalPageItem) {
+      navLink = (navItem = originalPageItem).querySelector('.nav-link')
+    } else {
+      return
+    }
+    if (navItem === currentPageItem) return
+    find(menuPanel, '.nav-item.is-active').forEach(function (el) {
+      el.classList.remove('is-active', 'is-current-path', 'is-current-page')
+    })
+    navItem.classList.add('is-current-page')
+    currentPageItem = navItem
+    activateCurrentPath(navItem)
+    scrollItemToMidpoint(menuPanel, navLink)
+  }
+
+  if (menuPanel.querySelector('.nav-link[href^="#"]')) {
+    if (window.location.hash) onHashChange()
+    window.addEventListener('hashchange', onHashChange)
+  }
+
   function activateCurrentPath (navItem) {
     var ancestorClasses
     var ancestor = navItem.parentNode
@@ -95,13 +141,8 @@
   }
 
   function findNextElement (from, selector) {
-    var el
-    if ('nextElementSibling' in from) {
-      el = from.nextElementSibling
-    } else {
-      el = from
-      while ((el = el.nextSibling) && el.nodeType !== 1);
-    }
-    return el && selector ? el[el.matches ? 'matches' : 'msMatchesSelector'](selector) && el : el
+    var el = from.nextElementSibling
+    if (!el) return
+    return selector ? el[el.matches ? 'matches' : 'msMatchesSelector'](selector) && el : el
   }
 })()