From 6b413e7052c1298bc1f2f0ac00c9b200383488b6 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Wed, 27 Oct 2021 16:59:48 +0200 Subject: [PATCH] validate config types in localStorage --- src/js/ConfigMenu.js | 30 ++++++++++++++++++++++-------- src/js/main.js | 36 ++++++++++++++---------------------- 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src/js/ConfigMenu.js b/src/js/ConfigMenu.js index a13ec1a..210ab7e 100644 --- a/src/js/ConfigMenu.js +++ b/src/js/ConfigMenu.js @@ -148,7 +148,6 @@ export default class ConfigMenu { }); this.#config[options.key] = options; - this.#config[options.key].value = localStorage.getItem(`dribbblish:config:${options.key}`) ?? JSON.stringify(options.defaultValue); if (options.type == "checkbox") { const input = /* html */ ` @@ -166,17 +165,19 @@ export default class ConfigMenu { } else if (options.type == "select") { // Validate const val = this.get(options.key); - if (val < 0 || val > options.data.length - 1) this.set(options.key); + if (!Object.keys(options.data).includes(val)) this.reset(options.key); const input = /* html */ ` `; this.addInputHTML({ ...options, input }); document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => { - this.set(options.key, Number(e.target.value)); + this.set(options.key, e.target.value); options.onChange(this.get(options.key)); }); } else if (options.type == "button") { @@ -333,9 +334,12 @@ export default class ConfigMenu { * @returns {any} */ get(key, defaultValueOverride) { - const val = JSON.parse(this.#config[key].value ?? null); // Turn undefined into null because `JSON.parse()` dosen't like undefined - if (val == null) return defaultValueOverride ?? this.#config[key].defaultValue; - return val; + const val = JSON.parse(this.#config[key]?.storageCache ?? localStorage.getItem(`dribbblish:config:${key}`) ?? null); // Turn undefined into null because `JSON.parse()` dosen't like undefined + if (val == null || val?.type != this.#config[key]?.type) { + localStorage.removeItem(`dribbblish:config:${key}`); + return defaultValueOverride ?? this.#config[key].defaultValue; + } + return val.value; } /** @@ -344,10 +348,20 @@ export default class ConfigMenu { * @param {any} val */ set(key, val) { - this.#config[key].value = JSON.stringify(val); + val = { type: this.#config[key].type, value: val ?? this.#config[key].defaultValue }; + this.#config[key].storageCache = JSON.stringify(val); localStorage.setItem(`dribbblish:config:${key}`, JSON.stringify(val)); } + /** + * + * @param {String} key + */ + reset(key) { + delete this.#config[key].storageCache; + localStorage.removeItem(`dribbblish:config:${key}`); + } + /** * * @param {String} key diff --git a/src/js/main.js b/src/js/main.js index 76f2a0e..60cc630 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -42,28 +42,22 @@ DribbblishShared.config.register({ waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select", - data: ["None", "None (With Top Padding)", "Solid", "Transparent"], + data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" }, key: "winTopBar", name: "Windows Top Bar", description: "Have different top Bars (or none at all)", - defaultValue: 0, - onChange: (val) => { - const vals = ["none", "none-padding", "solid", "transparent"]; - $("#main").attr("top-bar", vals[val]); - } + defaultValue: "none", + onChange: (val) => $("#main").attr("top-bar", val) }); DribbblishShared.config.register({ type: "select", - data: ["Dribbblish", "Spotify"], + data: { dribbblish: "Dribbblish", spotify: "Spotify" }, key: "playerControlsStyle", name: "Player Controls Style", description: "Style of the Player Controls. Selecting Spotify basically changes Play / Pause back to the center", - defaultValue: 0, - onChange: (val) => { - const vals = ["dribbblish", "spotify"]; - $("#main").attr("player-controls", vals[val]); - } + defaultValue: "dribbblish", + onChange: (val) => $("#main").attr("player-controls", val) }); DribbblishShared.config.register({ @@ -397,8 +391,7 @@ function toggleDark(setDark) { function checkDarkLightMode(colors) { const theme = DribbblishShared.config.get("theme"); - if (theme == 2) { - // Based on Time + if (theme == "time") { const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]); const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]); @@ -409,8 +402,7 @@ function checkDarkLightMode(colors) { if (end < start) dark = start <= time || time < end; else dark = start <= time && time < end; toggleDark(dark); - } else if (theme == 3) { - // Based on Color + } else if (theme == "color") { if (colors && colors.length > 0) toggleDark(isLight(colors[0])); } } @@ -442,11 +434,11 @@ DribbblishShared.config.register({ DribbblishShared.config.register({ area: "Theme", type: "select", - data: ["Dark", "Light", "Based on Time", "Based on Color"], + data: { dark: "Dark", light: "Light", time: "Based on Time", color: "Based on Color" }, key: "theme", name: "Theme", description: "Select Dark / Bright mode", - defaultValue: 0, + defaultValue: "dark", showChildren: (val) => { if (val == 2) return ["darkModeOnTime", "darkModeOffTime"]; //if (val == 3) return [""]; @@ -454,16 +446,16 @@ DribbblishShared.config.register({ }, onChange: (val) => { switch (val) { - case 0: + case "dark": toggleDark(true); break; - case 1: + case "light": toggleDark(false); break; - case 2: + case "time": checkDarkLightMode(); break; - case 3: + case "color": checkDarkLightMode(); break; }