From ae7d38632b53024addd847a74007a32551a65672 Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Fri, 26 Apr 2019 22:39:14 +0200 Subject: [PATCH] Update ServerFolders.plugin.js --- Plugins/ServerFolders/ServerFolders.plugin.js | 147 +++++++++++------- 1 file changed, 94 insertions(+), 53 deletions(-) diff --git a/Plugins/ServerFolders/ServerFolders.plugin.js b/Plugins/ServerFolders/ServerFolders.plugin.js index a5afa3cfdd..818e5a6122 100644 --- a/Plugins/ServerFolders/ServerFolders.plugin.js +++ b/Plugins/ServerFolders/ServerFolders.plugin.js @@ -3,7 +3,7 @@ class ServerFolders { getName () {return "ServerFolders";} - getVersion () {return "6.1.8";} + getVersion () {return "6.1.9";} getAuthor () {return "DevilBro";} @@ -11,15 +11,15 @@ class ServerFolders { initConstructor () { this.changelog = { - "added":[["Nothing","Some of you people seriously need to change your way of how you take stuff for granted. The amount of people not properly researching whether my stuff is currently being fixed and spamming me with stupid questions in DMs was way too damn high. Some of you better donate to me, because at the end of the day I am still doing this shit for free"]], - "fixed":[["New Classes","Fixed the plugin for the new class update, still need to copy the hover behaviour of the native server elements but most stuff works for now"]] + "added":[["Everything","Thanks you for all the people that actually reached out to me and donated to me <3"]], + "fixed":[["Rest","Fixed all left over bugs (Hover animation, Servers in Folders not updating properly, Audio/Video Icon being stuck on a Folder, unread pill not showing on Folders, Folder Icon Colors not being customizable)"]] }; this.labels = {}; this.patchModules = { "Guilds":["componentDidMount","componentWillUnmount"], - "Guild":["componentDidMount","componentDidUpdate","componentWillUnmount"], + "Guild":["componentDidMount","componentWillUnmount"], "StandardSidebarView":"componentWillUnmount" }; @@ -73,11 +73,11 @@ class ServerFolders { ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCNS.guildinner + BDFDB.dotCN.guildiconwrapper}, ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCNS.guildinner + BDFDB.dotCNS.guildiconwrapper + BDFDB.dotCN.guildicon} { border-radius: 50% !important; - width: 50px !important; - height: 50px !important; + width: 48px !important; + height: 48px !important; } - ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCN.guildlowerbadge}, - ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCN.guildupperbadge} { + ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCN.guildpillwrapper}, + ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCN.guildbadgewrapper} { display: none !important; } ${BDFDB.dotCN.guildouter}.serverfolders-dragpreview ${BDFDB.dotCN.guildiconacronym} { @@ -169,18 +169,18 @@ class ServerFolders { this.folderIconMarkup = `
- +
- + - + @@ -425,6 +425,7 @@ class ServerFolders { BDFDB.loadMessage(this); this.GuildUtils = BDFDB.WebModules.findByProperties("getGuilds","getGuild"); + this.CurrentGuildStore = BDFDB.WebModules.findByProperties("getLastSelectedGuildId"); this.DiscordConstants = BDFDB.WebModules.findByProperties("Permissions", "ActivityTypes", "StatusTypes"); this.Animations = BDFDB.WebModules.findByProperties("spring"); @@ -564,7 +565,7 @@ class ServerFolders { } processGuild (instance, wrapper, methodnames) { - if (instance.currentType = "GUILD" && instance.props && instance.props.guild) { + if (instance.currentType && (instance.currentType == "GUILD" || instance.currentType.ownerId) && instance.props && instance.props.guild) { if (methodnames.includes("componentDidMount")) { let folderdiv = this.getFolderOfServer(instance.props.guild); if (folderdiv && !wrapper.getAttribute("folder")) { @@ -601,18 +602,6 @@ class ServerFolders { this.updateFolderNotifications(folderdiv); } } - if (methodnames.includes("componentDidUpdate") && !wrapper.ServerFoldersChanged && wrapper.ServerFoldersCachedHTML != wrapper.outerHTML) { - let folderdiv = this.getFolderOfServer(instance.props.guild); - if (folderdiv) { - wrapper.ServerFoldersChanged = true; - setTimeout(() => { - wrapper.ServerFoldersCachedHTML = wrapper.outerHTML; - this.updateCopyInFolderContent(wrapper, folderdiv); - this.updateFolderNotifications(folderdiv); - }, 500); - setTimeout(() => {delete wrapper.ServerFoldersChanged;}, 1000); - } - } } } @@ -1089,14 +1078,40 @@ class ServerFolders { if (!Node.prototype.isPrototypeOf(guilddiv) || !folderdiv) return; guilddiv.setAttribute("folder", folderdiv.id); BDFDB.toggleEles(guilddiv, false); + if (guilddiv.ServerFoldersChangeObserver && typeof guilddiv.ServerFoldersChangeObserver.disconnect == "function") guilddiv.ServerFoldersChangeObserver.disconnect(); + guilddiv.ServerFoldersChangeObserver = new MutationObserver(changes => {changes.forEach(change => { + if (change.type == "attributes" && change.attributeName == "draggable" || change.attributeName == "source") return; + let updatefolder = false, updatecopy = false; + if (change.type == "attributes" && change.attributeName == "style" && BDFDB.containsClass(change.target, BDFDB.disCN.guildpillitem)) { + let opacity = change.target.style.getPropertyValue("opacity"); + let height = change.target.style.getPropertyValue("height"); + let oldopacity = change.oldValue.split("opacity: ")[1].split(";")[0]; + let oldheight = change.oldValue.split("height: ")[1].split(";")[0]; + if (parseInt(opacity*10) == parseFloat(opacity*10) && oldopacity != opacity || parseInt(height*10) == parseFloat(height*10) && oldheight != height) { + updatefolder = true; + updatecopy = true; + } + } + if (change.type == "attributes" && change.attributeName == "style" && (BDFDB.containsClass(change.target, BDFDB.disCN.guildupperbadge) || BDFDB.containsClass(change.target, BDFDB.disCN.guildlowerbadge))) { + let opacity = change.target.style.getPropertyValue("opacity"); + let oldopacity = change.oldValue.split("opacity: ")[1].split(";")[0]; + if (parseInt(opacity*10) == parseFloat(opacity*10) && oldopacity != opacity) { + updatefolder = true; + updatecopy = true; + } + } + if (updatecopy) this.updateCopyInFolderContent(guilddiv, folderdiv); + if (updatefolder) this.updateFolderNotifications(folderdiv); + });}); + guilddiv.ServerFoldersChangeObserver.observe(guilddiv, {attributes:true, childList:true, characterData: true, subtree:true, attributeOldValue:true}); } unhideServer (guilddiv) { if (!Node.prototype.isPrototypeOf(guilddiv)) return; guilddiv.removeAttribute("folder"); BDFDB.toggleEles(guilddiv, true); - delete guilddiv.ServerFoldersChanged; - delete guilddiv.ServerFoldersCachedHTML; + if (guilddiv.ServerFoldersChangeObserver && typeof guilddiv.ServerFoldersChangeObserver.disconnect == "function") guilddiv.ServerFoldersChangeObserver.disconnect(); + delete guilddiv.ServerFoldersChangeObserver; } toggleFolderContent (forceOpenClose) { @@ -1183,17 +1198,26 @@ class ServerFolders { if (!guilddiv || !folderdiv || !this.foldercontent) return; let info = this.GuildUtils.getGuild(BDFDB.getServerID(guilddiv)); if (!info) return; + let props = BDFDB.getReactValue(guilddiv, "return.stateNode.props"); let guildcopy = guilddiv.cloneNode(true); let guildcopyinner = guildcopy.querySelector(BDFDB.dotCN.guildcontainer); + let guildiconwrapper = guildcopy.querySelector(BDFDB.dotCN.guildiconwrapper); + let guildpillitem = guildcopy.querySelector(BDFDB.dotCN.guildpillitem); guildcopy.setAttribute("guild", info.id); guildcopy.setAttribute("folder", folderdiv.id); + guildiconwrapper.style.setProperty("border-radius", props.selected ? "30%" : "50%"); + guildiconwrapper.style.setProperty("overflow", "hidden"); + guildpillitem.style.setProperty("opacity", props.selected ? 1 : (props.unread ? 0.7 : 0)); + guildpillitem.style.setProperty("height", props.selected ? "40px" : "8px"); + guildpillitem.style.setProperty("transform", "translate3d(0px, 0px, 0px)"); guildcopy.querySelector("mask").setAttribute("id", "SERVERFOLDERSCOPY" + info.id); + guildcopy.querySelector("mask path").setAttribute("d", "M0 0 l50 0l0 50l-50 0l0 -50Z"); guildcopy.querySelector("foreignObject").setAttribute("mask", "url(#SERVERFOLDERSCOPY" + info.id + ")"); BDFDB.addClass(guildcopy, "copy"); BDFDB.toggleEles(guildcopy, true); guildcopyinner.addEventListener("mouseenter", () => { let EditServersData = BDFDB.isPluginEnabled("EditServers") ? BDFDB.loadData(info.id, "EditServers", "servers") : null; - if (EditServersData) bdplugins.EditServers.plugin.changeTooltip(info, guildcopy, "right"); + if (EditServersData) bdplugins.EditServers.plugin.changeTooltip(info, guildcopyinner, "right"); else { let folderData = BDFDB.loadData(folderdiv.id, this, "folders") || {}; let bgColor = BDFDB.colorCONVERT(folderData.copyTooltipColor ? folderData.color3 : null, "RGB"); @@ -1324,15 +1348,18 @@ class ServerFolders { let folderdivbadges = folderdiv.querySelector(BDFDB.dotCN.guildbadgewrapper); let masks = folderdiv.querySelectorAll("mask rect"); - let mentions = 0, audioenabled = false, videoenabled = false; + let mentions = 0, unread = false, audioenabled = false, videoenabled = false; includedServers.forEach(div => { let props = BDFDB.getReactValue(div, "return.stateNode.props"); mentions += parseInt(props.badge); + if (props.unread) unread = true; if (props.audio) audioenabled = true; if (props.video) videoenabled = true; }); + folderdiv.querySelector(BDFDB.dotCN.guildpillitem).style.setProperty("opacity", unread ? 0.7 : 0); + let showcount = BDFDB.getData("showCountBadge", this, "settings"); let notificationbadge = folderdiv.querySelector(BDFDB.dotCN.guildlowerbadge + ".notifications"); let countbadge = folderdiv.querySelector(BDFDB.dotCN.guildupperbadge + ".count"); @@ -1354,10 +1381,10 @@ class ServerFolders { masks[2].setAttribute("width", `${includedServers.length > 99 ? 38 : (includedServers.length > 9 ? 30 : 24)}`); if (audioenabled) folderdivbadges.appendChild(BDFDB.htmlToElement(`
`)); - else BDFDB.removeEles(folderdivbadges.querySelector(".audio-badge")); + else BDFDB.removeEles(folderdivbadges.querySelectorAll(".audio-badge")); if (videoenabled) folderdivbadges.appendChild(BDFDB.htmlToElement(`
`)); - else BDFDB.removeEles(folderdivbadges.querySelector(".video-badge")); + else BDFDB.removeEles(folderdivbadges.querySelectorAll(".video-badge")); if (document.contains(folderdiv) && BDFDB.containsClass(folderdiv, "open") && !this.foldercontent.querySelector(`[folder="${folderdiv.id}"]`)) this.openCloseFolder(folderdiv); } @@ -1374,42 +1401,56 @@ class ServerFolders { } addHoverBehaviour (div) { - return; - /* based on stuff from Zerebos */ - let divinner = div.querySelector(BDFDB.dotCN.guildinner); - let divicon = div.querySelector(BDFDB.dotCN.guildicon); - let backgroundColor = new this.Animations.Value(0); - backgroundColor - .interpolate({ - inputRange: [0, 1], - outputRange: [this.DiscordConstants.Colors.CHANNELS_GREY, this.DiscordConstants.Colors.BRAND_PURPLE] - }) - .addListener((value) => { - if (BDFDB.containsClass(divicon, BDFDB.disCN.avatarnoicon)) { - let comp = BDFDB.colorCONVERT(value.value, "RGBCOMP"); - if (comp) divinner.style.setProperty("background-color", `rgb(${comp[0]}, ${comp[1]}, ${comp[2]})`); - } - }); + let diviconwrapper = div.querySelector(BDFDB.dotCN.guildiconwrapper); + let divpillitem = div.querySelector(BDFDB.dotCN.guildpillitem); + + let pillvisible = divpillitem.style.getPropertyValue("opacity") != 0; + + let guild = div.getAttribute("guild"); let borderRadius = new this.Animations.Value(0); borderRadius .interpolate({ inputRange: [0, 1], - outputRange: [25, 15] + outputRange: [50, 30] }) .addListener((value) => { - divinner.style.setProperty("border-radius", `${value.value}px`); + diviconwrapper.style.setProperty("border-radius", `${value.value}%`); }); - let animate = (v) => { + let pillHeight = new this.Animations.Value(0); + pillHeight + .interpolate({ + inputRange: [0, 1], + outputRange: [8, 20] + }) + .addListener((value) => { + divpillitem.style.setProperty("height", `${value.value}px`); + }); + + let pillOpacity = new this.Animations.Value(0); + pillOpacity + .interpolate({ + inputRange: [0, 1], + outputRange: [0, 0.7] + }) + .addListener((value) => { + if (!pillvisible) divpillitem.style.setProperty("opacity", `${value.value}`); + }); + + let animate = (v, up) => { this.Animations.parallel([ - this.Animations.timing(backgroundColor, {toValue: v, duration: 200}), - this.Animations.spring(borderRadius, {toValue: v, friction: 3}) + this.Animations.timing(borderRadius, {toValue: v, duration: 200}), + this.Animations.spring(pillHeight, {toValue: v, friction: 5}), + this.Animations.timing(pillOpacity, {toValue: v, duration: 200}), ]).start(); }; - div.addEventListener("mouseenter", () => {animate(1);}) - div.addEventListener("mouseleave", () => {if (!BDFDB.containsClass(div, BDFDB.disCN.guildselected)) animate(0);}); + div.addEventListener("mouseenter", () => { + pillvisible = divpillitem.style.getPropertyValue("opacity") != 0; + if (!guild || (this.CurrentGuildStore.getGuildId() != guild)) animate(1, true); + }) + div.addEventListener("mouseleave", () => {if (!guild || (this.CurrentGuildStore.getGuildId() != guild)) animate(0, false);}); } setLabelsByLanguage () {