mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-24 12:35:05 +00:00
rename DribbblishShared to Dribbblish and expose it to the window object to be used in other extensions
This commit is contained in:
Send_Nukez
parent
9d05365ffb
commit
aaeb51a6ca
2 changed files with 51 additions and 47 deletions
|
|
@ -57,13 +57,16 @@ export default class ConfigMenu {
|
|||
/** @type {Object.<string, DribbblishConfigItem>} */
|
||||
#config;
|
||||
|
||||
/** @type {Spicetify.Menu.Item} */
|
||||
#configButton;
|
||||
|
||||
/** @type {MarkdownIt} */
|
||||
#md;
|
||||
|
||||
constructor() {
|
||||
this.#config = {};
|
||||
this.configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open());
|
||||
this.configButton.register();
|
||||
this.#configButton = new Spicetify.Menu.Item("Dribbblish Settings", false, () => this.open());
|
||||
this.#configButton.register();
|
||||
this.#md = MarkdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
|
|
@ -102,7 +105,7 @@ export default class ConfigMenu {
|
|||
* @private
|
||||
* @param {DribbblishConfigItem} options
|
||||
*/
|
||||
addInputHTML(options) {
|
||||
#addInputHTML(options) {
|
||||
this.registerArea(options.area);
|
||||
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);
|
||||
options._onChange.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) => {
|
||||
return { ...child, area: options.area, childOf: options.key };
|
||||
|
|
@ -209,7 +212,7 @@ export default class ConfigMenu {
|
|||
<span class="x-toggle-indicator"></span>
|
||||
</span>
|
||||
`;
|
||||
this.addInputHTML({ ...options, input });
|
||||
this.#addInputHTML({ ...options, input });
|
||||
|
||||
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
|
||||
this.set(options.key, e.target.checked, options.save);
|
||||
|
|
@ -227,7 +230,7 @@ export default class ConfigMenu {
|
|||
.join("")}
|
||||
</select>
|
||||
`;
|
||||
this.addInputHTML({ ...options, input });
|
||||
this.#addInputHTML({ ...options, input });
|
||||
|
||||
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
|
||||
this.set(options.key, e.target.value, options.save);
|
||||
|
|
@ -246,7 +249,7 @@ export default class ConfigMenu {
|
|||
</div>
|
||||
</button>
|
||||
`;
|
||||
this.addInputHTML({ ...options, input });
|
||||
this.#addInputHTML({ ...options, input });
|
||||
|
||||
$(`#dribbblish-config-input-${options.key}`).on("click", (e) => {
|
||||
options.onChange(true);
|
||||
|
|
@ -268,7 +271,7 @@ export default class ConfigMenu {
|
|||
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?
|
||||
$(`#dribbblish-config-input-${options.key}`).on("keypress", (e) => {
|
||||
|
|
@ -288,7 +291,7 @@ export default class ConfigMenu {
|
|||
const input = /* html */ `
|
||||
<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) => {
|
||||
// TODO: maybe add an validation function via `data.validate`
|
||||
|
|
@ -301,7 +304,7 @@ export default class ConfigMenu {
|
|||
const input = /* html */ `
|
||||
<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) => {
|
||||
// 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 ?? ""}"
|
||||
>
|
||||
`;
|
||||
this.addInputHTML({ ...options, input });
|
||||
this.#addInputHTML({ ...options, input });
|
||||
|
||||
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
|
||||
$(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
|
||||
|
|
@ -342,7 +345,7 @@ export default class ConfigMenu {
|
|||
const input = /* html */ `
|
||||
<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}`).attr("value", e.target.value);
|
||||
|
|
@ -356,7 +359,7 @@ export default class ConfigMenu {
|
|||
const input = /* html */ `
|
||||
<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) => {
|
||||
this.set(options.key, e.target.value, options.save);
|
||||
|
|
@ -459,8 +462,9 @@ export default class ConfigMenu {
|
|||
*
|
||||
* @param {String} key
|
||||
* @param {Boolean} hidden
|
||||
* @private
|
||||
*/
|
||||
setHidden(key, hidden) {
|
||||
#setHidden(key, hidden) {
|
||||
this.#config[key].hidden = hidden;
|
||||
$(`.dribbblish-config-item[key="${key}"]`).attr("hidden", hidden ? "" : null);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ import svgArrowDown from "svg/arrow-down";
|
|||
import svgCode from "svg/code";
|
||||
import svgWifiSlash from "svg/wifi-slash";
|
||||
|
||||
const DribbblishShared = {
|
||||
const Dribbblish = {
|
||||
config: new ConfigMenu(),
|
||||
info: new Info()
|
||||
};
|
||||
// To expose to external scripts
|
||||
window.Dribbblish = Dribbblish;
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
type: "checkbox",
|
||||
key: "rightBigCover",
|
||||
name: "Right expanded cover",
|
||||
|
|
@ -25,7 +27,7 @@ DribbblishShared.config.register({
|
|||
onChange: (val) => $("html").toggleClass("right-expanded-cover", val)
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Sidebar",
|
||||
type: "checkbox",
|
||||
key: "roundSidebarIcons",
|
||||
|
|
@ -35,7 +37,7 @@ DribbblishShared.config.register({
|
|||
onChange: (val) => $("html").css("--sidebar-icons-border-radius", val ? "50vh" : "var(--image-radius)")
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Animations & Transitions",
|
||||
type: "checkbox",
|
||||
key: "sidebarHoverAnimation",
|
||||
|
|
@ -45,7 +47,7 @@ DribbblishShared.config.register({
|
|||
onChange: (val) => $("html").css("--sidebar-icons-hover-animation", val ? "1" : "0")
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Sidebar",
|
||||
type: "number",
|
||||
key: "sidebarGapLeft",
|
||||
|
|
@ -58,7 +60,7 @@ DribbblishShared.config.register({
|
|||
onChange: (val) => $("html").css("--sidebar-gap-left", `${val}px`)
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Sidebar",
|
||||
type: "number",
|
||||
key: "sidebarGapRight",
|
||||
|
|
@ -72,7 +74,7 @@ DribbblishShared.config.register({
|
|||
});
|
||||
|
||||
waitForElement([".main-nowPlayingBar-container"], ([container]) => {
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Playbar",
|
||||
type: "checkbox",
|
||||
key: "playbarShadow",
|
||||
|
|
@ -84,7 +86,7 @@ waitForElement([".main-nowPlayingBar-container"], ([container]) => {
|
|||
});
|
||||
|
||||
waitForElement(["#main"], () => {
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
type: "select",
|
||||
data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" },
|
||||
key: "winTopBar",
|
||||
|
|
@ -94,7 +96,7 @@ waitForElement(["#main"], () => {
|
|||
onChange: (val) => $("#main").attr("top-bar", val)
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Playbar",
|
||||
type: "select",
|
||||
data: { dribbblish: "Dribbblish", spotify: "Spotify" },
|
||||
|
|
@ -108,7 +110,7 @@ waitForElement(["#main"], () => {
|
|||
}
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Playbar",
|
||||
type: "checkbox",
|
||||
key: "showAlbumInfoInPlaybar",
|
||||
|
|
@ -118,7 +120,7 @@ waitForElement(["#main"], () => {
|
|||
onChange: (val) => $("#main").attr("playbar-album-info", val)
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Ads",
|
||||
type: "checkbox",
|
||||
key: "hideAds",
|
||||
|
|
@ -168,9 +170,7 @@ waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `
|
|||
}
|
||||
}
|
||||
|
||||
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
|
||||
loadPlaylistImage();
|
||||
|
||||
new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
|
||||
});
|
||||
|
||||
|
|
@ -295,7 +295,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
|||
} catch {
|
||||
Spicetify.showNotification("File too large");
|
||||
}
|
||||
DribbblishShared.loadPlaylistImage?.call();
|
||||
loadPlaylistImage();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
|
@ -305,7 +305,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
|||
([uri]) => {
|
||||
const id = Spicetify.URI.from(uri).id;
|
||||
localStorage.removeItem("dribbblish:folder-image:" + id);
|
||||
DribbblishShared.loadPlaylistImage?.call();
|
||||
loadPlaylistImage();
|
||||
},
|
||||
([uri]) => Spicetify.URI.isFolder(uri),
|
||||
"x"
|
||||
|
|
@ -324,7 +324,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
|||
|
||||
/* Config settings */
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Animations & Transitions",
|
||||
type: "slider",
|
||||
key: "fadeDuration",
|
||||
|
|
@ -342,9 +342,9 @@ DribbblishShared.config.register({
|
|||
|
||||
// waitForElement because Spicetify is not initialized at startup
|
||||
waitForElement(["#main"], () => {
|
||||
DribbblishShared.config.registerArea({ name: "About", order: 999 });
|
||||
Dribbblish.config.registerArea({ name: "About", order: 999 });
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "About",
|
||||
type: "button",
|
||||
key: "aboutDribbblishInfo",
|
||||
|
|
@ -362,7 +362,7 @@ waitForElement(["#main"], () => {
|
|||
}
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "About",
|
||||
type: "button",
|
||||
key: "aboutDribbblishBugs",
|
||||
|
|
@ -397,7 +397,7 @@ waitForElement(["#main"], () => {
|
|||
### Info for Contributors:
|
||||
|
||||
**Versions**
|
||||
${DribbblishShared.config.getOptions("aboutDribbblishInfo").description}
|
||||
${Dribbblish.config.getOptions("aboutDribbblishInfo").description}
|
||||
|
||||
**Extensions**
|
||||
${$(`script[src^="extensions/"]`)
|
||||
|
|
@ -407,7 +407,7 @@ waitForElement(["#main"], () => {
|
|||
|
||||
**Settings**
|
||||
\`\`\`json
|
||||
${JSON.stringify(DribbblishShared.config.export(), null, 4)}
|
||||
${JSON.stringify(Dribbblish.config.export(), null, 4)}
|
||||
\`\`\`
|
||||
`
|
||||
.split("\n")
|
||||
|
|
@ -422,7 +422,7 @@ waitForElement(["#main"], () => {
|
|||
}
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "About",
|
||||
type: "button",
|
||||
key: "aboutDribbblishChangelog",
|
||||
|
|
@ -498,10 +498,10 @@ function toggleDark(setDark) {
|
|||
}
|
||||
|
||||
function checkDarkLightMode(colors) {
|
||||
const theme = DribbblishShared.config.get("theme");
|
||||
const theme = Dribbblish.config.get("theme");
|
||||
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]);
|
||||
const start = 60 * parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[0]) + parseInt(Dribbblish.config.get("darkModeOnTime").split(":")[1]);
|
||||
const end = 60 * parseInt(Dribbblish.config.get("darkModeOffTime").split(":")[0]) + parseInt(Dribbblish.config.get("darkModeOffTime").split(":")[1]);
|
||||
|
||||
const now = new Date();
|
||||
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
|
||||
setInterval(checkDarkLightMode, 60000);
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Theme",
|
||||
type: "checkbox",
|
||||
key: "dynamicColors",
|
||||
|
|
@ -539,7 +539,7 @@ DribbblishShared.config.register({
|
|||
]
|
||||
});
|
||||
|
||||
DribbblishShared.config.register({
|
||||
Dribbblish.config.register({
|
||||
area: "Theme",
|
||||
type: "select",
|
||||
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;
|
||||
}
|
||||
|
||||
if (!DribbblishShared.config.get("dynamicColors")) {
|
||||
const col = DribbblishShared.config.get("colorOverride");
|
||||
if (!Dribbblish.config.get("dynamicColors")) {
|
||||
const col = Dribbblish.config.get("colorOverride");
|
||||
textColHex = col;
|
||||
sideColHex = col;
|
||||
}
|
||||
|
|
@ -751,8 +751,8 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
|
|||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
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);
|
||||
DribbblishShared.info.set("dev", isDev ? { tooltip: "Dev build", icon: svgCode } : 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);
|
||||
Dribbblish.info.set("dev", isDev ? { tooltip: "Dev build", icon: svgCode } : null);
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
|
@ -763,7 +763,7 @@ waitForElement([".main-topBar-container"], ([topBarContainer]) => {
|
|||
|
||||
// Show "Offline info"
|
||||
window.addEventListener("offline", () =>
|
||||
DribbblishShared.info.set("offline", {
|
||||
Dribbblish.info.set("offline", {
|
||||
tooltip: "Offline",
|
||||
icon: svgWifiSlash,
|
||||
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", " ");
|
||||
|
|
|
|||
Loading…
Reference in a new issue