lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

some cleanup & additions

This commit is contained in:
Zack Rauen 2019-06-04 10:21:07 -04:00
parent 18d6da12eb
commit 2bdeb4cf58
15 changed files with 347 additions and 2175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/main.css
View File

@ -24,11 +24,11 @@
/* =============== */ /* =============== */
/* END V2 LOADER */ /* END V2 LOADER */
.bd-settings-group .bd-settings-title { .bd-settings-group.collapsible .bd-settings-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.bd-settings-group .bd-settings-title::after { .bd-settings-group.collapsible .bd-settings-title::after {
content: ""; content: "";
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItOTUwIDUzMiAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtOTUwIDUzMiAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS05MzIsNTMydjE4aC0xOHYtMThILTkzMnoiLz4NCjxwb2x5bGluZSBjbGFzcz0ic3QxIiBwb2ludHM9Ii05MzYuNiw1MzguOCAtOTQxLDU0My4yIC05NDUuNCw1MzguOCAiLz4NCjwvc3ZnPg0K); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItOTUwIDUzMiAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtOTUwIDUzMiAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS05MzIsNTMydjE4aC0xOHYtMThILTkzMnoiLz4NCjxwb2x5bGluZSBjbGFzcz0ic3QxIiBwb2ludHM9Ii05MzYuNiw1MzguOCAtOTQxLDU0My4yIC05NDUuNCw1MzguOCAiLz4NCjwvc3ZnPg0K);
height: 20px; height: 20px;
@ -39,7 +39,7 @@
transform: rotate(0); transform: rotate(0);
} }
.bd-settings-group.bd-settings-group-collapsed .bd-settings-title::after { .bd-settings-group.collapsed .bd-settings-title::after {
transition: transform .3s ease; transition: transform .3s ease;
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -50,7 +50,7 @@
transition: height 300ms cubic-bezier(0.47, 0, 0.745, 0.715); transition: height 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
} }
.bd-settings-group.bd-settings-group-collapsed .bd-settings-container { .bd-settings-group.collapsed .bd-settings-container {
height: 0px; height: 0px;
} }
@ -59,16 +59,16 @@
transition: margin-top 300ms ease; transition: margin-top 300ms ease;
} }
.bd-settings-group.bd-settings-group-collapsed + .bd-settings-group .bd-settings-title { .bd-settings-group.collapsed + .bd-settings-group .bd-settings-title {
margin-top: 0px; margin-top: 0px;
} }
.bd-settings-group .bd-settings-title { .bd-settings-group.collapsible .bd-settings-title {
order: 1; order: 1;
align-items: center; align-items: center;
} }
.bd-settings-group .bd-settings-title::before { .bd-settings-group.collapsible .bd-settings-title::before {
content: ""; content: "";
background-color: rgba(114,118,125,.3); background-color: rgba(114,118,125,.3);
height: 2px; height: 2px;
@ -77,7 +77,7 @@
margin: 0 10px 0 15px; margin: 0 10px 0 15px;
} }
.bd-settings-group .bd-settings-title::after { .bd-settings-group.collapsible .bd-settings-title::after {
order: 3; order: 3;
} }

1824
js/main.js
View File

File diff suppressed because it is too large Load Diff

5
src/modules/settingspanel.js
View File

@ -19,10 +19,6 @@ export default new class SettingsPanel {
this.renderer = new SettingsRenderer({onChange: this.updateSettings.bind(this)}); this.renderer = new SettingsRenderer({onChange: this.updateSettings.bind(this)});
} }
renderSidebar() {
this.renderer.renderSidebar();
}
initialize() { initialize() {
DataStore.initialize(); DataStore.initialize();
if (!DataStore.getSettingGroup("settings")) return this.saveSettings(); if (!DataStore.getSettingGroup("settings")) return this.saveSettings();
@ -55,6 +51,7 @@ export default new class SettingsPanel {
data.returnValue.splice(24, 0, {section: "HEADER", label: "BandagedBD"}); data.returnValue.splice(24, 0, {section: "HEADER", label: "BandagedBD"});
data.returnValue.splice(25, 0, {section: "BBD Settings", label: "Settings", element: () => this.renderer.core2}); data.returnValue.splice(25, 0, {section: "BBD Settings", label: "Settings", element: () => this.renderer.core2});
data.returnValue.splice(26, 0, {section: "BBD Test", label: "Test Tab", onClick: function() {Toasts.success("This can just be a click listener!", {forceShow: true});}}); data.returnValue.splice(26, 0, {section: "BBD Test", label: "Test Tab", onClick: function() {Toasts.success("This can just be a click listener!", {forceShow: true});}});
data.returnValue.splice(27, 0, {section: "CUSTOM", element: () => this.renderer.attribution});
}}); }});
const viewClass = WebpackModules.getByProps("standardSidebarView").standardSidebarView.split(" ")[0]; const viewClass = WebpackModules.getByProps("standardSidebarView").standardSidebarView.split(" ")[0];
const node = document.querySelector(`.${viewClass}`); const node = document.querySelector(`.${viewClass}`);

38
src/modules/utilities.js
View File

@ -172,4 +172,42 @@ export default class Utilities {
return proxy; return proxy;
} }
/**
* Builds a classname string from any number of arguments. This includes arrays and objects.
* When given an array all values from the array are added to the list.
* When given an object they keys are added as the classnames if the value is truthy.
* Copyright (c) 2018 Jed Watson https://github.com/JedWatson/classnames MIT License
* @param {...Any} argument - anything that should be used to add classnames.
*/
static className() {
const classes = [];
const hasOwn = {}.hasOwnProperty;
for (let i = 0; i < arguments.length; i++) {
const arg = arguments[i];
if (!arg) continue;
const argType = typeof arg;
if (argType === "string" || argType === "number") {
classes.push(arg);
}
else if (Array.isArray(arg) && arg.length) {
const inner = this.classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
else if (argType === "object") {
for (const key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(" ");
}
} }

44
src/ui/settings/checkbox.js
View File

@ -1,44 +0,0 @@
import {React} from "modules";
export default class V2C_Checkbox extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
this.setInitialState();
}
setInitialState() {
this.state = {
checked: this.props.checked || false
};
}
render() {
return React.createElement(
"li",
null,
React.createElement(
"div",
{className: "checkbox checkbox-3kaeSU da-checkbox checkbox-3EVISJ da-checkbox", onClick: this.onClick},
React.createElement(
"div",
{className: "checkbox-inner checkboxInner-3yjcPe da-checkboxInner"},
React.createElement("input", {className: "checkboxElement-1qV33p da-checkboxElement", checked: this.state.checked, onChange: () => {}, type: "checkbox"}),
React.createElement("span", null)
),
React.createElement(
"span",
null,
this.props.text
)
)
);
}
onClick() {
this.props.onChange(this.props.id, !this.state.checked);
this.setState({
checked: !this.state.checked
});
}
}

20
src/ui/settings/contentcolumn.js
View File

@ -1,20 +0,0 @@
import {React} from "modules";
export default class V2C_ContentColumn extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
"div",
{className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default"},
React.createElement(
"h2",
{className: "ui-form-title h2 margin-reset margin-bottom-20"},
this.props.title
),
this.props.children
);
}
}

63
src/ui/settings/group.jsx
View File

@ -1,59 +1,50 @@
import {SettingsCookie} from "data"; import {SettingsCookie} from "data";
import {React, ReactDOM} from "modules"; import {React} from "modules";
import Title from "./title"; import Title from "./title";
import Vertical from "./vertical";
import Divider from "./divider"; import Divider from "./divider";
import Switch from "./switch"; import Switch from "./switch";
const baseClassName = "bd-settings-group";
export default class Group extends React.Component { export default class Group extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.button && this.props.collapsible) {
const original = this.props.button.onClick;
this.props.button.onClick = (event) => {
event.stopPropagation();
original(...arguments);
};
}
this.container = React.createRef(); this.container = React.createRef();
this.state = { this.state = {
collapsed: this.props.collapsible && this.props.collapsed collapsed: this.props.collapsible && this.props.collapsed
}; };
} }
// render() { toggleCollapse() {
// const {title, settings, button} = this.props; const container = this.container.current;
// const buttonComponent = button ? React.createElement("button", {key: "title-button", className: "bd-pfbtn", onClick: button.onClick}, button.title) : null; const timeout = this.state.collapsed ? 300 : 1;
// return [React.createElement(SettingsTitle, {text: title}),
// buttonComponent,
// settings.map(setting => {
// return React.createElement(Switch, {id: setting.id, key: setting.id, data: setting, checked: SettingsCookie[setting.id], onChange: (id, checked) => {
// this.props.onChange(id, checked);
// }});
// })];
// }
collapseGroup() {
if (this.state.collapsed) return this.expandGroup();
const container = ReactDOM.findDOMNode(this.container.current);
// console.log(container.scrollHeight);
container.style.setProperty("height", container.scrollHeight + "px"); container.style.setProperty("height", container.scrollHeight + "px");
this.setState({collapsed: true}, () => setImmediate(() => container.style.setProperty("height", "")));// this.setState({collapsed: !this.state.collapsed}, () => setTimeout(() => container.style.setProperty("height", ""), timeout));
}
expandGroup() {
const container = ReactDOM.findDOMNode(this.container.current);
// console.log(container.scrollHeight);
container.style.setProperty("height", container.scrollHeight + "px");
this.setState({collapsed: false}, () => setTimeout(() => container.style.setProperty("height", ""), 300));//, () => container.style.setProperty("height", "")
//, () => container.style.setProperty("height", "")
} }
render() { render() {
const {settings} = this.props; const {settings} = this.props;
const groupClass = this.state.collapsed ? "bd-settings-group bd-settings-group-collapsed" : "bd-settings-group"; const collapseClass = this.props.collapsible ? `collapsible ${this.state.collapsed && "collapsed"}` : "";
const groupClass = `${baseClassName} ${collapseClass}`;
return <div className={groupClass}> return <div className={groupClass}>
<Title text={this.props.title} collapsible={this.props.collapsible} onClick={() => this.collapseGroup()} /> <Title text={this.props.title} collapsible={this.props.collapsible} onClick={() => this.toggleCollapse()} button={this.props.button} />
<Vertical className="bd-settings-container" ref={this.container}> <div className="bd-settings-container" ref={this.container}>
{settings.map((setting) => { {settings.map((setting) => {
return <Switch id={setting.id} key={setting.id} name={setting.text} note={setting.info} checked={SettingsCookie[setting.id]} onChange={(id, checked) => { return <Switch id={setting.id} key={setting.id} name={setting.text} note={setting.info} checked={SettingsCookie[setting.id]} onChange={(id, checked) => {
this.props.onChange(id, checked); this.props.onChange(id, checked);
}} />; }} />;
})} })}
</Vertical> </div>
{this.props.showDivider && <Divider />} {this.props.showDivider && <Divider />}
</div>; </div>;
} }

26
src/ui/settings/panel.js
View File

@ -1,26 +0,0 @@
import {SettingsCookie} from "data";
import {React} from "modules";
import SettingsTitle from "./title";
import Switch from "./switch";
export default class V2C_SettingsPanel extends React.Component {
constructor(props) {
super(props);
}
render() {
const {settings} = this.props;
return React.createElement(
"div",
{className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default"},
React.createElement(SettingsTitle, {text: this.props.title}),
this.props.button && React.createElement("button", {key: "title-button", className: "bd-pfbtn", onClick: this.props.button.onClick}, this.props.button.title),
settings.map(setting => {
return React.createElement(Switch, {id: setting.id, key: setting.id, data: setting, checked: SettingsCookie[setting.id], onChange: (id, checked) => {
this.props.onChange(id, checked);
}});
})
);
}
}

293
src/ui/settings/settings.js
View File

@ -1,51 +1,23 @@
import {SettingsInfo, SettingsCookie, Plugins, Themes} from "data"; import {SettingsInfo, Config/*, SettingsCookie, Plugins, Themes*/} from "data";
import {React, ReactDOM, Utilities, ContentManager, Events, PluginManager, ThemeManager} from "modules"; import {React/*, ReactDOM, Utilities, ContentManager, Events, PluginManager, ThemeManager*/} from "modules";
import Sidebar from "./sidebar"; // import Sidebar from "./sidebar";
import Scroller from "../scroller"; // import Scroller from "../scroller";
import List from "../list"; // import List from "../list";
import ContentColumn from "./contentcolumn"; // import ContentColumn from "./contentcolumn";
import SectionedSettingsPanel from "./sectionedsettings"; // import SectionedSettingsPanel from "./sectionedsettings";
import Tools from "./exitbutton"; // import Tools from "./exitbutton";
import SettingsPanel from "./panel"; // import SettingsPanel from "./panel";
import PluginCard from "./plugincard"; // import PluginCard from "./plugincard";
import ThemeCard from "./themecard"; // import ThemeCard from "./themecard";
import ReloadIcon from "../icons/reload"; // import ReloadIcon from "../icons/reload";
import CssEditor from "../customcss/editor"; // import CssEditor from "../customcss/editor";
import SettingsGroup from "../settings/settingsgroup"; // import SettingsGroup from "../settings/settingsgroup";
import SettingsGroup2 from "../settings/group"; import SettingsGroup2 from "../settings/group";
import {Toasts} from "../ui";
export default class V2_SettingsPanel { export default class V2_SettingsPanel {
constructor(props) {
this.sideBarOnClick = this.sideBarOnClick.bind(this);
this.onChange = props.onChange;
this.sidebar = new Sidebar(this.sideBarOnClick);
}
get root() {
const _root = $("#bd-settingspane-container");
if (!_root.length) {
if (!this.injectRoot()) return null;
return this.root;
}
return _root[0];
}
injectRoot() {
if (!$(".layer-3QrUeG .standardSidebarView-3F1I7i, .layer-3QrUeG .ui-standard-sidebar-view").length) return false;
const root = $("<div/>", {
"class": "contentRegion-3nDuYy content-region",
"id": "bd-settingspane-container"
});
$(".layer-3QrUeG .standardSidebarView-3F1I7i, .layer-3QrUeG .ui-standard-sidebar-view").append(root);
Utilities.onRemoved(root[0], () => {
ReactDOM.unmountComponentAtNode(root[0]);
});
return true;
}
get coreSettings() { get coreSettings() {
const settings = this.getSettings("core"); const settings = this.getSettings("core");
const categories = [...new Set(settings.map(s => s.category))]; const categories = [...new Set(settings.map(s => s.category))];
@ -57,6 +29,7 @@ export default class V2_SettingsPanel {
get emoteSettings() { get emoteSettings() {
return this.getSettings("emote"); return this.getSettings("emote");
} }
getSettings(category) { getSettings(category) {
return Object.keys(SettingsInfo).reduce((arr, key) => { return Object.keys(SettingsInfo).reduce((arr, key) => {
const setting = SettingsInfo[key]; const setting = SettingsInfo[key];
@ -68,168 +41,104 @@ export default class V2_SettingsPanel {
}, []); }, []);
} }
sideBarOnClick(id) {
const self = this;
$(".contentRegion-3nDuYy, .content-region").first().hide();
$(self.root).show();
switch (id) {
case "core":
self.renderCoreSettings();
break;
case "emotes":
self.renderEmoteSettings();
break;
case "customcss":
self.renderCustomCssEditor();
break;
case "plugins":
self.renderPluginPane();
break;
case "themes":
self.renderThemePane();
break;
}
}
renderSidebar() {
const self = this;
$("[class*='side-'] > [class*='item-']").off("click.v2settingspanel").on("click.v2settingspanel", () => {
ReactDOM.unmountComponentAtNode(self.root);
$(self.root).hide();
$(".contentRegion-3nDuYy, .content-region").first().show();
});
self.sidebar.render();
}
get core2() { get core2() {
return this.coreSettings.map(section => { return this.coreSettings.map((section, i) => {
return React.createElement(SettingsGroup2, Object.assign({}, section, {onChange: this.onChange})); if (i == 0) section.button = {title: "Call to Action!", onClick: () => {Toasts.success("You did it!", {forceShow: true});}};
return React.createElement(SettingsGroup2, Object.assign({}, section, {onChange: this.onChange, collapsible: true, collapsed: i > 1}));
}); });
} }
get coreComponent() { get attribution() {
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [ return React.createElement(
React.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}), "div",
React.createElement(Tools, {key: "tools"}) {style: {fontSize: "12px", fontWeight: "600", color: "#72767d", padding: "2px 10px"}},
]}); `BBD v${Config.bbdVersion} by `,
React.createElement(
"a",
{href: "https://github.com/rauenzi/", target: "_blank"},
"Zerebos"
)
);
} }
get emoteComponent() { // get coreComponent() {
return React.createElement(Scroller, { // return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [
contentColumn: true, fade: true, dark: true, children: [ // React.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}),
React.createElement(SettingsPanel, {key: "espanel", title: "Emote Settings", onChange: this.onChange, settings: this.emoteSettings, button: { // React.createElement(Tools, {key: "tools"})
title: "Clear Emote Cache", // ]});
onClick: () => { Events.dispatch("emotes-clear"); /*EmoteModule.clearEmoteData(); EmoteModule.init();*/ } // }
}}),
React.createElement(Tools, {key: "tools"})
]});
}
get customCssComponent() { // get emoteComponent() {
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [React.createElement(CssEditor, {key: "csseditor"}), React.createElement(Tools, {key: "tools"})]}); // return React.createElement(Scroller, {
} // contentColumn: true, fade: true, dark: true, children: [
// React.createElement(SettingsPanel, {key: "espanel", title: "Emote Settings", onChange: this.onChange, settings: this.emoteSettings, button: {
// title: "Clear Emote Cache",
// onClick: () => { Events.dispatch("emotes-clear"); /*EmoteModule.clearEmoteData(); EmoteModule.init();*/ }
// }}),
// React.createElement(Tools, {key: "tools"})
// ]});
// }
contentComponent(type) { // get customCssComponent() {
const componentElement = type == "plugins" ? this.pluginsComponent : this.themesComponent; // return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [React.createElement(CssEditor, {key: "csseditor"}), React.createElement(Tools, {key: "tools"})]});
const prefix = type.replace("s", ""); // }
const settingsList = this;
class ContentList extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
}
componentDidMount() { // contentComponent(type) {
Events.on(`${prefix}-reloaded`, this.onChange); // const componentElement = type == "plugins" ? this.pluginsComponent : this.themesComponent;
Events.on(`${prefix}-loaded`, this.onChange); // const prefix = type.replace("s", "");
Events.on(`${prefix}-unloaded`, this.onChange); // const settingsList = this;
} // class ContentList extends React.Component {
// constructor(props) {
// super(props);
// this.onChange = this.onChange.bind(this);
// }
componentWillUnmount() { // componentDidMount() {
Events.off(`${prefix}-reloaded`, this.onChange); // Events.on(`${prefix}-reloaded`, this.onChange);
Events.off(`${prefix}-loaded`, this.onChange); // Events.on(`${prefix}-loaded`, this.onChange);
Events.off(`${prefix}-unloaded`, this.onChange); // Events.on(`${prefix}-unloaded`, this.onChange);
} // }
onChange() { // componentWillUnmount() {
settingsList.sideBarOnClick(type); // Events.off(`${prefix}-reloaded`, this.onChange);
} // Events.off(`${prefix}-loaded`, this.onChange);
// Events.off(`${prefix}-unloaded`, this.onChange);
// }
render() {return componentElement;} // onChange() {
} // settingsList.sideBarOnClick(type);
return React.createElement(ContentList); // }
}
get pluginsComponent() { // render() {return componentElement;}
const plugins = Object.keys(Plugins).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => { // }
arr.push(React.createElement(PluginCard, {key: key, plugin: Plugins[key].plugin}));return arr; // return React.createElement(ContentList);
}, []); // }
const list = React.createElement(List, {key: "plugin-list", className: "bda-slist", children: plugins});
const refreshIcon = !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-header", size: "18px", onClick: async () => {
PluginManager.updatePluginList();
this.sideBarOnClick("plugins");
}});
const pfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.pluginsFolder); }}, "Open Plugin Folder");
const contentColumn = React.createElement(ContentColumn, {key: "pcolumn", title: "Plugins", children: [refreshIcon, pfBtn, list]});
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
}
get themesComponent() { // get pluginsComponent() {
const themes = Object.keys(Themes).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => { // const plugins = Object.keys(Plugins).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
arr.push(React.createElement(ThemeCard, {key: key, theme: Themes[key]}));return arr; // arr.push(React.createElement(PluginCard, {key: key, plugin: Plugins[key].plugin}));return arr;
}, []); // }, []);
const list = React.createElement(List, {key: "theme-list", className: "bda-slist", children: themes}); // const list = React.createElement(List, {key: "plugin-list", className: "bda-slist", children: plugins});
const refreshIcon = !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-header", size: "18px", onClick: async () => { // const refreshIcon = !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-header", size: "18px", onClick: async () => {
ThemeManager.updateThemeList(); // PluginManager.updatePluginList();
this.sideBarOnClick("themes"); // this.sideBarOnClick("plugins");
}}); // }});
const tfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.themesFolder); }}, "Open Theme Folder"); // const pfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.pluginsFolder); }}, "Open Plugin Folder");
const contentColumn = React.createElement(ContentColumn, {key: "tcolumn", title: "Themes", children: [refreshIcon, tfBtn, list]}); // const contentColumn = React.createElement(ContentColumn, {key: "pcolumn", title: "Plugins", children: [refreshIcon, pfBtn, list]});
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]}); // return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
} // }
renderCoreSettings() { // get themesComponent() {
const root = this.root; // const themes = Object.keys(Themes).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
if (!root) { // arr.push(React.createElement(ThemeCard, {key: key, theme: Themes[key]}));return arr;
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i"); // }, []);
return; // const list = React.createElement(List, {key: "theme-list", className: "bda-slist", children: themes});
} // const refreshIcon = !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-header", size: "18px", onClick: async () => {
ReactDOM.render(this.coreComponent, root); // ThemeManager.updateThemeList();
} // this.sideBarOnClick("themes");
// }});
renderEmoteSettings() { // const tfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.themesFolder); }}, "Open Theme Folder");
const root = this.root; // const contentColumn = React.createElement(ContentColumn, {key: "tcolumn", title: "Themes", children: [refreshIcon, tfBtn, list]});
if (!root) { // return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i"); // }
return;
}
ReactDOM.render(this.emoteComponent, root);
}
renderCustomCssEditor() {
const root = this.root;
if (!root) {
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i");
return;
}
ReactDOM.render(this.customCssComponent, root);
}
renderPluginPane() {
const root = this.root;
if (!root) {
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i");
return;
}
ReactDOM.render(this.contentComponent("plugins"), root);
}
renderThemePane() {
const root = this.root;
if (!root) {
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i");
return;
}
ReactDOM.render(this.contentComponent("themes"), root);
}
} }

23
src/ui/settings/settingsgroup.js
View File

@ -1,23 +0,0 @@
import {SettingsCookie} from "data";
import {React} from "modules";
import SettingsTitle from "./title";
import Switch from "./switch";
export default class V2C_SettingsGroup extends React.Component {
constructor(props) {
super(props);
}
render() {
const {title, settings, button} = this.props;
const buttonComponent = button ? React.createElement("button", {key: "title-button", className: "bd-pfbtn", onClick: button.onClick}, button.title) : null;
return [React.createElement(SettingsTitle, {text: title}),
buttonComponent,
settings.map(setting => {
return React.createElement(Switch, {id: setting.id, key: setting.id, data: setting, checked: SettingsCookie[setting.id], onChange: (id, checked) => {
this.props.onChange(id, checked);
}});
})];
}
}

71
src/ui/settings/sidebar.js
View File

@ -1,71 +0,0 @@
import {Config} from "data";
import {React, ReactDOM, Utilities} from "modules";
import SideBar from "./sidebarmenu";
export default class V2_SettingsPanel_Sidebar {
constructor(onClick) {
this.onClick = onClick;
}
get items() {
return [{text: "Settings", id: "core"}, {text: "Emotes", id: "emotes"}, {text: "Plugins", id: "plugins"}, {text: "Themes", id: "themes"}, {text: "Custom CSS", id: "customcss"}];
}
get component() {
return React.createElement(
"span",
null,
React.createElement(SideBar, {onClick: this.onClick, headerText: "Bandaged BD", items: this.items}),
React.createElement(
"div",
{style: {fontSize: "12px", fontWeight: "600", color: "#72767d", padding: "2px 10px"}},
`BD v${Config.version} by `,
React.createElement(
"a",
{href: "https://github.com/Jiiks/", target: "_blank"},
"Jiiks"
)
),
React.createElement(
"div",
{style: {fontSize: "12px", fontWeight: "600", color: "#72767d", padding: "2px 10px"}},
`BBD v${Config.bbdVersion} by `,
React.createElement(
"a",
{href: "https://github.com/rauenzi/", target: "_blank"},
"Zerebos"
)
)
);
}
get root() {
const _root = $("#bd-settings-sidebar");
if (!_root.length) {
if (!this.injectRoot()) return null;
return this.root;
}
return _root[0];
}
injectRoot() {
const changeLog = $("[class*='side-'] > [class*='item-']:not([class*=Danger])").last();
if (!changeLog.length) return false;
$("<span/>", {id: "bd-settings-sidebar"}).insertBefore(changeLog.prev());
return true;
}
render() {
const root = this.root;
if (!root) {
console.log("FAILED TO LOCATE ROOT: [class*='side-'] > [class*='item-']:not([class*=Danger])");
return;
}
ReactDOM.render(this.component, root);
Utilities.onRemoved(root, () => {
ReactDOM.unmountComponentAtNode(root);
});
}
}

68
src/ui/settings/sidebarmenu.js
View File

@ -1,68 +0,0 @@
import {React} from "modules";
import TabBar from "./tabbar";
export default class V2C_SideBar extends React.Component {
constructor(props) {
super(props);
const self = this;
const si = $("[class*=side] > [class*=selected]");
if (si.length) self.scn = si.attr("class");
const ns = $("[class*=side] > [class*=notSelected]");
if (ns.length) self.nscn = ns.attr("class");
$("[class*='side-'] > [class*='item-']").on("click", () => {
self.setState({
selected: null
});
});
self.setInitialState();
self.onClick = self.onClick.bind(self);
}
setInitialState() {
const self = this;
self.state = {
selected: null,
items: self.props.items
};
const initialSelection = self.props.items.find(item => {
return item.selected;
});
if (initialSelection) {
self.state.selected = initialSelection.id;
}
}
render() {
const self = this;
const {headerText} = self.props;
const {items, selected} = self.state;
return React.createElement(
"div",
null,
React.createElement(TabBar.Separator, null),
React.createElement(TabBar.Header, {text: headerText}),
items.map(item => {
const {id, text} = item;
return React.createElement(TabBar.Item, {key: id, selected: selected === id, text: text, id: id, onClick: self.onClick});
})
);
}
onClick(id) {
const self = this;
const si = $("[class*=side] > [class*=selected]");
if (si.length) {
si.off("click.bdsb").on("click.bsb", e => {
$(e.target).attr("class", self.scn);
});
si.attr("class", self.nscn);
}
self.setState({selected: null});
self.setState({selected: id});
if (self.props.onClick) self.props.onClick(id);
}
}

17
src/ui/settings/template.html
View File

@ -1,17 +0,0 @@
<h2 class="h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi da-h2 da-title da-size16 da-height20 da-weightSemiBold defaultColor-1_ajX0 da-defaultColor defaultMarginh2-2LTaUL marginBottom20-32qID7 da-defaultMarginh2 da-marginBottom20">Text &amp; Images</h2>
<div class="vertical-V37hAW flex-1O1GKY directionColumn-35P_nr da-vertical da-flex da-directionColumn">
<h5 class="h5-18_1nd title-3sZWYQ size12-3R0845 height16-2Lv3qA weightSemiBold-NJexzi da-h5 da-title da-size12 da-height16 da-weightSemiBold marginBottom8-AtZOdT da-marginBottom8">Display images, videos, and lolcats</h5>
<div class="flex-1xMQg5 flex-1O1GKY da-flex da-flex vertical-V37hAW flex-1O1GKY directionColumn-35P_nr justifyStart-2NDFzi alignStretch-DpGPf3 noWrap-3jynv6 marginTop8-1DLZ1n da-marginTop8 marginBottom20-32qID7 da-marginBottom20" style="flex: 1 1 auto;">
<div class="flex-1xMQg5 flex-1O1GKY da-flex da-flex horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignStart-H-X2h- noWrap-3jynv6" style="flex: 1 1 auto;">
<div class="flexChild-faoVW3 da-flexChild" style="flex: 1 1 auto;">
<label for="100" class="titleDefault-a8-ZSr title-31JmR4 da-titleDefault da-title">When posted as links to chat.</label>
</div>
<div class="flexChild-faoVW3 da-flexChild switchEnabled-V2WDBB switch-3wwwcV da-switchEnabled da-switch valueChecked-m-4IJZ value-2hFrkk sizeDefault-2YlOZr size-3rFEHg themeDefault-24hCdX" tabindex="0" style="flex: 0 0 auto;">
<input id="100" class="checkboxEnabled-CtinEn checkbox-2tyjJg da-checkboxEnabled da-checkbox" type="checkbox" tabindex="-1" checked="">
</div>
</div>
<div class="divider-3573oO da-divider dividerDefault-3rvLe- da-dividerDefault"></div>
</div>
</div>
<div class="divider-3573oO da-divider marginTop8-1DLZ1n da-marginTop8 marginBottom40-2vIwTv da-marginBottom40"></div>

3
src/ui/settings/title.js
View File

@ -12,7 +12,8 @@ export default class SettingsTitle extends React.Component {
return React.createElement( return React.createElement(
"h2", "h2",
{className: titleClass, onClick: () => {this.props.onClick && this.props.onClick();}}, {className: titleClass, onClick: () => {this.props.onClick && this.props.onClick();}},
this.props.text this.props.text,
this.props.button && React.createElement("button", {className: "bd-pfbtn", onClick: this.props.button.onClick}, this.props.button.title)
); );
} }
} }

11
src/ui/settings/vertical.jsx
View File

@ -1,11 +0,0 @@
import {React} from "modules";
const className = "bd-vertical-container";
export default class VerticalContainer extends React.Component {
render() {
const containerClass = this.props.className ? `${className} ${this.props.className}` : className;
return <div className={containerClass}>{this.props.children}</div>;
}
}