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 --- static/js/forms.ts | 51 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 12 deletions(-) (limited to 'static') 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" }); }); - })(); -- cgit v1.2.3