static/js/forms: Optimize a bit

Avoid processing style sheets outside the domain
Use a looped switch on theme radio controls
Sync using native event listener

2 files changed, 22 insertions, 29 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 0daf7d5..fa441f4 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -634,13 +634,11 @@
             const states = input.concat(select).concat(textarea);
             for(var i1 = 0; i1 < states.length; i1++){
                 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];
                 }
-                if (sync) self.dispatchEvent(storage);
                 if (state.dataset.listener === "active") break;
                 state.setAttribute("data-listener", "active");
                 state.addEventListener("change", function(event) {
@@ -652,7 +650,7 @@
                             localStorage[member.id] = "off";
                         }
                     }
-                    self.dispatchEvent(new Event("storage"));
+                    self.dispatchEvent(storage);
                 });
             }
             for(var k = 0; k < summary.length; k++){
@@ -685,24 +683,21 @@
             if (localStorage["config.navigation.slow"] === "on") stylesheet.rel = "alternate stylesheet";
             for(var i1 = 0; i1 < document.styleSheets.length; i1++){
                 let stylesheet = document.styleSheets[i1];
+                if (!stylesheet.href || !stylesheet.href.startsWith(self.origin)) continue;
                 for(var k = 0; k < stylesheet.rules.length; k++){
                     let media = stylesheet.rules[k].media;
-                    if (media && media.mediaText.includes("prefers-color-scheme")) {
-                        if (localStorage["config.theme.light"] === "on") {
+                    if (media === undefined || !media.mediaText.startsWith("(prefers-color-scheme:")) continue;
+                    switch(true){
+                        case localStorage["config.theme.light"] === "on":
                             media.mediaText = "(prefers-color-scheme: dark)";
-                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") {
-                                media.mediaText = "(prefers-color-scheme: light)";
-                            }
-                        }
-                        if (localStorage["config.theme.auto"] === "on") {
+                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") media.mediaText = "(prefers-color-scheme: light)";
+                            continue;
+                        case localStorage["config.theme.auto"] === "on":
                             media.mediaText = "(prefers-color-scheme: dark)";
-                        }
-                        if (localStorage["config.theme.dark"] === "on") {
+                            continue;
+                        case localStorage["config.theme.dark"] === "on":
                             media.mediaText = "(prefers-color-scheme: light)";
-                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") {
-                                media.mediaText = "(prefers-color-scheme: dark)";
-                            }
-                        }
+                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") media.mediaText = "(prefers-color-scheme: dark)";
                     }
                 }
             }
diff --git a/static/js/forms.ts b/static/js/forms.ts
index bfbde81..6857049 100644
--- a/static/js/forms.ts
+++ b/static/js/forms.ts
@@ -18,7 +18,6 @@
 
       for (var i = 0; i < states.length; i++) {
         const state = states[i];
-        const sync = i === states.length - 1;
 
         if (localStorage[state.id]) {
           if (state.type === "radio" || state.type === "checkbox") {
@@ -26,8 +25,6 @@
           } else state.value = localStorage[state.id];
         }
 
-        if (sync) self.dispatchEvent(storage);
-
         if (state.dataset.listener === "active") break;
 
         state.setAttribute("data-listener", "active");
@@ -51,7 +48,7 @@
               localStorage[member.id] = "off";
             }
           }
-          self.dispatchEvent(new Event("storage"));
+          self.dispatchEvent(storage);
         });
       }
 
@@ -92,22 +89,23 @@
 
       for (var i = 0; i < document.styleSheets.length; i++) {
         let stylesheet = document.styleSheets[i];
+        if (!stylesheet.href || !stylesheet.href.startsWith(self.origin)) continue;
         for (var k = 0; k < stylesheet.rules.length; k++) {
           let media = stylesheet.rules[k].media;
-          if (media && media.mediaText.includes("prefers-color-scheme")) {
-            if (localStorage["config.theme.light"] === "on") {
+          if (media === undefined || !media.mediaText.startsWith("(prefers-color-scheme:")) continue;
+          switch (true) {
+            case (localStorage["config.theme.light"] === "on"):
               media.mediaText = "(prefers-color-scheme: dark)";
-              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") { media.mediaText = "(prefers-color-scheme: light)"; }
-            }
+              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") media.mediaText = "(prefers-color-scheme: light)";
+              continue;
 
-            if (localStorage["config.theme.auto"] === "on") {
+            case (localStorage["config.theme.auto"] === "on"):
               media.mediaText = "(prefers-color-scheme: dark)";
-            }
+              continue;
 
-            if (localStorage["config.theme.dark"] === "on") {
+            case (localStorage["config.theme.dark"] === "on"):
               media.mediaText = "(prefers-color-scheme: light)";
-              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") { media.mediaText = "(prefers-color-scheme: dark)"; }
-            }
+              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") media.mediaText = "(prefers-color-scheme: dark)";
           }
         }
       }