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

ThemeSettings now uses patching instead of observing

This commit is contained in:
Mirco Wittrien 2019-01-05 23:53:38 +01:00
parent 256d044124
commit 2ae5aab159
1 changed files with 46 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,20 @@
//META{"name":"ThemeSettings"}*// //META{"name":"ThemeSettings"}*//
class ThemeSettings { class ThemeSettings {
initConstructor () {} initConstructor () {
this.patchModules = {
"V2C_ThemeCard":"componentDidMount"
};
}
getName () {return "ThemeSettings";} getName () {return "ThemeSettings";}
getDescription () {return "Allows you to change Theme Variables within BetterDiscord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page.";} getDescription () {return "Allows you to change Theme Variables within BetterDiscord. Adds a Settings button (similar to Plugins) to customizable Themes in your Themes Page.";}
getVersion () {return "1.0.5";} getVersion () {return "1.0.6";}
getAuthor () {return "DevilBro";} getAuthor () {return "DevilBro";}
//legacy //legacy
load () {} load () {}
@ -38,49 +41,7 @@ class ThemeSettings {
this.path = require("path"); this.path = require("path");
this.dir = BDFDB.getThemesFolder(); this.dir = BDFDB.getThemesFolder();
var observer = null; BDFDB.WebModules.forceAllUpdates(this);
observer = new MutationObserver((changes, _) => {
changes.forEach(
(change, j) => {
if (change.addedNodes) {
change.addedNodes.forEach((node) => {
if (this.isThemesPage() && node.tagName) {
if (node.classList && node.classList.contains(BDFDB.disCN.scrollerwrap)) {
for (let li of node.querySelectorAll(".bda-slist > li")) this.addSettingsButton(li);
}
else if (node.tagName == "LI" && node.querySelector(".ui-switch")) {
this.addSettingsButton(node);
}
}
});
}
}
);
});
BDFDB.addObserver(this, BDFDB.dotCN.layer + "[layer-id='user-settings']", {name:"innerSettingsWindowObserver",instance:observer}, {childList:true,subtree:true});
observer = new MutationObserver((changes, _) => {
changes.forEach(
(change, i) => {
if (change.addedNodes) {
change.addedNodes.forEach((node) => {
setImmediate(() => {
if (node.tagName && node.getAttribute("layer-id") == "user-settings") {
BDFDB.addObserver(this, node, {name:"innerSettingsWindowObserver"}, {childList:true,subtree:true});
if (this.isThemesPage(node)) for (let li of node.querySelectorAll(".bda-slist > li")) this.addSettingsButton(li);
}
});
});
}
}
);
});
BDFDB.addObserver(this, BDFDB.dotCN.layers, {name:"settingsWindowObserver",instance:observer}, {childList:true});
var settingswindow = document.querySelector(BDFDB.dotCN.layer + "[layer-id='user-settings']");
if (settingswindow && this.isThemesPage(settingswindow)) {
for (let li of settingswindow.querySelectorAll(".bda-slist > li")) this.addSettingsButton(li);
}
} }
else { else {
console.error(this.getName() + ": Fatal Error: Could not load BD functions!"); console.error(this.getName() + ": Fatal Error: Could not load BD functions!");
@ -89,67 +50,46 @@ class ThemeSettings {
stop () { stop () {
if (typeof BDFDB === "object") { if (typeof BDFDB === "object") {
$(".themes-settings-button, .themes-settings-footer").remove(); BDFDB.removeEles(".themes-settings-button",".themes-settings-footer");
BDFDB.unloadMessage(this); BDFDB.unloadMessage(this);
} }
} }
// begin of own functions // begin of own functions
isThemesPage (container) { processV2CThemeCard (instance, wrapper) {
if (typeof container === "undefined") container = document.querySelector(BDFDB.dotCN.layer + "[layer-id='user-settings']"); if (instance.props && instance.props.theme && !wrapper.querySelector(BDFDB.dotCN._reposettingsbutton + ".themes-settings-button")) {
if (container && container.tagName) { let vars = this.getThemeVars(instance.props.theme.css);
var folderbutton = container.querySelector(".bd-pfbtn"); if (vars.length) {
if (folderbutton) { let footer = wrapper.querySelector(BDFDB.dotCN._repofooter);
var buttonbar = folderbutton.parentElement; if (!footer) {
if (buttonbar && buttonbar.tagName) { footer = document.createElement("div");
var header = buttonbar.querySelector("h2"); footer.className = BDFDB.disCNS._repofooter + "themes-settings-footer";
if (header) { wrapper.appendChild(footer);
return BDFDB.getInnerText(header).toLowerCase() === "themes";
}
} }
} let button = document.createElement("button");
} button.className = BDFDB.disCNS._reposettingsbutton + "themes-settings-button";
return false; button.innerText = "Settings";
} footer.appendChild(button);
button.addEventListener("click", () => {
addSettingsButton (li) { wrapper.classList.add(BDFDB.disCN._reposettingsopen);
if (li && li.tagName && li.tagName == "LI" && !li.querySelector(".bda-settings-button.themes-settings-button")) { wrapper.classList.remove(BDFDB.disCN._reposettingsclosed);
let nameele = li.querySelector(".bda-name"); let children = [];
let name = nameele ? nameele.textContent : null; while (wrapper.childElementCount) {
if (name && bdthemes[name]) { children.push(wrapper.firstChild);
let vars = this.getThemeVars(bdthemes[name].css); wrapper.firstChild.remove();
if (vars.length) {
let footer = li.querySelector(".bda-footer");
if (!footer) {
footer = document.createElement("div");
footer.className = "bda-footer themes-settings-footer";
li.appendChild(footer);
} }
let button = document.createElement("button"); let closebutton = $(`<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>`)[0];
button.className = "bda-settings-button themes-settings-button"; wrapper.appendChild(closebutton);
button.innerText = "Settings"; closebutton.addEventListener("click", () => {
footer.appendChild(button); wrapper.classList.remove(BDFDB.disCN._reposettingsopen);
button.addEventListener("click", () => { wrapper.classList.add(BDFDB.disCN._reposettingsclosed);
li.classList.remove("settings-closed"); while (wrapper.childElementCount) wrapper.firstChild.remove();
li.classList.add("settings-open"); while (children.length) wrapper.appendChild(children.shift());
let children = []; })
while (li.childElementCount) { wrapper.appendChild(this.createThemeSettings(instance.props.theme, vars));
children.push(li.firstChild); });
li.firstChild.remove();
}
let closebutton = $(`<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>`)[0];
li.appendChild(closebutton);
closebutton.addEventListener("click", () => {
li.classList.remove("settings-open");
li.classList.add("settings-closed");
while (li.childElementCount) li.firstChild.remove();
while (children.length) li.appendChild(children.shift());
})
li.appendChild(this.createThemeSettings(name, vars));
});
}
} }
} }
} }
@ -167,9 +107,9 @@ class ThemeSettings {
return []; return [];
} }
createThemeSettings (name, vars) { createThemeSettings (theme, vars) {
if (!this.started || typeof BDFDB !== "object") return; if (!this.started || typeof BDFDB !== "object") return;
var settingshtml = `<div class="theme-settings" id="theme-settings-${name}"><div class="${name}-settings DevilBro-settings"><div class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.size18 + BDFDB.disCNS.height24 + BDFDB.disCNS.weightnormal + BDFDB.disCN.marginbottom8}">${BDFDB.encodeToHTML(name)}</div><div class="DevilBro-settings-inner"><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.marginbottom8}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Update all variables</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorgreen + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} update-button" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Update</div></button></div></div></div>`; var settingshtml = `<div class="theme-settings" id="theme-settings-${theme.name}"><div class="${theme.name}-settings DevilBro-settings"><div class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.size18 + BDFDB.disCNS.height24 + BDFDB.disCNS.weightnormal + BDFDB.disCN.marginbottom8}">${BDFDB.encodeToHTML(theme.name)}</div><div class="DevilBro-settings-inner"><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.marginbottom8}" style="flex: 0 0 auto;"><h3 class="${BDFDB.disCNS.titledefault + BDFDB.disCNS.title + BDFDB.disCNS.marginreset + BDFDB.disCNS.weightmedium + BDFDB.disCNS.size16 + BDFDB.disCNS.height24 + BDFDB.disCN.flexchild}" style="flex: 1 1 auto;">Update all variables</h3><button type="button" class="${BDFDB.disCNS.flexchild + BDFDB.disCNS.button + BDFDB.disCNS.buttonlookfilled + BDFDB.disCNS.buttoncolorgreen + BDFDB.disCNS.buttonsizemedium + BDFDB.disCN.buttongrow} update-button" style="flex: 0 0 auto;"><div class="${BDFDB.disCN.buttoncontents}">Update</div></button></div></div></div>`;
var settingspanel = $(settingshtml)[0]; var settingspanel = $(settingshtml)[0];
var settingspanelinner = settingspanel.querySelector(".DevilBro-settings-inner"); var settingspanelinner = settingspanel.querySelector(".DevilBro-settings-inner");
@ -196,7 +136,7 @@ class ThemeSettings {
$(settingspanel) $(settingspanel)
.on("click", ".update-button", () => { .on("click", ".update-button", () => {
let path = this.path.join(this.dir, bdthemes[name].filename); let path = this.path.join(this.dir, theme.filename);
let css = this.fs.readFileSync(path).toString(); let css = this.fs.readFileSync(path).toString();
if (css) { if (css) {
let amount = 0; let amount = 0;
@ -211,11 +151,11 @@ class ThemeSettings {
} }
if (amount > 0) { if (amount > 0) {
this.fs.writeFileSync(path, css); this.fs.writeFileSync(path, css);
BDFDB.showToast(`Updated ${amount} variable${amount == 1 ? "" : "s"} in ${bdthemes[name].filename}`, {type:"success"}); BDFDB.showToast(`Updated ${amount} variable${amount == 1 ? "" : "s"} in ${theme.filename}`, {type:"success"});
} }
else BDFDB.showToast(`There are no changed variables to be updated in ${bdthemes[name].filename}`, {type:"warning"}); else BDFDB.showToast(`There are no changed variables to be updated in ${theme.filename}`, {type:"warning"});
} }
else BDFDB.showToast(`Could not find themefile: ${bdthemes[name].filename}`, {type:"error"}); else BDFDB.showToast(`Could not find themefile: ${theme.filename}`, {type:"error"});
}); });
return settingspanel; return settingspanel;
} }