diff options
Diffstat (limited to 'static/js/forms.ts')
-rw-r--r-- | static/js/forms.ts | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/static/js/forms.ts b/static/js/forms.ts new file mode 100644 index 0000000..2916536 --- /dev/null +++ b/static/js/forms.ts @@ -0,0 +1,59 @@ +(function () { + + const cookiesDisabled = !navigator.cookieEnabled; + + if (cookiesDisabled) { + document.cookie = "disabled"; + document.cookie.indexOf("disabled"); + return console.warn("WARNING: Cannot persist form state due to cookie restrictions"); + } + + ["URLChangedCustomEvent", "DOMContentLoaded"].forEach(function (event) { + self.addEventListener(event, function (event) { + const input = Array.prototype.slice.call(document.querySelectorAll("input")); + const select = Array.prototype.slice.call(document.querySelectorAll("select")); + const textarea = Array.prototype.slice.call(document.querySelectorAll("textarea")); + + const states = input.concat(select).concat(textarea); + + for (let i = 0; i < states.length; i++) { + + 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")); + } + + states[i].addEventListener("change", function (event) { + + // console.log("INFO: STATE", event.target); + // console.log("INFO: ID:", event.target.id); + // console.log("INFO: NAME:", event.target.name); + // console.log("INFO: TYPE:", event.target.type); + // console.log("INFO: VALUE:", event.target.value); + // console.log("INFO: CHECKED:", event.target.checked); + + localStorage[event.target.id] = event.target.value; + + const group = document.querySelectorAll(`input[name='${event.target.name}']`); + + for (let i = 0; i < group.length; i++) { + if ((group[i].type === "radio" || group[i].type === "checkbox") && !group[i].checked) { + localStorage[group[i].id] = "off"; + } + } + self.dispatchEvent(new Event("storage")); + }); + } + }); + }); + + self.addEventListener("storage", 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" + }); + +})(); |