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

rename DribbblishShared to Dribbblish and expose it to the window object to be used in other extensions

Browse source
This commit is contained in:
Send_Nukez 2021-11-14 00:25:44 +01:00
parent 9d05365ffb
commit aaeb51a6ca
2 changed files with 51 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/js/ConfigMenu.js
View file

@ -57,13 +57,16 @@ export default class ConfigMenu {
/** @type {Object.<string, DribbblishConfigItem>} */ /** @type {Object.<string, DribbblishConfigItem>} */
#config; #config;
/** @type {Spicetify.Menu.Item} */
#configButton;
/** @type {MarkdownIt} */ /** @type {MarkdownIt} */
#md; #md;
constructor() { constructor() {
this.#config = {}; this.#config = {};
this.configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open()); this.#configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open());
this.configButton.register(); this.#configButton.register();
this.#md = MarkdownIt({ this.#md = MarkdownIt({
html: true, html: true,
breaks: true, breaks: true,
@ -102,7 +105,7 @@ export default class ConfigMenu {
* @private * @private
* @param {DribbblishConfigItem} options * @param {DribbblishConfigItem} options
*/ */
addInputHTML(options) { #addInputHTML(options) {
this.registerArea(options.area); this.registerArea(options.area);
const parent = document.querySelector(`.dribbblish-config-area[name="${options.area.name}"] .dribbblish-config-area-items`); const parent = document.querySelector(`.dribbblish-config-area[name="${options.area.name}"] .dribbblish-config-area-items`);
@ -194,7 +197,7 @@ export default class ConfigMenu {
$(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && val != options.defaultValue ? "" : null); $(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && val != options.defaultValue ? "" : null);
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));
}; };
options.children = options.children.map((child) => { options.children = options.children.map((child) => {
return { ...child, area: options.area, childOf: options.key }; return { ...child, area: options.area, childOf: options.key };
@ -209,7 +212,7 @@ export default class ConfigMenu {
<span class="x-toggle-indicator"></span> <span class="x-toggle-indicator"></span>
</span> </span>
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.checked, options.save); this.set(options.key, e.target.checked, options.save);
@ -227,7 +230,7 @@ export default class ConfigMenu {
.join("")} .join("")}
</select> </select>
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => { $(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.value, options.save); this.set(options.key, e.target.value, options.save);
@ -246,7 +249,7 @@ export default class ConfigMenu {
</div> </div>
</button> </button>
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("click", (e) => { $(`#dribbblish-config-input-${options.key}`).on("click", (e) => {
options.onChange(true); options.onChange(true);
@ -268,7 +271,7 @@ export default class ConfigMenu {
value="${this.get(options.key)}" value="${this.get(options.key)}"
> >
`; `;
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?
$(`#dribbblish-config-input-${options.key}`).on("keypress", (e) => { $(`#dribbblish-config-input-${options.key}`).on("keypress", (e) => {
@ -288,7 +291,7 @@ export default class ConfigMenu {
const input = /* html */ ` const input = /* html */ `
<input type="text" id="dribbblish-config-input-${options.key}" value="${this.get(options.key)}"> <input type="text" id="dribbblish-config-input-${options.key}" value="${this.get(options.key)}">
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("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`
@ -301,7 +304,7 @@ export default class ConfigMenu {
const input = /* html */ ` const input = /* html */ `
<textarea id="dribbblish-config-input-${options.key}">${this.get(options.key)}</textarea> <textarea id="dribbblish-config-input-${options.key}">${this.get(options.key)}</textarea>
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("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`
@ -327,7 +330,7 @@ export default class ConfigMenu {
tooltip="${this.get(options.key)}${options.data?.suffix ?? ""}" tooltip="${this.get(options.key)}${options.data?.suffix ?? ""}"
> >
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
$(`#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 ?? ""}`);
@ -342,7 +345,7 @@ export default class ConfigMenu {
const input = /* html */ ` const input = /* html */ `
<input type="time" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}"> <input type="time" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}">
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#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);
@ -356,7 +359,7 @@ export default class ConfigMenu {
const input = /* html */ ` const input = /* html */ `
<input type="color" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}"> <input type="color" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}">
`; `;
this.addInputHTML({ ...options, input }); this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => { $(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
this.set(options.key, e.target.value, options.save); this.set(options.key, e.target.value, options.save);
@ -459,8 +462,9 @@ export default class ConfigMenu {
* *
* @param {String} key * @param {String} key
* @param {Boolean} hidden * @param {Boolean} hidden
* @private
*/ */
setHidden(key, hidden) { #setHidden(key, hidden) {
this.#config[key].hidden = hidden; this.#config[key].hidden = hidden;
$(`.dribbblish-config-item[key="${key}"]`).attr("hidden", hidden ? "" : null); $(`.dribbblish-config-item[key="${key}"]`).attr("hidden", hidden ? "" : null);
} }

66
src/js/main.js
View file

@ -11,12 +11,14 @@ import svgArrowDown from "svg/arrow-down";
import svgCode from "svg/code"; import svgCode from "svg/code";
import svgWifiSlash from "svg/wifi-slash"; import svgWifiSlash from "svg/wifi-slash";
const DribbblishShared = { const Dribbblish = {
config: new ConfigMenu(), config: new ConfigMenu(),
info: new Info() info: new Info()
}; };
// To expose to external scripts
window.Dribbblish = Dribbblish;
DribbblishShared.config.register({ Dribbblish.config.register({
type: "checkbox", type: "checkbox",
key: "rightBigCover", key: "rightBigCover",
name: "Right expanded cover", name: "Right expanded cover",
@ -25,7 +27,7 @@ DribbblishShared.config.register({
onChange: (val) => $("html").toggleClass("right-expanded-cover", val) onChange: (val) => $("html").toggleClass("right-expanded-cover", val)
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Sidebar", area: "Sidebar",
type: "checkbox", type: "checkbox",
key: "roundSidebarIcons", key: "roundSidebarIcons",
@ -35,7 +37,7 @@ DribbblishShared.config.register({
onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50vh" : "var(--image-radius)") onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50vh" : "var(--image-radius)")
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Animations & Transitions", area: "Animations & Transitions",
type: "checkbox", type: "checkbox",
key: "sidebarHoverAnimation", key: "sidebarHoverAnimation",
@ -45,7 +47,7 @@ DribbblishShared.config.register({
onChange: (val) => $("html").css("--sidebar-icons-hover-animation", val ? "1" : "0") onChange: (val) => $("html").css("--sidebar-icons-hover-animation", val ? "1" : "0")
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Sidebar", area: "Sidebar",
type: "number", type: "number",
key: "sidebarGapLeft", key: "sidebarGapLeft",
@ -58,7 +60,7 @@ DribbblishShared.config.register({
onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`) onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`)
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Sidebar", area: "Sidebar",
type: "number", type: "number",
key: "sidebarGapRight", key: "sidebarGapRight",
@ -72,7 +74,7 @@ DribbblishShared.config.register({
}); });
waitForElement([".main-nowPlayingBar-container"], ([container]) => { waitForElement([".main-nowPlayingBar-container"], ([container]) => {
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Playbar", area: "Playbar",
type: "checkbox", type: "checkbox",
key: "playbarShadow", key: "playbarShadow",
@ -84,7 +86,7 @@ waitForElement([".main-nowPlayingBar-container"], ([container]) => {
}); });
waitForElement(["#main"], () => { waitForElement(["#main"], () => {
DribbblishShared.config.register({ Dribbblish.config.register({
type: "select", type: "select",
data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" }, data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" },
key: "winTopBar", key: "winTopBar",
@ -94,7 +96,7 @@ waitForElement(["#main"], () => {
onChange: (val) => $("#main").attr("top-bar", val) onChange: (val) => $("#main").attr("top-bar", val)
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Playbar", area: "Playbar",
type: "select", type: "select",
data: { dribbblish: "Dribbblish", spotify: "Spotify" }, data: { dribbblish: "Dribbblish", spotify: "Spotify" },
@ -108,7 +110,7 @@ waitForElement(["#main"], () => {
} }
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Playbar", area: "Playbar",
type: "checkbox", type: "checkbox",
key: "showAlbumInfoInPlaybar", key: "showAlbumInfoInPlaybar",
@ -118,7 +120,7 @@ waitForElement(["#main"], () => {
onChange: (val) => $("#main").attr("playbar-album-info", val) onChange: (val) => $("#main").attr("playbar-album-info", val)
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Ads", area: "Ads",
type: "checkbox", type: "checkbox",
key: "hideAds", key: "hideAds",
@ -168,9 +170,7 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `
} }
} }
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage(); loadPlaylistImage();
new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true }); new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
}); });
@ -295,7 +295,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
} catch { } catch {
Spicetify.showNotification("File too large"); Spicetify.showNotification("File too large");
} }
DribbblishShared.loadPlaylistImage?.call(); loadPlaylistImage();
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };
@ -305,7 +305,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
([uri]) => { ([uri]) => {
const id = Spicetify.URI.from(uri).id; const id = Spicetify.URI.from(uri).id;
localStorage.removeItem("dribbblish:folder-image:" + id); localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call(); loadPlaylistImage();
}, },
([uri]) => Spicetify.URI.isFolder(uri), ([uri]) => Spicetify.URI.isFolder(uri),
"x" "x"
@ -324,7 +324,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
/* Config settings */ /* Config settings */
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Animations & Transitions", area: "Animations & Transitions",
type: "slider", type: "slider",
key: "fadeDuration", key: "fadeDuration",
@ -342,9 +342,9 @@ DribbblishShared.config.register({
// waitForElement because Spicetify is not initialized at startup // waitForElement because Spicetify is not initialized at startup
waitForElement(["#main"], () => { waitForElement(["#main"], () => {
DribbblishShared.config.registerArea({ name: "About", order: 999 }); Dribbblish.config.registerArea({ name: "About", order: 999 });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "About", area: "About",
type: "button", type: "button",
key: "aboutDribbblishInfo", key: "aboutDribbblishInfo",
@ -362,7 +362,7 @@ waitForElement(["#main"], () => {
} }
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "About", area: "About",
type: "button", type: "button",
key: "aboutDribbblishBugs", key: "aboutDribbblishBugs",
@ -397,7 +397,7 @@ waitForElement(["#main"], () => {
### Info for Contributors: ### Info for Contributors:
**Versions** **Versions**
${DribbblishShared.config.getOptions("aboutDribbblishInfo").description} ${Dribbblish.config.getOptions("aboutDribbblishInfo").description}
**Extensions** **Extensions**
${$(`script[src^="extensions/"]`) ${$(`script[src^="extensions/"]`)
@ -407,7 +407,7 @@ waitForElement(["#main"], () => {
**Settings** **Settings**
\`\`\`json \`\`\`json
${JSON.stringify(DribbblishShared.config.export(), null, 4)} ${JSON.stringify(Dribbblish.config.export(), null, 4)}
\`\`\` \`\`\`
` `
.split("\n") .split("\n")
@ -422,7 +422,7 @@ waitForElement(["#main"], () => {
} }
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "About", area: "About",
type: "button", type: "button",
key: "aboutDribbblishChangelog", key: "aboutDribbblishChangelog",
@ -498,10 +498,10 @@ function toggleDark(setDark) {
} }
function checkDarkLightMode(colors) { function checkDarkLightMode(colors) {
const theme = DribbblishShared.config.get("theme"); const theme = Dribbblish.config.get("theme");
if (theme == "time") { if (theme == "time") {
const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]); const start = 60 * parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[0]) + parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[1]);
const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]); const end = 60 * parseInt(Dribbblish.config.get("darkModeOffTime").split(":")[0]) + parseInt(Dribbblish.config.get("darkModeOffTime").split(":")[1]);
const now = new Date(); const now = new Date();
const time = 60 * now.getHours() + now.getMinutes(); const time = 60 * now.getHours() + now.getMinutes();
@ -517,7 +517,7 @@ function checkDarkLightMode(colors) {
// Run every Minute to check time and set dark / light mode // Run every Minute to check time and set dark / light mode
setInterval(checkDarkLightMode, 60000); setInterval(checkDarkLightMode, 60000);
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Theme", area: "Theme",
type: "checkbox", type: "checkbox",
key: "dynamicColors", key: "dynamicColors",
@ -539,7 +539,7 @@ DribbblishShared.config.register({
] ]
}); });
DribbblishShared.config.register({ Dribbblish.config.register({
area: "Theme", area: "Theme",
type: "select", type: "select",
data: { dark: "Dark", light: "Light", time: "Based on Time", color: "Based on Color" }, data: { dark: "Dark", light: "Light", time: "Based on Time", color: "Based on Color" },
@ -602,8 +602,8 @@ function updateColors(textColHex, sideColHex, checkDarkMode = true) {
sideColHex = currentSideColor; sideColHex = currentSideColor;
} }
if (!DribbblishShared.config.get("dynamicColors")) { if (!Dribbblish.config.get("dynamicColors")) {
const col = DribbblishShared.config.get("colorOverride"); const col = Dribbblish.config.get("colorOverride");
textColHex = col; textColHex = col;
sideColHex = col; sideColHex = col;
} }
@ -751,8 +751,8 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
const isDev = process.env.DRIBBBLISH_VERSION == "Dev"; const isDev = process.env.DRIBBBLISH_VERSION == "Dev";
DribbblishShared.info.set("upd", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: svgArrowDown, onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null); Dribbblish.info.set("upd", isDev || data.tag_name > process.env.DRIBBBLISH_VERSION ? { text: `v${data.tag_name}`, tooltip: "Open Release page to download", icon: svgArrowDown, onClick: () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/releases/latest", "_blank") } : null);
DribbblishShared.info.set("dev", isDev ? { tooltip: "Dev build", icon: svgCode } : null); Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: svgCode } : null);
}) })
.catch(console.error); .catch(console.error);
} }
@ -763,7 +763,7 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
// Show "Offline info" // Show "Offline info"
window.addEventListener("offline", () => window.addEventListener("offline", () =>
DribbblishShared.info.set("offline", { Dribbblish.info.set("offline", {
tooltip: "Offline", tooltip: "Offline",
icon: svgWifiSlash, icon: svgWifiSlash,
order: 999, order: 999,
@ -773,6 +773,6 @@ window.addEventListener("offline", () =>
} }
}) })
); );
window.addEventListener("online", () => DribbblishShared.info.remove("offline")); window.addEventListener("online", () => Dribbblish.info.remove("offline"));
$("html").css("--warning_message", " "); $("html").css("--warning_message", " ");