refactor config code

dribbblish-dynamic.js

@@ -174,15 +174,21 @@ function toggleDark(setDark) {
 }
 
 /* Init with current system light/dark mode */
-let systemDark = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--system_is_dark'))==1
+let systemDark = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--system_is_dark")) == 1;
-toggleDark(systemDark)
 
-DribbblishShared.configMenu.register()
+DribbblishShared.config.registerSelect("Theme", "theme", ["System", "Dark", "Light"], 0, (val) => {
-DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
+    switch (val) {
-    "Dark mode",
+        case 0:
-    systemDark,
+            toggleDark(systemDark);
-    (self) => { toggleDark(); self.isEnabled = !self.isEnabled; }
+            break;
-))
+        case 1:
+            toggleDark(true);
+            break;
+        case 2:
+            toggleDark(false);
+            break;
+    }
+});
 
 function updateColors(textColHex, sideColHex) {
     let isLightBg = isLight(textColorBg)

dribbblish.js

@@ -2,44 +2,103 @@
 // document.getElementById("popover-container").style.height = 0;
 const DribbblishShared = {
     configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
-    rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
+    config: {
-    osIconDodge: localStorage.getItem("dribs-os-icon-dodge") === "true",
+        register: (name, key, defaultValue, update) => {
-    updateConfig: () => {
+            const menuItem = new Spicetify.Menu.Item(name, defaultValue, (self) => {
-        if (DribbblishShared.rightBigCover) {
+                self.setState(!self.isEnabled);
-            document.documentElement.classList.add("right-expanded-cover");
+                DribbblishShared.config.toggle(key);
-        } else {
+            });
-            document.documentElement.classList.remove("right-expanded-cover");
+            DribbblishShared.configMenu.addItem(menuItem);
-        }
 
-        if (DribbblishShared.osIconDodge) {
+            if (localStorage.getItem(`dribbblish:config:${key}`) == null) localStorage.setItem(`dribbblish:config:${key}`, defaultValue);
-            document.documentElement.style.setProperty("--os-windows-icon-dodge", 1);
+
-        } else {
+            DribbblishShared.configData[key] = {
-            document.documentElement.style.setProperty("--os-windows-icon-dodge", 0);
+                menuItem,
+                update
+            };
+
+            DribbblishShared.config.update(key);
+        },
+        registerSelect: (name, key, choices, defaultChoice, update) => {
+            const menuItem = new Spicetify.Menu.SubMenu(name, []);
+            const menuItems = choices.map((choice, i) => {
+                const subItem = new Spicetify.Menu.Item(choice, i == defaultChoice, (self) => {
+                    self.setState(!self.isEnabled);
+                    DribbblishShared.config.set(key, i);
+                });
+                menuItem.addItem(subItem);
+                return subItem;
+            });
+            DribbblishShared.configMenu.addItem(menuItem);
+            menuItem.register();
+
+            if (localStorage.getItem(`dribbblish:config:${key}`) == null) localStorage.setItem(`dribbblish:config:${key}`, defaultChoice);
+
+            DribbblishShared.configData[key] = {
+                subItems: menuItems,
+                menuItem,
+                update
+            };
+
+            DribbblishShared.config.update(key);
+        },
+        get: (key) => {
+            const val = localStorage.getItem(`dribbblish:config:${key}`);
+            if (val == "true" || val == "false") return val == "true";
+            if (!isNaN(val) && !isNaN(parseInt(val))) return parseInt(val);
+        },
+        set: (key, val) => {
+            if (DribbblishShared.configData[key].hasOwnProperty("subItems")) {
+                DribbblishShared.configData[key].subItems.forEach((item, i) => {
+                    item.setState(val == i);
+                });
+            } else {
+                DribbblishShared.configData[key].menuItem.setState(val);
+            }
+            localStorage.setItem(`dribbblish:config:${key}`, val);
+            DribbblishShared.config.update(key);
+        },
+        toggle: (key) => {
+            DribbblishShared.config.set(key, !DribbblishShared.config.get(key));
+
+            if (DribbblishShared.configData[key].hasOwnProperty("subItems")) {
+                // Can't toggle lists
+            } else {
+                DribbblishShared.configData[key].menuItem.setState(DribbblishShared.config.get(key));
+            }
+        },
+        update: (key) => {
+            const val = DribbblishShared.config.get(key);
+            if (DribbblishShared.configData[key].hasOwnProperty("subItems")) {
+                DribbblishShared.configData[key].subItems.forEach((item, i) => {
+                    item.setState(val == i);
+                });
+            } else {
+                DribbblishShared.configData[key].menuItem.setState(val);
+            }
+            DribbblishShared.configData[key].update(val);
         }
-    }
+    },
+    configData: {}
 };
-
 DribbblishShared.configMenu.register();
-DribbblishShared.configMenu.addItem(
-    new Spicetify.Menu.Item("Right expanded cover", DribbblishShared.rightBigCover, (self) => {
-        self.isEnabled = !self.isEnabled;
-        DribbblishShared.rightBigCover = self.isEnabled;
-        localStorage.setItem("dribs-right-big-cover", self.isEnabled);
-        DribbblishShared.updateConfig();
-    })
-);
 
-DribbblishShared.configMenu.register();
+// Initialize Config
-DribbblishShared.configMenu.addItem(
+DribbblishShared.config.register("Right expanded cover", "rightBigCover", true, (value) => {
-    new Spicetify.Menu.Item("OS Icon Dodge", DribbblishShared.osIconDodge, (self) => {
+    if (value) {
-        self.isEnabled = !self.isEnabled;
+        document.documentElement.classList.add("right-expanded-cover");
-        DribbblishShared.osIconDodge = self.isEnabled;
+    } else {
-        localStorage.setItem("dribs-os-icon-dodge", self.isEnabled);
+        document.documentElement.classList.remove("right-expanded-cover");
-        DribbblishShared.updateConfig();
+    }
-    })
+});
-);
 
-DribbblishShared.updateConfig();
+DribbblishShared.config.register("OS Icon Dodge", "osIconDodge", false, (value) => {
+    if (value) {
+        document.documentElement.style.setProperty("--os-windows-icon-dodge", 1);
+    } else {
+        document.documentElement.style.setProperty("--os-windows-icon-dodge", 0);
+    }
+});
 
 function waitForElement(els, func, timeout = 100) {
     const queries = els.map(el => document.querySelector(el));