some cleanup & additions
This commit is contained in:
Zack Rauen
parent
18d6da12eb
commit
2bdeb4cf58
16
css/main.css
16
css/main.css
|
|
@ -24,11 +24,11 @@
|
|||
/* =============== */
|
||||
/* END V2 LOADER */
|
||||
|
||||
.bd-settings-group .bd-settings-title {
|
||||
.bd-settings-group.collapsible .bd-settings-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bd-settings-group .bd-settings-title::after {
|
||||
.bd-settings-group.collapsible .bd-settings-title::after {
|
||||
content: "";
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSItOTUwIDUzMiAxOCAxOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAtOTUwIDUzMiAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTt9DQoJLnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjEuNTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTS05MzIsNTMydjE4aC0xOHYtMThILTkzMnoiLz4NCjxwb2x5bGluZSBjbGFzcz0ic3QxIiBwb2ludHM9Ii05MzYuNiw1MzguOCAtOTQxLDU0My4yIC05NDUuNCw1MzguOCAiLz4NCjwvc3ZnPg0K);
|
||||
height: 20px;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
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;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -59,16 +59,16 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title {
|
||||
.bd-settings-group.collapsible .bd-settings-title {
|
||||
order: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title::before {
|
||||
.bd-settings-group.collapsible .bd-settings-title::before {
|
||||
content: "";
|
||||
background-color: rgba(114,118,125,.3);
|
||||
height: 2px;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
margin: 0 10px 0 15px;
|
||||
}
|
||||
|
||||
.bd-settings-group .bd-settings-title::after {
|
||||
.bd-settings-group.collapsible .bd-settings-title::after {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
|
|
|
|||
1824
js/main.js
1824
js/main.js
File diff suppressed because it is too large
Load Diff
|
|
@ -19,10 +19,6 @@ export default new class SettingsPanel {
|
|||
this.renderer = new SettingsRenderer({onChange: this.updateSettings.bind(this)});
|
||||
}
|
||||
|
||||
renderSidebar() {
|
||||
this.renderer.renderSidebar();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
DataStore.initialize();
|
||||
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(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(27, 0, {section: "CUSTOM", element: () => this.renderer.attribution});
|
||||
}});
|
||||
const viewClass = WebpackModules.getByProps("standardSidebarView").standardSidebarView.split(" ")[0];
|
||||
const node = document.querySelector(`.${viewClass}`);
|
||||
|
|
|
|||
|
|
@ -172,4 +172,42 @@ export default class Utilities {
|
|||
|
||||
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(" ");
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +1,50 @@
|
|||
import {SettingsCookie} from "data";
|
||||
import {React, ReactDOM} from "modules";
|
||||
import {React} from "modules";
|
||||
import Title from "./title";
|
||||
import Vertical from "./vertical";
|
||||
import Divider from "./divider";
|
||||
import Switch from "./switch";
|
||||
|
||||
const baseClassName = "bd-settings-group";
|
||||
|
||||
export default class Group extends React.Component {
|
||||
constructor(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.state = {
|
||||
collapsed: this.props.collapsible && this.props.collapsed
|
||||
};
|
||||
}
|
||||
|
||||
// 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);
|
||||
// }});
|
||||
// })];
|
||||
// }
|
||||
|
||||
collapseGroup() {
|
||||
if (this.state.collapsed) return this.expandGroup();
|
||||
const container = ReactDOM.findDOMNode(this.container.current);
|
||||
// console.log(container.scrollHeight);
|
||||
toggleCollapse() {
|
||||
const container = this.container.current;
|
||||
const timeout = this.state.collapsed ? 300 : 1;
|
||||
container.style.setProperty("height", container.scrollHeight + "px");
|
||||
this.setState({collapsed: true}, () => setImmediate(() => container.style.setProperty("height", "")));//
|
||||
}
|
||||
|
||||
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", "")
|
||||
this.setState({collapsed: !this.state.collapsed}, () => setTimeout(() => container.style.setProperty("height", ""), timeout));
|
||||
}
|
||||
|
||||
render() {
|
||||
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}>
|
||||
<Title text={this.props.title} collapsible={this.props.collapsible} onClick={() => this.collapseGroup()} />
|
||||
<Vertical className="bd-settings-container" ref={this.container}>
|
||||
{settings.map((setting) => {
|
||||
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);
|
||||
}} />;
|
||||
})}
|
||||
</Vertical>
|
||||
<Title text={this.props.title} collapsible={this.props.collapsible} onClick={() => this.toggleCollapse()} button={this.props.button} />
|
||||
<div className="bd-settings-container" ref={this.container}>
|
||||
{settings.map((setting) => {
|
||||
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);
|
||||
}} />;
|
||||
})}
|
||||
</div>
|
||||
{this.props.showDivider && <Divider />}
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}});
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +1,23 @@
|
|||
import {SettingsInfo, SettingsCookie, Plugins, Themes} from "data";
|
||||
import {React, ReactDOM, Utilities, ContentManager, Events, PluginManager, ThemeManager} from "modules";
|
||||
import Sidebar from "./sidebar";
|
||||
import Scroller from "../scroller";
|
||||
import List from "../list";
|
||||
import ContentColumn from "./contentcolumn";
|
||||
import SectionedSettingsPanel from "./sectionedsettings";
|
||||
import Tools from "./exitbutton";
|
||||
import SettingsPanel from "./panel";
|
||||
import PluginCard from "./plugincard";
|
||||
import ThemeCard from "./themecard";
|
||||
import ReloadIcon from "../icons/reload";
|
||||
import {SettingsInfo, Config/*, SettingsCookie, Plugins, Themes*/} from "data";
|
||||
import {React/*, ReactDOM, Utilities, ContentManager, Events, PluginManager, ThemeManager*/} from "modules";
|
||||
// import Sidebar from "./sidebar";
|
||||
// import Scroller from "../scroller";
|
||||
// import List from "../list";
|
||||
// import ContentColumn from "./contentcolumn";
|
||||
// import SectionedSettingsPanel from "./sectionedsettings";
|
||||
// import Tools from "./exitbutton";
|
||||
// import SettingsPanel from "./panel";
|
||||
// import PluginCard from "./plugincard";
|
||||
// import ThemeCard from "./themecard";
|
||||
// import ReloadIcon from "../icons/reload";
|
||||
|
||||
import CssEditor from "../customcss/editor";
|
||||
import SettingsGroup from "../settings/settingsgroup";
|
||||
// import CssEditor from "../customcss/editor";
|
||||
// import SettingsGroup from "../settings/settingsgroup";
|
||||
import SettingsGroup2 from "../settings/group";
|
||||
import {Toasts} from "../ui";
|
||||
|
||||
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() {
|
||||
const settings = this.getSettings("core");
|
||||
const categories = [...new Set(settings.map(s => s.category))];
|
||||
|
|
@ -57,6 +29,7 @@ export default class V2_SettingsPanel {
|
|||
get emoteSettings() {
|
||||
return this.getSettings("emote");
|
||||
}
|
||||
|
||||
getSettings(category) {
|
||||
return Object.keys(SettingsInfo).reduce((arr, 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() {
|
||||
return this.coreSettings.map(section => {
|
||||
return React.createElement(SettingsGroup2, Object.assign({}, section, {onChange: this.onChange}));
|
||||
return this.coreSettings.map((section, i) => {
|
||||
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() {
|
||||
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [
|
||||
React.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}),
|
||||
React.createElement(Tools, {key: "tools"})
|
||||
]});
|
||||
get attribution() {
|
||||
return 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 emoteComponent() {
|
||||
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"})
|
||||
]});
|
||||
}
|
||||
// get coreComponent() {
|
||||
// return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [
|
||||
// React.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}),
|
||||
// React.createElement(Tools, {key: "tools"})
|
||||
// ]});
|
||||
// }
|
||||
|
||||
get customCssComponent() {
|
||||
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [React.createElement(CssEditor, {key: "csseditor"}), React.createElement(Tools, {key: "tools"})]});
|
||||
}
|
||||
// get emoteComponent() {
|
||||
// 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) {
|
||||
const componentElement = type == "plugins" ? this.pluginsComponent : this.themesComponent;
|
||||
const prefix = type.replace("s", "");
|
||||
const settingsList = this;
|
||||
class ContentList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
// get customCssComponent() {
|
||||
// return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [React.createElement(CssEditor, {key: "csseditor"}), React.createElement(Tools, {key: "tools"})]});
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
Events.on(`${prefix}-reloaded`, this.onChange);
|
||||
Events.on(`${prefix}-loaded`, this.onChange);
|
||||
Events.on(`${prefix}-unloaded`, this.onChange);
|
||||
}
|
||||
// contentComponent(type) {
|
||||
// const componentElement = type == "plugins" ? this.pluginsComponent : this.themesComponent;
|
||||
// const prefix = type.replace("s", "");
|
||||
// const settingsList = this;
|
||||
// class ContentList extends React.Component {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.onChange = this.onChange.bind(this);
|
||||
// }
|
||||
|
||||
componentWillUnmount() {
|
||||
Events.off(`${prefix}-reloaded`, this.onChange);
|
||||
Events.off(`${prefix}-loaded`, this.onChange);
|
||||
Events.off(`${prefix}-unloaded`, this.onChange);
|
||||
}
|
||||
// componentDidMount() {
|
||||
// Events.on(`${prefix}-reloaded`, this.onChange);
|
||||
// Events.on(`${prefix}-loaded`, this.onChange);
|
||||
// Events.on(`${prefix}-unloaded`, this.onChange);
|
||||
// }
|
||||
|
||||
onChange() {
|
||||
settingsList.sideBarOnClick(type);
|
||||
}
|
||||
// componentWillUnmount() {
|
||||
// Events.off(`${prefix}-reloaded`, this.onChange);
|
||||
// Events.off(`${prefix}-loaded`, this.onChange);
|
||||
// Events.off(`${prefix}-unloaded`, this.onChange);
|
||||
// }
|
||||
|
||||
render() {return componentElement;}
|
||||
}
|
||||
return React.createElement(ContentList);
|
||||
}
|
||||
// onChange() {
|
||||
// settingsList.sideBarOnClick(type);
|
||||
// }
|
||||
|
||||
get pluginsComponent() {
|
||||
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;
|
||||
}, []);
|
||||
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"})]});
|
||||
}
|
||||
// render() {return componentElement;}
|
||||
// }
|
||||
// return React.createElement(ContentList);
|
||||
// }
|
||||
|
||||
get themesComponent() {
|
||||
const themes = Object.keys(Themes).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
|
||||
arr.push(React.createElement(ThemeCard, {key: key, theme: Themes[key]}));return arr;
|
||||
}, []);
|
||||
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 () => {
|
||||
ThemeManager.updateThemeList();
|
||||
this.sideBarOnClick("themes");
|
||||
}});
|
||||
const tfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.themesFolder); }}, "Open Theme Folder");
|
||||
const contentColumn = React.createElement(ContentColumn, {key: "tcolumn", title: "Themes", children: [refreshIcon, tfBtn, list]});
|
||||
return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
|
||||
}
|
||||
// get pluginsComponent() {
|
||||
// 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;
|
||||
// }, []);
|
||||
// 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"})]});
|
||||
// }
|
||||
|
||||
renderCoreSettings() {
|
||||
const root = this.root;
|
||||
if (!root) {
|
||||
console.log("FAILED TO LOCATE ROOT: .layer-3QrUeG .standardSidebarView-3F1I7i");
|
||||
return;
|
||||
}
|
||||
ReactDOM.render(this.coreComponent, root);
|
||||
}
|
||||
|
||||
renderEmoteSettings() {
|
||||
const root = this.root;
|
||||
if (!root) {
|
||||
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);
|
||||
}
|
||||
// get themesComponent() {
|
||||
// const themes = Object.keys(Themes).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
|
||||
// arr.push(React.createElement(ThemeCard, {key: key, theme: Themes[key]}));return arr;
|
||||
// }, []);
|
||||
// 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 () => {
|
||||
// ThemeManager.updateThemeList();
|
||||
// this.sideBarOnClick("themes");
|
||||
// }});
|
||||
// const tfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.themesFolder); }}, "Open Theme Folder");
|
||||
// const contentColumn = React.createElement(ContentColumn, {key: "tcolumn", title: "Themes", children: [refreshIcon, tfBtn, list]});
|
||||
// return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
|
||||
// }
|
||||
}
|
||||
|
|
@ -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);
|
||||
}});
|
||||
})];
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 & 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>
|
||||
|
|
@ -12,7 +12,8 @@ export default class SettingsTitle extends React.Component {
|
|||
return React.createElement(
|
||||
"h2",
|
||||
{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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue