show-hide-settings now persistant

templates/standalone/showHide.julius

@@ -8,29 +8,45 @@
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
-      toggles = [];
+  var LSNAME = 'SHOW_HIDE';
 
   function addEventHandler(el) {
     el.addEventListener('click', function elClickListener() {
-      var toggle = toggles[el.dataset.index];
-      toggle.collapsed = !toggle.collapsed;
-      toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
+      var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
+      updateLSState(el.dataset.shIndex || null, newState);
     });
   }
 
-  elements.forEach(function(el, i) {
-    el.dataset.index = i;
-    var coll = el.dataset.collapsed === 'true';
-    if (coll) {
-      el.parentElement.classList.add('js-show-hide--collapsed')
+  function updateLSState(index, state) {
+    if (!index) {
+      return false;
     }
-    Array.from(el.parentElement.children).forEach(function(el) {
-      if (!el.classList.contains('js-show-hide__toggle')) {
-        el.classList.add('js-show-hide__target');
-      }
-    });
-    toggles.push({index: i, collapsed: coll, parent: el.parentElement});
-    addEventHandler(el);
+    var lsData = fromLocalStorage();
+    lsData[index] = state;
+    window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
+  }
+
+  function collapsedStateInLocalStorage(index) {
+    return fromLocalStorage()[index] || null;
+  }
+
+  function fromLocalStorage() {
+    return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
+  }
+
+  Array
+    .from(document.querySelectorAll('.js-show-hide__toggle'))
+    .forEach(function(el) {
+      var index = el.dataset.shIndex || null;
+      el.parentElement.classList.toggle(
+        'js-show-hide--collapsed',
+        collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
+      );
+      Array.from(el.parentElement.children).forEach(function(el) {
+        if (!el.classList.contains('js-show-hide__toggle')) {
+          el.classList.add('js-show-hide__target');
+        }
+      });
+      addEventHandler(el);
   });
 });

templates/widgets/asidenav.hamlet

@@ -3,7 +3,7 @@ $newline never
   <div .asidenav>
     $forall tid@TermIdentifier{..} <- favouriteTerms
       <div .asidenav__box>
-        <h3 .asidenav__box-title.js-show-hide__toggle>
+        <h3 .asidenav__box-title.js-show-hide__toggle data-sh-index="#{display season}-#{year}">
           $case season
             $of Winter
               _{MsgWinterTermShort year}