diff --git a/Plugins/PinDMs/PinDMs.plugin.js b/Plugins/PinDMs/PinDMs.plugin.js index 6d3b4bdeed..6f04645d47 100644 --- a/Plugins/PinDMs/PinDMs.plugin.js +++ b/Plugins/PinDMs/PinDMs.plugin.js @@ -3,7 +3,7 @@ class PinDMs { getName () {return "PinDMs";} - getVersion () {return "1.3.8";} + getVersion () {return "1.3.9";} getAuthor () {return "DevilBro";} @@ -73,56 +73,79 @@ class PinDMs { `; this.recentDMMarkup = - `
-
-
- + `
+
+
+ +
+
+ + + + + + + + + + + + +
+
+
+ + + + + + + + +
+
+ +
+
+
+
`; + + this.dragPlaceholderMarkup = + `
+
+
+ +
+
+ + + + + + + +
+ + +
-
0
`; this.css = ` ${BDFDB.dotCN.dmchannel}.pindms-dragpreview, - ${BDFDB.dotCN.dmguild}.pindms-dragpreview { + .pinned-dm.pindms-dragpreview { pointer-events: none !important; position: absolute !important; opacity: 0.5 !important; z-index: 10000 !important; } - ${BDFDB.dotCN.dmguild}.pindms-dragpreview:before, - ${BDFDB.dotCN.dmguild}.pindms-dragpreview:after, - ${BDFDB.dotCN.dmguild}.pindms-dragpreview ${BDFDB.dotCN.dmguildbadge} { + .pinned-dm.pindms-dragpreview ${BDFDB.dotCN.guildupperbadge}, + .pinned-dm.pindms-dragpreview ${BDFDB.dotCN.guildlowerbadge} { display: none !important; - } - ${BDFDB.dotCN.dmguild}.pindms-dragpreview ${BDFDB.dotCN.dmguildavatar} { - background-color: transparent !important; - overflow: hidden !important; }`; - - this.pinIconCSS = ` - ${BDFDB.dotCN.dmguild}.pinned:before { - background-position: 50%; - background-repeat: no-repeat; - background-size: 16px; - border-radius: 12px; - content: " "; - height: 24px; - overflow: hidden; - pointer-events: none; - position: absolute; - left: -6px; - top: -6px; - width: 24px; - z-index: 1; - background-image: url('data:image/svg+xml; utf8, '); - } - ${BDFDB.dotCNS.themelight + BDFDB.dotCN.dmguild}.pinned:before { - background-color: #202225; - } - ${BDFDB.dotCNS.themedark + BDFDB.dotCN.dmguild}.pinned:before { - background-color: #202225; - }` this.defaults = { settings: { @@ -178,8 +201,6 @@ class PinDMs { if (global.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) { if (this.started) return; BDFDB.loadMessage(this); - - if (BDFDB.getData("showPinIcon", this, "settings")) BDFDB.appendLocalStyle(this.name, this.css + this.pinIconCSS); this.UserUtils = BDFDB.WebModules.findByProperties("getUsers", "getUser"); this.ChannelUtils = BDFDB.WebModules.findByProperties("getChannels", "getChannel"); @@ -223,7 +244,7 @@ class PinDMs { this.unhideNativeDM(info.id); if (info.div) info.div.removeEventListener("contextmenu", info.div.PinDMsContextMenuListener); } - BDFDB.removeEles(BDFDB.dotCN.dmguild + ".pinned", ".pindms-dragpreview"); + BDFDB.removeEles(".pinned-dm", ".dmplaceholder", ".pindms-dragpreview"); BDFDB.unloadMessage(this); } @@ -310,7 +331,7 @@ class PinDMs { BDFDB.removeEles(pinguilditem); unpinguilditem.addEventListener("click", () => { BDFDB.closeContextMenu(target); - BDFDB.removeEles(document.querySelector(`${BDFDB.dotCN.dmguild}.pinned[channelid="${id}"]`)); + BDFDB.removeEles(document.querySelector(`.pinned-dm[channelid="${id}"]`)); this.unhideNativeDM(id); BDFDB.removeData(id, this, "pinnedRecents"); this.updatePinnedPositions("pinnedRecents"); @@ -405,7 +426,7 @@ class PinDMs { let pinnedRecents = BDFDB.loadAllData(this, "pinnedRecents"); if (pinnedRecents[instance.props.channel.id] != undefined) { if (methodnames.includes("componentDidMount")) this.hideNativeDM(instance.props.channel.id); - this.updatePinnedRecent(instance.props.channel.id, methodnames.includes("componentWillUnmount")); + this.updatePinnedRecent(instance.props.channel.id); } } } @@ -432,7 +453,7 @@ class PinDMs { processStandardSidebarView (instance, wrapper) { if (this.SettingsUpdated) { delete this.SettingsUpdated; - BDFDB.appendLocalStyle(this.name, this.css + (BDFDB.getData("showPinIcon", this, "settings") ? this.pinIconCSS : "")); + for (let id of this.sortAndUpdate("pinnedRecents")) this.updatePinnedRecent(id); } } @@ -523,15 +544,16 @@ class PinDMs { } addPinnedRecent (id) { - let anker = document.querySelector(`${BDFDB.dotCNS.guilds + BDFDB.dotCN.friendsonline}`); - if (anker && !document.querySelector(`${BDFDB.dotCN.dmguild}.pinned[channelid="${id}"]`)) { + let anker = BDFDB.getParentEle(BDFDB.dotCN.guildouter, document.querySelector(BDFDB.dotCN.homebuttonicon)); + if (anker && !document.querySelector(`.pinned-dm[channelid="${id}"]`)) { let info = this.ChannelUtils.getChannel(id); if (info) { let dmdiv = BDFDB.htmlToElement(this.recentDMMarkup); let user = info.type == 1 ? this.UserUtils.getUser(info.recipients[0]) : null; dmdiv.setAttribute("channelid", id); anker.parentElement.insertBefore(dmdiv, anker.nextSibling); - let avatar = dmdiv.querySelector(BDFDB.dotCN.avatarinner); + let dmdivinner = dmdiv.querySelector(BDFDB.dotCN.dmcontainer); + let avatar = dmdiv.querySelector(BDFDB.dotCN.guildicon); let dmname = info.name; if (!dmname && info.recipients.length > 0) { for (let dmuser_id of info.recipients) { @@ -540,17 +562,18 @@ class PinDMs { } } let EditUsersData = user && BDFDB.isPluginEnabled("EditUsers") ? bdplugins.EditUsers.plugin.getUserData(user.id, dmdiv) : {}; - if (!EditUsersData.removeIcon) avatar.style.setProperty("background-image", `url(${EditUsersData.url || BDFDB.getChannelIcon(id)})`); + if (!EditUsersData.removeIcon) avatar.setAttribute("src", `${EditUsersData.url || BDFDB.getChannelIcon(id)}`); avatar.setAttribute("channel", dmname); if (user) avatar.setAttribute("user", user.username); - dmdiv.addEventListener("mouseenter", () => { + dmdivinner.addEventListener("mouseenter", () => { let FreshEditUsersData = user && BDFDB.isPluginEnabled("EditUsers") ? bdplugins.EditUsers.plugin.getUserData(user.id, dmdiv) : {}; - BDFDB.createTooltip(FreshEditUsersData.name || dmname, dmdiv, {selector:(BDFDB.isObjectEmpty(FreshEditUsersData) ? "" : "EditUsers-tooltip"),type:"right"}); + BDFDB.createTooltip(FreshEditUsersData.name || dmname, dmdivinner, {selector:(BDFDB.isObjectEmpty(FreshEditUsersData) ? "" : "EditUsers-tooltip"),type:"right"}); }); - dmdiv.addEventListener("click", () => { + avatar.parentElement.addEventListener("click", e => { this.ChannelSwitchUtils.selectPrivateChannel(id); + BDFDB.stopEvent(e); }); - dmdiv.addEventListener("contextmenu", e => { + avatar.parentElement.addEventListener("contextmenu", e => { let dmContext = BDFDB.htmlToElement(this.dmUnpinContextMarkup); dmContext.querySelector(".unpindm-guild-item").addEventListener("click", () => { BDFDB.removeEles(dmdiv, dmContext); @@ -567,13 +590,13 @@ class PinDMs { document.removeEventListener("mousemove", mousemove); document.removeEventListener("mouseup", mouseup); let hovele = null; - let placeholder = BDFDB.htmlToElement(`
`); + let placeholder = BDFDB.htmlToElement(this.dragPlaceholderMarkup); let dragpreview = this.createDragPreview(dmdiv, e); let dragging = e3 => { BDFDB.removeEles(placeholder); BDFDB.toggleEles(dmdiv, false); this.updateDragPreview(dragpreview, e3); - hovele = BDFDB.getParentEle(BDFDB.dotCN.dmguild + ".pinned", e3.target); + hovele = BDFDB.getParentEle(".pinned-dm", e3.target); if (hovele) hovele.parentElement.insertBefore(placeholder, hovele.nextSibling); }; let releasing = e3 => { @@ -597,7 +620,7 @@ class PinDMs { document.addEventListener("mousemove", mousemove); document.addEventListener("mouseup", mouseup); }); - this.addHoverBehaviour(dmdiv); + //this.addHoverBehaviour(dmdiv); this.updatePinnedRecent(id); this.hideNativeDM(id); } @@ -627,23 +650,29 @@ class PinDMs { updatePinnedPositions (type) { let newPinned = {}, oldPinned = BDFDB.loadAllData(this, type); - let pins = Array.from(document.querySelectorAll(type == "pinnedRecents" ? `${BDFDB.dotCN.dmguild}.pinned` : `${BDFDB.dotCNS.dmchannels + BDFDB.dotCN.dmchannel}.pinned`)).map(div => {return div.getAttribute("channelid");}).reverse(); + let pins = Array.from(document.querySelectorAll(type == "pinnedRecents" ? `.pinned-dm` : `${BDFDB.dotCNS.dmchannels + BDFDB.dotCN.dmchannel}.pinned`)).map(div => {return div.getAttribute("channelid");}).reverse(); for (let i in pins) if (pins[i]) newPinned[pins[i]] = parseInt(i); for (let id in oldPinned) if (newPinned[id] == undefined) newPinned[id] = Object.keys(newPinned).length; BDFDB.saveAllData(newPinned, this, type); } - updatePinnedRecent (id, unmouted = false) { - let pinneddmdiv = document.querySelector(`${BDFDB.dotCN.dmguild}.pinned[channelid="${id}"]`); + updatePinnedRecent (id) { + let pinneddmdiv = document.querySelector(`.pinned-dm[channelid="${id}"]`); if (Node.prototype.isPrototypeOf(pinneddmdiv)) { + let showpin = BDFDB.getData("showPinIcon", this, "settings"); let dmdiv = BDFDB.getDmDiv(id); let count = this.UnreadUtils.getUnreadCount(id); - let badge = pinneddmdiv.querySelector(BDFDB.dotCN.dmguildbadge); - BDFDB.toggleEles(badge, count > 0); + let masks = pinneddmdiv.querySelectorAll("mask rect"); + let pill = pinneddmdiv.querySelector(BDFDB.dotCN.dmpill); + let pinbadge = pinneddmdiv.querySelector(BDFDB.dotCN.guildupperbadge); + let countbadge = pinneddmdiv.querySelector(BDFDB.dotCN.guildlowerbadge); BDFDB.toggleClass(pinneddmdiv, "has-new-messages", count > 0); - badge.innerText = count; - BDFDB.toggleClass(pinneddmdiv, BDFDB.disCN.dmguildaudio, !unmouted && Node.prototype.isPrototypeOf(dmdiv) && BDFDB.containsClass(dmdiv, BDFDB.disCN.dmguildaudio)); - BDFDB.toggleClass(pinneddmdiv, BDFDB.disCN.dmguildvideo, !unmouted && Node.prototype.isPrototypeOf(dmdiv) && BDFDB.containsClass(dmdiv, BDFDB.disCN.dmguildvideo)); + BDFDB.toggleEles(pill, count > 0); + BDFDB.toggleEles(pinbadge, showpin); + BDFDB.toggleEles(countbadge, count > 0); + countbadge.firstElementChild.innerText = count; + masks[0].setAttribute("transform", showpin ? "translate(0 0)" : "translate(20 -20)"); + masks[1].setAttribute("transform", count > 0 ? "translate(0 0)" : "translate(20 20)"); } }