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

Update ThemeSettings.plugin.js

This commit is contained in:
Mirco Wittrien 2021-05-12 15:30:56 +02:00
parent 2379eacc2a
commit fa6df368f4
1 changed files with 123 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
Plugins/ThemeSettings/ThemeSettings.plugin.js
View File

@ -2,7 +2,7 @@
* @name ThemeSettings * @name ThemeSettings
* @author DevilBro * @author DevilBro
* @authorId 278543574059057154 * @authorId 278543574059057154
* @version 1.3.2 * @version 1.3.3
* @description Allows you to change Theme Variables within Discord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page * @description Allows you to change Theme Variables within Discord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page
* @invite Jx3TjNS * @invite Jx3TjNS
* @donate https://www.paypal.me/MircoWittrien * @donate https://www.paypal.me/MircoWittrien
@ -17,8 +17,13 @@ module.exports = (_ => {
"info": { "info": {
"name": "ThemeSettings", "name": "ThemeSettings",
"author": "DevilBro", "author": "DevilBro",
"version": "1.3.2", "version": "1.3.3",
"description": "Allows you to change Theme Variables within Discord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page" "description": "Allows you to change Theme Variables within Discord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page"
},
"changeLog": {
"added": {
"Reset": "Added a Button to reset all Values back to the Value that was used when you opened the Settings"
}
} }
}; };
@ -60,8 +65,6 @@ module.exports = (_ => {
return template.content.firstElementChild; return template.content.firstElementChild;
} }
} : (([Plugin, BDFDB]) => { } : (([Plugin, BDFDB]) => {
const isBeta = !(window.BdApi && !Array.isArray(BdApi.settings));
var dir; var dir;
return class ThemeSettings extends Plugin { return class ThemeSettings extends Plugin {
@ -103,11 +106,26 @@ module.exports = (_ => {
let addon = BDFDB.ObjectUtils.get(BDFDB.ReactUtils.getInstance(card), "return.stateNode.props.addon"); let addon = BDFDB.ObjectUtils.get(BDFDB.ReactUtils.getInstance(card), "return.stateNode.props.addon");
if (addon && !addon.plugin && !addon.instance && addon.css) { if (addon && !addon.plugin && !addon.instance && addon.css) {
let css = addon.css.replace(/\r/g, ""); let css = addon.css.replace(/\r/g, "");
let imports = this.getThemeImports(css); let imports = css.split("\n@import url(").splice(1).map(n => [n.split(");")[0], true]).concat(css.split("\n/* @import url(").splice(1).map(n => [n.split("); */")[0], false]));
let vars = this.getThemeVars(css); let vars = css.split(":root");
if (vars.length > 1) {
vars = vars[1].replace(/\t\(/g, " (").replace(/\t| {2,}/g, "").replace(/\/\*\n*((?!\/\*|\*\/).|\n)*\n+((?!\/\*|\*\/).|\n)*\n*\*\//g, "").replace(/\n\/\*.*?\*\//g, "").replace(/\n/g, "");
vars = vars.split("{");
vars.shift();
vars = vars.join("{").replace(/\s*(:|;|--|\*)\s*/g, "$1");
vars = vars.split("}")[0];
vars = (vars.endsWith(";") ? vars.slice(0, -1) : vars).slice(2).split(/;--|\*\/--/);
}
else vars = [];
if (imports.length || vars.length) { if (imports.length || vars.length) {
let open = _ => { let footerControls = card.querySelector(BDFDB.dotCNS._repofooter + BDFDB.dotCN._repocontrols);
let refs = {imports: {}, inputs: {}}; let settingsButton = document.createElement("button");
settingsButton.className = BDFDB.DOMUtils.formatClassName(BDFDB.disCN._repobutton, BDFDB.disCN._repocontrolsbutton, "theme-settings-button");
settingsButton.appendChild(BDFDB.DOMUtils.create(`<svg viewBox="0 0 20 20" style="width: 20px; height: 20px;"><path fill="none" d="M0 0h20v20H0V0z"></path><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"></path></svg>`));
footerControls.insertBefore(settingsButton, footerControls.firstElementChild);
settingsButton.addEventListener("click", _ => {
let importInstances = {}, inputInstances = {};
BDFDB.ModalUtils.open(this, { BDFDB.ModalUtils.open(this, {
header: `${addon.name} ${BDFDB.LanguageUtils.LanguageStrings.SETTINGS}`, header: `${addon.name} ${BDFDB.LanguageUtils.LanguageStrings.SETTINGS}`,
subHeader: "", subHeader: "",
@ -116,127 +134,11 @@ module.exports = (_ => {
contentClassName: BDFDB.disCN._repomodalsettings, contentClassName: BDFDB.disCN._repomodalsettings,
footerClassName: BDFDB.disCN._repomodalfooter, footerClassName: BDFDB.disCN._repomodalfooter,
size: "MEDIUM", size: "MEDIUM",
children: this.createThemeInputs(refs, addon, imports, vars), children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanel, {
buttons: [{ addon: addon,
contents: BDFDB.LanguageUtils.LanguageStrings.SAVE,
color: "BRAND",
onClick: _ => {this.updateTheme(refs, addon);}
}]
});
};
if (isBeta) {
let controls = card.querySelector("." + BDFDB.disCN._repofooter.split(" ")[0] + " " + BDFDB.dotCN._repocontrols);
let settingsButton = document.createElement("button");
settingsButton.className = BDFDB.DOMUtils.formatClassName(BDFDB.disCN._repobutton, BDFDB.disCN._repocontrolsbutton, "theme-settings-button");
settingsButton.appendChild(BDFDB.DOMUtils.create(`<svg viewBox="0 0 20 20" style="width: 20px; height: 20px;"><path fill="none" d="M0 0h20v20H0V0z"></path><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"></path></svg>`));
controls.insertBefore(settingsButton, controls.firstElementChild);
settingsButton.addEventListener("click", open);
settingsButton.addEventListener("mouseenter", _ => {
BDFDB.TooltipUtils.create(settingsButton, BDFDB.LanguageUtils.LanguageStrings.SETTINGS);
});
}
else {
let footer = card.querySelector("." + BDFDB.disCN._repofooter.split(" ").join(",."));
if (!footer) {
footer = document.createElement("div");
footer.className = BDFDB.DOMUtils.formatClassName(BDFDB.disCN._repofooter);
let links = document.createElement("span");
links.className = BDFDB.DOMUtils.formatClassName(BDFDB.disCN._repolinks);
footer.appendChild(links);
card.appendChild(footer);
}
let settingsButton = document.createElement("button");
settingsButton.className = BDFDB.DOMUtils.formatClassName(BDFDB.disCN._reposettingsbutton, "theme-settings-button");
settingsButton.innerText = "Settings";
footer.appendChild(settingsButton);
settingsButton.addEventListener("click", open);
}
}
}
}
updateTheme (refs, addon) {
let path = BDFDB.LibraryRequires.path.join(dir, addon.filename);
let css = BDFDB.LibraryRequires.fs.readFileSync(path).toString();
if (css) {
let amount = 0;
for (let i in refs.imports) {
let input = refs.imports[i];
let oldValue = input.props.oldValue;
let newValue = input.props.value;
if (newValue.toString() != oldValue.toString()) {
let importUrl = input.props.name;
if (newValue) css = css.replace(new RegExp(`\\n${BDFDB.StringUtils.regEscape("/* @import url(" + importUrl + "); */")}`, "g"), `\n@import url(${importUrl});`);
else css = css.replace(new RegExp(`\\n${BDFDB.StringUtils.regEscape("@import url(" + importUrl + ");")}`, "g"), `\n/* @import url(${importUrl}); */`);
input.props.oldValue = newValue;
amount++;
}
}
for (let i in refs.inputs) {
let input = refs.inputs[i];
let oldValue = input.props.oldValue;
let newValue = input.props.value;
if (newValue && newValue.trim() && newValue != oldValue) {
let varName = input.props.name;
css = css.replace(new RegExp(`--${BDFDB.StringUtils.regEscape(varName)}(\\s*):(\\s*)${BDFDB.StringUtils.regEscape(oldValue)}`,"g"), `--${varName}$1: $2${newValue}`);
input.props.oldValue = newValue;
input.props.placeholder = newValue;
amount++;
}
}
if (amount > 0) {
BDFDB.ReactUtils.forceUpdate(BDFDB.ObjectUtils.toArray(refs.imports), BDFDB.ObjectUtils.toArray(refs.inputs));
BDFDB.LibraryRequires.fs.writeFileSync(path, css);
BDFDB.NotificationUtils.toast(`Updated ${amount} Variable${amount == 1 ? "" : "s"} in '${addon.filename}'`, {type: "success"});
}
else BDFDB.NotificationUtils.toast(`There are no changed Variables to be updated in '${addon.filename}'`, {type: "warning"});
}
else BDFDB.NotificationUtils.toast(`Could not find Theme File '${addon.filename}'`, {type: "danger"});
}
getThemeImports (css) {
return css.split("\n@import url(").splice(1).map(n => [n.split(");")[0], true]).concat(css.split("\n/* @import url(").splice(1).map(n => [n.split("); */")[0], false]));
}
getThemeVars (css) {
let vars = css.split(":root");
if (vars.length > 1) {
vars = vars[1].replace(/\t\(/g, " (").replace(/\t| {2,}/g, "").replace(/\/\*\n*((?!\/\*|\*\/).|\n)*\n+((?!\/\*|\*\/).|\n)*\n*\*\//g, "").replace(/\n\/\*.*?\*\//g, "").replace(/\n/g, "");
vars = vars.split("{");
vars.shift();
vars = vars.join("{").replace(/\s*(:|;|--|\*)\s*/g, "$1");
vars = vars.split("}")[0];
return (vars.endsWith(";") ? vars.slice(0, -1) : vars).slice(2).split(/;--|\*\/--/);
}
return [];
}
createThemeInputs (refs, theme, imports, vars) {
let settingsPanel;
return settingsPanel = BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanel, {
addon: theme,
children: _ => { children: _ => {
let settingsItems = []; let settingsItems = [];
if (imports.length) settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanelList, {
title: "Imports:",
dividerBottom: vars.length,
children: imports.map((impo, i) => {
let name = impo[0].split("/").pop().replace(/"/g, "");
return BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsItem, {
type: "Switch",
margin: 8,
childProps: {
ref: instance => {if (instance) refs.imports[i] = instance;}
},
label: name[0].toUpperCase() + name.slice(1),
note: impo[0].replace(/"/g, ""),
name: impo[0],
value: impo[1],
oldValue: impo[1].toString()
});
})
}));
let varInputs = []; let varInputs = [];
for (let i in vars) { for (let i in vars) {
let varStr = vars[i].split(":"); let varStr = vars[i].split(":");
@ -267,18 +169,38 @@ module.exports = (_ => {
type: childType, type: childType,
mode: childMode, mode: childMode,
filter: childType == "file" && "image", filter: childType == "file" && "image",
ref: instance => {if (instance) refs.inputs[i] = instance;} ref: instance => {if (instance) inputInstances[i] = instance;}
}, },
label: varName[0].toUpperCase() + varName.slice(1), label: varName.split("-").map(BDFDB.LibraryModules.StringUtils.upperCaseFirstChar).join(" "),
note: varDescription && varDescription.indexOf("*") == 0 ? varDescription.slice(1) : varDescription, note: varDescription && varDescription.indexOf("*") == 0 ? varDescription.slice(1) : varDescription,
basis: "70%", basis: "70%",
name: varName, name: varName,
value: varValue, value: varValue,
oldValue: varValue, oldValue: varValue,
defaultValue: varValue,
placeholder: varValue placeholder: varValue
})); }));
} }
}; };
if (imports.length) settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanelList, {
title: "Imports:",
dividerBottom: varInputs.length,
children: imports.map((impo, i) => {
let name = impo[0].split("/").pop().replace(/"/g, "");
return BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsItem, {
type: "Switch",
margin: 8,
childProps: {ref: instance => {if (instance) importInstances[i] = instance;}},
label: name[0].toUpperCase() + name.slice(1),
note: impo[0].replace(/"/g, ""),
name: impo[0],
value: impo[1],
oldValue: impo[1].toString(),
defaultValue: impo[1].toString()
});
})
}));
if (varInputs.length) settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanelList, { if (varInputs.length) settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsPanelList, {
title: "Variables:", title: "Variables:",
children: varInputs children: varInputs
@ -286,7 +208,65 @@ module.exports = (_ => {
return settingsItems; return settingsItems;
} }
}),
buttons: [{
contents: BDFDB.LanguageUtils.LanguageStrings.SAVE,
color: "BRAND",
onClick: _ => this.updateTheme(addon, {imports: importInstances, inputs: inputInstances}, false)
}, {
contents: BDFDB.LanguageUtils.LanguageStrings.RESET,
look: "LINK",
onClick: _ => this.updateTheme(addon, {imports: importInstances, inputs: inputInstances}, true)
}]
}); });
});
settingsButton.addEventListener("mouseenter", _ => {
BDFDB.TooltipUtils.create(settingsButton, BDFDB.LanguageUtils.LanguageStrings.SETTINGS);
});
}
}
}
updateTheme (addon, instances, reset) {
let path = BDFDB.LibraryRequires.path.join(dir, addon.filename);
let css = BDFDB.LibraryRequires.fs.readFileSync(path).toString();
if (css) {
let amount = 0;
for (let i in instances.imports) {
let input = instances.imports[i];
let oldValue = input.props.oldValue;
let newValue = reset ? input.props.defaultValue : input.props.value;
if (newValue.toString() != oldValue.toString()) {
let trueValue = typeof newValue == "string" ? newValue == "true" : newValue;
let importUrl = input.props.name;
if (trueValue) css = css.replace(new RegExp(`\\n${BDFDB.StringUtils.regEscape("/* @import url(" + importUrl + "); */")}`, "g"), `\n@import url(${importUrl});`);
else css = css.replace(new RegExp(`\\n${BDFDB.StringUtils.regEscape("@import url(" + importUrl + ");")}`, "g"), `\n/* @import url(${importUrl}); */`);
input.props.value = trueValue;
input.props.oldValue = newValue;
amount++;
}
}
for (let i in instances.inputs) {
let input = instances.inputs[i];
let oldValue = input.props.oldValue;
let newValue = reset ? input.props.defaultValue : input.props.value;
if (newValue && newValue.trim() && newValue != oldValue) {
let varName = input.props.name;
css = css.replace(new RegExp(`--${BDFDB.StringUtils.regEscape(varName)}(\\s*):(\\s*)${BDFDB.StringUtils.regEscape(oldValue)}`,"g"), `--${varName}$1: $2${newValue}`);
input.props.value = newValue;
input.props.oldValue = newValue;
input.props.placeholder = newValue;
amount++;
}
}
if (amount > 0) {
BDFDB.ReactUtils.forceUpdate(BDFDB.ObjectUtils.toArray(instances.imports), BDFDB.ObjectUtils.toArray(instances.inputs));
BDFDB.LibraryRequires.fs.writeFileSync(path, css);
BDFDB.NotificationUtils.toast(`Updated ${amount} Variable${amount == 1 ? "" : "s"} in '${addon.filename}'`, {type: "success"});
}
else BDFDB.NotificationUtils.toast(`There are no changed Variables to be updated in '${addon.filename}'`, {type: "warning"});
}
else BDFDB.NotificationUtils.toast(`Could not find Theme File '${addon.filename}'`, {type: "danger"});
} }
}; };
})(window.BDFDB_Global.PluginUtils.buildPlugin(config)); })(window.BDFDB_Global.PluginUtils.buildPlugin(config));