From 49dd65644a63057f4bb04b95c642f92c67ae860f Mon Sep 17 00:00:00 2001 From: Kaden <69081152+webcrawls@users.noreply.github.com> Date: Thu, 4 Apr 2024 21:53:00 -0400 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=93=9D=20use=20fully-specified=20URL?= =?UTF-8?q?=20for=20embedded=20demo=20gif=20to=20show=20gif=20on=20BetterD?= =?UTF-8?q?iscord's=20plugin=20listing=20site=20(#12)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b68469e..9fd00fb 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,4 @@ white. These changes are mostly to improve readability, and I think they look go > Please be aware, there are still a few outstanding issues with this plugin. > You might need to reload the plugin if you create a new folder. -![Demo gif](/assets/better-folders.gif) \ No newline at end of file +![Demo gif](https://github.com/webcrawls/discord/blob/master/assets/better-folders.gif?raw=true) \ No newline at end of file From bbee35efc3414e359d553bbaee39af87d47db475 Mon Sep 17 00:00:00 2001 From: webcrawls Date: Thu, 4 Apr 2024 22:09:45 -0400 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=A1=20add=20JSDocs=20to=20all=20fu?= =?UTF-8?q?nctions=20and=20most=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pretty-folders.plugin.js | 54 ++++++++++++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 8 deletions(-) diff --git a/pretty-folders.plugin.js b/pretty-folders.plugin.js index 627562b..a76bfe1 100644 --- a/pretty-folders.plugin.js +++ b/pretty-folders.plugin.js @@ -18,21 +18,48 @@ const FOLDER_COLLAPSED = "collapsed__98ad5" const FOLDER_ICON_WRAPPER = "expandedFolderIconWrapper__324c1" const EXPANDED_FOLDER_BACKGROUND = "expandedFolderBackground_b1385f" -// Utility methods to get key elements -// Not exactly happy with how these, but hey, they're one-liners :D -const folderIcon = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(FOLDER_ICON_WRAPPER)[0] : undefined -const folderBackground = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(EXPANDED_FOLDER_BACKGROUND)[0] : undefined -// State. MutationObservers are thrown in here +/** + * Returns the folder icon element, if any, within the provided element. + * + * @param el an HTMLElement + * @returns an HTMLElement or null + */ +const folderIcon = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(FOLDER_ICON_WRAPPER)[0] : null + +/** + * Returns the folder background element, if any, within the provided element. + * + * @param el an HTMLElement + * @returns an HTMLElement or null + */ +const folderBackground = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(EXPANDED_FOLDER_BACKGROUND)[0] : null + +/** + * State that maps a root folder HTML element to it's MutationObserver. + * + * @type {Object.} + */ const observers = {} -// A bit of a hack. "#updateFolder" reads this string when updating a folder. -// If the icon's SVG color is one of these, i.e. "white", which it will be after we make it look better, -// the function will not make any modifications. +/** + * Used for a dumb hack. + * + * If a folder icon's SVG is a colour in this array, the colour won't be changed by the plugin. + * Currently, we change the folder icon's colour to 'white'. So we're telling the plugin to skip any changes that + * we've already made. + * + * @type {string[]} + */ const ignoredColors = [ "white" ] +/** + * Creates a MutationObserver that listens for changes to a folder wrapper. + * + * @param folderElement the folder wrapper element + */ const attachFolder = (folderElement) => { const observer = new MutationObserver(() => setTimeout(updateFolder.bind(this, folderElement), 1)) observer.observe(folderElement, {childList: true, attributes: true}) @@ -40,6 +67,11 @@ const attachFolder = (folderElement) => { updateFolder(folderElement) } +/** + * Removes a MutationObserver for a folder wrapper. + * + * @param folderElement the folder wrapper element + */ const detachFolder = (folderElement) => { observers[folderElement]?.disconnect() observers[folderElement] = null @@ -47,6 +79,7 @@ const detachFolder = (folderElement) => { /** * Updates a folder's background color with the icon color. + * * @param folder the folder wrapper element */ const updateFolder = (folder) => { @@ -77,6 +110,11 @@ const updateFolder = (folder) => { observers[folder] = observer } +/** + * Resets any changes to a folder wrapper. + * + * @param folder the folder wrapper element + */ const resetFolder = (folder) => { const background = folderBackground(folder) background.style.removeProperty("background-color"); From b664673973d50fc339d898ceb357350c27c9da00 Mon Sep 17 00:00:00 2001 From: webcrawls Date: Thu, 4 Apr 2024 22:30:11 -0400 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8=20[PrettyFolders]=20use=20durable?= =?UTF-8?q?=20CSS=20selectors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * replaces the use of classname checks with `querySelectorAll`, using selectors that should (hopefully) resist breakages when a Discord update changes class hashes --- pretty-folders.plugin.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/pretty-folders.plugin.js b/pretty-folders.plugin.js index a76bfe1..a9376e1 100644 --- a/pretty-folders.plugin.js +++ b/pretty-folders.plugin.js @@ -8,16 +8,15 @@ * @updateUrl https://raw.githubusercontent.com/webcrawls/discord/master/pretty-folders.plugin.js */ module.exports = class MyPlugin { - start = () => Array.from(document.getElementsByClassName(FOLDER_WRAPPER)).forEach(attachFolder) - stop = () => Array.from(document.getElementsByClassName(FOLDER_WRAPPER)).forEach(detachFolder) + start = () => Array.from(document.querySelectorAll(FOLDER_WRAPPER)).forEach(attachFolder) + stop = () => Array.from(document.querySelectorAll(FOLDER_WRAPPER)).forEach(detachFolder) }; // Discord HTML classname constants -const FOLDER_WRAPPER = "wrapper__832f2" -const FOLDER_COLLAPSED = "collapsed__98ad5" -const FOLDER_ICON_WRAPPER = "expandedFolderIconWrapper__324c1" -const EXPANDED_FOLDER_BACKGROUND = "expandedFolderBackground_b1385f" - +const FOLDER_WRAPPER = "div[aria-label='Servers'] > div[class^='wrapper__']" +const FOLDER_COLLAPSED = "span[class^='expandedFolderBackground'], span[class^='collapsed__']" +const FOLDER_ICON_WRAPPER = "div[class^='expandedFolderIconWrapper']" +const EXPANDED_FOLDER_BACKGROUND = "span[class^='expandedFolderBackground']" /** * Returns the folder icon element, if any, within the provided element. @@ -25,7 +24,7 @@ const EXPANDED_FOLDER_BACKGROUND = "expandedFolderBackground_b1385f" * @param el an HTMLElement * @returns an HTMLElement or null */ -const folderIcon = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(FOLDER_ICON_WRAPPER)[0] : null +const folderIcon = (el) => "getElementsByClassName" in el ? el.querySelectorAll(FOLDER_ICON_WRAPPER)[0] : null /** * Returns the folder background element, if any, within the provided element. @@ -33,7 +32,7 @@ const folderIcon = (el) => "getElementsByClassName" in el ? el.getElementsByClas * @param el an HTMLElement * @returns an HTMLElement or null */ -const folderBackground = (el) => "getElementsByClassName" in el ? el.getElementsByClassName(EXPANDED_FOLDER_BACKGROUND)[0] : null +const folderBackground = (el) => "getElementsByClassName" in el ? el.querySelectorAll(EXPANDED_FOLDER_BACKGROUND)[0] : null /** * State that maps a root folder HTML element to it's MutationObserver. @@ -95,7 +94,7 @@ const updateFolder = (folder) => { if (!folderColor) return; - if (!background.classList.contains(FOLDER_COLLAPSED) && ignoredColors.indexOf(folderColor) === -1) { + if (!background.matches(FOLDER_COLLAPSED) && ignoredColors.indexOf(folderColor) === -1) { background.style.backgroundColor = folderColor; icon.style.backgroundColor = folderColor svg.style.color = "white" From 68c85597a7d72c494ac05724d13eb49c53b79856 Mon Sep 17 00:00:00 2001 From: webcrawls Date: Thu, 4 Apr 2024 22:30:26 -0400 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20[PrettyFolders]=20bump=20versio?= =?UTF-8?q?n=20to=201.2.3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pretty-folders.plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pretty-folders.plugin.js b/pretty-folders.plugin.js index a9376e1..f08fb99 100644 --- a/pretty-folders.plugin.js +++ b/pretty-folders.plugin.js @@ -3,7 +3,7 @@ * @author webcrawls * @authorLink https://github.com/webcrawls * @description Applies a folder's icon colour to its background when expanded. - * @version 1.2.2 + * @version 1.2.3 * @source https://github.com/webcrawls/discord * @updateUrl https://raw.githubusercontent.com/webcrawls/discord/master/pretty-folders.plugin.js */ From 0217b6951710fe1d1a5d48b1387f4f359445f2ba Mon Sep 17 00:00:00 2001 From: webcrawls Date: Thu, 4 Apr 2024 22:51:29 -0400 Subject: [PATCH 5/7] =?UTF-8?q?=E2=9C=A8=20[PrettyFolders]=20CSS=20selecto?= =?UTF-8?q?r=20fixes=20*=20FOLDER=5FCOLLAPSED:=20replace=20OR=20selector?= =?UTF-8?q?=20with=20AND=20*=20fix=20broken=20folderIcon/folderBackground?= =?UTF-8?q?=20implementations=20*=20add=20extra=20console.info/warn=20-=20?= =?UTF-8?q?was=20useful=20during=20development,=20figure=20it=20may=20be?= =?UTF-8?q?=20handy=20for=20future=20debugging=20purposes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pretty-folders.plugin.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/pretty-folders.plugin.js b/pretty-folders.plugin.js index f08fb99..8ca6f8f 100644 --- a/pretty-folders.plugin.js +++ b/pretty-folders.plugin.js @@ -14,7 +14,7 @@ module.exports = class MyPlugin { // Discord HTML classname constants const FOLDER_WRAPPER = "div[aria-label='Servers'] > div[class^='wrapper__']" -const FOLDER_COLLAPSED = "span[class^='expandedFolderBackground'], span[class^='collapsed__']" +const FOLDER_COLLAPSED = "span[class^='expandedFolderBackground'][class^='collapsed__']" const FOLDER_ICON_WRAPPER = "div[class^='expandedFolderIconWrapper']" const EXPANDED_FOLDER_BACKGROUND = "span[class^='expandedFolderBackground']" @@ -24,7 +24,7 @@ const EXPANDED_FOLDER_BACKGROUND = "span[class^='expandedFolderBackground']" * @param el an HTMLElement * @returns an HTMLElement or null */ -const folderIcon = (el) => "getElementsByClassName" in el ? el.querySelectorAll(FOLDER_ICON_WRAPPER)[0] : null +const folderIcon = (el) => "querySelector" in el ? el.querySelector(FOLDER_ICON_WRAPPER) : null /** * Returns the folder background element, if any, within the provided element. @@ -32,7 +32,7 @@ const folderIcon = (el) => "getElementsByClassName" in el ? el.querySelectorAll( * @param el an HTMLElement * @returns an HTMLElement or null */ -const folderBackground = (el) => "getElementsByClassName" in el ? el.querySelectorAll(EXPANDED_FOLDER_BACKGROUND)[0] : null +const folderBackground = (el) => "querySelector" in el ? el.querySelector(EXPANDED_FOLDER_BACKGROUND) : null /** * State that maps a root folder HTML element to it's MutationObserver. @@ -64,6 +64,8 @@ const attachFolder = (folderElement) => { observer.observe(folderElement, {childList: true, attributes: true}) observers[folderElement] = observer updateFolder(folderElement) + + console.info("[PrettyFolders] attached observer to ", folderElement) } /** @@ -74,6 +76,7 @@ const attachFolder = (folderElement) => { const detachFolder = (folderElement) => { observers[folderElement]?.disconnect() observers[folderElement] = null + console.info("[PrettyFolders] removed observer from ", folderElement) } /** @@ -84,15 +87,22 @@ const detachFolder = (folderElement) => { const updateFolder = (folder) => { const background = folderBackground(folder) if (!background) { - console.warn("could not find background element for", {folder}) + console.warn("[PrettyFolders] could not find background element for", {folder}) return } const icon = folderIcon(folder) + if (!icon) { + console.warn("[PrettyFolders] could not find icon element for", {folder}) + return + } + const svg = icon?.querySelector("svg") const folderColor = svg?.style?.color; - if (!folderColor) return; + if (!folderColor) { + console.info("[PrettyFolders] skipping style changes (no custom colour found), ", folder) + } if (!background.matches(FOLDER_COLLAPSED) && ignoredColors.indexOf(folderColor) === -1) { background.style.backgroundColor = folderColor; @@ -100,6 +110,8 @@ const updateFolder = (folder) => { svg.style.color = "white" svg.style.opacity = 0.7; background.style.opacity = 0.3; + } else { + console.info("[PrettyFolders] skipping style changes (collapsed or ignored colour), ", folder) } folder.addEventListener("click", () => updateFolder(this)) From c42ee9bd2f86b7419c785504b39ba34f325d70d9 Mon Sep 17 00:00:00 2001 From: webcrawls Date: Thu, 4 Apr 2024 22:58:17 -0400 Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=93=9D=20add=20discord=20link=20to=20?= =?UTF-8?q?README.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 9fd00fb..1f7df1f 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ A collection of BetterDiscord plugins to tweak and improve my user experience. +Looking for support or to discuss changes to one of my plugins? Feel free to join my [Discord server](https://discord.gg/6eTbbrXes8)! + ## Installation To install a plugin, you must first ensure [BetterDiscord](#) is installed on your system. From eba1452700ec28060b74043354cb7194f5e9edd1 Mon Sep 17 00:00:00 2001 From: webcrawls Date: Fri, 5 Apr 2024 21:06:28 -0400 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=93=9D=20add=20plugin=20metadata?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * found these properties after searching in the BetterDiscord server. wondering if there's a documented list of properties somewhere? --- pretty-folders.plugin.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/pretty-folders.plugin.js b/pretty-folders.plugin.js index 8ca6f8f..d57341e 100644 --- a/pretty-folders.plugin.js +++ b/pretty-folders.plugin.js @@ -1,10 +1,13 @@ /** * @name PrettyFolders * @author webcrawls - * @authorLink https://github.com/webcrawls - * @description Applies a folder's icon colour to its background when expanded. * @version 1.2.3 + * @description Applies a folder's icon colour to its background when expanded. * @source https://github.com/webcrawls/discord + * @invite 6eTbbrXes8 + * @authorId 1057917670781095977 + * @authorLink https://github.com/webcrawls + * @website https://github.com/webcrawls/discord * @updateUrl https://raw.githubusercontent.com/webcrawls/discord/master/pretty-folders.plugin.js */ module.exports = class MyPlugin {