static/js/forms: Persist details to session

Add alternate stylesheet override for animations

4 files changed, 78 insertions, 24 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";
         });
     });
 })();
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"
     });
    });
-
 })();
diff --git a/themes/default/layouts/partials/head-css.html b/themes/default/layouts/partials/head-css.html
index 3aaac30..423db0c 100644
--- a/themes/default/layouts/partials/head-css.html
+++ b/themes/default/layouts/partials/head-css.html
@@ -1,6 +1,7 @@
-{{- $default := resources.Get "css/default.css" -}}
+{{- $default := resources.Get "css/default.css"        -}}
 {{- $syntax  := resources.Get "css/default-syntax.css" -}}
 {{- $simple  := resources.Get "css/default-simple.css" -}}
+{{- $fast    := resources.Get "css/default-fast.css"   -}}
 
 {{- $css :=
   slice $default $syntax |
@@ -17,3 +18,4 @@
 {{ end }}
 
 <link rel="alternate stylesheet" href="{{ $simple.Permalink }}" />
+<link rel="alternate stylesheet" href="{{ $fast.Permalink   }}" />