From 3151f23d331307f6a98fd24dcb8b36a43ac88fea Mon Sep 17 00:00:00 2001 From: langedev Date: Thu, 25 Jan 2024 20:41:03 -0800 Subject: [PATCH 01/12] Plugin 1.0, and readme --- README.md | 12 ++++++ core.plugin.js | 103 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 README.md create mode 100644 core.plugin.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..08a8afc --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# Chatless Discord + +A discord plugin I wrote to remove the chat from discord + +It additionally causes the discord call pop-out to open when joining a call + +I use this for my personal setup where I use Beeper for my discord channels, and +use Discord exclusively for calling. + +It can be installed by first installing +[Better Discord](https://betterdiscord.app/) and then putting the file into the +plugins folder. diff --git a/core.plugin.js b/core.plugin.js new file mode 100644 index 0000000..c77350f --- /dev/null +++ b/core.plugin.js @@ -0,0 +1,103 @@ +/** + * @name chatlessdisc + * @version 1.0.0 + * @description removes the chatting from disc, as god intended + * @author Julia Lange + * + */ + +const TITLE = "chatless-disc"; + +function getChat() { + let chatsPotentialChild = document.querySelector( + "div > section[aria-label='Channel header']"); + if(chatsPotentialChild) { + let chat = chatsPotentialChild.parentElement; + return chat; + } + return null; +} + +function removeChat() { + let chat = getChat() + if (chat) chat.style = "display: none"; +} +function restoreChat() { + let chat = getChat() + if (chat) chat.style = "display: flex"; +} + +function expandSidebar() { + let userArea = document.querySelector("section[aria-label='User area']"); + let sidebar = userArea.parentElement; + sidebar.style = "width: 100%"; + removeChat(); + + userArea.childNodes.forEach(node => { + node.style = "justify-content: space-between"; + }); +} + +function contractSidebar() { + let userArea = document.querySelector("section[aria-label='User area']"); + let sidebar = userArea.parentElement; + sidebar.style = ""; + restoreChat(); + + userArea.childNodes.forEach(node => { + node.style = ""; + }); +} + +function addChannelClass() { + let dms = document.querySelector("ul[aria-label='Direct Messages'"); + if(dms == null) return ""; + let friendsElement = dms.childNodes[1] + if(friendsElement == null) return ""; + let channelClassName = friendsElement.className.split(" ")[0] + if (channelClassName != "") { + BdApi.DOM.addStyle(TITLE, `.${channelClassName} { + max-width: 100%; + }`); + } + return channelClassName; +} + +function clickPopOut() { + let popOutButton = document.querySelector("button[aria-label='Pop Out'"); + if(popOutButton == null) return; + popOutButton.click(); +} + +class chatlessdisc { + + constructor() { + // this.channelClassName = ""; + this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); + } + + start() { + expandSidebar(); + this.channelClassName = addChannelClass(); + + BdApi.Patcher.instead(TITLE, this.channelActionsModule, + "selectChannel", async (_, args, originalFunction) => { + await originalFunction(...args); + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + }); + BdApi.Patcher.instead(TITLE, this.channelActionsModule, + "selectVoiceChannel", async (_, args, originalFunction) => { + await originalFunction(...args); + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + }); + } + //Turn off and remove all parts of the plugin + stop() { + contractSidebar(); + BdApi.Patcher.unpatchAll(TITLE); + BdApi.DOM.removeStyle(TITLE); + } +} From e0c2c83577a04f20253e89d06f583be40872ed56 Mon Sep 17 00:00:00 2001 From: Julia Lange Date: Thu, 25 Jan 2024 20:41:03 -0800 Subject: [PATCH 02/12] Plugin 1.0, and readme --- README.md | 12 ++++++ core.plugin.js | 103 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 README.md create mode 100644 core.plugin.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..08a8afc --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# Chatless Discord + +A discord plugin I wrote to remove the chat from discord + +It additionally causes the discord call pop-out to open when joining a call + +I use this for my personal setup where I use Beeper for my discord channels, and +use Discord exclusively for calling. + +It can be installed by first installing +[Better Discord](https://betterdiscord.app/) and then putting the file into the +plugins folder. diff --git a/core.plugin.js b/core.plugin.js new file mode 100644 index 0000000..c77350f --- /dev/null +++ b/core.plugin.js @@ -0,0 +1,103 @@ +/** + * @name chatlessdisc + * @version 1.0.0 + * @description removes the chatting from disc, as god intended + * @author Julia Lange + * + */ + +const TITLE = "chatless-disc"; + +function getChat() { + let chatsPotentialChild = document.querySelector( + "div > section[aria-label='Channel header']"); + if(chatsPotentialChild) { + let chat = chatsPotentialChild.parentElement; + return chat; + } + return null; +} + +function removeChat() { + let chat = getChat() + if (chat) chat.style = "display: none"; +} +function restoreChat() { + let chat = getChat() + if (chat) chat.style = "display: flex"; +} + +function expandSidebar() { + let userArea = document.querySelector("section[aria-label='User area']"); + let sidebar = userArea.parentElement; + sidebar.style = "width: 100%"; + removeChat(); + + userArea.childNodes.forEach(node => { + node.style = "justify-content: space-between"; + }); +} + +function contractSidebar() { + let userArea = document.querySelector("section[aria-label='User area']"); + let sidebar = userArea.parentElement; + sidebar.style = ""; + restoreChat(); + + userArea.childNodes.forEach(node => { + node.style = ""; + }); +} + +function addChannelClass() { + let dms = document.querySelector("ul[aria-label='Direct Messages'"); + if(dms == null) return ""; + let friendsElement = dms.childNodes[1] + if(friendsElement == null) return ""; + let channelClassName = friendsElement.className.split(" ")[0] + if (channelClassName != "") { + BdApi.DOM.addStyle(TITLE, `.${channelClassName} { + max-width: 100%; + }`); + } + return channelClassName; +} + +function clickPopOut() { + let popOutButton = document.querySelector("button[aria-label='Pop Out'"); + if(popOutButton == null) return; + popOutButton.click(); +} + +class chatlessdisc { + + constructor() { + // this.channelClassName = ""; + this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); + } + + start() { + expandSidebar(); + this.channelClassName = addChannelClass(); + + BdApi.Patcher.instead(TITLE, this.channelActionsModule, + "selectChannel", async (_, args, originalFunction) => { + await originalFunction(...args); + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + }); + BdApi.Patcher.instead(TITLE, this.channelActionsModule, + "selectVoiceChannel", async (_, args, originalFunction) => { + await originalFunction(...args); + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + }); + } + //Turn off and remove all parts of the plugin + stop() { + contractSidebar(); + BdApi.Patcher.unpatchAll(TITLE); + BdApi.DOM.removeStyle(TITLE); + } +} From 0030582205ebc889d2bb6ec6512ae2a32a7a1bc1 Mon Sep 17 00:00:00 2001 From: langedev Date: Thu, 25 Jan 2024 21:10:34 -0800 Subject: [PATCH 03/12] Change plugin name --- core.plugin.js => chatlessdisc.plugin.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename core.plugin.js => chatlessdisc.plugin.js (100%) diff --git a/core.plugin.js b/chatlessdisc.plugin.js similarity index 100% rename from core.plugin.js rename to chatlessdisc.plugin.js From e77b36734642c85153d3352169772c707f2103d6 Mon Sep 17 00:00:00 2001 From: Julia Lange Date: Thu, 25 Jan 2024 21:10:34 -0800 Subject: [PATCH 04/12] Change plugin name --- core.plugin.js => chatlessdisc.plugin.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename core.plugin.js => chatlessdisc.plugin.js (100%) diff --git a/core.plugin.js b/chatlessdisc.plugin.js similarity index 100% rename from core.plugin.js rename to chatlessdisc.plugin.js From e015e5ab52399a38bf0fc770a29e9888bfdacced Mon Sep 17 00:00:00 2001 From: langedev Date: Fri, 2 Feb 2024 18:56:15 -0800 Subject: [PATCH 05/12] Clean querySelectors and unused variables --- chatlessdisc.plugin.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index c77350f..d13efb0 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -50,7 +50,7 @@ function contractSidebar() { } function addChannelClass() { - let dms = document.querySelector("ul[aria-label='Direct Messages'"); + let dms = document.querySelector("ul[aria-label='Direct Messages']"); if(dms == null) return ""; let friendsElement = dms.childNodes[1] if(friendsElement == null) return ""; @@ -64,7 +64,7 @@ function addChannelClass() { } function clickPopOut() { - let popOutButton = document.querySelector("button[aria-label='Pop Out'"); + let popOutButton = document.querySelector("button[aria-label='Pop Out']"); if(popOutButton == null) return; popOutButton.click(); } @@ -72,7 +72,6 @@ function clickPopOut() { class chatlessdisc { constructor() { - // this.channelClassName = ""; this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); } From e95d1e44c11358602bdb217e16aaf029de242de7 Mon Sep 17 00:00:00 2001 From: Julia Lange Date: Fri, 2 Feb 2024 18:56:15 -0800 Subject: [PATCH 06/12] Clean querySelectors and unused variables --- chatlessdisc.plugin.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index c77350f..d13efb0 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -50,7 +50,7 @@ function contractSidebar() { } function addChannelClass() { - let dms = document.querySelector("ul[aria-label='Direct Messages'"); + let dms = document.querySelector("ul[aria-label='Direct Messages']"); if(dms == null) return ""; let friendsElement = dms.childNodes[1] if(friendsElement == null) return ""; @@ -64,7 +64,7 @@ function addChannelClass() { } function clickPopOut() { - let popOutButton = document.querySelector("button[aria-label='Pop Out'"); + let popOutButton = document.querySelector("button[aria-label='Pop Out']"); if(popOutButton == null) return; popOutButton.click(); } @@ -72,7 +72,6 @@ function clickPopOut() { class chatlessdisc { constructor() { - // this.channelClassName = ""; this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); } From 61fd05bec1e34441de09b5e6b3c19c96976c8a5c Mon Sep 17 00:00:00 2001 From: langedev Date: Fri, 2 Feb 2024 20:44:30 -0800 Subject: [PATCH 07/12] Add patch function for ez debugging --- patch.sh | 3 +++ 1 file changed, 3 insertions(+) create mode 100755 patch.sh diff --git a/patch.sh b/patch.sh new file mode 100755 index 0000000..bbb04e9 --- /dev/null +++ b/patch.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +cp ./chatlessdisc.plugin.js $XDG_CONFIG_HOME/BetterDiscord/plugins/debugchatlessdisc.plugin.js From 2587f898e38d0e4250ca2d25df2541184e1258ef Mon Sep 17 00:00:00 2001 From: Julia Lange Date: Fri, 2 Feb 2024 20:44:30 -0800 Subject: [PATCH 08/12] Add patch function for ez debugging --- patch.sh | 3 +++ 1 file changed, 3 insertions(+) create mode 100755 patch.sh diff --git a/patch.sh b/patch.sh new file mode 100755 index 0000000..bbb04e9 --- /dev/null +++ b/patch.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +cp ./chatlessdisc.plugin.js $XDG_CONFIG_HOME/BetterDiscord/plugins/debugchatlessdisc.plugin.js From 05618c8a539dc997631adcd1da501ebad8c2d7da Mon Sep 17 00:00:00 2001 From: langedev Date: Fri, 2 Feb 2024 20:46:00 -0800 Subject: [PATCH 09/12] Add button to toggle chat hiding (For heathens) adds a button to toggle the chat --- chatlessdisc.plugin.js | 83 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 75 insertions(+), 8 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index d13efb0..8936ea8 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -1,6 +1,6 @@ /** * @name chatlessdisc - * @version 1.0.0 + * @version 1.1.0 * @description removes the chatting from disc, as god intended * @author Julia Lange * @@ -69,33 +69,100 @@ function clickPopOut() { popOutButton.click(); } +function addToggleButton(button) { + let muteButton = document.querySelector("div > button[aria-label='Mute']"); + if(muteButton == null) return; + let buttonList = muteButton.parentElement; + buttonList.prepend(button) + + enablePortraitStyle() +} + +function enablePortraitStyle() { + let portrait = document.querySelector("div[aria-label='Set Status']"); + if(portrait == null) return; + portrait.style = "width: 100%; min-width: 0px"; +} + +function disablePortaitStyle() { + let portrait = document.querySelector("div[aria-label='Set Status']"); + if(portrait == null) return; + portrait.style = ""; +} + +function enableChanges() { + expandSidebar(); + + return true +} + +function disableChanges() { + contractSidebar(); + + return false +} + +function createToggleButton(onClickFunction) { + let toggleButton = document.createElement("button"); + toggleButton.role = "switch"; + toggleButton.ariaLabel = "Chattless Toggle"; + toggleButton.textContent = "💬"; + + // Had to style instead of use the class, because otherwise the class + // wouldn't work + toggleButton.style = "height: 32px; width: 32px; border-radius: 4px; \ + background: transparent;" + toggleButton.className = "chattless_button" + toggleButton.addEventListener("click", onClickFunction); + + return toggleButton; +} + class chatlessdisc { constructor() { + this.enabled = false; this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); + + this.toggleButton = createToggleButton(async () => { + if(this.enabled) + this.enabled = disableChanges(); + else + this.enabled = enableChanges(); + }); } start() { - expandSidebar(); + this.enabled = enableChanges(); + addToggleButton(this.toggleButton); this.channelClassName = addChannelClass(); + BdApi.DOM.addStyle(TITLE, `.chattless_button:hover { + background: rgba(255,255,255,0.125) !important; + }`); + BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectChannel", async (_, args, originalFunction) => { await originalFunction(...args); - removeChat(); - if (this.channelClassName == "") - this.channelClassName = addChannelClass(); + if (this.enabled) { + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + } }); BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectVoiceChannel", async (_, args, originalFunction) => { await originalFunction(...args); - await this.channelActionsModule.selectPrivateChannel(args[0]); - clickPopOut(); + if (this.enabled) { + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + } }); } //Turn off and remove all parts of the plugin stop() { - contractSidebar(); + this.toggleButton.remove() + disableChanges(); BdApi.Patcher.unpatchAll(TITLE); BdApi.DOM.removeStyle(TITLE); } From 9c3a07a8a25e553744abd86be27d6332388cc464 Mon Sep 17 00:00:00 2001 From: Julia Lange Date: Fri, 2 Feb 2024 20:46:00 -0800 Subject: [PATCH 10/12] Add button to toggle chat hiding (For heathens) adds a button to toggle the chat --- chatlessdisc.plugin.js | 83 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 75 insertions(+), 8 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index d13efb0..8936ea8 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -1,6 +1,6 @@ /** * @name chatlessdisc - * @version 1.0.0 + * @version 1.1.0 * @description removes the chatting from disc, as god intended * @author Julia Lange * @@ -69,33 +69,100 @@ function clickPopOut() { popOutButton.click(); } +function addToggleButton(button) { + let muteButton = document.querySelector("div > button[aria-label='Mute']"); + if(muteButton == null) return; + let buttonList = muteButton.parentElement; + buttonList.prepend(button) + + enablePortraitStyle() +} + +function enablePortraitStyle() { + let portrait = document.querySelector("div[aria-label='Set Status']"); + if(portrait == null) return; + portrait.style = "width: 100%; min-width: 0px"; +} + +function disablePortaitStyle() { + let portrait = document.querySelector("div[aria-label='Set Status']"); + if(portrait == null) return; + portrait.style = ""; +} + +function enableChanges() { + expandSidebar(); + + return true +} + +function disableChanges() { + contractSidebar(); + + return false +} + +function createToggleButton(onClickFunction) { + let toggleButton = document.createElement("button"); + toggleButton.role = "switch"; + toggleButton.ariaLabel = "Chattless Toggle"; + toggleButton.textContent = "💬"; + + // Had to style instead of use the class, because otherwise the class + // wouldn't work + toggleButton.style = "height: 32px; width: 32px; border-radius: 4px; \ + background: transparent;" + toggleButton.className = "chattless_button" + toggleButton.addEventListener("click", onClickFunction); + + return toggleButton; +} + class chatlessdisc { constructor() { + this.enabled = false; this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); + + this.toggleButton = createToggleButton(async () => { + if(this.enabled) + this.enabled = disableChanges(); + else + this.enabled = enableChanges(); + }); } start() { - expandSidebar(); + this.enabled = enableChanges(); + addToggleButton(this.toggleButton); this.channelClassName = addChannelClass(); + BdApi.DOM.addStyle(TITLE, `.chattless_button:hover { + background: rgba(255,255,255,0.125) !important; + }`); + BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectChannel", async (_, args, originalFunction) => { await originalFunction(...args); - removeChat(); - if (this.channelClassName == "") - this.channelClassName = addChannelClass(); + if (this.enabled) { + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + } }); BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectVoiceChannel", async (_, args, originalFunction) => { await originalFunction(...args); - await this.channelActionsModule.selectPrivateChannel(args[0]); - clickPopOut(); + if (this.enabled) { + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + } }); } //Turn off and remove all parts of the plugin stop() { - contractSidebar(); + this.toggleButton.remove() + disableChanges(); BdApi.Patcher.unpatchAll(TITLE); BdApi.DOM.removeStyle(TITLE); } From 039b595256554fee769c69345752816045755b94 Mon Sep 17 00:00:00 2001 From: Badtz Date: Sat, 3 Feb 2024 14:11:16 -0800 Subject: [PATCH 11/12] add svg --- chatlessdisc.plugin.js | 84 ++++++++++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 28 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index 8936ea8..76d78d2 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -11,7 +11,7 @@ const TITLE = "chatless-disc"; function getChat() { let chatsPotentialChild = document.querySelector( "div > section[aria-label='Channel header']"); - if(chatsPotentialChild) { + if (chatsPotentialChild) { let chat = chatsPotentialChild.parentElement; return chat; } @@ -51,9 +51,9 @@ function contractSidebar() { function addChannelClass() { let dms = document.querySelector("ul[aria-label='Direct Messages']"); - if(dms == null) return ""; + if (dms == null) return ""; let friendsElement = dms.childNodes[1] - if(friendsElement == null) return ""; + if (friendsElement == null) return ""; let channelClassName = friendsElement.className.split(" ")[0] if (channelClassName != "") { BdApi.DOM.addStyle(TITLE, `.${channelClassName} { @@ -65,13 +65,13 @@ function addChannelClass() { function clickPopOut() { let popOutButton = document.querySelector("button[aria-label='Pop Out']"); - if(popOutButton == null) return; + if (popOutButton == null) return; popOutButton.click(); } function addToggleButton(button) { let muteButton = document.querySelector("div > button[aria-label='Mute']"); - if(muteButton == null) return; + if (muteButton == null) return; let buttonList = muteButton.parentElement; buttonList.prepend(button) @@ -80,13 +80,13 @@ function addToggleButton(button) { function enablePortraitStyle() { let portrait = document.querySelector("div[aria-label='Set Status']"); - if(portrait == null) return; + if (portrait == null) return; portrait.style = "width: 100%; min-width: 0px"; } function disablePortaitStyle() { let portrait = document.querySelector("div[aria-label='Set Status']"); - if(portrait == null) return; + if (portrait == null) return; portrait.style = ""; } @@ -106,18 +106,46 @@ function createToggleButton(onClickFunction) { let toggleButton = document.createElement("button"); toggleButton.role = "switch"; toggleButton.ariaLabel = "Chattless Toggle"; - toggleButton.textContent = "💬"; - - // Had to style instead of use the class, because otherwise the class - // wouldn't work - toggleButton.style = "height: 32px; width: 32px; border-radius: 4px; \ - background: transparent;" - toggleButton.className = "chattless_button" + toggleButton.className = "chattless_button"; + toggleButton.style.cssText = ` + display: flex; + align-items: center; + justify-content: center; + background: transparent;` toggleButton.addEventListener("click", onClickFunction); + const div = document.createElement("div"); + div.style.cssText = ` + display: flex; + align-items: center; + justify-content: center;`; + + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("aria-hidden", "false"); + svg.setAttribute("width", "20"); + svg.setAttribute("height", "20"); + svg.setAttribute("viewBox", "0 0 512.08 512.08"); + + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("fill", "var(--interactive-normal)"); + path.setAttribute("d", "M256.04,0C134.28,0,35.208,97.248,35.208,216.8c0,66.56,30.208,127.776,83.168,169.216V512.08 \ + l103.552-81.2c11.536,1.776,22.992,2.688,34.112,2.688c121.76,0,220.832-97.232,220.832-216.768C476.872,97.248,377.8,0,256.04,0z \ + M444.872,216.8c0,44.336-16.064,85.056-42.768,116.928L140.408,71.024C172.408,46.656,212.456,32,256.04,32 \ + C360.168,32,444.872,114.912,444.872,216.8z M220.552,398.192l-7.104-1.312l-63.056,49.456v-76.432l-6.592-4.8 \ + C95.128,329.776,67.224,275.712,67.224,216.8c0-47.872,18.848-91.408,49.472-124.256l262.768,263.792 \ + c-33.136,28.096-76.224,45.232-123.408,45.232C244.536,401.568,232.6,400.416,220.552,398.192z"); + + svg.appendChild(path); + div.appendChild(svg); + toggleButton.appendChild(div); + return toggleButton; } + + + + class chatlessdisc { constructor() { @@ -125,7 +153,7 @@ class chatlessdisc { this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); this.toggleButton = createToggleButton(async () => { - if(this.enabled) + if (this.enabled) this.enabled = disableChanges(); else this.enabled = enableChanges(); @@ -143,21 +171,21 @@ class chatlessdisc { BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectChannel", async (_, args, originalFunction) => { - await originalFunction(...args); - if (this.enabled) { - removeChat(); - if (this.channelClassName == "") - this.channelClassName = addChannelClass(); - } - }); + await originalFunction(...args); + if (this.enabled) { + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + } + }); BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectVoiceChannel", async (_, args, originalFunction) => { - await originalFunction(...args); - if (this.enabled) { - await this.channelActionsModule.selectPrivateChannel(args[0]); - clickPopOut(); - } - }); + await originalFunction(...args); + if (this.enabled) { + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + } + }); } //Turn off and remove all parts of the plugin stop() { From 7250328b0bd8dce1f4cc3c2761552f1bf8b44c81 Mon Sep 17 00:00:00 2001 From: Badtz Date: Sat, 3 Feb 2024 14:11:16 -0800 Subject: [PATCH 12/12] add svg --- chatlessdisc.plugin.js | 84 ++++++++++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 28 deletions(-) diff --git a/chatlessdisc.plugin.js b/chatlessdisc.plugin.js index 8936ea8..76d78d2 100644 --- a/chatlessdisc.plugin.js +++ b/chatlessdisc.plugin.js @@ -11,7 +11,7 @@ const TITLE = "chatless-disc"; function getChat() { let chatsPotentialChild = document.querySelector( "div > section[aria-label='Channel header']"); - if(chatsPotentialChild) { + if (chatsPotentialChild) { let chat = chatsPotentialChild.parentElement; return chat; } @@ -51,9 +51,9 @@ function contractSidebar() { function addChannelClass() { let dms = document.querySelector("ul[aria-label='Direct Messages']"); - if(dms == null) return ""; + if (dms == null) return ""; let friendsElement = dms.childNodes[1] - if(friendsElement == null) return ""; + if (friendsElement == null) return ""; let channelClassName = friendsElement.className.split(" ")[0] if (channelClassName != "") { BdApi.DOM.addStyle(TITLE, `.${channelClassName} { @@ -65,13 +65,13 @@ function addChannelClass() { function clickPopOut() { let popOutButton = document.querySelector("button[aria-label='Pop Out']"); - if(popOutButton == null) return; + if (popOutButton == null) return; popOutButton.click(); } function addToggleButton(button) { let muteButton = document.querySelector("div > button[aria-label='Mute']"); - if(muteButton == null) return; + if (muteButton == null) return; let buttonList = muteButton.parentElement; buttonList.prepend(button) @@ -80,13 +80,13 @@ function addToggleButton(button) { function enablePortraitStyle() { let portrait = document.querySelector("div[aria-label='Set Status']"); - if(portrait == null) return; + if (portrait == null) return; portrait.style = "width: 100%; min-width: 0px"; } function disablePortaitStyle() { let portrait = document.querySelector("div[aria-label='Set Status']"); - if(portrait == null) return; + if (portrait == null) return; portrait.style = ""; } @@ -106,18 +106,46 @@ function createToggleButton(onClickFunction) { let toggleButton = document.createElement("button"); toggleButton.role = "switch"; toggleButton.ariaLabel = "Chattless Toggle"; - toggleButton.textContent = "💬"; - - // Had to style instead of use the class, because otherwise the class - // wouldn't work - toggleButton.style = "height: 32px; width: 32px; border-radius: 4px; \ - background: transparent;" - toggleButton.className = "chattless_button" + toggleButton.className = "chattless_button"; + toggleButton.style.cssText = ` + display: flex; + align-items: center; + justify-content: center; + background: transparent;` toggleButton.addEventListener("click", onClickFunction); + const div = document.createElement("div"); + div.style.cssText = ` + display: flex; + align-items: center; + justify-content: center;`; + + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("aria-hidden", "false"); + svg.setAttribute("width", "20"); + svg.setAttribute("height", "20"); + svg.setAttribute("viewBox", "0 0 512.08 512.08"); + + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("fill", "var(--interactive-normal)"); + path.setAttribute("d", "M256.04,0C134.28,0,35.208,97.248,35.208,216.8c0,66.56,30.208,127.776,83.168,169.216V512.08 \ + l103.552-81.2c11.536,1.776,22.992,2.688,34.112,2.688c121.76,0,220.832-97.232,220.832-216.768C476.872,97.248,377.8,0,256.04,0z \ + M444.872,216.8c0,44.336-16.064,85.056-42.768,116.928L140.408,71.024C172.408,46.656,212.456,32,256.04,32 \ + C360.168,32,444.872,114.912,444.872,216.8z M220.552,398.192l-7.104-1.312l-63.056,49.456v-76.432l-6.592-4.8 \ + C95.128,329.776,67.224,275.712,67.224,216.8c0-47.872,18.848-91.408,49.472-124.256l262.768,263.792 \ + c-33.136,28.096-76.224,45.232-123.408,45.232C244.536,401.568,232.6,400.416,220.552,398.192z"); + + svg.appendChild(path); + div.appendChild(svg); + toggleButton.appendChild(div); + return toggleButton; } + + + + class chatlessdisc { constructor() { @@ -125,7 +153,7 @@ class chatlessdisc { this.channelActionsModule = BdApi.findModuleByProps('selectChannel'); this.toggleButton = createToggleButton(async () => { - if(this.enabled) + if (this.enabled) this.enabled = disableChanges(); else this.enabled = enableChanges(); @@ -143,21 +171,21 @@ class chatlessdisc { BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectChannel", async (_, args, originalFunction) => { - await originalFunction(...args); - if (this.enabled) { - removeChat(); - if (this.channelClassName == "") - this.channelClassName = addChannelClass(); - } - }); + await originalFunction(...args); + if (this.enabled) { + removeChat(); + if (this.channelClassName == "") + this.channelClassName = addChannelClass(); + } + }); BdApi.Patcher.instead(TITLE, this.channelActionsModule, "selectVoiceChannel", async (_, args, originalFunction) => { - await originalFunction(...args); - if (this.enabled) { - await this.channelActionsModule.selectPrivateChannel(args[0]); - clickPopOut(); - } - }); + await originalFunction(...args); + if (this.enabled) { + await this.channelActionsModule.selectPrivateChannel(args[0]); + clickPopOut(); + } + }); } //Turn off and remove all parts of the plugin stop() {