static/js: Add pseudo state mechanism

Semi auto

2 files changed, 60 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"
+  });
+
+})();
diff --git a/static/js/index.ts b/static/js/index.ts
index f43183c..4b0951c 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -6,6 +6,7 @@ import "./contextmenu.ts";
 import "./fixedsearch.ts";
 import "./autoplay.ts";
 import "./hoverfix.ts";
+import "./forms.ts";
 import "./timeago.ts";
 
 console.log("INFO: Surface Control Complete");