From eb6fb146b0105d4710e33c6e6b5d5b619fa889b1 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 25 Jun 2021 23:39:47 +0200 Subject: [PATCH] fix: for spicetify v2.4.0 remove: sidebar config --- dribbblish-dynamic.js | 17 +--- dribbblish.js | 178 +----------------------------------------- 2 files changed, 4 insertions(+), 191 deletions(-) diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index 8ab5501..5659e8b 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -1,4 +1,4 @@ -let current = '1.4' +let current = '1.5' /* css is injected so this works with untouched user.css from Dribbblish */ /* dark theme */ @@ -36,13 +36,6 @@ document.styleSheets[0].insertRule(` 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(` .lyrics-lyricsContainer-LyricsBackground { 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; }`) -/* temporary fix */ -document.styleSheets[0].insertRule(` - .main-shuffleButton-button { - order: unset !important; - }`) - document.styleSheets[0].insertRule(` .main-navBar-navBar a:hover, .main-navBar-navBar a:hover span, @@ -203,7 +190,7 @@ let systemDark = parseInt(getComputedStyle(document.documentElement).getProperty toggleDark(systemDark) DribbblishShared.configMenu.register(); -DribbblishShared.configMenu.subItems.push(new Spicetify.Menu.Item( +DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item( "Dark mode", systemDark, (self) => { toggleDark(); self.isEnabled = !self.isEnabled; } diff --git a/dribbblish.js b/dribbblish.js index c7e81ec..ace0105 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -13,7 +13,7 @@ const DribbblishShared = { }; DribbblishShared.configMenu.register(); -DribbblishShared.configMenu.subItems.push(new Spicetify.Menu.Item( +DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item( "Right expanded cover", DribbblishShared.rightBigCover, (self) => { @@ -92,186 +92,12 @@ waitForElement([".Root__main-view"], ([mainView]) => { mainView.prepend(shadow); }); -waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => { +waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`], ([query]) => { const fade = document.createElement("div"); fade.id = "dribbblish-sidebar-fade-in"; 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([ ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input" ], ([resizer]) => {