static/js/forms: Persist details to session

Add alternate stylesheet override for animations

1 files changed, 39 insertions, 12 deletions

diff --git a/static/js/forms.ts b/static/js/forms.ts
index c9fc963..15bb64f 100644
--- a/static/js/forms.ts
+++ b/static/js/forms.ts
@@ -13,19 +13,23 @@
       const input = Array.prototype.slice.call(document.querySelectorAll("form input"));
       const select = Array.prototype.slice.call(document.querySelectorAll("form select"));
       const textarea = Array.prototype.slice.call(document.querySelectorAll("form textarea"));
+      const summary = Array.prototype.slice.call(document.querySelectorAll("details summary"));
 
       const states = input.concat(select).concat(textarea);
 
       for (var i = 0; i < states.length; i++) {
+        const state = states[i];
+        const sync = i === states.length - 1;
 
-        if (localStorage[states[i].id]) {
-          if (states[i].type === "radio" || states[i].type === "checkbox") {
-            if (localStorage[states[i].id] === "on") states[i].checked = true;
-          } else states[i].value = localStorage[states[i].id];
-          self.dispatchEvent(new Event("storage"));
+        if (localStorage[state.id]) {
+          if (state.type === "radio" || state.type === "checkbox") {
+            if (localStorage[state.id] === "on") state.checked = true;
+          } else state.value = localStorage[state.id];
         }
 
-        states[i].addEventListener("change", function (event) {
+        if (sync) self.dispatchEvent(new Event("storage"));
+
+        state.addEventListener("change", function (event) {
 
           // console.log("INFO: STATE:",   event.target);
           // console.log("INFO: ID:",      event.target.id);
@@ -39,23 +43,46 @@
           const group = document.querySelectorAll(`input[name='${event.target.name}']`);
 
           for (var j = 0; j < group.length; j++) {
-            if ((group[j].type === "radio" || group[j].type === "checkbox") && !group[j].checked) {
-              localStorage[group[j].id] = "off";
+            const member = group[j];
+            if ((member.type === "radio" || member.type === "checkbox") && !member.checked) {
+              localStorage[member.id] = "off";
             }
           }
           self.dispatchEvent(new Event("storage"));
         });
       }
+
+      for (var k = 0; k < summary.length; k++) {
+        let child = summary[k];
+        let details = child.parentElement;
+
+        if (details.id && details.nodeName === "DETAILS") {
+          sessionStorage[details.id] === "false" && details.removeAttribute("open");
+          sessionStorage[details.id] === "true" && details.setAttribute("open", true);
+
+          child.addEventListener("click", function (event) {
+            let details = event.target.parentElement;
+            sessionStorage[details.id] = !details.open;
+          });
+        }
+      }
     });
   });
 
   ["storage", "DOMContentLoaded"].forEach(function (event) {
     self.addEventListener(event, function () {
-      let stylesheet = document.querySelector('link[href$="default-simple.css"]')
+      let stylesheet;
+
+      stylesheet = document.querySelector('link[href$="default-simple.css"]')
+
+      if (localStorage["config.layout.simple"]  === "on") stylesheet.rel = "stylesheet"
+      if (localStorage["config.layout.default"] === "on") stylesheet.rel = "alternate stylesheet"
+
+      stylesheet = document.querySelector('link[href$="default-fast.css"]')
+
+      if (localStorage["config.speed.fast"] === "on") stylesheet.rel = "stylesheet"
+      if (localStorage["config.speed.slow"] === "on") stylesheet.rel = "alternate stylesheet"
 
-      if (localStorage["config.density.low"]  === "on") stylesheet.rel = "stylesheet"
-      if (localStorage["config.density.high"] === "on") stylesheet.rel = "alternate stylesheet"
     });
    });
-
 })();