static/js/forms: Persist details to session

Add alternate stylesheet override for animations

2 files changed, 36 insertions, 11 deletions

diff --git a/assets/css/default-fast.css b/assets/css/default-fast.css
new file mode 100644
index 0000000..8d9d4d1
--- /dev/null
+++ b/assets/css/default-fast.css
@@ -0,0 +1,5 @@
+@keyframes paint {
+  0% {
+    opacity: 1;
+  }
+}
diff --git a/assets/js/index.js b/assets/js/index.js
index 42d87f3..91d3e61 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -699,25 +699,41 @@
             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 i1 = 0; i1 < states.length; i1++){
-                if (localStorage[states[i1].id]) {
-                    if (states[i1].type === "radio" || states[i1].type === "checkbox") {
-                        if (localStorage[states[i1].id] === "on") states[i1].checked = true;
-                    } else states[i1].value = localStorage[states[i1].id];
-                    self.dispatchEvent(new Event("storage"));
+                const state = states[i1];
+                const sync = i1 === states.length - 1;
+                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[i1].addEventListener("change", function(event) {
+                if (sync) self.dispatchEvent(new Event("storage"));
+                state.addEventListener("change", function(event) {
                     localStorage[event.target.id] = event.target.value;
                     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;
+                    });
+                }
+            }
         });
     });
     [
@@ -725,9 +741,13 @@
         "DOMContentLoaded"
     ].forEach(function(event) {
         self.addEventListener(event, function() {
-            let stylesheet = document.querySelector('link[href$="default-simple.css"]');
-            if (localStorage["config.density.low"] === "on") stylesheet.rel = "stylesheet";
-            if (localStorage["config.density.high"] === "on") stylesheet.rel = "alternate stylesheet";
+            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";
         });
     });
 })();