Update ServerFolders.plugin.js
This commit is contained in:
Mirco Wittrien
parent
96ed4e114c
commit
a653b7bcd3
|
|
@ -2,7 +2,7 @@
|
|||
* @name ServerFolders
|
||||
* @author DevilBro
|
||||
* @authorId 278543574059057154
|
||||
* @version 7.2.9
|
||||
* @version 7.3.0
|
||||
* @description Changes Discord's Folders, Servers open in a new Container, also adds extra Features to more easily organize, customize and manage your Folders
|
||||
* @invite Jx3TjNS
|
||||
* @donate https://www.paypal.me/MircoWittrien
|
||||
|
|
@ -107,152 +107,157 @@ module.exports = (_ => {
|
|||
tabindex: 0,
|
||||
"data-list-id": "guildfoldersnav",
|
||||
className: BDFDB.disCN.guildstree,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Scrollers.None, {
|
||||
className: BDFDB.disCN.guildsscroller,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
"aria-label": BDFDB.LanguageUtils.LanguageStrings.SERVERS,
|
||||
children: BDFDB.LibraryComponents.GuildItem && this.props.folders.map(folder => {
|
||||
let data = _this.getFolderConfig(folder.folderId);
|
||||
let folderIcon = null;
|
||||
if (_this.settings.general.addFolderIcon) {
|
||||
let folderIcons = _this.loadAllIcons();
|
||||
folderIcon = folderIcons[data.iconID] ? (!folderIcons[data.iconID].customID ? _this.createBase64SVG(folderIcons[data.iconID].openicon, data.color1, data.color2) : folderIcons[data.iconID].openicon) : null;
|
||||
folderIcon = folderIcon ? BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfoldericonwrapper,
|
||||
onClick: _ => BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId),
|
||||
style: {background: `url(${folderIcon}) center/cover no-repeat`}
|
||||
}) : BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfoldericonwrapper,
|
||||
onClick: _ => BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId),
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfoldericonwrapperexpanded,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SvgIcon, {
|
||||
name: BDFDB.LibraryComponents.SvgIcon.Names.FOLDER,
|
||||
style: {color: BDFDB.ColorUtils.convert(folder.folderColor || BDFDB.DiscordConstants.Colors.BRAND, "RGB")}
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
return BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfolderwrapper,
|
||||
style: {"--folder-color": folder.folderColor ? BDFDB.ColorUtils.convert(folder.folderColor, "RGB") : null},
|
||||
children: [
|
||||
_this.settings.general.addFolderBackground && BDFDB.ReactUtils.createElement("span", {
|
||||
className: BDFDB.disCN.guildfolderexpandedbackground
|
||||
}),
|
||||
folderIcon && BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildouter,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildswrapperitems,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Scrollers.None, {
|
||||
className: BDFDB.disCNS.stack + BDFDB.disCN.guildsscroller,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.stack,
|
||||
"aria-label": BDFDB.LanguageUtils.LanguageStrings.SERVERS,
|
||||
children: BDFDB.LibraryComponents.GuildItem && this.props.folders.map(folder => {
|
||||
let data = _this.getFolderConfig(folder.folderId);
|
||||
let folderIcon = null;
|
||||
if (_this.settings.general.addFolderIcon) {
|
||||
let folderIcons = _this.loadAllIcons();
|
||||
folderIcon = folderIcons[data.iconID] ? (!folderIcons[data.iconID].customID ? _this.createBase64SVG(folderIcons[data.iconID].openicon, data.color1, data.color2) : folderIcons[data.iconID].openicon) : null;
|
||||
folderIcon = folderIcon ? BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfoldericonwrapper,
|
||||
onClick: _ => BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId),
|
||||
style: {background: `url(${folderIcon}) center/cover no-repeat`}
|
||||
}) : BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfoldericonwrapper,
|
||||
onClick: _ => BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId),
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfolder,
|
||||
"data-folder-name": folder.folderName || BDFDB.LanguageUtils.LanguageStrings.SERVER_FOLDER_PLACEHOLDER,
|
||||
children: folderIcon
|
||||
className: BDFDB.disCN.guildfoldericonwrapperexpanded,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SvgIcon, {
|
||||
name: BDFDB.LibraryComponents.SvgIcon.Names.FOLDER,
|
||||
style: {color: BDFDB.ColorUtils.convert(folder.folderColor || BDFDB.DiscordConstants.Colors.BRAND, "RGB")}
|
||||
})
|
||||
})
|
||||
}),
|
||||
BDFDB.ReactUtils.createElement("ul", {
|
||||
role: "group",
|
||||
children: folder.guildIds.map(guildId => {
|
||||
let guildIstance;
|
||||
return [
|
||||
this.draggedGuild == guildId ? null : BDFDB.ReactUtils.createElement("div", {
|
||||
ref: instance => guildIstance = instance,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.GuildItem, {
|
||||
guildNode: {
|
||||
children: [],
|
||||
id: guildId,
|
||||
parentId: folder.folderId,
|
||||
type: "guild",
|
||||
unavailable: false
|
||||
}
|
||||
}),
|
||||
onClick: event => {
|
||||
if (BDFDB.ListenerUtils.isPressed(46)) {
|
||||
BDFDB.ListenerUtils.stopEvent(event);
|
||||
_this.removeGuildFromFolder(folder.folderId, guildId);
|
||||
}
|
||||
else {
|
||||
if (_this.settings.general.closeAllFolders) {
|
||||
for (let openFolderId of BDFDB.LibraryStores.ExpandedGuildFolderStore.getExpandedFolders()) if (openFolderId != folder.folderId || !_this.settings.general.forceOpenFolder) BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(openFolderId);
|
||||
});
|
||||
}
|
||||
return BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCNS.stack + BDFDB.disCN.guildfolderwrapper,
|
||||
style: {"--folder-color": folder.folderColor ? BDFDB.ColorUtils.convert(folder.folderColor, "RGB") : null},
|
||||
children: [
|
||||
_this.settings.general.addFolderBackground && BDFDB.ReactUtils.createElement("span", {
|
||||
className: BDFDB.disCN.guildfolderexpandedbackground
|
||||
}),
|
||||
folderIcon && BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildouter,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildfolder,
|
||||
"data-folder-name": folder.folderName || BDFDB.LanguageUtils.LanguageStrings.SERVER_FOLDER_PLACEHOLDER,
|
||||
children: folderIcon
|
||||
})
|
||||
}),
|
||||
BDFDB.ReactUtils.createElement("ul", {
|
||||
className: BDFDB.disCN.stack,
|
||||
role: "group",
|
||||
children: folder.guildIds.map(guildId => {
|
||||
let guildIstance;
|
||||
return [
|
||||
this.draggedGuild == guildId ? null : BDFDB.ReactUtils.createElement("div", {
|
||||
ref: instance => guildIstance = instance,
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.GuildItem, {
|
||||
guildNode: {
|
||||
children: [],
|
||||
id: guildId,
|
||||
parentId: folder.folderId,
|
||||
type: "guild",
|
||||
unavailable: false
|
||||
}
|
||||
else if (_this.settings.general.closeTheFolder && !_this.settings.general.forceOpenFolder && BDFDB.LibraryStores.ExpandedGuildFolderStore.isFolderExpanded(folder.folderId)) BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId);
|
||||
else BDFDB.ReactUtils.forceUpdate(this);
|
||||
}
|
||||
},
|
||||
onMouseDown: event => {
|
||||
event = event.nativeEvent || event;
|
||||
let mouseMove = event2 => {
|
||||
if (Math.sqrt((event.pageX - event2.pageX)**2) > 20 || Math.sqrt((event.pageY - event2.pageY)**2) > 20) {
|
||||
}),
|
||||
onClick: event => {
|
||||
if (BDFDB.ListenerUtils.isPressed(46)) {
|
||||
BDFDB.ListenerUtils.stopEvent(event);
|
||||
this.draggedGuild = guildId;
|
||||
let dragPreview = _this.createDragPreview(BDFDB.ReactUtils.findDOMNode(guildIstance).cloneNode(true), event2);
|
||||
BDFDB.ReactUtils.forceUpdate(this);
|
||||
_this.removeGuildFromFolder(folder.folderId, guildId);
|
||||
}
|
||||
else {
|
||||
if (_this.settings.general.closeAllFolders) {
|
||||
for (let openFolderId of BDFDB.LibraryStores.ExpandedGuildFolderStore.getExpandedFolders()) if (openFolderId != folder.folderId || !_this.settings.general.forceOpenFolder) BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(openFolderId);
|
||||
}
|
||||
else if (_this.settings.general.closeTheFolder && !_this.settings.general.forceOpenFolder && BDFDB.LibraryStores.ExpandedGuildFolderStore.isFolderExpanded(folder.folderId)) BDFDB.LibraryModules.GuildUtils.toggleGuildFolderExpand(folder.folderId);
|
||||
else BDFDB.ReactUtils.forceUpdate(this);
|
||||
}
|
||||
},
|
||||
onMouseDown: event => {
|
||||
event = event.nativeEvent || event;
|
||||
let mouseMove = event2 => {
|
||||
if (Math.sqrt((event.pageX - event2.pageX)**2) > 20 || Math.sqrt((event.pageY - event2.pageY)**2) > 20) {
|
||||
BDFDB.ListenerUtils.stopEvent(event);
|
||||
this.draggedGuild = guildId;
|
||||
let dragPreview = _this.createDragPreview(BDFDB.ReactUtils.findDOMNode(guildIstance).cloneNode(true), event2);
|
||||
BDFDB.ReactUtils.forceUpdate(this);
|
||||
document.removeEventListener("mousemove", mouseMove);
|
||||
document.removeEventListener("mouseup", mouseUp);
|
||||
let dragging = event3 => {
|
||||
_this.updateDragPreview(dragPreview, event3);
|
||||
let placeholder = BDFDB.DOMUtils.getParent(BDFDB.dotCN._serverfoldersguildplaceholder, event3.target);
|
||||
let hoveredGuild = (BDFDB.ReactUtils.findValue(BDFDB.DOMUtils.getParent(BDFDB.dotCNS._serverfoldersfoldercontent + BDFDB.dotCN.guildouter, placeholder ? placeholder.previousSibling : event3.target), "guild", {up: true}) || {}).id;
|
||||
if (hoveredGuild) {
|
||||
let hoveredGuildFolder = BDFDB.GuildUtils.getFolder(hoveredGuild);
|
||||
if (!hoveredGuildFolder || hoveredGuildFolder.folderId != folder.folderId) hoveredGuild = null;
|
||||
}
|
||||
let update = hoveredGuild != this.hoveredGuild;
|
||||
if (hoveredGuild) this.hoveredGuild = hoveredGuild;
|
||||
else delete this.hoveredGuild;
|
||||
if (update) BDFDB.ReactUtils.forceUpdate(this);
|
||||
};
|
||||
let releasing = event3 => {
|
||||
BDFDB.ListenerUtils.stopEvent(event3);
|
||||
BDFDB.DOMUtils.remove(dragPreview);
|
||||
if (this.hoveredGuild) {
|
||||
let guildIds = [].concat(folder.guildIds);
|
||||
BDFDB.ArrayUtils.remove(guildIds, this.draggedGuild, true);
|
||||
guildIds.splice(guildIds.indexOf(this.hoveredGuild) + 1, 0, this.draggedGuild);
|
||||
_this.updateFolder(Object.assign({}, folder, {guildIds}));
|
||||
}
|
||||
delete this.draggedGuild;
|
||||
delete this.hoveredGuild;
|
||||
BDFDB.ReactUtils.forceUpdate(this);
|
||||
document.removeEventListener("mousemove", dragging);
|
||||
document.removeEventListener("mouseup", releasing);
|
||||
};
|
||||
document.addEventListener("mousemove", dragging);
|
||||
document.addEventListener("mouseup", releasing);
|
||||
}
|
||||
};
|
||||
let mouseUp = _ => {
|
||||
document.removeEventListener("mousemove", mouseMove);
|
||||
document.removeEventListener("mouseup", mouseUp);
|
||||
let dragging = event3 => {
|
||||
_this.updateDragPreview(dragPreview, event3);
|
||||
let placeholder = BDFDB.DOMUtils.getParent(BDFDB.dotCN._serverfoldersguildplaceholder, event3.target);
|
||||
let hoveredGuild = (BDFDB.ReactUtils.findValue(BDFDB.DOMUtils.getParent(BDFDB.dotCNS._serverfoldersfoldercontent + BDFDB.dotCN.guildouter, placeholder ? placeholder.previousSibling : event3.target), "guild", {up: true}) || {}).id;
|
||||
if (hoveredGuild) {
|
||||
let hoveredGuildFolder = BDFDB.GuildUtils.getFolder(hoveredGuild);
|
||||
if (!hoveredGuildFolder || hoveredGuildFolder.folderId != folder.folderId) hoveredGuild = null;
|
||||
}
|
||||
let update = hoveredGuild != this.hoveredGuild;
|
||||
if (hoveredGuild) this.hoveredGuild = hoveredGuild;
|
||||
else delete this.hoveredGuild;
|
||||
if (update) BDFDB.ReactUtils.forceUpdate(this);
|
||||
};
|
||||
let releasing = event3 => {
|
||||
BDFDB.ListenerUtils.stopEvent(event3);
|
||||
BDFDB.DOMUtils.remove(dragPreview);
|
||||
if (this.hoveredGuild) {
|
||||
let guildIds = [].concat(folder.guildIds);
|
||||
BDFDB.ArrayUtils.remove(guildIds, this.draggedGuild, true);
|
||||
guildIds.splice(guildIds.indexOf(this.hoveredGuild) + 1, 0, this.draggedGuild);
|
||||
_this.updateFolder(Object.assign({}, folder, {guildIds}));
|
||||
}
|
||||
delete this.draggedGuild;
|
||||
delete this.hoveredGuild;
|
||||
BDFDB.ReactUtils.forceUpdate(this);
|
||||
document.removeEventListener("mousemove", dragging);
|
||||
document.removeEventListener("mouseup", releasing);
|
||||
};
|
||||
document.addEventListener("mousemove", dragging);
|
||||
document.addEventListener("mouseup", releasing);
|
||||
}
|
||||
};
|
||||
let mouseUp = _ => {
|
||||
document.removeEventListener("mousemove", mouseMove);
|
||||
document.removeEventListener("mouseup", mouseUp);
|
||||
};
|
||||
document.addEventListener("mousemove", mouseMove);
|
||||
document.addEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}),
|
||||
this.hoveredGuild != guildId ? null : BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCNS.guildouter + BDFDB.disCN._serverfoldersguildplaceholder,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Mask, {
|
||||
mask: BDFDB.LibraryComponents.Mask.Masks.SQUIRCLE,
|
||||
className: BDFDB.disCN.guildplaceholdermask,
|
||||
width: 48,
|
||||
height: 48,
|
||||
style: {display:"block"},
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildplaceholder
|
||||
};
|
||||
document.addEventListener("mousemove", mouseMove);
|
||||
document.addEventListener("mouseup", mouseUp);
|
||||
}
|
||||
}),
|
||||
this.hoveredGuild != guildId ? null : BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCNS.guildouter + BDFDB.disCN._serverfoldersguildplaceholder,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Mask, {
|
||||
mask: BDFDB.LibraryComponents.Mask.Masks.SQUIRCLE,
|
||||
className: BDFDB.disCN.guildplaceholdermask,
|
||||
width: 48,
|
||||
height: 48,
|
||||
style: {display:"block"},
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildplaceholder
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
]
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
}).filter(n => n).reduce((r, a) => r.concat(a, _this.settings.general.addSeparators ? BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildouter,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildseparator
|
||||
})
|
||||
}) : null), [0]).slice(1, -1).flat(10).filter(n => n)
|
||||
]
|
||||
})
|
||||
}).filter(n => n).reduce((r, a) => r.concat(a, _this.settings.general.addSeparators ? BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildouter,
|
||||
children: BDFDB.ReactUtils.createElement("div", {
|
||||
className: BDFDB.disCN.guildseparator
|
||||
})
|
||||
}) : null), [0]).slice(1, -1).flat(10).filter(n => n)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -544,6 +549,22 @@ module.exports = (_ => {
|
|||
${BDFDB.dotCNS._serverfoldersfoldercontent + BDFDB.dotCN.guildfolder} {
|
||||
border-radius: 100%;
|
||||
}
|
||||
${BDFDB.dotCN.channels}:has(${BDFDB.dotCN.guilds}) {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
width: auto !important;
|
||||
}
|
||||
${BDFDB.dotCNS.guilds + BDFDB.dotCN.guildfoldericon} {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
${BDFDB.dotCNS._serverfoldersfoldercontent + BDFDB.dotCN.stack} {
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
${BDFDB.dotCN.channels}:has(${BDFDB.dotCN.guilds}) ${BDFDB.dotCNS._serverfoldersfoldercontent + BDFDB.dotCN.stack} {
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue