dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-09-18 05:44:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

validate config types in localStorage

Browse source
This commit is contained in:
Send_Nukez 2021-10-27 16:59:48 +02:00
parent 407bf9c286
commit 6b413e7052
2 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/js/ConfigMenu.js
View file

@ -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 */ `
<select class="main-dropDown-dropDown" id="dribbblish-config-input-${options.key}">
${options.data.map((option, i) => `<option value="${i}"${this.get(options.key) == i ? " selected" : ""}>${option}</option>`).join("")}
${Object.entries(options.data)
.map(([key, name]) => `<option value="${key}"${this.get(options.key) == key ? " selected" : ""}>${name}</option>`)
.join("")}
</select>
`;
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

36
src/js/main.js
View file

@ -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;
}