2019-05-29 05:48:41 +02:00
|
|
|
import {SettingsCookie, PluginCookie, Plugins} from "data";
|
2019-05-30 07:06:17 +02:00
|
|
|
import {React, ReactDOM, Utilities, PluginManager} from "modules";
|
2019-05-28 23:27:25 +02:00
|
|
|
import CloseButton from "../icons/close";
|
|
|
|
import ReloadIcon from "../icons/reload";
|
|
|
|
|
2019-05-30 07:06:17 +02:00
|
|
|
export default class V2C_PluginCard extends React.Component {
|
2019-05-28 20:19:48 +02:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-05-29 06:50:26 +02:00
|
|
|
this.onChange = this.onChange.bind(this);
|
|
|
|
this.showSettings = this.showSettings.bind(this);
|
|
|
|
this.setInitialState();
|
|
|
|
this.hasSettings = typeof this.props.plugin.getSettingsPanel === "function";
|
|
|
|
this.settingsPanel = "";
|
2019-05-28 20:19:48 +02:00
|
|
|
|
|
|
|
this.reload = this.reload.bind(this);
|
|
|
|
this.onReload = this.onReload.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
setInitialState() {
|
|
|
|
this.state = {
|
2019-05-29 05:48:41 +02:00
|
|
|
checked: PluginCookie[this.props.plugin.getName()],
|
2019-05-28 20:19:48 +02:00
|
|
|
settings: false,
|
|
|
|
reloads: 0
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
// componentDidMount() {
|
|
|
|
// BDEvents.on("plugin-reloaded", this.onReload);
|
|
|
|
// }
|
|
|
|
|
|
|
|
// componentWillUnmount() {
|
|
|
|
// BDEvents.off("plugin-reloaded", this.onReload);
|
|
|
|
// }
|
|
|
|
|
|
|
|
onReload(pluginName) {
|
|
|
|
if (pluginName !== this.props.plugin.getName()) return;
|
|
|
|
this.setState({reloads: this.state.reloads + 1});
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
if (this.state.settings) {
|
|
|
|
if (typeof this.settingsPanel === "object") {
|
|
|
|
this.refs.settingspanel.appendChild(this.settingsPanel);
|
|
|
|
}
|
2019-05-28 20:55:07 +02:00
|
|
|
|
2019-05-29 05:48:41 +02:00
|
|
|
if (!SettingsCookie["fork-ps-3"]) return;
|
2019-05-29 06:50:26 +02:00
|
|
|
const isHidden = (container, element) => {
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-05-29 06:50:26 +02:00
|
|
|
const cTop = container.scrollTop;
|
|
|
|
const cBottom = cTop + container.clientHeight;
|
2019-05-28 20:19:48 +02:00
|
|
|
|
2019-05-29 06:50:26 +02:00
|
|
|
const eTop = element.offsetTop;
|
|
|
|
const eBottom = eTop + element.clientHeight;
|
2019-05-28 20:19:48 +02:00
|
|
|
|
|
|
|
return (eTop < cTop || eBottom > cBottom);
|
|
|
|
};
|
2019-05-28 20:55:07 +02:00
|
|
|
|
2019-05-30 07:06:17 +02:00
|
|
|
const self = $(ReactDOM.findDOMNode(this));
|
2019-05-29 06:50:26 +02:00
|
|
|
const container = self.parents(".scroller");
|
2019-05-28 20:19:48 +02:00
|
|
|
if (!isHidden(container[0], self[0])) return;
|
|
|
|
container.animate({
|
|
|
|
scrollTop: self.offset().top - container.offset().top + container.scrollTop() - 30
|
|
|
|
}, 300);
|
|
|
|
}
|
|
|
|
}
|
2019-05-28 20:55:07 +02:00
|
|
|
|
2019-05-28 20:19:48 +02:00
|
|
|
reload() {
|
|
|
|
const plugin = this.props.plugin.getName();
|
2019-05-29 05:48:41 +02:00
|
|
|
PluginManager.reloadPlugin(plugin);
|
|
|
|
this.props.plugin = Plugins[plugin].plugin;
|
2019-05-28 20:19:48 +02:00
|
|
|
this.onReload(this.props.plugin.getName());
|
|
|
|
}
|
|
|
|
|
2019-05-28 20:55:07 +02:00
|
|
|
getString(value) {
|
|
|
|
return typeof value == "string" ? value : value.toString();
|
|
|
|
}
|
|
|
|
|
2019-05-28 20:19:48 +02:00
|
|
|
render() {
|
2019-05-29 06:50:26 +02:00
|
|
|
const self = this;
|
|
|
|
const {plugin} = this.props;
|
|
|
|
const name = this.getString(plugin.getName());
|
|
|
|
const author = this.getString(plugin.getAuthor());
|
|
|
|
const description = this.getString(plugin.getDescription());
|
|
|
|
const version = this.getString(plugin.getVersion());
|
|
|
|
const website = Plugins[name].website;
|
|
|
|
const source = Plugins[name].source;
|
2019-05-28 20:19:48 +02:00
|
|
|
|
|
|
|
if (this.state.settings) {
|
|
|
|
try { self.settingsPanel = plugin.getSettingsPanel(); }
|
2019-05-28 23:27:25 +02:00
|
|
|
catch (err) { Utilities.err("Plugins", "Unable to get settings panel for " + plugin.getName() + ".", err); }
|
2019-05-28 20:55:07 +02:00
|
|
|
|
2019-05-30 07:06:17 +02:00
|
|
|
return React.createElement("li", {className: "settings-open ui-switch-item"},
|
|
|
|
React.createElement("div", {style: {"float": "right", "cursor": "pointer"}, onClick: () => {
|
2019-05-28 20:19:48 +02:00
|
|
|
this.refs.settingspanel.innerHTML = "";
|
|
|
|
self.setState({settings: false});
|
|
|
|
}},
|
2019-05-30 07:06:17 +02:00
|
|
|
React.createElement(CloseButton, null)
|
2019-05-28 20:19:48 +02:00
|
|
|
),
|
2019-05-30 07:06:17 +02:00
|
|
|
typeof self.settingsPanel === "object" && React.createElement("div", {id: `plugin-settings-${name}`, className: "plugin-settings", ref: "settingspanel"}),
|
|
|
|
typeof self.settingsPanel !== "object" && React.createElement("div", {id: `plugin-settings-${name}`, className: "plugin-settings", ref: "settingspanel", dangerouslySetInnerHTML: {__html: self.settingsPanel}})
|
2019-05-28 20:19:48 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-05-30 07:06:17 +02:00
|
|
|
return React.createElement("li", {"data-name": name, "data-version": version, "className": "settings-closed ui-switch-item"},
|
|
|
|
React.createElement("div", {className: "bda-header"},
|
|
|
|
React.createElement("span", {className: "bda-header-title"},
|
|
|
|
React.createElement("span", {className: "bda-name"}, name),
|
2019-05-28 20:19:48 +02:00
|
|
|
" v",
|
2019-05-30 07:06:17 +02:00
|
|
|
React.createElement("span", {className: "bda-version"}, version),
|
2019-05-28 20:19:48 +02:00
|
|
|
" by ",
|
2019-05-30 07:06:17 +02:00
|
|
|
React.createElement("span", {className: "bda-author"}, author)
|
2019-05-28 20:19:48 +02:00
|
|
|
),
|
2019-05-30 07:06:17 +02:00
|
|
|
React.createElement("div", {className: "bda-controls"},
|
|
|
|
!SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-card", onClick: this.reload}),
|
|
|
|
React.createElement("label", {className: "ui-switch-wrapper ui-flex-child", style: {flex: "0 0 auto"}},
|
|
|
|
React.createElement("input", {checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox"}),
|
|
|
|
React.createElement("div", {className: this.state.checked ? "ui-switch checked" : "ui-switch"})
|
2019-05-28 20:19:48 +02:00
|
|
|
)
|
|
|
|
)
|
|
|
|
),
|
2019-05-30 07:06:17 +02:00
|
|
|
React.createElement("div", {className: "bda-description-wrap scroller-wrap fade"},
|
|
|
|
React.createElement("div", {className: "bda-description scroller"}, description)
|
2019-05-28 20:19:48 +02:00
|
|
|
),
|
2019-05-30 07:06:17 +02:00
|
|
|
(website || source || this.hasSettings) && React.createElement("div", {className: "bda-footer"},
|
|
|
|
React.createElement("span", {className: "bda-links"},
|
|
|
|
website && React.createElement("a", {className: "bda-link bda-link-website", href: website, target: "_blank"}, "Website"),
|
2019-05-28 20:19:48 +02:00
|
|
|
website && source && " | ",
|
2019-05-30 07:06:17 +02:00
|
|
|
source && React.createElement("a", {className: "bda-link bda-link-source", href: source, target: "_blank"}, "Source")
|
2019-05-28 20:19:48 +02:00
|
|
|
),
|
2019-05-30 07:06:17 +02:00
|
|
|
this.hasSettings && React.createElement("button", {onClick: this.showSettings, className: "bda-settings-button", disabled: !this.state.checked}, "Settings")
|
2019-05-28 20:19:48 +02:00
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
onChange() {
|
|
|
|
this.setState({checked: !this.state.checked});
|
2019-05-29 05:48:41 +02:00
|
|
|
PluginManager.togglePlugin(this.props.plugin.getName());
|
2019-05-28 20:19:48 +02:00
|
|
|
}
|
|
|
|
|
2019-05-28 20:55:07 +02:00
|
|
|
showSettings() {
|
2019-05-28 20:19:48 +02:00
|
|
|
if (!this.hasSettings) return;
|
|
|
|
this.setState({settings: true});
|
|
|
|
}
|
|
|
|
}
|