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

add ability to disable config inputs & make disabled inputs be styled correctly

Browse source
This commit is contained in:
Send_Nukez 2021-12-04 15:20:53 +01:00
parent 0e946cf05a
commit 9e7349712b
3 changed files with 56 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/js/ConfigMenu.js
View file

@ -4,9 +4,11 @@ import { renderMD } from "./Util";
import { icons } from "./Icons"; import { icons } from "./Icons";
export default class ConfigMenu { export default class ConfigMenu {
/** @typedef {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "textarea" | "time" | "color"} DribbblishConfigType */
/** /**
* @typedef {Object} DribbblishConfigItem * @typedef {Object} DribbblishConfigItem
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "textarea" | "time" | "color"} type * @property {DribbblishConfigType} type
* @property {String | DribbblishConfigArea} [area={name: "Main Settings", order: 0}] * @property {String | DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
* @property {any} [data={}] * @property {any} [data={}]
* @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down * @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
@ -159,29 +161,28 @@ export default class ConfigMenu {
return isValid; return isValid;
} }
let elem;
let input;
if (options.type == "checkbox") { if (options.type == "checkbox") {
const frag = document.createDocumentFragment(); elem = document.createDocumentFragment();
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "checkbox"; input.type = "checkbox";
input.classList.add("x-toggle-input"); input.classList.add("x-toggle-input");
input.checked = this.get(options.key); input.checked = this.get(options.key);
input.addEventListener("change", (e) => { input.addEventListener("change", (e) => {
options.onChange(e.target.checked); options.onChange(e.target.checked);
}); });
elem.appendChild(input);
const indicator = document.createElement("span"); const indicator = document.createElement("span");
indicator.classList.add("x-toggle-indicatorWrapper"); indicator.classList.add("x-toggle-indicatorWrapper");
indicator.innerHTML = /* html */ `<span class="x-toggle-indicator"></span>`; indicator.innerHTML = /* html */ `<span class="x-toggle-indicator"></span>`;
elem.appendChild(indicator);
frag.appendChild(input);
frag.appendChild(indicator);
options.input = frag;
} else if (options.type == "select") { } else if (options.type == "select") {
const input = document.createElement("select"); input = document.createElement("select");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.classList.add("main-dropDown-dropDown"); input.classList.add("main-dropDown-dropDown");
input.innerHTML = Object.entries(options.data) input.innerHTML = Object.entries(options.data)
.map(([key, name]) => `<option value="${key}"${this.get(options.key) == key ? " selected" : ""}>${name}</option>`) .map(([key, name]) => `<option value="${key}"${this.get(options.key) == key ? " selected" : ""}>${name}</option>`)
@ -189,24 +190,20 @@ export default class ConfigMenu {
input.addEventListener("change", (e) => { input.addEventListener("change", (e) => {
options.onChange(e.target.value); options.onChange(e.target.value);
}); });
options.input = input;
} else if (options.type == "button") { } else if (options.type == "button") {
if (typeof options.data != "string") options.data = options.name; if (typeof options.data != "string") options.data = options.name;
options.fireInitialChange = false; options.fireInitialChange = false;
options.resetButton = false; options.resetButton = false;
options.save = false; options.save = false;
const input = document.createElement("button"); input = document.createElement("button");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "button"; input.type = "button";
input.classList.add("main-buttons-button", "main-button-primary"); input.classList.add("main-buttons-button", "main-button-primary");
input.innerHTML = /* html */ `<div class="x-settings-buttonContainer"><span>${options.data}</span></div>`; input.innerHTML = /* html */ `<div class="x-settings-buttonContainer"><span>${options.data}</span></div>`;
input.addEventListener("click", (e) => { input.addEventListener("click", (e) => {
options.onChange(true); options.onChange(true);
}); });
options.input = input;
} else if (options.type == "number") { } else if (options.type == "number") {
// Validate // Validate
if (options.defaultValue == null) options.defaultValue = 0; if (options.defaultValue == null) options.defaultValue = 0;
@ -214,8 +211,8 @@ export default class ConfigMenu {
if (options.data.min != null && _val < options.data.min) this.set(options.key, options.data.min, options.save); if (options.data.min != null && _val < options.data.min) this.set(options.key, options.data.min, options.save);
if (options.data.max != null && _val > options.data.max) this.set(options.key, options.data.max, options.save); if (options.data.max != null && _val > options.data.max) this.set(options.key, options.data.max, options.save);
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "number"; input.type = "number";
input.value = this.get(options.key); input.value = this.get(options.key);
input.step = options.data.step ?? 1; input.step = options.data.step ?? 1;
@ -231,31 +228,25 @@ export default class ConfigMenu {
options.onChange(Number(e.target.value)); options.onChange(Number(e.target.value));
}); });
options.input = input;
} else if (options.type == "text") { } else if (options.type == "text") {
if (options.defaultValue == null) options.defaultValue = ""; if (options.defaultValue == null) options.defaultValue = "";
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "text"; input.type = "text";
input.value = this.get(options.key); input.value = this.get(options.key);
input.addEventListener("input", (e) => { input.addEventListener("input", (e) => {
options.onChange(e.target.value); options.onChange(e.target.value);
}); });
options.input = input;
} else if (options.type == "textarea") { } else if (options.type == "textarea") {
if (options.defaultValue == null) options.defaultValue = ""; if (options.defaultValue == null) options.defaultValue = "";
const input = document.createElement("textarea"); input = document.createElement("textarea");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.value = this.get(options.key); input.value = this.get(options.key);
input.addEventListener("input", (e) => { input.addEventListener("input", (e) => {
options.onChange(e.target.value); options.onChange(e.target.value);
}); });
options.input = input;
} else if (options.type == "slider") { } else if (options.type == "slider") {
// Validate // Validate
if (options.defaultValue == null) options.defaultValue = 0; if (options.defaultValue == null) options.defaultValue = 0;
@ -263,8 +254,8 @@ export default class ConfigMenu {
if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min, options.save); if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min, options.save);
if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max, options.save); if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max, options.save);
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "range"; input.type = "range";
input.step = options.data.step ?? 1; input.step = options.data.step ?? 1;
input.min = options.data.min ?? 0; input.min = options.data.min ?? 0;
@ -275,39 +266,34 @@ export default class ConfigMenu {
options.onChange(Number(e.target.value)); options.onChange(Number(e.target.value));
$(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`); $(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
}); });
options.input = input;
} else if (options.type == "time") { } else if (options.type == "time") {
// Validate // Validate
if (options.defaultValue == null) options.defaultValue = "00:00"; if (options.defaultValue == null) options.defaultValue = "00:00";
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "time"; input.type = "time";
input.value = this.get(options.key); input.value = this.get(options.key);
input.addEventListener("input", (e) => { input.addEventListener("input", (e) => {
options.onChange(e.target.value); options.onChange(e.target.value);
}); });
options.input = input;
} else if (options.type == "color") { } else if (options.type == "color") {
// Validate // Validate
if (options.defaultValue == null) options.defaultValue = "#000000"; if (options.defaultValue == null) options.defaultValue = "#000000";
const input = document.createElement("input"); input = document.createElement("input");
input.id = `dribbblish-config-input-${options.key}`; input.classList.add("dribbblish-config-input");
input.type = "color"; input.type = "color";
input.value = this.get(options.key); input.value = this.get(options.key);
input.addEventListener("input", (e) => { input.addEventListener("input", (e) => {
options.onChange(e.target.value); options.onChange(e.target.value);
}); });
options.input = input;
} else { } else {
throw new Error(`Config Type "${options.type}" invalid`); throw new Error(`Config Type "${options.type}" invalid`);
} }
this.#addInputHTML(options); this.#addInputHTML({ ...options, input: elem ?? input });
options.input = input;
// Re-write internal config since some values may have changed // Re-write internal config since some values may have changed
this.#config[options.key] = options; this.#config[options.key] = options;
@ -422,6 +408,10 @@ export default class ConfigMenu {
} }
} }
setDisabled(key, disabled) {
this.#config[key].input.disabled = disabled;
}
getOptions(key) { getOptions(key) {
return this.#config[key]; return this.#config[key];
} }

7
src/styles/ConfigMenu.scss
View file

@ -28,12 +28,17 @@
padding: 20px 15px; padding: 20px 15px;
border-radius: var(--main-corner-radius); border-radius: var(--main-corner-radius);
display: flex; display: flex;
gap: 5px; gap: 8px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include spiceShadow(); @include spiceShadow();
> h2 {
font-size: 32px;
line-height: 32px;
}
.dribbblish-config-close { .dribbblish-config-close {
position: absolute; position: absolute;
padding: 0px; padding: 0px;

33
src/styles/Inputs.scss
View file

@ -50,7 +50,7 @@ button.main-button {
.x-toggle-indicatorWrapper { .x-toggle-indicatorWrapper {
background-color: spiceColor("subtext", 0.1); background-color: spiceColor("subtext", 0.1);
input:hover ~ & { input:not(:disabled):hover ~ & {
background-color: spiceColor("subtext", 0.15) !important; background-color: spiceColor("subtext", 0.15) !important;
} }
@ -58,7 +58,7 @@ button.main-button {
background-color: spiceColor("selected-row", 0.4) !important; background-color: spiceColor("selected-row", 0.4) !important;
} }
input:hover:checked ~ & { input:not(:disabled):hover:checked ~ & {
background-color: spiceColor("selected-row", 0.6) !important; background-color: spiceColor("selected-row", 0.6) !important;
} }
} }
@ -72,10 +72,17 @@ input {
outline: none; outline: none;
border: none; border: none;
&:not(:disabled) {
&:hover, &:hover,
&:active { &:active {
background-color: spiceColor("selected-row", 0.6) !important; background-color: spiceColor("selected-row", 0.6) !important;
} }
}
&:disabled {
cursor: not-allowed;
opacity: 0.5 !important;
}
&::placeholder { &::placeholder {
color: spiceColor("subtext"); color: spiceColor("subtext");
@ -87,23 +94,17 @@ textarea {
padding: 6px 10px; padding: 6px 10px;
} }
select { select > option {
background-color: spiceColor("selected-row", 0.4) !important;
color: spiceColor("subtext");
&:hover,
&:active {
background-color: spiceColor("selected-row", 0.6) !important;
}
option {
background: spiceColor("main") !important; background: spiceColor("main") !important;
}
} }
input { input {
padding: 6px 10px 6px 48px; padding: 6px 10px 6px 48px;
&[type="checkbox"] {
opacity: 0 !important;
}
&[type="range"] { &[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
background: transparent; background: transparent;
@ -173,11 +174,5 @@ input {
&[type="color"] { &[type="color"] {
position: relative; position: relative;
padding: 1px 3px; padding: 1px 3px;
background-color: spiceColor("selected-row", 0.4);
&:hover,
&:active {
background-color: spiceColor("selected-row", 0.6);
}
} }
} }