From 039b595256554fee769c69345752816045755b94 Mon Sep 17 00:00:00 2001 From: Badtz Date: Sat, 3 Feb 2024 14:11:16 -0800 Subject: [PATCH] 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() {