From b541593793efc19639835200f185d273620770e6 Mon Sep 17 00:00:00 2001 From: tdro Date: Mon, 12 Feb 2024 16:50:01 -0500 Subject: static/js/forms: Persist details to session Add alternate stylesheet override for animations --- assets/css/default-fast.css | 5 +++ assets/js/index.js | 42 ++++++++++++++++------ static/js/forms.ts | 51 ++++++++++++++++++++------- themes/default/layouts/partials/head-css.html | 4 ++- 4 files changed, 78 insertions(+), 24 deletions(-) create mode 100644 assets/css/default-fast.css 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 }} + -- cgit v1.2.3