mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-06-08 01:00:52 +00:00
fix: for spicetify v2.4.0
remove: sidebar config
This commit is contained in:
Julien Maille
parent
cc1781c550
commit
eb6fb146b0
2 changed files with 4 additions and 191 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
let current = '1.4'
|
let current = '1.5'
|
||||||
|
|
||||||
/* css is injected so this works with untouched user.css from Dribbblish */
|
/* css is injected so this works with untouched user.css from Dribbblish */
|
||||||
/* dark theme */
|
/* dark theme */
|
||||||
|
|
@ -36,13 +36,6 @@ document.styleSheets[0].insertRule(`
|
||||||
background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
|
background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
|
||||||
}`)
|
}`)
|
||||||
|
|
||||||
/* unreadable top buttons */
|
|
||||||
document.styleSheets[0].insertRule(`
|
|
||||||
.main-topBar-historyButtons svg {
|
|
||||||
color: var(--spice-text) !important;
|
|
||||||
fill: var(--spice-text) !important;
|
|
||||||
}`)
|
|
||||||
|
|
||||||
document.styleSheets[0].insertRule(`
|
document.styleSheets[0].insertRule(`
|
||||||
.lyrics-lyricsContainer-LyricsBackground {
|
.lyrics-lyricsContainer-LyricsBackground {
|
||||||
background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
|
background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
|
||||||
|
|
@ -55,12 +48,6 @@ document.styleSheets[0].insertRule(`
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}`)
|
}`)
|
||||||
|
|
||||||
/* temporary fix */
|
|
||||||
document.styleSheets[0].insertRule(`
|
|
||||||
.main-shuffleButton-button {
|
|
||||||
order: unset !important;
|
|
||||||
}`)
|
|
||||||
|
|
||||||
document.styleSheets[0].insertRule(`
|
document.styleSheets[0].insertRule(`
|
||||||
.main-navBar-navBar a:hover,
|
.main-navBar-navBar a:hover,
|
||||||
.main-navBar-navBar a:hover span,
|
.main-navBar-navBar a:hover span,
|
||||||
|
|
@ -203,7 +190,7 @@ let systemDark = parseInt(getComputedStyle(document.documentElement).getProperty
|
||||||
toggleDark(systemDark)
|
toggleDark(systemDark)
|
||||||
|
|
||||||
DribbblishShared.configMenu.register();
|
DribbblishShared.configMenu.register();
|
||||||
DribbblishShared.configMenu.subItems.push(new Spicetify.Menu.Item(
|
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
|
||||||
"Dark mode",
|
"Dark mode",
|
||||||
systemDark,
|
systemDark,
|
||||||
(self) => { toggleDark(); self.isEnabled = !self.isEnabled; }
|
(self) => { toggleDark(); self.isEnabled = !self.isEnabled; }
|
||||||
|
|
|
||||||
178
dribbblish.js
178
dribbblish.js
|
|
@ -13,7 +13,7 @@ const DribbblishShared = {
|
||||||
};
|
};
|
||||||
|
|
||||||
DribbblishShared.configMenu.register();
|
DribbblishShared.configMenu.register();
|
||||||
DribbblishShared.configMenu.subItems.push(new Spicetify.Menu.Item(
|
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
|
||||||
"Right expanded cover",
|
"Right expanded cover",
|
||||||
DribbblishShared.rightBigCover,
|
DribbblishShared.rightBigCover,
|
||||||
(self) => {
|
(self) => {
|
||||||
|
|
@ -92,186 +92,12 @@ waitForElement([".Root__main-view"], ([mainView]) => {
|
||||||
mainView.prepend(shadow);
|
mainView.prepend(shadow);
|
||||||
});
|
});
|
||||||
|
|
||||||
waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
|
waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`], ([query]) => {
|
||||||
const fade = document.createElement("div");
|
const fade = document.createElement("div");
|
||||||
fade.id = "dribbblish-sidebar-fade-in";
|
fade.id = "dribbblish-sidebar-fade-in";
|
||||||
queries[0].append(fade);
|
queries[0].append(fade);
|
||||||
});
|
});
|
||||||
|
|
||||||
waitForElement([
|
|
||||||
".main-navBar-entryPoints",
|
|
||||||
".main-rootlist-rootlistPlaylistsScrollNode .os-content",
|
|
||||||
".main-rootlist-rootlistContent"
|
|
||||||
], ([appItems, playlistItems, personalLibrary]) => {
|
|
||||||
const HIDDEN = 0, SHOW = 1, STICKY = 2;
|
|
||||||
|
|
||||||
let buttons = [];
|
|
||||||
let storage = [];
|
|
||||||
let ordered;
|
|
||||||
const list = document.createElement("ul");
|
|
||||||
const hiddenList = document.createElement("ul");
|
|
||||||
hiddenList.id = "dribs-hidden-list";
|
|
||||||
hiddenList.classList.add("hidden-visually");
|
|
||||||
const playlistList = playlistItems.querySelector("ul");
|
|
||||||
playlistList.id = "dribs-playlist-list";
|
|
||||||
playlistItems.prepend(list, hiddenList);
|
|
||||||
|
|
||||||
const up = document.createElement("button"); up.innerText = "Up";
|
|
||||||
const down = document.createElement("button"); down.innerText = "Down";
|
|
||||||
const hide = document.createElement("button");
|
|
||||||
const stick = document.createElement("button");
|
|
||||||
const container = document.createElement("div");
|
|
||||||
container.id = "dribs-sidebar-config";
|
|
||||||
container.append(up, down, hide, stick);
|
|
||||||
|
|
||||||
for (const ele of appItems.children) {
|
|
||||||
ele.dataset.id = ele.querySelector("a").pathname;
|
|
||||||
buttons.push(ele);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const ele of personalLibrary.querySelectorAll("div.GlueDropTarget")) {
|
|
||||||
const link = ele.querySelector("a");
|
|
||||||
if (!link) {
|
|
||||||
ele.dataset.id = "/add";
|
|
||||||
} else {
|
|
||||||
ele.dataset.id = link.pathname;
|
|
||||||
}
|
|
||||||
ele.classList.add("personal-library");
|
|
||||||
buttons.push(ele);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
storage = JSON.parse(localStorage.getItem("dribs-sidebar-config"))
|
|
||||||
if (!Array.isArray(storage)) throw "";
|
|
||||||
} catch {
|
|
||||||
storage = buttons.map(el => [el.dataset.id, SHOW]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function arrangeItems() {
|
|
||||||
const newButtons = [...buttons];
|
|
||||||
const orderedButtons = [];
|
|
||||||
for (const ele of storage) {
|
|
||||||
const index = newButtons.findIndex(a => ele[0] === a?.dataset.id);
|
|
||||||
if (index !== -1) {
|
|
||||||
orderedButtons.push([newButtons[index], ele[1]]);
|
|
||||||
newButtons[index] = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
newButtons
|
|
||||||
.filter(a => a)
|
|
||||||
.forEach(a => orderedButtons.push([a, STICKY]));
|
|
||||||
ordered = orderedButtons;
|
|
||||||
}
|
|
||||||
|
|
||||||
function appendItems() {
|
|
||||||
const toShow = [], toHide = [], toStick = [];
|
|
||||||
for (const el of ordered) {
|
|
||||||
const [ item, status ] = el;
|
|
||||||
if (status === STICKY) {
|
|
||||||
appItems.append(item);
|
|
||||||
toStick.push(el);
|
|
||||||
} else if (status === SHOW) {
|
|
||||||
list.append(item);
|
|
||||||
toShow.push(el);
|
|
||||||
} else {
|
|
||||||
hiddenList.append(item);
|
|
||||||
toHide.push(el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ordered = [ ...toStick, ...toShow, ...toHide ];
|
|
||||||
}
|
|
||||||
|
|
||||||
function writeStorage() {
|
|
||||||
const array = ordered.map(a => [a[0].dataset.id, a[1]]);
|
|
||||||
console.log(array);
|
|
||||||
localStorage.setItem("dribs-sidebar-config", JSON.stringify(array));
|
|
||||||
}
|
|
||||||
|
|
||||||
arrangeItems();
|
|
||||||
appendItems();
|
|
||||||
|
|
||||||
const observer = new MutationObserver(() => {
|
|
||||||
const residues = personalLibrary.querySelectorAll(".main-rootlist-rootlistContent > div.GlueDropTarget");
|
|
||||||
for (const ele of residues) {
|
|
||||||
ele.dataset.id = ele.querySelector("a").pathname;
|
|
||||||
ele.classList.add("personal-library");
|
|
||||||
buttons.push(ele);
|
|
||||||
}
|
|
||||||
arrangeItems();
|
|
||||||
appendItems();
|
|
||||||
});
|
|
||||||
observer.observe(personalLibrary, { childList: true });
|
|
||||||
setTimeout(() => observer.disconnect(), 10000);
|
|
||||||
|
|
||||||
function onSwap(item, dir) {
|
|
||||||
container.remove();
|
|
||||||
const curPos = ordered.findIndex(e => e[0] === item);
|
|
||||||
const newPos = curPos + dir;
|
|
||||||
if (newPos < 0 || newPos > (ordered.length - 1)) return;
|
|
||||||
if (ordered[curPos][1] !== ordered[newPos][1]) return;
|
|
||||||
[ordered[curPos], ordered[newPos]] = [ordered[newPos], ordered[curPos]];
|
|
||||||
appendItems();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onChangeStatus(item, status) {
|
|
||||||
container.remove();
|
|
||||||
const curPos = ordered.findIndex(e => e[0] === item);
|
|
||||||
ordered[curPos][1] = ordered[curPos][1] === status ? SHOW : status;
|
|
||||||
appendItems();
|
|
||||||
}
|
|
||||||
|
|
||||||
function injectInteraction() {
|
|
||||||
document.documentElement.style.setProperty("--sidebar-width", "280px");
|
|
||||||
document.documentElement.classList.remove("sidebar-hide-text");
|
|
||||||
hiddenList.classList.remove("hidden-visually");
|
|
||||||
for (const el of ordered) {
|
|
||||||
el[0].onmouseover = () => {
|
|
||||||
const [ item, status ] = el;
|
|
||||||
const index = ordered.findIndex(a => a === el);
|
|
||||||
if (index === 0 || ordered[index][1] !== ordered[index - 1][1]) {
|
|
||||||
up.disabled = true;
|
|
||||||
} else {
|
|
||||||
up.disabled = false;
|
|
||||||
up.onclick = () => onSwap(item, -1);
|
|
||||||
}
|
|
||||||
if (index === (ordered.length - 1) || ordered[index][1] !== ordered[index + 1][1]) {
|
|
||||||
down.disabled = true;
|
|
||||||
} else {
|
|
||||||
down.disabled = false;
|
|
||||||
down.onclick = () => onSwap(item, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
stick.innerText = status === STICKY ? "Unstick" : "Stick";
|
|
||||||
hide.innerText = status === HIDDEN ? "Unhide" : "Hide";
|
|
||||||
hide.onclick = () => onChangeStatus(item, HIDDEN);
|
|
||||||
stick.onclick = () => onChangeStatus(item, STICKY);
|
|
||||||
|
|
||||||
item.append(container);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeInteraction() {
|
|
||||||
hiddenList.classList.add("hidden-visually");
|
|
||||||
container.remove();
|
|
||||||
ordered.forEach(a => a[0].onmouseover = undefined);
|
|
||||||
writeStorage();
|
|
||||||
}
|
|
||||||
|
|
||||||
DribbblishShared.configMenu.subItems.push(new Spicetify.Menu.Item(
|
|
||||||
"Sidebar config",
|
|
||||||
false,
|
|
||||||
(self) => {
|
|
||||||
self.isEnabled = !self.isEnabled;
|
|
||||||
if (self.isEnabled) {
|
|
||||||
injectInteraction();
|
|
||||||
} else {
|
|
||||||
removeInteraction();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
});
|
|
||||||
|
|
||||||
waitForElement([
|
waitForElement([
|
||||||
".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
|
".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
|
||||||
], ([resizer]) => {
|
], ([resizer]) => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue