204 lines
8.3 KiB
JavaScript
204 lines
8.3 KiB
JavaScript
//META{"name":"ThemeSettings","website":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/ThemeSettings","source":"https://raw.githubusercontent.com/mwittrien/BetterDiscordAddons/master/Plugins/ThemeSettings/ThemeSettings.plugin.js"}*//
|
|
|
|
class ThemeSettings {
|
|
getName () {return "ThemeSettings";}
|
|
|
|
getVersion () {return "1.1.7";}
|
|
|
|
getAuthor () {return "DevilBro";}
|
|
|
|
getDescription () {return "Allows you to change Theme Variables within BetterDiscord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page.";}
|
|
|
|
constructor () {
|
|
this.changelog = {
|
|
"improved":[["New Library Structure & React","Restructured my Library and switched to React rendering instead of DOM manipulation"]]
|
|
};
|
|
|
|
this.patchedModules = {
|
|
after: {
|
|
V2C_ThemeCard: "render"
|
|
}
|
|
};
|
|
}
|
|
|
|
//legacy
|
|
load () {}
|
|
|
|
start () {
|
|
if (!window.BDFDB) window.BDFDB = {myPlugins:{}};
|
|
if (window.BDFDB && window.BDFDB.myPlugins && typeof window.BDFDB.myPlugins == "object") window.BDFDB.myPlugins[this.getName()] = this;
|
|
let libraryScript = document.querySelector("head script#BDFDBLibraryScript");
|
|
if (!libraryScript || (performance.now() - libraryScript.getAttribute("date")) > 600000) {
|
|
if (libraryScript) libraryScript.remove();
|
|
libraryScript = document.createElement("script");
|
|
libraryScript.setAttribute("id", "BDFDBLibraryScript");
|
|
libraryScript.setAttribute("type", "text/javascript");
|
|
libraryScript.setAttribute("src", "https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.min.js");
|
|
libraryScript.setAttribute("date", performance.now());
|
|
libraryScript.addEventListener("load", _ => {this.initialize();});
|
|
document.head.appendChild(libraryScript);
|
|
}
|
|
else if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) this.initialize();
|
|
this.startTimeout = setTimeout(_ => {
|
|
try {return this.initialize();}
|
|
catch (err) {console.error(`%c[${this.getName()}]%c`, "color: #3a71c1; font-weight: 700;", "", "Fatal Error: Could not initiate plugin! " + err);}
|
|
}, 30000);
|
|
}
|
|
|
|
initialize () {
|
|
if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) {
|
|
if (this.started) return;
|
|
BDFDB.PluginUtils.init(this);
|
|
|
|
this.dir = BDFDB.BDUtils.getThemesFolder();
|
|
|
|
BDFDB.ModuleUtils.forceAllUpdates(this);
|
|
}
|
|
else console.error(`%c[${this.getName()}]%c`, "color: #3a71c1; font-weight: 700;", "", "Fatal Error: Could not load BD functions!");
|
|
}
|
|
|
|
stop () {
|
|
if (window.BDFDB && typeof BDFDB === "object" && BDFDB.loaded) {
|
|
this.stopping = true;
|
|
|
|
BDFDB.ModuleUtils.forceAllUpdates(this);
|
|
|
|
BDFDB.PluginUtils.clear(this);
|
|
}
|
|
}
|
|
|
|
|
|
// begin of own functions
|
|
|
|
processV2CThemeCard (e) {
|
|
if (e.instance.props.theme && !e.instance.state.settings) {
|
|
let vars = this.getThemeVars(e.instance.props.theme.css);
|
|
if (vars.length) {
|
|
let [children, index] = BDFDB.ReactUtils.findChildren(e.returnvalue, {props: [["className", BDFDB.disCN._repofooter]]});
|
|
if (index == -1) {
|
|
let footer = BDFDB.ReactUtils.createElement("div", {className: BDFDB.disCN._repofooter, children: []});
|
|
e.returnvalue.props.children.push(footer);
|
|
children = footer.props.children;
|
|
}
|
|
else {
|
|
children[index].props.children = [children[index].props.children].flat();
|
|
children = children[index].props.children;
|
|
}
|
|
children.push(BDFDB.ReactUtils.createElement("button", {
|
|
className: BDFDB.disCNS._reposettingsbutton,
|
|
children: "Settings",
|
|
onClick: event => {
|
|
let wrapper = BDFDB.DOMUtils.getParent(BDFDB.dotCN._reposettingsclosed, event.currentTarget);
|
|
BDFDB.DOMUtils.addClass(wrapper, BDFDB.disCN._reposettingsopen);
|
|
BDFDB.DOMUtils.removeClass(wrapper, BDFDB.disCN._reposettingsclosed);
|
|
let children = [];
|
|
while (wrapper.childElementCount) {
|
|
children.push(wrapper.firstChild);
|
|
wrapper.firstChild.remove();
|
|
}
|
|
let closebutton = BDFDB.DOMUtils.create(`<div style="float: right; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="width: 18px; height: 18px;"><g class="background" fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg></div>`);
|
|
wrapper.appendChild(closebutton);
|
|
closebutton.addEventListener("click", _ => {
|
|
BDFDB.DOMUtils.removeClass(wrapper, BDFDB.disCN._reposettingsopen);
|
|
BDFDB.DOMUtils.addClass(wrapper, BDFDB.disCN._reposettingsclosed);
|
|
while (wrapper.childElementCount) wrapper.firstChild.remove();
|
|
while (children.length) wrapper.appendChild(children.shift());
|
|
})
|
|
this.createThemeSettings(wrapper, e.instance.props.theme, vars);
|
|
}
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
|
|
getThemeVars (css) {
|
|
let vars = css.split(":root");
|
|
if (vars.length > 1) {
|
|
vars = vars[1].replace(/\t\(/g, " (").replace(/\r|\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.slice(2).split(/;--|\*\/--/);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
createThemeSettings (wrapper, theme, vars) {
|
|
if (!window.BDFDB || typeof BDFDB != "object" || !BDFDB.loaded || !this.started) return;
|
|
let settingsitems = [];
|
|
|
|
settingsitems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsItem, {
|
|
type: "Button",
|
|
className: BDFDB.disCN.marginbottom8,
|
|
color: BDFDB.LibraryComponents.Button.Colors.GREEN,
|
|
label: "Update all variables",
|
|
onClick: _ => {
|
|
let path = BDFDB.LibraryRequires.path.join(this.dir, theme.filename);
|
|
let css = BDFDB.LibraryRequires.fs.readFileSync(path).toString();
|
|
if (css) {
|
|
let amount = 0;
|
|
for (let input of wrapper.querySelectorAll(BDFDB.dotCN.input)) {
|
|
let oldvalue = input.getAttribute("placeholder");
|
|
let newvalue = input.value;
|
|
if (newvalue && newvalue.trim() && newvalue != oldvalue) {
|
|
let varname = input.getAttribute("varname");
|
|
css = css.replace(new RegExp(`--${BDFDB.StringUtils.regEscape(varname)}(\\s*):(\\s*)${BDFDB.StringUtils.regEscape(oldvalue)}`,"g"),`--${varname}$1:$2${newvalue}`);
|
|
amount++;
|
|
}
|
|
}
|
|
if (amount > 0) {
|
|
BDFDB.LibraryRequires.fs.writeFileSync(path, css);
|
|
BDFDB.NotificationUtils.toast(`Updated ${amount} variable${amount == 1 ? "" : "s"} in ${theme.filename}`, {type:"success"});
|
|
}
|
|
else BDFDB.NotificationUtils.toast(`There are no changed variables to be updated in ${theme.filename}`, {type:"warning"});
|
|
}
|
|
else BDFDB.NotificationUtils.toast(`Could not find themefile: ${theme.filename}`, {type:"error"});
|
|
},
|
|
children: "Update"
|
|
}));
|
|
|
|
for (let varstr of vars) {
|
|
varstr = varstr.split(":");
|
|
let varname = varstr.shift().trim();
|
|
varstr = varstr.join(":").split(/;[^A-z0-9]|\/\*/);
|
|
let varvalue = varstr.shift().trim();
|
|
if (varvalue) {
|
|
let childType = "text", childMode = "";
|
|
let iscolor = BDFDB.ColorUtils.getType(varvalue);
|
|
let iscomp = !iscolor && /[0-9 ]+,[0-9 ]+,[0-9 ]+/g.test(varvalue);
|
|
if (iscolor || iscomp) {
|
|
childType = "color";
|
|
childMode = iscomp && "comp";
|
|
}
|
|
else {
|
|
let isurlfile = /url\(.+\)/gi.test(varvalue);
|
|
let isfile = !isurlfile && /(http(s)?):\/\/[(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(varvalue);
|
|
if (isfile || isurlfile) {
|
|
childType = "file";
|
|
childMode = isurlfile && "url";
|
|
}
|
|
}
|
|
let vardescription = varstr.join("").replace(/\*\/|\/\*/g, "").replace(/:/g, ": ").replace(/: \//g, ":/").replace(/--/g, " --").replace(/\( --/g, "(--").trim();
|
|
settingsitems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsItem, {
|
|
className: BDFDB.disCN.marginbottom20,
|
|
dividerbottom: vars[vars.length-1] != varstr,
|
|
type: "TextInput",
|
|
childProps: {
|
|
type: childType,
|
|
mode: childMode,
|
|
filter: childType == "file" && "image"
|
|
},
|
|
label: varname[0].toUpperCase() + varname.slice(1),
|
|
note: vardescription && vardescription.indexOf("*") == 0 ? vardescription.slice(1) : vardescription,
|
|
basis: "70%",
|
|
varname: varname,
|
|
value: varvalue,
|
|
placeholder: varvalue
|
|
}));
|
|
}
|
|
}
|
|
|
|
wrapper.appendChild(BDFDB.PluginUtils.createSettingsPanel(theme, settingsitems));
|
|
}
|
|
} |