lightcordwarez
/
BetterDiscordAddons
mirror of https://github.com/mwittrien/BetterDiscordAddons.git
1
0
Fork 0
Code Issues 24 Releases Wiki Activity

COLOR GRADIENTS

This commit is contained in:
Mirco Wittrien 2019-08-19 11:17:57 +02:00
parent 2688bbe4c7
commit d2af204768
6 changed files with 273 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Plugins/BDFDB.js
View File

File diff suppressed because one or more lines are too long

2
Plugins/BDFDB.max.js
View File

@ -3257,8 +3257,6 @@ var BDFDB = {myPlugins: BDFDB && BDFDB.myPlugins ? BDFDB.myPlugins : {}, BDv2Api
var satcursor = colorPicker.querySelector('.saturation-cursor');
var huecursor = colorPicker.querySelector('.hue-cursor');
if (BDFDB.myData.id != "278543574059057154") BDFDB.toggleEles(gradientbutton, false);
var gMinX, gMaxX, sMinX, sMaxX, sMinY, sMaxY, hMinX, hMaxX;
updateRects();

67
Plugins/EditChannels/EditChannels.plugin.js
View File

@ -3,7 +3,7 @@
class EditChannels {
getName () {return "EditChannels";}
getVersion () {return "3.9.8";}
getVersion () {return "3.9.9";}
getAuthor () {return "DevilBro";}
@ -11,7 +11,7 @@ class EditChannels {
initConstructor () {
this.changelog = {
"added":[["Inheriting","You can now inherit the color of a category to the channels below it"]]
"improved":[["<span style='-webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'>Color Gradients</span>","You can now use color gradients to edit channels"]]
};
this.labels = {};
@ -152,6 +152,7 @@ class EditChannels {
BDFDB.addEventListener(this, settingspanel, "click", ".reset-button", () => {
BDFDB.openConfirmModal(this, "Are you sure you want to reset all channels?", () => {
BDFDB.removeAllData(this, "channels");
this.changeAppTitle();
BDFDB.WebModules.forceAllUpdates(this);
});
});
@ -204,6 +205,10 @@ class EditChannels {
this.LastGuildStore = BDFDB.WebModules.findByProperties("getLastSelectedGuildId");
this.LastChannelStore = BDFDB.WebModules.findByProperties("getLastSelectedChannelId");
var observer = new MutationObserver(() => {this.changeAppTitle();});
BDFDB.addObserver(this, document.head.querySelector("title"), {name:"appTitleObserver",instance:observer}, {childList:true});
this.changeAppTitle();
BDFDB.WebModules.forceAllUpdates(this);
}
else {
@ -260,6 +265,7 @@ class EditChannels {
resetitem.addEventListener("click", () => {
BDFDB.closeContextMenu(menu);
BDFDB.removeData(instance.props.channel.id, this, "channels");
this.changeAppTitle();
BDFDB.WebModules.forceAllUpdates(this);
});
}
@ -298,6 +304,7 @@ class EditChannels {
if (name == null && color == null) BDFDB.removeData(info.id, this, "channels");
else BDFDB.saveData(info.id, {name,color,inheritColor}, this, "channels");
this.changeAppTitle();
BDFDB.WebModules.forceAllUpdates(this);
});
channelnameinput.focus();
@ -447,36 +454,53 @@ class EditChannels {
processStandardSidebarView (instance, wrapper) {
if (this.SettingsUpdated) {
delete this.SettingsUpdated;
this.changeAppTitle();
BDFDB.WebModules.forceAllUpdates(this);
}
}
changeAppTitle () {
let channel = this.ChannelUtils.getChannel(this.LastChannelStore.getChannelId());
let title = document.head.querySelector("title");
if (title && channel && channel.type != 1) {
let data = this.getChannelData(channel.id, channel.parent_id, title);
BDFDB.setInnerText(title, "@" + (data.name || channel.name));
}
}
changeChannel (info, channelname, hoverlistener = false) {
if (!info || !channelname || !channelname.parentElement) return;
var change = () => {
if (channelname.EditChannelsChangeObserver && typeof channelname.EditChannelsChangeObserver.disconnect == "function") channelname.EditChannelsChangeObserver.disconnect();
let data = this.getChannelData(info.id, info.parent_id, channelname);
if (data.name || data.color || channelname.parentElement.getAttribute("changed-by-editchannels")) {
let isgradient = data.color && BDFDB.isObject(data.color);
let color = this.chooseColor(channelname, data.color);
if (isgradient) {
channelname.style.removeProperty("color");
BDFDB.setInnerText(channelname, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(color)} !important;">${BDFDB.encodeToHTML(data.name || info.name)}</span>`));
}
else {
channelname.style.setProperty("color", color, "important");
BDFDB.setInnerText(channelname, data.name || info.name);
}
let iconparent = BDFDB.containsClass(channelname, BDFDB.disCN.quickswitchresultmatch) ? channelname.parentElement.parentElement : channelname.parentElement;
if (!BDFDB.containsClass(channelname, BDFDB.disCN.autocompletedescription)) {
let settings = BDFDB.getAllData(this, "settings");
iconparent.querySelectorAll('svg [stroke]:not([stroke="none"]').forEach(icon => {
let iconcolor = color && BDFDB.getParentEle(BDFDB.dotCN.channelheadertitle, icon) ? BDFDB.colorSETALPHA(color, 0.6) : color;
let iconcolor = color && BDFDB.getParentEle(BDFDB.dotCN.channelheadertitle, icon) ? BDFDB.colorSETALPHA(isgradient ? color[0] : color, 0.6) : (isgradient ? color[0] : color);
if (!icon.getAttribute("oldstroke")) icon.setAttribute("oldstroke", icon.getAttribute("stroke"));
icon.setAttribute("stroke", iconcolor && settings.changeChannelIcon ? iconcolor : icon.getAttribute("oldstroke"), "important");
icon.style.setProperty("stroke", iconcolor && settings.changeChannelIcon ? iconcolor : icon.getAttribute("oldstroke"), "important");
});
iconparent.querySelectorAll('svg [fill]:not([fill="none"]').forEach(icon => {
let iconcolor = color && BDFDB.getParentEle(BDFDB.dotCN.channelheadertitle, icon) ? BDFDB.colorSETALPHA(color, 0.6) : color;
let iconcolor = color && BDFDB.getParentEle(BDFDB.dotCN.channelheadertitle, icon) ? BDFDB.colorSETALPHA(isgradient ? color[0] : color, 0.6) : (isgradient ? color[0] : color);
if (!icon.getAttribute("oldfill")) icon.setAttribute("oldfill", icon.getAttribute("fill"));
icon.setAttribute("fill", iconcolor && settings.changeChannelIcon ? iconcolor : icon.getAttribute("oldfill"), "important");
icon.style.setProperty("fill", iconcolor && settings.changeChannelIcon ? iconcolor : icon.getAttribute("oldfill"), "important");
});
let unread = iconparent.parentElement.querySelector(BDFDB.dotCN.channelunread);
if (unread) unread.style.setProperty("background-color", color && settings.changeUnreadIndicator ? color : null, "important");
if (unread) unread.style.setProperty("background-color", color && settings.changeUnreadIndicator ? (isgradient ? color[0] : color) : null, "important");
}
if (data.name || data.color) {
channelname.parentElement.setAttribute("changed-by-editchannels", true);
@ -520,8 +544,14 @@ class EditChannels {
if (channelname.EditChannelsChangeObserver && typeof channelname.EditChannelsChangeObserver.disconnect == "function") channelname.EditChannelsChangeObserver.disconnect();
let data = this.getChannelData(info.id, info.parent_id, channelname);
if (data.name || data.color || channelname.getAttribute("changed-by-editchannels")) {
if (BDFDB.isObject(data.color)) {
channelname.style.removeProperty("color");
BDFDB.setInnerText(channelname, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(this.chooseColor(channelname, data.color))} !important;">${BDFDB.encodeToHTML("#" + (data.name || info.name))}</span>`));
}
else {
channelname.style.setProperty("color", this.chooseColor(channelname, data.color), "important");
BDFDB.setInnerText(channelname, "#" + (data.name || info.name));
}
if (data.name || data.color) {
channelname.setAttribute("changed-by-editchannels", true);
channelname.EditChannelsChangeObserver = new MutationObserver((changes, _) => {
@ -546,8 +576,13 @@ class EditChannels {
mention.removeEventListener("mouseover", mention.mouseoverListenerEditChannels);
mention.removeEventListener("mouseout", mention.mouseoutListenerEditChannels);
let data = this.getChannelData(info.id, info.parent_id, mention);
let color = BDFDB.colorCONVERT(data.color, "RGBCOMP");
BDFDB.setInnerText(mention, "#" + (data.name || info.name));
let name = "#" + (data.name || info.name);
let isgradient = data.color && BDFDB.isObject(data.color);
let color = isgradient ? BDFDB.colorGRADIENT(data.color) : BDFDB.colorCONVERT(data.color, "RGB");
let color0_1 = isgradient ? BDFDB.colorGRADIENT(BDFDB.colorSETALPHA(data.color, 0.1, "RGB")) : BDFDB.colorSETALPHA(data.color, 0.1, "RGB");
let color0_7 = isgradient ? BDFDB.colorGRADIENT(BDFDB.colorSETALPHA(data.color, 0.7, "RGB")) : BDFDB.colorSETALPHA(data.color, 0.7, "RGB");
if (mention.EditChannelsHovered) colorHover();
else colorDefault();
mention.mouseoverListenerEditChannels = () => {
@ -568,12 +603,20 @@ class EditChannels {
});
mention.EditChannelsChangeObserver.observe(mention, {attributes:true});
function colorDefault() {
mention.style.setProperty("color", color ? "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")" : null, "important");
mention.style.setProperty("background", color ? "rgba(" + color[0] + "," + color[1] + "," + color[2] + ",.1)" : null, "important");
mention.style.setProperty("background", color0_1, "important");
if (isgradient) {
mention.style.removeProperty("color");
BDFDB.setInnerText(mention, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${color} !important;">${BDFDB.encodeToHTML(name)}</span>`));
}
else {
mention.style.setProperty("color", color, "important");
BDFDB.setInnerText(mention, name);
}
}
function colorHover() {
mention.style.setProperty("color", color ? "#FFFFFF" : null, "important");
mention.style.setProperty("background", color ? "rgba(" + color[0] + "," + color[1] + "," + color[2] + ",.7)" : null, "important");
mention.style.setProperty("background", color0_7, "important");
mention.style.setProperty("color", data.color ? "#FFFFFF" : null, "important");
BDFDB.setInnerText(mention, name);
}
}
@ -584,7 +627,7 @@ class EditChannels {
let classname = channelname.className ? channelname.className.toLowerCase() : "";
if (classname.indexOf("muted") > -1 || classname.indexOf("locked") > -1) color = BDFDB.colorCHANGE(color, -0.5);
else if (hovered || classname.indexOf("selected") > -1 || classname.indexOf("hovered") > -1 || classname.indexOf("unread") > -1 || classname.indexOf("connected") > -1) color = BDFDB.colorCHANGE(color, 0.5);
return BDFDB.colorCONVERT(color, "RGB");
return BDFDB.isObject(color) ? color : BDFDB.colorCONVERT(color, "RGB");
}
return null;
}

59
Plugins/EditServers/EditServers.plugin.js
View File

@ -3,7 +3,7 @@
class EditServers {
getName () {return "EditServers";}
getVersion () {return "2.0.3";}
getVersion () {return "2.0.4";}
getAuthor () {return "DevilBro";}
@ -11,7 +11,7 @@ class EditServers {
initConstructor () {
this.changelog = {
"fixed":[["Animated Icons","EditServers no longer breaks animated icons when something else but the server icon is edited"]]
"improved":[["<span style='-webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'>Color Gradients</span>","You can now use color gradients to edit servers"]]
};
this.labels = {};
@ -498,8 +498,14 @@ class EditServers {
guildname.removeEventListener("mouseenter", guildname.mouseenterListenerEditChannels);
let data = this.getGuildData(info.id, guildname);
if (data.name || data.color2 || guildname.getAttribute("changed-by-editservers")) {
if (BDFDB.isObject(data.color2)) {
guildname.style.removeProperty("color");
BDFDB.setInnerText(guildname, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color2)} !important;">${BDFDB.encodeToHTML(data.name || info.name)}</span>`));
}
else {
guildname.style.setProperty("color", BDFDB.colorCONVERT(data.color2, "RGB"), "important");
BDFDB.setInnerText(guildname, data.name || info.name);
}
if (data.name && BDFDB.containsClass(guildname, BDFDB.disCN.guildheadername) && BDFDB.getData("addOriginalTooltip", this, "settings")) {
guildname.mouseenterListenerEditChannels = () => {
BDFDB.createTooltip(info.name, guildname.parentElement, {type:"right",selector:"EditServers-tooltip"});
@ -533,20 +539,37 @@ class EditServers {
BDFDB.toggleEles(icon, !removeicon);
BDFDB.removeEles(icon.parentElement.querySelector(".fake-guildacronym"));
if (removeicon) {
let fakeicon = BDFDB.htmlToElement(`<div class="${BDFDB.disCN.guildiconacronym} fake-guildacronym" aria-label="Server Acronym">${shortname}</div>`);
icon.parentElement.appendChild(fakeicon);
icon.parentElement.style.setProperty("font-size", this.getFontSize(fakeicon));
let fakeicon = BDFDB.htmlToElement(`<div class="${BDFDB.disCN.guildiconacronym} fake-guildacronym" aria-label="Server Acronym"></div>`);
if (data.color1) {
if (BDFDB.isObject(data.color1)) fakeicon.style.setProperty("background-image", BDFDB.colorGRADIENT(data.color1));
else fakeicon.style.setProperty("background-color", BDFDB.colorCONVERT(data.color1, "RGB"));
}
if (data.color2 && !BDFDB.isObject(data.color2)) fakeicon.style.setProperty("color", BDFDB.colorCONVERT(data.color2, "RGB"));
BDFDB.setInnerText(fakeicon, BDFDB.isObject(data.color2) ? BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color2)} !important;">${BDFDB.encodeToHTML(shortname)}</span>`) : shortname);
icon.parentElement.appendChild(fakeicon);
fakeicon.style.setProperty("font-size", this.getFontSize(fakeicon));
}
else icon.parentElement.style.removeProperty("font-size");
}
else {
BDFDB.setInnerText(icon, shortname);
if (!data.removeIcon && !shortname && url) icon.style.setProperty("background-image", `url(${url})`);
else icon.style.removeProperty("background-image");
icon.style.setProperty("background-color", BDFDB.colorCONVERT(data.color1, "RGB"), "important");
icon.style.setProperty("color", BDFDB.colorCONVERT(data.color2, "RGB", "important"));
if (!data.removeIcon && !shortname && url) {
BDFDB.setInnerText(icon, "");
icon.style.setProperty("background-image", `url(${url})`);
}
else {
if (data.color1) {
if (BDFDB.isObject(data.color1)) icon.style.setProperty("background-image", BDFDB.colorGRADIENT(data.color1));
else icon.style.setProperty("background-color", BDFDB.colorCONVERT(data.color1, "RGB"));
}
else {
icon.style.removeProperty("background-image");
icon.style.removeProperty("background-color");
}
if (data.color2 && !BDFDB.isObject(data.color2)) icon.style.setProperty("color", BDFDB.colorCONVERT(data.color2, "RGB"));
else icon.style.removeProperty("color");
BDFDB.setInnerText(icon, BDFDB.isObject(data.color2) ? BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color2)} !important;">${BDFDB.encodeToHTML(shortname)}</span>`) : shortname);
}
icon.style.setProperty("font-size", this.getFontSize(icon));
BDFDB.toggleClass(icon, this.getNoIconClasses(icon), !icon.style.getPropertyValue("background-image"));
BDFDB.toggleClass(icon, this.getNoIconClasses(icon), !icon.style.getPropertyValue("background-image") || BDFDB.isObject(data.color1));
if (data.url && !data.removeIcon) {
icon.style.setProperty("background-position", "center");
icon.style.setProperty("background-size", "cover");
@ -574,10 +597,12 @@ class EditServers {
let data = this.getGuildData(info.id, wrapper);
wrapper.removeEventListener("mouseenter", wrapper.tooltipListenerEditServers);
if (data.name || data.color3 || data.color4) {
var bgColor = data.color3 ? BDFDB.colorCONVERT(data.color3, "RGB") : "";
var fontColor = data.color4 ? BDFDB.colorCONVERT(data.color4, "RGB") : "";
var isgradient3 = data.color3 && BDFDB.isObject(data.color3);
var isgradient4 = data.color4 && BDFDB.isObject(data.color4);
var bgColor = data.color3 ? (!isgradient3 ? BDFDB.colorCONVERT(data.color3, "RGB") : BDFDB.colorGRADIENT(data.color3)) : "";
var fontColor = data.color4 ? (!isgradient4 ? BDFDB.colorCONVERT(data.color4, "RGB") : BDFDB.colorGRADIENT(data.color4)) : "";
wrapper.tooltipListenerEditServers = () => {
BDFDB.createTooltip(data.name || info.name, wrapper, {type,selector:"EditServers-tooltip",style:`color: ${fontColor} !important; background-color: ${bgColor} !important; border-color: ${bgColor} !important;`,css:`body ${BDFDB.dotCN.tooltip}:not(.EditServers-tooltip) {display: none !important;}`});
BDFDB.createTooltip(isgradient4 ? `<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${fontColor} !important;">${BDFDB.encodeToHTML(data.name || info.name)}</span>` : (data.name || info.name), wrapper, {type, selector:"EditServers-tooltip", style:`${isgradient4 ? '' : 'color: ' + fontColor + ' !important; '}background: ${bgColor} !important; border-color: ${isgradient3 ? BDFDB.colorCONVERT(data.color3[0], "RGB") : bgColor} !important;`,css:`body ${BDFDB.dotCN.tooltip}:not(.EditServers-tooltip) {display: none !important;}`, html:isgradient3});
};
wrapper.addEventListener("mouseenter", wrapper.tooltipListenerEditServers);
if (document.querySelector(BDFDB.dotCN.guildcontainer + ":hover") == wrapper) wrapper.tooltipListenerEditServers();
@ -585,9 +610,9 @@ class EditServers {
}
getFontSize (icon) {
if (icon.style.getPropertyValue("background-image")) return null;
if (icon.style.getPropertyValue("background-image") && icon.style.getPropertyValue("background-image").indexOf("linear-gradient(") == -1) return null;
else if (BDFDB.containsClass(icon, BDFDB.disCN.guildicon) || BDFDB.containsClass(icon, BDFDB.disCN.guildiconacronym)) {
var shortname = icon.innerText;
var shortname = icon.firstElementChild ? icon.firstElementChild.innerText : icon.innerText;
if (shortname) {
if (shortname.length > 5) return "10px";
else if (shortname.length > 4) return "12px";

152
Plugins/EditUsers/EditUsers.plugin.js
View File

@ -3,7 +3,7 @@
class EditUsers {
getName () {return "EditUsers";}
getVersion () {return "3.5.0";}
getVersion () {return "3.5.1";}
getAuthor () {return "DevilBro";}
@ -11,14 +11,15 @@ class EditUsers {
initConstructor () {
this.changelog = {
"fixed":[["Coloring issues","Fixed some coloring issues with inverted tags"]]
"improved":[["<span style='-webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'>Color Gradients</span>","You can now use color gradients to edit users"]],
"fixed":[["DM Groups","Now works properly in DM Groups"]]
};
this.labels = {};
this.patchModules = {
"ChannelTextArea":"componentDidMount",
"ChannelMember":["componentDidMount","componentDidUpdate"],
"MemberListItem":["componentDidMount","componentDidUpdate"],
"UserPopout":["componentDidMount","componentDidUpdate"],
"UserProfile":["componentDidMount","componentDidUpdate"],
"FriendRow":"componentDidMount",
@ -531,7 +532,7 @@ class EditUsers {
}
}
processChannelMember (instance, wrapper) {
processMemberListItem (instance, wrapper) {
let username = wrapper.querySelector(BDFDB.dotCN.memberusername);
if (username) {
this.changeName(instance.props.user, username);
@ -602,7 +603,7 @@ class EditUsers {
if (instance.props && instance.props.user && instance.props.guild) {
let username = wrapper.querySelector(BDFDB.dotCN.guildsettingsbannedusername);
if (username) {
this.changeName3(instance.props.user, username, BDFDB.disCN.guildsettingsbanneddiscrim);
this.changeName3(instance.props.user, username);
this.changeAvatar(instance.props.user, this.getAvatarDiv(wrapper));
}
}
@ -706,6 +707,7 @@ class EditUsers {
if (username) {
let channel = this.ChannelUtils.getChannel(channel_id);
if (channel) {
return;
if (channel.type == 1) this.changeName(this.UserUtils.getUser(channel.recipients[0]), username);
else {
if (username.EditUsersChangeObserver && typeof username.EditUsersChangeObserver.disconnect == "function") username.EditUsersChangeObserver.disconnect();
@ -758,28 +760,14 @@ class EditUsers {
this.changeAvatar(user, this.getAvatarDiv(wrapper));
}
}
else if (instance.props.tag == "div" && instance.props.className.indexOf(BDFDB.disCN.searchpopoutoption) > -1) {
let user = BDFDB.getReactValue(instance, "_reactInternalFiber.return.memoizedProps.user");
let tokens = BDFDB.getReactValue(instance, "_reactInternalFiber.return.memoizedState.tokens");
if (user && tokens && Array.isArray(tokens)) {
for (let i in tokens) {
let token = tokens[i];
if (token.type == "ANSWER_USERNAME_FROM" && token._data && token._data.get("user")) {
this.changeName3(token._data.get("user"), wrapper.children[i], true);
this.changeAvatar(user, this.getAvatarDiv(wrapper));
break;
}
}
}
else if (instance.props.className.indexOf(BDFDB.disCN.searchpopoutuser) > -1) {
else if (instance.props.tag == "div" && instance.props.className.indexOf(BDFDB.disCN.searchpopoutuser) > -1) {
let result = BDFDB.getReactValue(instance, "_reactInternalFiber.return.memoizedProps.result");
if (result && result.user) {
this.changeName3(result.user, wrapper.querySelector(BDFDB.dotCN.searchpopoutdisplayednick), false);
this.changeName3(result.user, wrapper.querySelector(BDFDB.dotCN.searchpopoutdisplayednick));
this.changeAvatar(result.user, wrapper.querySelector(BDFDB.dotCN.searchpopoutdisplayavatar));
}
}
}
}
processMessageContent (instance, wrapper) {
let message = BDFDB.getReactValue(instance, "props.message");
@ -789,7 +777,7 @@ class EditUsers {
let channel = this.ChannelUtils.getChannel(message.channel_id) || {};
let member = this.MemberUtils.getMember(channel.guild_id, message.author.id) || {};
let data = this.getUserData(message.author.id, wrapper);
markup.style.setProperty("color", window.settingsCookie["bda-gs-7"] ? BDFDB.colorCONVERT(data.color1 || member.colorString, "RGB") : null, "important");
markup.style.setProperty("color", window.settingsCookie["bda-gs-7"] ? BDFDB.colorCONVERT(data.color1 && !BDFDB.isObject(data.color1) ? data.color1 : member.colorString, "RGB") : null, "important");
}
}
}
@ -824,9 +812,18 @@ class EditUsers {
let isBRCenabled = BDFDB.isPluginEnabled("BetterRoleColors");
let usenick = !BDFDB.containsClass(username, BDFDB.disCN.userprofileusername) && !BDFDB.containsClass(username.parentElement, BDFDB.disCN.userprofilelistname, BDFDB.disCN.accountinfodetails, false) && member.nick;
let usemembercolor = !BDFDB.containsClass(username.parentElement, BDFDB.disCN.userprofilelistname) && (BDFDB.containsClass(username, BDFDB.disCN.memberusername, BDFDB.disCN.messageusername, false) || isBRCenabled);
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || (usenick ? member.nick : info.username))}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCONVERT(data.color1 || (usemembercolor ? member.colorString : null), "RGB"), "important");
username.style.setProperty("background-color", BDFDB.colorCONVERT(data.color2, "RGB"), "important");
BDFDB.setInnerText(username, data.name || (usenick ? member.nick : info.username));
}
username.style.setProperty("background", BDFDB.isObject(data.color2) ? BDFDB.colorGRADIENT(data.color2) : BDFDB.colorCONVERT(data.color2, "RGB"), "important");
if (data.name || data.color1 || data.color2) {
username.setAttribute("changed-by-editusers", true);
username.EditUsersChangeObserver = new MutationObserver((changes, _) => {
@ -846,8 +843,14 @@ class EditUsers {
let member = this.MemberUtils.getMember(guildid, info.id) || {};
this.changeBotTags(data, username, member);
if (data.name || data.color1 || username.getAttribute("changed-by-editusers")) {
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || member.nick || info.username)}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCONVERT(data.color1 || (BDFDB.isPluginEnabled("BetterRoleColors") ? member.colorString : null), "RGB"), "important");
BDFDB.setInnerText(username, data.name || member.nick || info.username);
}
if (data.name || data.color1) {
username.setAttribute("changed-by-editusers", true);
username.EditUsersChangeObserver = new MutationObserver((changes, _) => {
@ -860,19 +863,24 @@ class EditUsers {
}
}
changeName3 (info, username, adddisc) {
changeName3 (info, username, adddisc = false) {
if (!info || !username || !username.parentElement) return;
if (username.EditUsersChangeObserver && typeof username.EditUsersChangeObserver.disconnect == "function") username.EditUsersChangeObserver.disconnect();
let data = this.getUserData(info.id, username);
if (data.name || data.color1 || username.getAttribute("changed-by-editusers")) {
let color1 = BDFDB.colorCONVERT(data.color1, "RGB");
if (adddisc) {
username.innerHTML = `<span ${color1 ? 'style="color:' + color1 + ' !important;"': ''}>${BDFDB.encodeToHTML(data.name || info.username)}</span><span${typeof adddisc == "string" ? ' class="' + adddisc + '"' : ''}>#${info.discriminator}</span>`;
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span ${data.color1 ? (BDFDB.isObject(data.color1) ? 'style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image:' + BDFDB.colorGRADIENT(data.color1) + ' !important;"' : 'style="color:' + data.color1 + ' !important;"'): ''}>${BDFDB.encodeToHTML(data.name || info.username)}</span><span${typeof adddisc == "string" ? ' class="' + adddisc + '"' : ''}>#${info.discriminator}</span>`));
}
else {
username.style.setProperty("color", color1, "important");
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || info.username)}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCONVERT(data.color1, "RGB"), "important");
BDFDB.setInnerText(username, data.name || info.username);
}
}
if (data.name || data.color1) {
username.setAttribute("changed-by-editusers", true);
username.EditUsersChangeObserver = new MutationObserver((changes, _) => {
@ -940,14 +948,19 @@ class EditUsers {
let data = this.getUserData(info.id, wrapper);
if (data.tag) {
let member = data.ignoreTagColor ? (this.MemberUtils.getMember(this.LastGuildStore.getGuildId(), info.id) || {}) : {};
let color3 = BDFDB.colorCONVERT(!data.ignoreTagColor ? data.color3 : member.colorString, "RGB");
let color4 = !data.ignoreTagColor && data.color4 ? BDFDB.colorCONVERT(data.color4, "RGB") : (color3 ? (BDFDB.colorISBRIGHT(color3) ? "black" : "white") : null);
let color3 = BDFDB.isObject(data.color3) && !data.ignoreTagColor ? BDFDB.colorGRADIENT(data.color3) : BDFDB.colorCONVERT(!data.ignoreTagColor ? data.color3 : member.colorString, "RGB");
let color4 = BDFDB.isObject(data.color4) && !data.ignoreTagColor ? BDFDB.colorGRADIENT(data.color4) : (!data.ignoreTagColor && data.color4 ? BDFDB.colorCONVERT(data.color4, "RGB") : (color3 ? (BDFDB.colorISBRIGHT(color3) ? "black" : "white") : null));
let tag = document.createElement("span");
let invert = container && !color3 && !color4 && container.firstElementChild && !(BDFDB.containsClass(container.firstElementChild, BDFDB.disCN.userpopoutheadernormal) || BDFDB.containsClass(container.firstElementChild, BDFDB.disCN.userprofiletopsectionnormal));
tag.className = "EditUsers-tag " + (!invert ? BDFDB.disCN.bottagregular : BDFDB.disCN.bottaginvert) + (selector ? (" " + selector) : "");
tag.style.setProperty("background", !invert ? color3 : color4, "important");
let fontcolor = invert ? color3 : color4;
let fontobj = invert ? data.color3 : data.color4;
if (BDFDB.isObject(fontobj)) tag.appendChild(BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${fontcolor} !important;">${BDFDB.encodeToHTML(data.tag)}</span>`));
else {
tag.innerText = data.tag;
tag.style.setProperty("background-color", !invert ? color3 : color4, "important");
tag.style.setProperty("color", !invert ? color4 : color3, "important");
tag.style.setProperty("color", fontcolor, "important");
}
wrapper.appendChild(tag);
}
}
@ -961,9 +974,6 @@ class EditUsers {
dmchannel.removeEventListener("mouseleave", dmchannel.mouseleaveListenerEditUsers);
let data = this.getUserData(info.id, username);
if (data.name || data.color1 || data.color2 || username.getAttribute("changed-by-editusers")) {
let color1 = BDFDB.colorCONVERT(data.color1, "RGB");
let color2 = BDFDB.colorCONVERT(data.color2, "RGB");
BDFDB.setInnerText(username, data.name || info.username);
if (username.EditUsersHovered || BDFDB.containsClass(dmchannel, BDFDB.disCN.dmchannelselected)) colorHover();
else colorDefault();
@ -987,12 +997,26 @@ class EditUsers {
}
else username.removeAttribute("changed-by-editusers");
function colorDefault() {
username.style.setProperty("color", color1 ? BDFDB.colorCHANGE(color1, -0.5) : null, "important");
username.style.setProperty("background", color2 ? BDFDB.colorCHANGE(color2, -0.5) : null, "important");
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(BDFDB.colorCHANGE(data.color1, -0.5))} !important;">${BDFDB.encodeToHTML(data.name || info.username)}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCHANGE(data.color1, -0.5, "RGB"), "important");
BDFDB.setInnerText(username, data.name || info.username);
}
username.style.setProperty("background", BDFDB.isObject(data.color2) ? BDFDB.colorGRADIENT(BDFDB.colorCHANGE(data.color2, -0.5)) : BDFDB.colorCHANGE(data.color2, -0.5, "RGB"), "important");
}
function colorHover() {
username.style.setProperty("color", color1, "important");
username.style.setProperty("background", color2, "important");
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || info.username)}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCONVERT(data.color1, "RGB"), "important");
BDFDB.setInnerText(username, data.name || info.username);
}
username.style.setProperty("background", BDFDB.isObject(data.color2) ? BDFDB.colorGRADIENT(data.color2) : BDFDB.colorCONVERT(data.color2, "RGB"), "important");
}
}
}
@ -1004,9 +1028,14 @@ class EditUsers {
mention.removeEventListener("mouseout", mention.mouseoutListenerEditUsers);
let data = this.getUserData(info.id, mention);
let member = this.MemberUtils.getMember(this.LastGuildStore.getGuildId(), info.id) || {};
let color1 = BDFDB.colorCONVERT(data.color1 || (BDFDB.isPluginEnabled("BetterRoleColors") ? member.colorString : null), "RGBCOMP");
let name = data.name ? data.name : (BDFDB.isPluginEnabled("RemoveNicknames") ? window.bdplugins.RemoveNicknames.plugin.getNewName(info) : member.nick || info.username);
BDFDB.setInnerText(mention, "@" + name);
let name = "@" + (data.name ? data.name : (BDFDB.isPluginEnabled("RemoveNicknames") ? window.bdplugins.RemoveNicknames.plugin.getNewName(info) : member.nick || info.username));
let isgradient = data.color1 && BDFDB.isObject(data.color1);
let datacolor = data.color1 || (BDFDB.isPluginEnabled("BetterRoleColors") ? member.colorString : null);
let color = isgradient ? BDFDB.colorGRADIENT(data.color1) : BDFDB.colorCONVERT(datacolor, "RGB");
let color0_1 = isgradient ? BDFDB.colorGRADIENT(BDFDB.colorSETALPHA(data.color1, 0.1, "RGB")) : BDFDB.colorSETALPHA(datacolor, 0.1, "RGB");
let color0_7 = isgradient ? BDFDB.colorGRADIENT(BDFDB.colorSETALPHA(data.color1, 0.7, "RGB")) : BDFDB.colorSETALPHA(datacolor, 0.7, "RGB");
if (mention.EditUsersHovered) colorHover();
else colorDefault();
mention.mouseoverListenerEditUsers = () => {
@ -1025,12 +1054,20 @@ class EditUsers {
});
mention.EditUsersChangeObserver.observe(mention, {attributes:true});
function colorDefault() {
mention.style.setProperty("color", color1 ? "rgb(" + color1[0] + "," + color1[1] + "," + color1[2] + ")" : null, "important");
mention.style.setProperty("background", color1 ? "rgba(" + color1[0] + "," + color1[1] + "," + color1[2] + ",.1)" : null, "important");
mention.style.setProperty("background", color0_1, "important");
if (isgradient) {
mention.style.removeProperty("color");
BDFDB.setInnerText(mention, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${color} !important;">${BDFDB.encodeToHTML(name)}</span>`));
}
else {
mention.style.setProperty("color", color, "important");
BDFDB.setInnerText(mention, name);
}
}
function colorHover() {
mention.style.setProperty("color", color1 ? "#FFFFFF" : null, "important");
mention.style.setProperty("background", color1 ? "rgba(" + color1[0] + "," + color1[1] + "," + color1[2] + ",.7)" : null, "important");
mention.style.setProperty("background", color0_7, "important");
mention.style.setProperty("color", data.color1 ? "#FFFFFF" : null, "important");
BDFDB.setInnerText(mention, name);
}
}
@ -1042,8 +1079,6 @@ class EditUsers {
let data = this.getUserData(info.id, username);
if (data.name || data.color1 || username.getAttribute("changed-by-editusers")) {
let member = this.MemberUtils.getMember(this.LastGuildStore.getGuildId(), info.id) || {};
let color1 = BDFDB.colorCONVERT(data.color1 || (BDFDB.isPluginEnabled("BetterRoleColors") ? member.colorString : ""), "RGB");
BDFDB.setInnerText(username, data.name || member.nick || info.username);
if (username.EditUsersHovered) colorHover();
else colorDefault();
if (data.name || data.color1) {
@ -1065,10 +1100,25 @@ class EditUsers {
}
else username.removeAttribute("changed-by-editusers");
function colorDefault() {
username.style.setProperty("color", BDFDB.containsClass(username, BDFDB.disCN.voicenamespeaking) ? color1 : BDFDB.colorCHANGE(color1, -50), "important");
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(!BDFDB.containsClass(username, BDFDB.disCN.voicenamespeaking) ? BDFDB.colorCHANGE(data.color1, -50) : data.color1)} !important;">${BDFDB.encodeToHTML(data.name || member.nick || info.username)}</span>`));
}
else {
var color1 = data.color1 || (BDFDB.isPluginEnabled("BetterRoleColors") ? member.colorString : "");
username.style.setProperty("color", !BDFDB.containsClass(username, BDFDB.disCN.voicenamespeaking) ? BDFDB.colorCHANGE(color1, -50, "RGB") : BDFDB.colorCONVERT(color1, "RGB"), "important");
BDFDB.setInnerText(username, data.name || member.nick || info.username);
}
}
function colorHover() {
username.style.setProperty("color", color1, "important");
if (BDFDB.isObject(data.color1)) {
username.style.removeProperty("color");
BDFDB.setInnerText(username, BDFDB.htmlToElement(`<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || member.nick || info.username)}</span>`));
}
else {
username.style.setProperty("color", BDFDB.colorCONVERT(data.color1, "RGB"), "important");
BDFDB.setInnerText(username, data.name || member.nick || info.username);
}
}
}
}
@ -1152,7 +1202,9 @@ class EditUsers {
for (let data of userarray) {
if (amount-- < 1) break;
let status = BDFDB.getUserStatus(data.user.id);
let autocompleterow = BDFDB.htmlToElement(`<div class="${BDFDB.disCNS.autocompleterowvertical + BDFDB.disCN.autocompleterow} autocompleteEditUsersRow"><div userid="${data.user.id}" class="${BDFDB.disCNS.autocompleteselector + BDFDB.disCN.autocompleteselectable} autocompleteEditUsersSelector"><div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.autocompletecontent}" style="flex: 1 1 auto;"><div class="${BDFDB.disCN.avatarwrapper}" role="img" aria-label="${data.user.username}, ${BDFDB.LanguageStrings["STATUS_" + status.toUpperCase()]}" aria-hidden="false" style="width: 24px; height: 24px;"><svg width="30" height="24" viewBox="0 0 30 24" class="${BDFDB.disCN.avatarmask}" aria-hidden="true"><foreignObject x="0" y="0" width="24" height="24" mask="url(#svg-mask-avatar-status-round-24)"><img src="${data.url || BDFDB.getUserAvatar(data.user.id)}" alt=" " class="${BDFDB.disCN.avatar}" aria-hidden="true"></foreignObject><rect width="8" height="8" x="16" y="16" fill="${BDFDB.getUserStatusColor(status)}" mask="url(#svg-mask-status-${BDFDB.isColorBlindModeEnabled() ? status : 'online'})" class="${BDFDB.disCN.avatarpointerevents}"></rect></svg></div><div class="${BDFDB.disCN.marginleft8}" changed-by-editusers="true" style="flex: 1 1 auto;${data.color1 ? (' color: ' + BDFDB.colorCONVERT(data.color1, 'RGB') + ' !important;') : ''}">${BDFDB.encodeToHTML(data.name || data.member.nick || data.user.username)}</div><div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignbaseline + BDFDB.disCNS.nowrap + BDFDB.disCN.autocompletedescription}" style="flex: 0 1 auto;"><div class="${BDFDB.disCN.autocompletedescriptionusername}">${BDFDB.encodeToHTML(data.user.username)}</div><div class="${BDFDB.disCN.autocompletedescriptiondiscriminator}">#${data.user.discriminator}</div></div></div></div></div>`);
let isgradient = data.color1 && BDFDB.isObject(data.color1);
let username = isgradient ? `<div class="${BDFDB.disCN.marginleft8}" changed-by-editusers="true" style="flex: 1 1 auto;"><span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${BDFDB.colorGRADIENT(data.color1)} !important;">${BDFDB.encodeToHTML(data.name || data.member.nick || data.user.username)}</span></div>` : `<div class="${BDFDB.disCN.marginleft8}" changed-by-editusers="true" style="flex: 1 1 auto;${data.color1 ? (' color: ' + BDFDB.colorCONVERT(data.color1, 'RGB') + ' !important;') : ''}">${BDFDB.encodeToHTML(data.name || data.member.nick || data.user.username)}</div>`;
let autocompleterow = BDFDB.htmlToElement(`<div class="${BDFDB.disCNS.autocompleterowvertical + BDFDB.disCN.autocompleterow} autocompleteEditUsersRow"><div userid="${data.user.id}" class="${BDFDB.disCNS.autocompleteselector + BDFDB.disCN.autocompleteselectable} autocompleteEditUsersSelector"><div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.aligncenter + BDFDB.disCNS.nowrap + BDFDB.disCN.autocompletecontent}" style="flex: 1 1 auto;"><div class="${BDFDB.disCN.avatarwrapper}" role="img" aria-label="${data.user.username}, ${BDFDB.LanguageStrings["STATUS_" + status.toUpperCase()]}" aria-hidden="false" style="width: 24px; height: 24px;"><svg width="30" height="24" viewBox="0 0 30 24" class="${BDFDB.disCN.avatarmask}" aria-hidden="true"><foreignObject x="0" y="0" width="24" height="24" mask="url(#svg-mask-avatar-status-round-24)"><img src="${data.url || BDFDB.getUserAvatar(data.user.id)}" alt=" " class="${BDFDB.disCN.avatar}" aria-hidden="true"></foreignObject><rect width="8" height="8" x="16" y="16" fill="${BDFDB.getUserStatusColor(status)}" mask="url(#svg-mask-status-${status})" class="${BDFDB.disCN.avatarpointerevents}"></rect></svg></div>${username}<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignbaseline + BDFDB.disCNS.nowrap + BDFDB.disCN.autocompletedescription}" style="flex: 0 1 auto;"><div class="${BDFDB.disCN.autocompletedescriptionusername}">${BDFDB.encodeToHTML(data.user.username)}</div><div class="${BDFDB.disCN.autocompletedescriptiondiscriminator}">#${data.user.discriminator}</div></div></div></div></div>`);
autocompleterow.querySelector(BDFDB.dotCN.autocompleteselectable).addEventListener("click", () => {this.swapWordWithMention(textarea);});
autocompletemenu.appendChild(autocompleterow);
}

128
Plugins/ServerFolders/ServerFolders.plugin.js
View File

@ -3,7 +3,7 @@
class ServerFolders {
getName () {return "ServerFolders";}
getVersion () {return "6.3.4";}
getVersion () {return "6.3.5";}
getAuthor () {return "DevilBro";}
@ -11,7 +11,7 @@ class ServerFolders {
initConstructor () {
this.changelog = {
"fixed":[["👽","Let's raid Area 51"]],
"improved":[["<span style='-webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'>Color Gradients</span>","You can now use color gradients to create folders"]]
};
this.labels = {};
@ -201,6 +201,7 @@ class ServerFolders {
</div>
<div class="${BDFDB.disCN.guildedgewrapper}" aria-hidden="true">
<span class="${BDFDB.disCN.guildedge}"></span>
<span class="${BDFDB.disCN.guildedgemiddle}"></span>
<span class="${BDFDB.disCN.guildedge}"></span>
</div>
</div>`;
@ -348,20 +349,20 @@ class ServerFolders {
</span>`;
this.folderIcons = [
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAB2ElEQVR4Xu2Z4W6DMAwG4f0fmqloq0YJw0dIhLPb7y+qfT0Hr8yTf2ECczhpcBIWkEBYwgIEQFSzhAUIgKhmCQsQAFHNEhYgAKKaJSxAAETvMGsBn1eK3lFDZQmx4zWF1kL6rLCmlli3lamrBd4N6qeNq/VUYogdv1JcK1CPByasmFRrisJqbdWj7RLWAGaBFi5FqSSPHsNLBOAhDIwe6HVnwb4vx1H/KDxN02iw0ENOWGAjEJaw0B0WFiYc/P547yzwPYwI66j9nUiadW7Km5GwzmG91wthCStGAKRWqbqatSw5ng/zXL7bu8FKDKr/nSWs4NAnB9XXLGEFrXrFksPqt5QmB7XZGJo/DZPD2vBpCis5qN0eKqzXZr5fQosLezNYo1nV9N8dYYG3O8lhFSeuyRgmB3U4ccLaL9eHTG6HNapVTS745LD+lEeztmPYD9bIVt0+hsLaanr4I3pyUCFxbruzksMKcQiFfsk1qlkhDqHQGaz/YFVoTj8W3Bwv/sBP3uTdKTVr/Umd1fLoNOofhc/G8dFYysWh/lF4sJHEveMDhS8o01hW9Vt1OOHYVZUsLIBPWMICBEBUs4QFCICoZgkLEABRzRIWIACimiUsQABENQvA+gLIy3lMlnMoMQAAAABJRU5ErkJggg==",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABkElEQVR4Xu3a6xKCIABEYXz/h7bpOl1M94CWMqffywRfK1I2FF+xwBAnDRaxQAnEEgsIgKjNEgsIgKjNEgsIgKjNEgsIgKjNEgsIgOgazRrB+01F15hD4xSy4S0TbUV6n2HLXLLVNqZqJ7g21H0ZtfNpZMiG10xuK6jdg4mVleqSolhbt2rX7RKrg2aBJVRFaUl2fRlWCcBBGIwO+NWeBdddHUfrR+FSSm9Y6CYnFjgRNGON43HKNgyTy40N4uBtV3iRORLU4wD3CRYbxEGxwPUqlli/uxu6Z82f79zgwflXLLEyAY8O4CYnlljfL6uJrzxxYeKgh1JQQbHE8gQ/dxBwz8qOSdeHDv5Ek2uJlVvZLGAlllhEAGTds8QCAiBqs8QCAiBqs8QCAiBqs8QCAiD6t2ad53ikB61//ReNWOCJNGj/nqPxc4g4+LTa4/x7bfkjQutH4c7A8NrxgE7AqtZdNWi53X0mxAKfq1hiAQEQtVliAQEQtVliAQEQtVliAQEQtVliAQEQtVliAQEQPQHGLZBMBnSlGQAAAABJRU5ErkJggg=="},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAB5ElEQVR4Xu3b0XaDIBBFUfz/j7YraZqooM4dxljg9HkU2dwh6rJT4s8sMJkrKUxgCSEACyxBQCglWWAJAkIpyQJLEBBKSRZYgoBQSrLAEgSEUm+yZmGMZal3POdwsYd5Lt4L9XflnjFjZ+08m3rhtVBNg1VhzbPdbpqyodSxnXmIO0y94LeOAvWOUw4WNxP9TOrc5fdZVViP+RQSpk8z7ggJTCpOKVVjtQx2C1ZcMPQz1eydw2EVkm02MBe+1jCkDfU8xB6xSZfZwFwIVrru1/Cf/erVRvMZqkuS1RnU5zZRJDftWWD9qrqwPHf74iKGl5duMb7ShmDtPERvV6QXqEs2eLA+O8LpngWWE6vFFjx6HArd4HtOVfieBdb6DuZwzwLLiNU7VGgbgpU/ROy2IVhGrBGgwtoQrPJzfLENwTJijQIV0oZg7b9Ky9oQLCPWSFDVbQjW8dvsVRuC5cTq7d1VicH9Pmt7shax1I9EwFqv+qEHWN/GGqEFq24dlgsC1smzIVjnXwxk33KPkqqQNgTL8Gx4HsKmKkx3BaaixbTt/1LRjpXZwFz4mjtY7YTg3itVk3Xv1d48OljCAoAFliAglJIssAQBoZRkgSUICKUkCyxBQCglWWAJAkIpyQJLEBBKfwAHhexMOBnKeAAAAABJRU5ErkJggg==",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABj0lEQVR4Xu3b2w6CMBBF0fb/PxpDgsQAMbOnExtw+3zoZfUoxGhvvsICPZw02MQCJRBLLCAAojZLLCAAojZLLCAAojZLLCAAojZLLCAAotlmLWCOz2h2vuR0tZdlFp+Feq88M2ftrpOj0YWPQt0abAhrWeJ2vZ+monMn+1B3GV3wrkOg9jqdwep2wkeie8ffZw1hrfu5aBjfZt0VCAyFW2vDWHcGm4JVVww+0shn599hXTQ7bBAObmdY8jbkfai94tCusEE4KFbL3w1rz3rqaOHChIPHZk3dXu3kYYNwUKzBt2HmKb62FHw0Hx2gmXdDACaWWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARH/erHVt/jDk+wnF/yUATnpyNPyzq3Bw25BY8GSfBIbKgsIQ9XFxscCRiiUWEABRmyUWEABRmyUWEABRmyUWEABRmyUWEABRmyUWEABRmwWwXiH/oUz3h3vUAAAAAElFTkSuQmCC"},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABsElEQVR4Xu3Z4XLCIBBFYfP+D52OjbXGxmQPQgrr6b/OrAKfdwnidPEvLDCFKy28iAVCIJZYQACUmiyxgAAoNVliAQFQarLEAgKg1GSJBQRAaWmyZjDGY2npeIXD1X1ZyeRLoX5mXjJm3VUXvhud+LtQQ4P9F9YVjY5dmId6L6MTrpWseisofye6dvzpZsLC6aa62bAQmFhg7xRLLLTrhwMTLrwN754FPoeMWJHlf4fKZEWolppJrN6w5nm87p3+5uicZIkVjG8WqFM2eLGCqbqWiRXEGhFqOSOsDgn3f5oeHUbE2noKll7vojOAWMEWzLZfNX0aZkuVWE9dsrdfidUDVsYWbJYssZbIho4OYgWxskI1aUOxfp8ah20oVhArM1T1NhRrfXDbbUOxglgjQu3dXW3dF1S7zxoR6+i74DOYWGuRXQ+xzsb6hBasdnQQa/v6ePPoIFYQ61OgqrShWK9/wTn8Ig1+/OmpNHQqCBU9rCojVtggXHgDE6unfuh5LjRZPa+l+dzEAsRiiQUEQKnJEgsIgFKTJRYQAKUmSywgAEpNllhAAJSaLLGAACj9AiC1iUwkZlXyAAAAAElFTkSuQmCC",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABgElEQVR4Xu3a7a6CMBREUXj/h8aQKEGMMvvYACX7/r2jLatDrR/j4F8sMMZJg4NYoARiiQUEQNRmiQUEQNRmiQUEQNRmiQUEQNRmiQUEQLTarAmMsY5WxysO1/ZhlclXoV4zr4zZ9qqLz0Yn/i9U12BnYc1odOxiH9o9jE64VbPaXUH9mei149W9ExZuN9W9GxYCEwvsnWKJhXb9uDBx8Dm8exZYB7HEygS8DY/a4Kepv7tyHD/6ERcmDm43+B6hlnfx72CxQRwUC9yvYol1zHtD96z948by8ieWWD8FfDUE+7ZYYv3eTzan+LgwcdBzFqigWGJ5KN07Abln7Qmt/i+WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG2WWEAARG3WlbHmufX4ddgpPwwBC3n1aPzRehzcfqx8dQEwv9ggDq4G7+9HWd/l0PWjMFitW0bFAssqllhAAERtllhAAERtllhAAERtllhAAERtllhAAERtllhAAERtFsB6ACnIiUxdpMfOAAAAAElFTkSuQmCC"},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAByUlEQVR4Xu3a4XKCMBBFYXj/h6bTakEFYU+yjJic/r4Y+LwLNOM4+BcWGMNJg4NYoARiiQUEQNRmiQUEQNRmiQUEQNRmiQUEQNRmiQUEQLS0WRNY4zFaul7hcrmHlZx8KdT/mZesmXvVhZ9GT7wW6qvBqrCmKW43jqul6NqFfcg7jJ7wrEOg5jqtwfKuhH8SvXa8n1WF9Xs9Gw3jl5l3BAJD4WEYqrG+GewjWHnF4J9Uc+/sDmuj2WGDcPD+HaaMIe9D7hEv7QobhINiDec9DS/21Kut5l+pTmlWY1DLayIkD92zxLqpigXaJVYmVqsjeMoNXqyleodjKFbfWPPrVep7VsutSr9nifX8qNy9Z4kVxGodKnUMxVq/rb4dQ7GCWD1ApY2hWNv/MG6OoVhBrF6gUsZQrPd7NqsxFCuI1RNU9RiKtb9t+jSGYvWNtbtlVbyfBfbtvykqFvi2xBILCASjh7ekw8DLQvFf3AbP8EKxQ4vDgFiLgFg3i5BDKPTQrlbHMOQQCokF6tc4Vrgw4eAdrMUxDBuEgxd6xH/sVMQC9GKJBQRA1GaJBQRA1GaJBQRA1GaJBQRA1GaJBQRA1GaJBQRA1GYBrB8F4ZJMlK2iwQAAAABJRU5ErkJggg==",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABkklEQVR4Xu2bywrCQBAEN///0RFFg6iHrtmRNVieK/uo9LQguA0/sYEtJgWHskAIlKUsYACgJktZwABATZaygAGAmixlAQMANVnKAgYAWk3WDvZ4Rqv7Fbfrfaxy+Kqox8kre/beurgaPfisqFMLm5K177m7bXvbiu5dzEPfY/TAhx0i6ojTu7C+m/CV6N3x71lTsq73+ZAwfs2+J5AwBI8xpmWdWdgSWX3B4CvNdOffyfqQ7NhBDN7fYcsY8jz0PvGSrthBDCpr1L8Ne9/10tXiwMTga7KWXq9389hBDCrLMbx9OaZBjUGTBawqS1mOYdpBdy6uohh0DB1Dx9AxhAYAHldRDNpZdpadBUZQWcqCBgAe93YMWvAWvJ0FRlBZyoIGAB73dgxa8Ba8nQVGUFnKggYAHvd2DFrwFrydBUZQWcqCBgAe93YMWvAWvJ0FRvCrsq6L5/9BgadegKMaQvCCy/zUlsoCr0NZygIGAGqylAUMANRkKQsYAKjJUhYwAFCTpSxgAKAmS1nAAEBNFpB1ARZcR0zScgj8AAAAAElFTkSuQmCC"},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAB4ElEQVR4Xu2Z0XWDMAxFxWdH6A6docN3hu7QEfpJT9NAQwJIz0duQefm+8WY6yvZwGD8wgSGcJKgAUuQAFjAEggIUcwClkBAiGIWsAQCQhSzgCUQEKKYBSyBgBDFrA6wRmHMaPR0CxWZcA9QE9DI9aPwu+cikwXWdRn+G9b3NCJz6G5N5AKRifY0C1iRVbrLRBatYdjcv0Qm2dus09h1FFi5CuijRTiEmutfmKXfXv4/XGBuwMyAdaCjQ74jbSO64riBW7PGsa5kwzC4LNwAsH41BdbUjzAr3rwowzgrA9bRYQVKX7iFw0QvvT29wQPrusDeOasoqFmqVLOAdfNsiFl+D52fcfZgVbcqtcED68c6zGp5RbNVhoWtWlRfym5YGNaCD7D2N7hcWIWtetgAW8x6M7PXaUEKw3pg0wLr3cxegLVev/dHhw8ze7446r+29o+8x02kmPVpZk/Aipk1pwqbtdqeWnrWBVZhUJuPgcBarybMEvaSPFjFSzC3DIvD2mxNUs8SND5zFFjC6gELWAIBIYpZQVi7PZwGv6QIrKBV7teuiFmLLzzChc8WdVm4gbPdcc/5AkugCyxgCQSEKGYBSyAgRDELWAIBIYpZwBIICFHMApZAQIhiFrAEAkL0C09hh0yOgU58AAAAAElFTkSuQmCC",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABv0lEQVR4Xu2aYW7CMBSDX26ChHabXZfbTJN2kqKCNpCg+Jk0axp9/MVpky+220JL8EkTKGklwgCWYQJgAcsgYEhxFrAMAoYUZwHLIGBIcRawDAKGFGcByyBgSHFWA1iTccys9BARP1lxD7qMs1qA+l175vw9cLrMITPZlrA+I+LUDQ0xka1hZTesC57AMrahB1i7cVdPsOa5tOxHw0PPpb3Aql5I5QEyHDa/GlaucdXhx4j4fnXEDNGuo7EiLnmTDKwb7Y+I+FrNWdM0rslKKdI4UnB/hQKWDv2fnYAFrOtD8n/EMHEOvR0bK+bENIc1Aqi7fZL9LQWvCh5Yj5FYLHhgAWuxQYnhDY1kIQV0lkETWMB61ksyZVKAs3AWzqp8apIpkwJiSAyJITGsJGAMl5UkBXQWnUVnGZEDFrAqCRjDZX9LwVLBD/Yr6eUPHgVWCnp/DUgt0PhespACYL1562Ds0h6l0jhSgLNwVvv7rD1my5izTJkUEENiSAyNyDWDNR943Pcjr9gydZQTVe7YMMNTRIdZbeVCgGUABBawDAKGFGcByyBgSHEWsAwChhRnAcsgYEhxFrAMAoYUZxmwzq8phkz4oCrBAAAAAElFTkSuQmCC"},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAByElEQVR4Xu3Z0XaDIBCE4fj+D21OepqkWnRnZPUA/rntxuDnsICdHnxkgUmupPABlhECsMAyBIxSkgWWIWCUkiywDAGjlGSBZQgYpSQLLEPAKCVZJ2PNxvWV0m4emDvQbKg3pjsO5SGk1ziDPAuqGzAV62yoLsBaw3qhqWNKn2bRBdWBXZWsphPWKlb0kDP+rt7757fUL1ydrAwM9RqqgdwfRsaS+6SqCpax8oyOJaWLZH07W2gRFvxei2QxDRcLZhicsKAmWfPcdiCnaXH7oUVYcASrdaStDdi00lvXpWP1CvU5Z+2AgVWI2VbCUrF6T1WULrBIlnqGLtcxDQ2/07FG6Vc/h8SNFTGtZ4H1jW64FQfrhlh7u3im4arxg5WwEkpvB5WD9B36FVjG7h0ssIwGZTR3knU11l2ae0qywPo/7TePO2CBVVwlqo87oyQr+s9Odc8aBWrvHdbfiFUlC6zynq7Y4MG6IZbSr6p61t1S5WC9ahdTEaz9M+iQWOoUdJO1SNcIyXKgjmC9szf3juVC1WAdf2nU8TfVTWnHt5g3dLAMS7DAMgSMUpIFliFglJIssAwBo5RkgWUIGKUkCyxDwCglWQbWE/kykkzUi2UWAAAAAElFTkSuQmCC",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABZklEQVR4Xu3awZKCMBQFUfL/Hx0rKizccNtKKHjVs/WKeGh0FrbNv1igxUuHm1ggArHEAgJgalliAQEwtSyxgACYWpZYQABMLUssIACmlrUYq4PjJ9PHXDB6orOhdkx6HslFmL4hJ7kK6jFgKdZqqEeA3Q1roKXnNP02OztgemJXlXXrwv7C6v1qu7Nrzh9vraXv/Th4+oS3TgWkX1aCFmNVhDru+bAyscY3ykysXjmrb14JWFSWWB9RsSxrzb8SlmVZlsUFwDP8NhQLCICpZYkFBMDUssQCAmBqWWIBATC1LLGAAJhallhAAEwtSywgAKaWJRYQAFPLEgsIgKlliQUEwNSyxAICYGpZYgEBMLUssYAAmE4ra7xm5d9oJVDDIPoVjVifRGOsqmBpVRhr/wiocEsSpP19o7LA52XJqVjgsoolFhAAU8sSCwiAqWWJBQTA1LLEAgJgalliAQEwtSyxgACYvgCckKpMkaN7zAAAAABJRU5ErkJggg=="},
{"openicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABrklEQVR4Xu3ayZLCMAxFUfz/H50upnQanFjXdi8SXba8TAdJGBfl5issUMJJgzexQBGIJRYQAFErSywgAKJWllhAAEStLLGAAIhaWWIBARC1ssQCAiDaU1kLOH8t2nPNwUvOOZze+CjU+67pdec87eBZ6E3PwrrfNr324KOOH05veCbW6cCGsJZltt34p986QymFPvN6SnrgqnNGqHVgdoJ1YZ0Z6tH7YrUa8Pd9seJWj2QPWMo2fGHhb+PsWAhMLLA4Fkus9rTfrB7CBXMUPN/yvG0USeya7L2RFepwV6SGlR1qF0ys/cb8shFLrMgcb2asrCbR5vf2Z9Y2tA1B/Qxi3Q/Pvnyorj9dlNYrSyzQnGL9F1bmuYV/SItVKUO3aL5RrKzReRXZrM+23jrcNW1tqYq1KUmx/vanlTVjXkVmVqYlRKvLQv++yzK3xJrVgrYhGO5RrAxzq9mCYh3st9faNySaYOc05BAKifWssyjWledW2CAcvHB1hQ3CQbBeuWxULPDRiiUWEABRK0ssIACiVpZYQABErSyxgACIWlliAQEQtbLEAgIgamUBrB+JEUtMl61hQwAAAABJRU5ErkJggg==",
"closedicon":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAABhUlEQVR4Xu3YwQqDMBBF0eT/P9oiVAji4l1rIh1u1w8zHifTaG/+YoEeJw02sUATiCUWEABRO0ssIACidpZYQABE7SyxgACI2lliAQEQtbPEAgIgeqezNnD9q+idNa+us7wOWvivBR43Tdc9Y71SBy36qSL3m6drH2BP1oDqoAW/VuhX6un112Ft24zarydi7/S5xpM1vnAcPD/ZIlDzO6sQVB2siVtv3KPx7oqD4zZc0VmLoOZ3Vjw6/yMYN0wcnPjX/TZpbBAHW2vrzglr+WKDOCgWe+Wws0DHiyVW/kLvzAKjSCyxwHARSywkAMLxKIqDHkrBfhVLrGmfaDzBg0Eolli+7oAeEEssIgCy8VkzDnrO8pzlOQtsQbHEggIgHs/tOOiAd8A7s8AWFEssKADi8dyOgw54B7wzC2zBaVj7hat9LSVjKP/wNTytKmAICrUgbO2ScaxbUiG8KbFCKLchgBJLLCgA4s4ssYAAiNpZYgEBELWzxAICIGpniQUEQNTOAlgf/fBATBZ555AAAAAASUVORK5CYII="}
{openicon:`<path d="M 200,390 H 955 L 795,770 H 200 Z" fill="REPLACE_FILL2"/><path d="M 176.6,811 C 163.9,811 155.1,802.6 155,784.7 V 212.9 C 157.9,190.5 169,179.8 195.9,176 h 246 c 20.3,3.2 34.5,18.7 41,28.6 C 494.9,228.3 492.9,240.4 494,266 l 313.6,1.3 c 17.6,0.4 23.3,3.7 23.3,3.7 8.6,4.2 14.8,10.7 19,19.5 C 856.3,319.5 854,360 854,360 h 108.9 c 4.4,2.4 13.7,1.2 11.8,23.5 L 815.8,789.4 c -2.1,5.2 -12.5,13.6 -18.7,16.1 -6.8,2.7 -18.5,5.5 -23.9,5.5 z M 767,759 897,430 H 360 L 230,759 Z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 175,320 V 790 H 820 V 320 Z" fill="REPLACE_FILL2"/><path d="m 183,811 c -12.2,-0.6 -17.9,-4.8 -21.5,-8.2 C 159.5,801 154.8,792.6 155,779.7 V 215.6 c 3.3,-14.1 9.3,-21.4 15.1,-26.4 7.4,-6.3 16,-11.6 36.7,-13.2 h 237.3 c 23.3,6 32.2,18.7 38.7,28.6 7.6,11.7 9.4,18.6 10.3,41.4 L 494,266 h 313.4 c 16.9,0.1 23.5,5.1 23.5,5.1 8.6,4.2 14.5,10.9 19,19.5 0,0 3.7,7.5 3.1,19.8 V 777.2 c -1.1,9 -4.1,13.7 -4.1,13.7 -4.2,8.6 -10.7,14.8 -19.5,19 L 823.3,811 Z m 602.8,-55 c 2.8,-1.7 6.9,-4.5 8.9,-7.4 2.4,-3.6 5,-10.8 5.4,-24.7 V 362 c -0.2,-10.9 -4.2,-16.3 -4.2,-16.3 -2,-3 -5.9,-6.8 -8.7,-8.6 0,0 -5.8,-3 -12.7,-3.2 h -548.1 c -7.8,0 -13.9,3.6 -13.9,3.6 -3,2 -7.3,6.7 -8.4,17.3 v 386.4 c 2.8,10.4 7.5,16 13.6,17.7 h 544.9 c 11,-0.2 18.4,-1.9 23.3,-3 z" fill="REPLACE_FILL1"/>`},
{openicon:`<path d="m 167,200 h 200 l 50,50 H 829.8 L 830,330 H 970 L 825,779 H 167 Z" fill="REPLACE_FILL2"/><path d="m 184,799 c -10.5,0 -22.3,-5.3 -27,-10 -4.7,-4.7 -9,-15.1 -9,-34 V 212 c 0,-13.3 5,-22 11,-28 4.4,-4.4 15.4,-10 30,-10 h 170.3 l 53.3,53 H 820 c 13.1,0 18.2,4.2 25,10 6.4,5.5 7,14.4 7,31 v 52 h 122.3 c 11.6,0 17.1,3.3 17.1,3.3 2.9,2.9 3.3,4.4 3.3,14.2 0,8.4 -0.9,13.5 -3.8,22.4 L 849,799 Z M 933,360 H 335 l -130,398.1 603.2,1.3 z M 289.7,334.6 c 3,-8.2 8,-14.8 17,-14.8 0,0 506.6,0.2 506.3,0.2 0,-39.8 -12.2,-53 -53,-53 L 403.3,266.7 350,213 H 240 c -37.6,0 -53,10.1 -53,53 v 382.7 z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 173,190 V 771 H 825 V 250 H 420 l -70,-60 z" fill="REPLACE_FILL2"/><path d="M 184.2,799 C 170.3,799 164.3,795.8 157.4,788.9 151.7,783.3 148,774.6 148,754.9 V 211.2 c 0.7,-18.6 6,-21.7 11.9,-27.6 6.8,-6.8 15.5,-9.4 29.3,-9.6 h 170.1 l 53.3,53 h 407.7 c 14.1,0 18.6,2.8 25.3,9.4 6.4,6.4 7.1,13.4 7.1,30.8 v 246.1 247.4 c 0.2,11.8 -1.9,22.1 -7.4,27.6 C 839.7,793.9 831,799 819.4,799 Z M 813,707 V 415 c 0,-36.9 -13.9,-53 -53,-53 H 240 c -38.1,0 -53,11.7 -53,53 v 292 c 0,38.8 11.5,53 53,53 h 520 c 37.8,0 53,-12.1 53,-53 z M 760,267 c 0,0 -228.6,-0.3 -356.7,-0.3 L 350,213 H 240 c -41.6,2.7 -52.2,14.3 -53,53 v 54 h 626 c -0.6,-37.5 -12,-53 -53,-53 z" fill="REPLACE_FILL1"/>`},
{openicon:`<path d="M 307,330 H 970 L 825,779 H 167 Z" fill="REPLACE_FILL2"/><path d="M 189 174 C 174.4 174 163.4 179.6 159 184 C 153 190 148 198.7 148 212 L 148 755 C 148 773.9 152.3 784.3 157 789 C 161.7 793.7 173.5 799 184 799 L 849 799 L 990.8 359.8 C 993.8 350.9 994.7 345.9 994.7 337.4 C 994.7 327.6 994.3 326.2 991.4 323.3 C 991.4 323.3 985.9 320 974.3 320 L 852 320 L 852 268 C 852 251.4 851.4 242.5 845 237 C 838.2 231.2 833.1 227 820 227 L 412.6 227 L 359.3 174 L 189 174 z M 335 360 L 933 360 L 808.2 759.3 L 205 758.1 L 335 360 z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 173,345 V 771 H 825 V 345 Z" fill="REPLACE_FILL2"/><path d="M 189.2 174 C 175.4 174.2 166.7 176.8 159.9 183.6 C 154 189.5 148.7 192.7 148 211.2 L 148 754.9 C 148 774.6 151.7 783.3 157.4 788.9 C 164.3 795.8 170.3 799 184.2 799 L 819.4 799 C 831 799 839.7 793.9 845.2 788.4 C 850.8 782.8 852.9 772.5 852.7 760.8 L 852.7 513.3 L 852.7 267.2 C 852.7 249.8 852 242.8 845.6 236.4 C 838.9 229.7 834.4 227 820.3 227 L 412.6 227 L 359.3 174 L 189.2 174 z M 240 362 L 760 362 C 799.1 362 813 378.1 813 415 L 813 707 C 813 747.9 797.8 760 760 760 L 240 760 C 198.5 760 187 745.8 187 707 L 187 415 C 187 373.7 201.9 362 240 362 z" fill="REPLACE_FILL1"/>`},
{openicon:`<path d="m 167,200 h 200 l 50,50 H 829.8 L 830,330 H 314 L 167,779 Z" fill="REPLACE_FILL2"/><path d="M 189 174 C 174.4 174 163.4 179.6 159 184 C 153 190 148 198.7 148 212 L 148 755 C 148 773.9 152.3 784.3 157 789 C 161.7 793.7 173.5 799 184 799 L 849 799 L 990.8 359.8 C 993.8 350.9 994.7 345.9 994.7 337.4 C 994.7 327.6 994.3 326.2 991.4 323.3 C 991.4 323.3 985.9 320 974.3 320 L 852 320 L 852 268 C 852 251.4 851.4 242.5 845 237 C 838.2 231.2 833.1 227 820 227 L 412.6 227 L 359.3 174 L 189 174 z M 240 213 L 350 213 L 403.3 266.7 L 760 267 C 800.8 267 813 280.2 813 320 C 813.3 320 306.7 319.8 306.7 319.8 C 297.7 319.8 292.7 326.4 289.7 334.6 L 187 648.7 L 187 266 C 187 223.1 202.4 213 240 213 z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 173,190 V 350 H 825 V 250 H 420 l -70,-60 z" fill="REPLACE_FILL2"/><path d="M 189.2 174 C 175.4 174.2 166.7 176.8 159.9 183.6 C 154 189.5 148.7 192.7 148 211.2 L 148 754.9 C 148 774.6 151.7 783.3 157.4 788.9 C 164.3 795.8 170.3 799 184.2 799 L 819.4 799 C 831 799 839.7 793.9 845.2 788.4 C 850.8 782.8 852.9 772.5 852.7 760.8 L 852.7 513.3 L 852.7 267.2 C 852.7 249.8 852 242.8 845.6 236.4 C 838.9 229.7 834.4 227 820.3 227 L 412.6 227 L 359.3 174 L 189.2 174 z M 240 213 L 350 213 L 403.3 266.7 C 531.4 266.7 760 267 760 267 C 801 267 812.4 282.5 813 320 L 187 320 L 187 266 C 187.8 227.3 198.4 215.7 240 213 z" fill="REPLACE_FILL1"/>`},
{openicon:`<path d="M 132,305 H 880 V 750 H 132 Z" fill="REPLACE_FILL2"/><path d="m 135,188 c -5.6,0 -13.9,2.9 -19.8,8.9 C 109.4,203 107,206.8 107,216 c 0,189.7 0,379.3 0,569 0,11.1 1.7,14.8 7,20.2 C 120.5,811.6 125.4,813 135,813 h 717 c 16.7,0 16.7,-1.6 18.6,-6.6 L 981.3,423.4 c 0,-5.8 -1,-6.2 -2.8,-8.1 -1.9,-1.9 -4.3,-2 -11.9,-2 l -691.9,2.1 c -16.4,0 -21.3,11.5 -23.4,17.2 l -80.9,263 -0.2,0 C 159.1,714.4 147,704.3 147,677.2 V 334 h 733 v -26 c 0,-7.7 -1.6,-14.7 -7.6,-19.8 C 866.3,283.1 860.4,280 852,280 H 440 l -20,-82 c -1.2,-2.5 -3.1,-6.8 -5.8,-7.7 0,0 -3,-2.3 -10.2,-2.3 z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 132,305 H 880 V 750 H 132 Z" fill="REPLACE_FILL2"/><path d="m 135,813 c -10.3,0 -14.5,-1.4 -21,-7.8 C 108.7,799.8 107,796.1 107,785 c 0,-189.7 0,-379.3 0,-569 0,-9.2 2.4,-13 8.2,-19.1 C 121.1,190.9 129.4,188 135,188 h 269 c 7.2,0 10.2,2.3 10.2,2.3 2.7,0.9 4.6,5.2 5.8,7.7 l 20,82 h 412 c 8.4,0 14.3,3.1 20.4,8.2 C 878.4,293.3 880,300.3 880,308 v 26 H 147 v 343.2 c 0,27.1 18.1,25.2 21.7,5.4 l 32.7,-277.7 c 0.7,-2.8 2.7,-7.5 5.8,-10.6 C 210.4,391.1 214.5,388 222.7,388 H 852 c 7.9,0 15.9,2.9 20.5,7.5 C 878.3,401.3 880,408.6 880,416 v 369 c 0,6.9 -1.8,14.7 -7.4,19.3 C 866.2,809.6 858.9,813 852,813 Z" fill="REPLACE_FILL1"/>`},
{openicon:`<path d="m 186.3,187 c -20,0 -35.7,7.4 -47.4,19.3 -11.7,11.9 -17.6,25 -17.6,45.7 v 80 l -0.3,416 c 0,10.9 4.6,32.6 16.7,45.1 C 149.8,805.6 168,813 186.3,813 365.7,749.3 880.3,734.5 880.3,734.5 c 0,0 0,-255.4 0,-402.5 0,-16.9 -4.7,-35 -17.2,-47.4 -12.5,-12.4 -30.1,-17.6 -47.8,-17.6 h -310 l -79,-80 z" fill="REPLACE_FILL1"/><path d="m 175.1,810.3 79.1,-393 c 8.3,-23.6 21.8,-42.9 53.1,-43 H 920.6 c 17.7,0 35.9,19.5 33.7,29.3 l -73.7,365.7 c -9,24.8 -11.1,41.3 -51.8,44 H 185.6 c -3.6,0 -6.4,-0.1 -11.1,-0.9 z" fill="REPLACE_FILL2"/>`,
closedicon:`<path d="m 121,252 c 0,-20.7 5.9,-33.8 17.6,-45.7 C 150.3,194.4 166,187 186,187 h 240 l 79,80 -384,113 z" fill="REPLACE_FILL1"/><path d="m 186,813 c -18.4,0 -36.5,-7.4 -48.6,-19.9 C 125.3,780.6 120.7,758.9 120.7,748 L 121,332 c 0,-16.9 7.2,-31.7 18.6,-43.5 C 151,276.7 170.1,267 186,267 h 629 c 17.6,0 35.2,5.3 47.8,17.6 C 875.3,297 880,315.1 880,332 v 416 c 0,14.8 -3.4,36.6 -17,47.9 C 849.5,807.2 830.9,813 815,813 Z" fill="REPLACE_FILL2"/>`},
{openicon:`<path d="m 160,253 h 614 c 14.8,0 29.7,8.6 36.9,15.8 C 819.4,277.3 826,289.4 826,305 v 95 H 160 Z" fill="REPLACE_FILL2"/><path d="m 199,200 c -26.2,0 -33.9,6.5 -41.5,15.6 C 149.8,224.8 147,231.8 147,252 V 386.7 387 c -20.9,0.5 -56.5,-3.5 -70.3,6.9 -2.5,1.9 -5.4,3.2 -8.3,9.8 -6.8,25.6 -0.3,54.8 1.1,70.3 9.1,59.2 69.1,294.7 74.9,310 3.7,9.8 4.6,13.6 10,15 h 689.6 c 6.3,-1.4 11.6,-15 11.6,-15 L 931.8,474 c 2.7,-20 8.3,-54 -0.2,-70.3 -2,-3.5 -6.5,-8.1 -9.3,-9.8 C 902.5,385.1 881.9,387 853,387 852.6,369.4 855,346.8 846.6,333 842.4,326.2 830.5,321.3 826,321.3 V 387 L 173.2,386.7 173,387 v -82 c 0,-14.6 2.8,-25.9 12.4,-35.5 C 195.9,259 207.7,253 225,253 h 201 l -54,-53 z" fill="REPLACE_FILL1"/>`,
closedicon:`<path d="M 160,400 V 253 h 440 v 147 z" fill="REPLACE_FILL2"/><path d="m 186,799 c -24.2,0 -34,-8 -39.7,-13.6 C 140.8,779.9 134,769.1 134,747 V 372 c 0,-21.5 13,-32 13,-32 V 252 c 0,-20.2 2.8,-27.2 10.5,-36.4 C 165.1,206.5 172.8,200 199,200 h 173 l 54,53 H 225 c -17.3,0 -29.1,6 -39.6,16.5 C 175.8,279.1 173,290.4 173,305 l -0.4,19 c 0,0 9.6,-4 20.9,-4 H 494 L 614,200 h 186 c 17.7,0 26.6,7.1 36,14.2 C 846.5,222 852,233.6 852,252 v 495 c 0,16.1 -7.5,30.2 -14.1,36.7 C 831.4,790.2 815.9,799 800,799 Z" fill="REPLACE_FILL1"/>`}
];
this.defaults = {
@ -675,7 +676,7 @@ class ServerFolders {
showFolderSettings (folderdiv) {
if (!folderdiv) return;
let {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers} = BDFDB.loadData(folderdiv.id, this, "folders") || {};
let {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers,isOpen} = BDFDB.loadData(folderdiv.id, this, "folders") || {};
if (!folderID) return;
let folderSettingsModal = BDFDB.htmlToElement(this.folderSettingsModalMarkup);
@ -727,63 +728,34 @@ class ServerFolders {
if (iconID != oldIconID || !BDFDB.equals(color1, oldColor1) || !BDFDB.equals(color2, oldColor2)) {
let folderIcons = this.loadAllIcons();
let isOpen = BDFDB.containsClass(folderdiv, "open");
if (!BDFDB.containsClass(selectedIcon, "custom")) {
this.changeImgColor(color1, color2, folderIcons[iconID].openicon, (openicon) => {
icons.openicon = openicon;
this.changeImgColor(color1, color2, folderIcons[iconID].closedicon, (closedicon) => {
icons.closedicon = closedicon;
let isCustom = BDFDB.containsClass(selectedIcon, "custom");
icons.openicon = !isCustom ? this.createBase64SVG(folderIcons[iconID].openicon, color1, color2) : folderIcons[iconID].openicon;
icons.closedicon = !isCustom ? this.createBase64SVG(folderIcons[iconID].closedicon, color1, color2) : folderIcons[iconID].closedicon;
folderdiv.querySelector(BDFDB.dotCN.guildicon).setAttribute("src", `${isOpen ? icons.openicon : icons.closedicon}`);
BDFDB.saveData(folderID, {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers}, this, "folders");
});
});
BDFDB.saveData(folderID, {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers,isOpen}, this, "folders");
}
else {
icons.openicon = folderIcons[iconID].openicon;
icons.closedicon = folderIcons[iconID].closedicon;
folderdiv.querySelector(BDFDB.dotCN.guildicon).setAttribute("src", `${isOpen ? icons.openicon : icons.closedicon}`);
BDFDB.saveData(folderID, {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers}, this, "folders");
}
}
else BDFDB.saveData(folderID, {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers}, this, "folders");
else BDFDB.saveData(folderID, {folderID,folderName,position,iconID,icons,copyTooltipColor,color1,color2,color3,color4,servers,isOpen}, this, "folders");
});
foldernameinput.focus();
}
changeImgColor (color1, color2, icon, callback) {
color1 = BDFDB.colorCONVERT(color1, "RGBCOMP");
color2 = BDFDB.colorCONVERT(color2, "RGBCOMP");
if (!color1 || !color2 || !icon) return;
let img = new Image();
img.src = icon;
img.onload = () => {
if (icon.indexOf("data:image") == 0 && img.width < 200 && img.height < 200) {
let can = document.createElement("canvas");
can.width = img.width;
can.height = img.height;
let ctx = can.getContext("2d");
ctx.drawImage(img, 0, 0);
let imageData = ctx.getImageData(0, 0, img.width, img.height);
let data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i] == 0 && data[i + 1] == 0 && data[i + 2] == 0) {
data[i] = color1[0];
data[i + 1] = color1[1];
data[i + 2] = color1[2];
createBase64SVG (paths, color1 = "#000000", color2 = "#FFFFFF") {
if (paths.indexOf("<path ") != 0) return paths;
let isgradient1 = color1 && BDFDB.isObject(color1);
let isgradient2 = color1 && BDFDB.isObject(color2);
let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">`;
if (isgradient1) {
svg += `<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">`;
for (let pos of Object.keys(color1).sort()) svg += `<stop offset="${pos * 100}%" style="stop-color: ${color1[pos]};"></stop>`;
svg += `</linearGradient>`;
}
else if (data[i] == 255 && data[i + 1] == 255 && data[i + 2] == 255) {
data[i] = color2[0];
data[i + 1] = color2[1];
data[i + 2] = color2[2];
if (isgradient2) {
svg += `<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">`;
for (let pos of Object.keys(color2).sort()) svg += `<stop offset="${pos * 100}%" style="stop-color: ${color2[pos]};"></stop>`;
svg += `</linearGradient>`;
}
ctx.putImageData(imageData, 0, 0);
}
callback(can.toDataURL("image/png"));
}
else {
callback(img.src);
}
};
svg += `${paths.replace("REPLACE_FILL1", isgradient1 ? "url(#grad1)" : BDFDB.colorCONVERT(color1, "HEX")).replace("REPLACE_FILL2", isgradient2 ? "url(#grad2)" : BDFDB.colorCONVERT(color2, "HEX"))}</svg>`;
return `data:image/svg+xml;base64,${btoa(svg)}`;
}
setIcons (modal, selection) {
@ -792,6 +764,10 @@ class ServerFolders {
BDFDB.removeEles(wrapper.childNodes);
let folderIcons = this.loadAllIcons();
for (let id in folderIcons) if (!folderIcons[id].customID) {
folderIcons[id].openicon = this.createBase64SVG(folderIcons[id].openicon);
folderIcons[id].closedicon = this.createBase64SVG(folderIcons[id].closedicon);
}
wrapper.appendChild(BDFDB.htmlToElement(`<div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCNS.nowrap + BDFDB.disCN.margintop4}" style="flex: 1 1 auto;"><div class="${BDFDB.disCNS.flex + BDFDB.disCNS.flex2 + BDFDB.disCNS.horizontal + BDFDB.disCNS.horizontal2 + BDFDB.disCNS.directionrow + BDFDB.disCNS.justifystart + BDFDB.disCNS.alignstretch + BDFDB.disCN.wrap} ui-icon-picker-row" style="flex: 1 1 auto; display: flex; flex-wrap: wrap; overflow: visible !important;">${Object.getOwnPropertyNames(folderIcons).map(id => `<div class="ui-icon-picker-icon${folderIcons[id].customID ? ' custom' : ''}" value="${id}"><div class="ui-picker-inner" style="background-image: url(${folderIcons[id].closedicon});"></div>${folderIcons[id].customID ? '<div value="' + id + '" class="' + BDFDB.disCN.hovercardbutton + '"></div>' : ''}</div>`).join("")}</div></div>`));
@ -938,7 +914,7 @@ class ServerFolders {
let folderName = "";
let position = this.getAllServersAndFolders().indexOf(guilddiv);
let iconID = 0;
let icons = Object.assign({},this.folderIcons[0]);
let icons = {openicon: this.createBase64SVG(this.folderIcons[0].openicon), closedicon: this.createBase64SVG(this.folderIcons[0].closedicon)};
let autounread = false;
let isOpen = false;
let color1 = ["0","0","0"];
@ -976,9 +952,11 @@ class ServerFolders {
folderdivinner.addEventListener("mouseenter", () => {
let newdata = BDFDB.loadData(folderdiv.id, this, "folders");
if (!newdata || !newdata.folderName) return;
let bgColor = BDFDB.colorCONVERT(newdata.color3, "RGB");
let fontColor = BDFDB.colorCONVERT(newdata.color4, "RGB");
BDFDB.createTooltip(newdata.folderName, folderdivinner, {type:"right",selector:"guild-folder-tooltip",style:`color: ${fontColor} !important; background-color: ${bgColor} !important; border-color: ${bgColor} !important;`});
var isgradient3 = newdata.color3 && BDFDB.isObject(newdata.color3);
var isgradient4 = newdata.color4 && BDFDB.isObject(newdata.color4);
var bgColor = newdata.color3 ? (!isgradient3 ? BDFDB.colorCONVERT(newdata.color3, "RGB") : BDFDB.colorGRADIENT(newdata.color3)) : "";
var fontColor = newdata.color4 ? (!isgradient4 ? BDFDB.colorCONVERT(newdata.color4, "RGB") : BDFDB.colorGRADIENT(newdata.color4)) : "";
BDFDB.createTooltip(isgradient4 ? `<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${fontColor} !important;">${BDFDB.encodeToHTML(newdata.folderName)}</span>` : newdata.folderName, folderdivinner, {type:"right", selector:"guild-folder-tooltip", style:`${isgradient4 ? '' : 'color: ' + fontColor + ' !important; '}background: ${bgColor} !important; border-color: ${isgradient3 ? BDFDB.colorCONVERT(data.color3[0], "RGB") : bgColor} !important;`, html:isgradient3});
});
folderdiv.addEventListener("contextmenu", e => {
let newdata = BDFDB.loadData(folderdiv.id, this, "folders");
@ -1261,9 +1239,13 @@ class ServerFolders {
if (ESdata && (ESdata.name || ESdata.color3 || ESdata.color4)) window.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");
let fontColor = BDFDB.colorCONVERT(folderData.copyTooltipColor ? folderData.color4 : null, "RGB");
BDFDB.createTooltip(info.name, guildcopyinner, {type:"right",style:`color: ${fontColor} !important; background-color: ${bgColor} !important; border-color: ${bgColor} !important;`});
let color3 = folderData.copyTooltipColor ? folderData.color3 : null;
let color4 = folderData.copyTooltipColor ? folderData.color4 : null;
let isgradient3 = color3 && BDFDB.isObject(color3);
let isgradient4 = color4 && BDFDB.isObject(color4);
let bgColor = color3 ? (!isgradient3 ? BDFDB.colorCONVERT(color3, "RGB") : BDFDB.colorGRADIENT(color3)) : "";
let fontColor = color4 ? (!isgradient4 ? BDFDB.colorCONVERT(color4, "RGB") : BDFDB.colorGRADIENT(color4)) : "";
BDFDB.createTooltip(isgradient4 ? `<span style="pointer-events: none; -webkit-background-clip: text !important; color: transparent !important; background-image: ${fontColor} !important;">${BDFDB.encodeToHTML(info.name)}</span>` : info.name, guildcopyinner, {type:"right", selector:"guild-folder-tooltip", style:`${isgradient4 ? '' : 'color: ' + fontColor + ' !important; '}background: ${bgColor} !important; border-color: ${isgradient3 ? BDFDB.colorCONVERT(color3[0], "RGB") : bgColor} !important;`, html:isgradient3});
}
if (guildicon && guildicon.src && info.icon && info.icon.startsWith("a_") && info.features.has("ANIMATED_ICON") && guildicon.src.includes("discordapp.com/icons/")) {
guildicon.src = guildicon.src.replace(".webp", ".gif");