dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-06 16:21:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add ability for config validation to return strings as error to be displayed

Browse source
This commit is contained in:
Send_Nukez 2021-11-16 03:39:31 +01:00
parent 415efc5731
commit 1eddb9655e
2 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/js/ConfigMenu.js
View file

@ -11,7 +11,7 @@ export default class ConfigMenu {
* @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
* @property {String} [key] defaults to `${area}_${name]`. e.g: About_Info * @property {String} key
* @property {String} name * @property {String} name
* @property {String} [description=""] * @property {String} [description=""]
* @property {any} [defaultValue] * @property {any} [defaultValue]
@ -39,7 +39,7 @@ export default class ConfigMenu {
* @callback validate * @callback validate
* @this {DribbblishConfigItem} * @this {DribbblishConfigItem}
* @param {any} value * @param {any} value
* @returns {Boolean | String[]} * @returns {Boolean | String}
*/ */
/** /**
@ -196,7 +196,6 @@ export default class ConfigMenu {
// Set Defaults // Set Defaults
options = { ...defaultOptions, ...options }; options = { ...defaultOptions, ...options };
if (typeof options.area == "string") options.area = { name: options.area, order: 0 }; if (typeof options.area == "string") options.area = { name: options.area, order: 0 };
if (options.key == null) options.key = `${options.area.name}_${options.name}`.split(" ").join("_");
options.description = options.description options.description = options.description
.split("\n") .split("\n")
.filter((line) => line.trim() != "") .filter((line) => line.trim() != "")
@ -204,7 +203,11 @@ export default class ConfigMenu {
.join("\n"); .join("\n");
options._onChange = options.onChange; options._onChange = options.onChange;
options.onChange = (val) => { options.onChange = (val) => {
$(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && val != options.defaultValue ? "" : null); const isValid = validate(val);
$(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", isValid === true && val != options.defaultValue ? "" : null);
if (!isValid) return;
this.set(options.key, val, options.save);
options._onChange.call(options, val); options._onChange.call(options, val);
const show = options.showChildren.call(options, val); const show = options.showChildren.call(options, val);
options.children.forEach((child) => this.#setHidden(child.key, Array.isArray(show) ? !show.includes(child.key) : !show)); options.children.forEach((child) => this.#setHidden(child.key, Array.isArray(show) ? !show.includes(child.key) : !show));
@ -217,16 +220,17 @@ export default class ConfigMenu {
function validate(val) { function validate(val) {
const isValid = options.validate.call(options, val); const isValid = options.validate.call(options, val);
$(`.dribbblish-config-item[key="${options.key}"]`).attr("invalid", !isValid ? "" : null); console.log(isValid);
const $elem = $(`.dribbblish-config-item[key="${options.key}"]`);
if (isValid === true) {
$elem.attr("invalid", null).css("--validation-error", "");
} else {
const error = isValid === false ? "Invalid" : isValid;
$elem.attr("invalid", "").css("--validation-error", `"${error.replace(/"/g, `\\"`)}"`);
}
return isValid; return isValid;
} }
const change = (val) => {
if (!validate(val)) return;
this.set(options.key, val, options.save);
options.onChange(val);
};
if (options.type == "checkbox") { if (options.type == "checkbox") {
const input = /* html */ ` const input = /* html */ `
<input id="dribbblish-config-input-${options.key}" class="x-toggle-input" type="checkbox"${this.get(options.key) ? " checked" : ""}> <input id="dribbblish-config-input-${options.key}" class="x-toggle-input" type="checkbox"${this.get(options.key) ? " checked" : ""}>
@ -237,7 +241,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
change(e.target.checked); options.onChange(e.target.checked);
}); });
} else if (options.type == "select") { } else if (options.type == "select") {
// Validate // Validate
@ -254,7 +258,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
change(e.target.value); options.onChange(e.target.value);
}); });
} 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;
@ -302,7 +306,7 @@ export default class ConfigMenu {
if (options.data.min != null && e.target.value < options.data.min) e.target.value = options.data.min; if (options.data.min != null && e.target.value < options.data.min) e.target.value = options.data.min;
if (options.data.max != null && e.target.value > options.data.max) e.target.value = options.data.max; if (options.data.max != null && e.target.value > options.data.max) e.target.value = options.data.max;
change(Number(e.target.value)); options.onChange(Number(e.target.value));
}); });
} else if (options.type == "text") { } else if (options.type == "text") {
if (options.defaultValue == null) options.defaultValue = ""; if (options.defaultValue == null) options.defaultValue = "";
@ -327,7 +331,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
change(e.target.value); options.onChange(e.target.value);
}); });
} else if (options.type == "slider") { } else if (options.type == "slider") {
// Validate // Validate
@ -354,7 +358,7 @@ export default class ConfigMenu {
$(`#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 ?? ""}`);
$(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value); $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
change(Number(e.target.value)); options.onChange(Number(e.target.value));
}); });
} else if (options.type == "time") { } else if (options.type == "time") {
// Validate // Validate
@ -367,7 +371,7 @@ export default class ConfigMenu {
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
$(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value); $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
change(e.target.value); options.onChange(e.target.value);
}); });
} else if (options.type == "color") { } else if (options.type == "color") {
// Validate // Validate
@ -378,7 +382,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
change(e.target.value); options.onChange(e.target.value);
}); });
} else { } else {
throw new Error(`Config Type "${options.type}" invalid`); throw new Error(`Config Type "${options.type}" invalid`);

9
src/styles/ConfigMenu.scss
View file

@ -129,7 +129,7 @@
} }
&[invalid]::before { &[invalid]::before {
background-color: rgba(red, 0.2); border: 2px solid rgba(red, 0.8);
} }
&[changed] { &[changed] {
@ -190,6 +190,7 @@
height: min-content; height: min-content;
color: spiceColor("subtext"); color: spiceColor("subtext");
line-height: calc(1em + 6px); // To have line gaps line-height: calc(1em + 6px); // To have line gaps
line-break: anywhere;
} }
.x-settings-secondColumn { .x-settings-secondColumn {
@ -200,6 +201,12 @@
.dribbblish-config-item-input { .dribbblish-config-item-input {
min-width: fit-content; min-width: fit-content;
&::before {
content: var(--validation-error);
margin-right: 8px;
color: rgba(red, 0.8);
}
} }
} }
} }