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

refactor ConfigMenu to use jquery

Browse source
This commit is contained in:
Send_Nukez 2021-11-11 22:56:25 +01:00
parent 574a8332aa
commit b5033f8872
2 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/js/ConfigMenu.js
View file

@ -1,3 +1,4 @@
import $ from "jquery";
import MarkdownIt from "markdown-it"; import MarkdownIt from "markdown-it";
import MarkdownItAttrs from "markdown-it-attrs"; import MarkdownItAttrs from "markdown-it-attrs";
@ -82,16 +83,16 @@ export default class ConfigMenu {
`; `;
document.body.appendChild(container); document.body.appendChild(container);
document.querySelector(".dribbblish-config-close").addEventListener("click", () => this.close()); $(".dribbblish-config-close").on("click", () => this.close());
document.querySelector(".dribbblish-config-backdrop").addEventListener("click", () => this.close()); $(".dribbblish-config-backdrop").on("click", () => this.close());
} }
open() { open() {
document.getElementById("dribbblish-config").setAttribute("active", ""); $("#dribbblish-config").attr("active", true);
} }
close() { close() {
document.getElementById("dribbblish-config").removeAttribute("active"); $("#dribbblish-config").removeAttr("active");
} }
/** /**
@ -107,7 +108,7 @@ export default class ConfigMenu {
elem.classList.add("dribbblish-config-item"); elem.classList.add("dribbblish-config-item");
elem.setAttribute("key", options.key); elem.setAttribute("key", options.key);
elem.setAttribute("type", options.type); elem.setAttribute("type", options.type);
elem.setAttribute("hidden", options.hidden); if (options.hidden) elem.setAttribute("hidden", true);
if (options.childOf) elem.setAttribute("parent", options.childOf); if (options.childOf) elem.setAttribute("parent", options.childOf);
elem.innerHTML = /* html */ ` elem.innerHTML = /* html */ `
${ ${
@ -136,15 +137,17 @@ export default class ConfigMenu {
parent.appendChild(elem); parent.appendChild(elem);
} }
const resetButton = elem.querySelector(".dribbblish-config-item-reset"); const $inputElem = $(elem).find("input, textarea, select");
if (resetButton) { const $resetButton = $(elem).find(".dribbblish-config-item-reset");
resetButton.addEventListener("click", () => {
if ($resetButton.length > 0) {
$resetButton.on("click", () => {
this.reset(options.key); this.reset(options.key);
const defaultVal = this.get(options.key); const defaultVal = this.get(options.key);
if (options.type == "checkbox") { if (options.type == "checkbox") {
elem.querySelector("input").checked = defaultVal; $inputElem.prop("checked", defaultVal);
} else { } else {
elem.querySelector("input, select").value = defaultVal; $inputElem.prop("value", defaultVal);
} }
options.onChange(defaultVal); options.onChange(defaultVal);
}); });
@ -201,7 +204,7 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.checked); this.set(options.key, e.target.checked);
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
}); });
@ -219,7 +222,7 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.value); this.set(options.key, e.target.value);
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
}); });
@ -236,7 +239,7 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("click", (e) => { $(`#dribbblish-config-input-${options.key}`).on("click", (e) => {
options.onChange(true); options.onChange(true);
}); });
} else if (options.type == "number") { } else if (options.type == "number") {
@ -259,11 +262,11 @@ export default class ConfigMenu {
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
// Prevent inputting +, - and e. Why is it even possible in the first place? // Prevent inputting +, - and e. Why is it even possible in the first place?
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("keypress", (e) => { $(`#dribbblish-config-input-${options.key}`).on("keypress", (e) => {
if (["+", "-", "e"].includes(e.key)) e.preventDefault(); if (["+", "-", "e"].includes(e.key)) e.preventDefault();
}); });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
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;
@ -278,7 +281,7 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
// TODO: maybe add an validation function via `data.validate` // TODO: maybe add an validation function via `data.validate`
this.set(options.key, e.target.value); this.set(options.key, e.target.value);
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
@ -304,9 +307,10 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`); $(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("value", e.target.value); $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
this.set(options.key, Number(e.target.value)); this.set(options.key, Number(e.target.value));
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
}); });
@ -318,8 +322,9 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("value", e.target.value); $(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
this.set(options.key, e.target.value); this.set(options.key, e.target.value);
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
}); });
@ -331,7 +336,7 @@ export default class ConfigMenu {
`; `;
this.addInputHTML({ ...options, input }); this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
this.set(options.key, e.target.value); this.set(options.key, e.target.value);
options.onChange(this.get(options.key)); options.onChange(this.get(options.key));
}); });
@ -424,7 +429,7 @@ export default class ConfigMenu {
*/ */
setHidden(key, hidden) { setHidden(key, hidden) {
this.#config[key].hidden = hidden; this.#config[key].hidden = hidden;
document.querySelector(`.dribbblish-config-item[key="${key}"]`).setAttribute("hidden", hidden); document.querySelector(`.dribbblish-config-item[key="${key}"]`).toggleAttribute("hidden", hidden);
} }
getOptions(key) { getOptions(key) {

8
src/styles/ConfigMenu.scss
View file

@ -100,12 +100,12 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
&[parent] { &[hidden] {
padding-left: 16px; display: none;
} }
&[hidden="true"] { &[parent] {
display: none; padding-left: 16px;
} }
.dribbblish-config-item-header { .dribbblish-config-item-header {