isolate state for each nav menu

- add data-component attribute to navigation container
- add data-version attribute to navigation container
- store state for each menu separately, using the component + version as the key
- add version field to nav-state data to detect & purge incompatible data

diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index c0bb5a9..0d0ad0a 100644 (file)
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -5,7 +5,8 @@
   var navToggle = document.querySelector('.navigation-toggle')
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
   var currentPageItem = document.querySelector('.nav-menu .is-current-page')
-  var state = getState() || {}
+  var navState = getNavState()
+  var menuState = getMenuState(navState, navContainer.dataset.component, navContainer.dataset.version)
 
   navContainer.querySelector('.current').addEventListener('click', function () {
     var currentPanel = document.querySelector('.navigation .is-active[data-panel]')
@@ -29,12 +30,12 @@
     var li = btn.parentElement
     btn.addEventListener('click', function () {
       li.classList.toggle('is-active')
-      state.expandedItems = getExpandedItems()
-      saveState()
+      menuState.expandedItems = getExpandedItems()
+      saveNavState()
     })
   })
 
-  var expandedItems = state.expandedItems || (state.expandedItems = [])
+  var expandedItems = menuState.expandedItems || (menuState.expandedItems = [])
 
   if (expandedItems.length) {
     find(
@@ -54,13 +55,13 @@
     })
   }
 
-  saveState()
+  saveNavState()
 
-  scrollItemIntoView(state.scroll || 0, menuPanel, currentPageItem && currentPageItem.querySelector('.nav-link'))
+  scrollItemIntoView(menuState.scroll || 0, menuPanel, currentPageItem && currentPageItem.querySelector('.nav-link'))
 
   menuPanel.addEventListener('scroll', function () {
-    state.scroll = Math.round(menuPanel.scrollTop)
-    saveState()
+    menuState.scroll = Math.round(menuPanel.scrollTop)
+    saveNavState()
   })
 
   function activateCurrentPath (navItem) {
@@ -108,13 +109,18 @@
     })
   }
 
-  function getState (component, version) {
+  function getNavState () {
     var data = window.sessionStorage.getItem('nav-state')
-    if (data) return JSON.parse(data)
+    return data && (data = JSON.parse(data)).__version__ === '1' ? data : { __version__: '1' }
   }
 
-  function saveState () {
-    window.sessionStorage.setItem('nav-state', JSON.stringify(state))
+  function getMenuState (navState, component, version) {
+    var key = version + '@' + component
+    return navState[key] || (navState[key] = {})
+  }
+
+  function saveNavState () {
+    window.sessionStorage.setItem('nav-state', JSON.stringify(navState))
   }
 
   function scrollItemIntoView (scrollPosition, parent, el) {

diff --git a/src/partials/navigation.hbs b/src/partials/navigation.hbs
index a092cf1..d69e54a 100644 (file)
--- a/src/partials/navigation.hbs
+++ b/src/partials/navigation.hbs
@@ -1,4 +1,4 @@
-<div class="navigation-container">
+<div class="navigation-container" data-component="{{page.component.name}}" data-version="{{page.version}}">
   <aside class="navigation" role="navigation">
     <div class="panels">
 {{> navigation-menu}}