2019-06-27 22:18:40 +02:00
|
|
|
import {React, Logger, Strings} from "modules";
|
|
|
|
import CloseButton from "../icons/close";
|
|
|
|
import ReloadIcon from "../icons/reload";
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
export default class AddonCard extends React.Component {
|
2019-06-27 22:18:40 +02:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
checked: this.props.enabled,
|
|
|
|
settingsOpen: false
|
|
|
|
};
|
2019-06-28 01:50:20 +02:00
|
|
|
|
2019-06-27 22:18:40 +02:00
|
|
|
this.settingsPanel = "";
|
|
|
|
this.panelRef = React.createRef();
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
this.onChange = this.onChange.bind(this);
|
2019-06-27 22:18:40 +02:00
|
|
|
this.reload = this.reload.bind(this);
|
2019-06-28 01:50:20 +02:00
|
|
|
this.showSettings = this.showSettings.bind(this);
|
2019-06-27 22:18:40 +02:00
|
|
|
this.closeSettings = this.closeSettings.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
reload() {
|
|
|
|
if (!this.props.reload) return;
|
|
|
|
this.props.addon = this.props.reload(this.props.addon.id);
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
if (!this.state.settingsOpen) return;
|
|
|
|
if (this.settingsPanel instanceof Node) this.panelRef.current.appendChild(this.settingsPanel);
|
|
|
|
|
|
|
|
// if (!SettingsCookie["fork-ps-3"]) return;
|
|
|
|
const isHidden = (container, element) => {
|
|
|
|
const cTop = container.scrollTop;
|
|
|
|
const cBottom = cTop + container.clientHeight;
|
|
|
|
const eTop = element.offsetTop;
|
|
|
|
const eBottom = eTop + element.clientHeight;
|
|
|
|
return (eTop < cTop || eBottom > cBottom);
|
|
|
|
};
|
|
|
|
|
|
|
|
const panel = $(this.panelRef.current);
|
|
|
|
const container = panel.parents(".scroller-2FKFPG");
|
|
|
|
if (!isHidden(container[0], panel[0])) return;
|
|
|
|
container.animate({
|
|
|
|
scrollTop: panel.offset().top - container.offset().top + container.scrollTop() - 30
|
|
|
|
}, 300);
|
|
|
|
}
|
|
|
|
|
|
|
|
getString(value) {return typeof value == "string" ? value : value.toString();}
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
onChange() {
|
|
|
|
this.setState({checked: !this.state.checked});
|
|
|
|
this.props.onChange && this.props.onChange(this.props.addon.id);
|
|
|
|
}
|
|
|
|
|
|
|
|
showSettings() {
|
|
|
|
if (!this.props.hasSettings) return;
|
|
|
|
this.setState({settingsOpen: true});
|
|
|
|
}
|
|
|
|
|
2019-06-27 22:18:40 +02:00
|
|
|
closeSettings() {
|
|
|
|
this.panelRef.current.innerHTML = "";
|
|
|
|
this.setState({settingsOpen: false});
|
|
|
|
}
|
|
|
|
|
|
|
|
buildTitle(name, version, author) {
|
|
|
|
const title = Strings.Addons.title.split(/({{[A-Za-z]+}})/);
|
|
|
|
const nameIndex = title.findIndex(s => s == "{{name}}");
|
|
|
|
if (nameIndex) title[nameIndex] = React.createElement("span", {className: "bd-name"}, name);
|
|
|
|
const versionIndex = title.findIndex(s => s == "{{version}}");
|
|
|
|
if (nameIndex) title[versionIndex] = React.createElement("span", {className: "bd-version"}, version);
|
|
|
|
const authorIndex = title.findIndex(s => s == "{{author}}");
|
|
|
|
if (nameIndex) title[authorIndex] = React.createElement("span", {className: "bd-author"}, author);
|
|
|
|
return title.flat();
|
|
|
|
}
|
|
|
|
|
|
|
|
get settingsComponent() {
|
|
|
|
const addon = this.props.addon;
|
|
|
|
const name = this.getString(addon.name);
|
2019-06-28 01:50:20 +02:00
|
|
|
try { this.settingsPanel = this.props.getSettingsPanel(); }
|
|
|
|
catch (err) { Logger.stacktrace("Addon Settings", "Unable to get settings panel for " + name + ".", err); }
|
2019-06-27 22:18:40 +02:00
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
const props = {id: `${name}-settings`, className: "addon-settings", ref: this.panelRef};
|
2019-06-27 22:18:40 +02:00
|
|
|
if (typeof(settingsPanel) == "string") props.dangerouslySetInnerHTML = this.settingsPanel;
|
|
|
|
|
|
|
|
return <li className="settings-open bd-switch-item">
|
|
|
|
<div className="bd-close" onClick={this.closeSettings}><CloseButton /></div>
|
|
|
|
<div {...props}>{this.settingsPanel instanceof React.Component ? this.settingsPanel : null}</div>
|
|
|
|
</li>;
|
|
|
|
}
|
|
|
|
|
|
|
|
buildLink(which) {
|
|
|
|
const url = this.props.addon[which];
|
|
|
|
if (!url) return null;
|
|
|
|
return <a className="bd-link bd-link-website" href={url} target="_blank" rel="noopener noreferrer">{Strings.Addons[which]}</a>;
|
|
|
|
}
|
|
|
|
|
|
|
|
get footer() {
|
|
|
|
const links = ["website", "source"];
|
2019-06-28 01:50:20 +02:00
|
|
|
if (!links.some(l => this.props.addon[l]) && !this.props.hasSettings) return null;
|
2019-06-27 22:18:40 +02:00
|
|
|
const linkComponents = links.map(this.buildLink.bind(this)).filter(c => c);
|
|
|
|
return <div className="bd-footer">
|
|
|
|
<span className="bd-links">{linkComponents.map((comp, i) => i < linkComponents.length - 1 ? [comp, " | "] : [comp]).flat()}</span>
|
2019-06-28 01:50:20 +02:00
|
|
|
{this.props.hasSettings && <button onClick={this.showSettings} className="bd-button bd-button-addon-settings" disabled={!this.state.checked}>{Strings.Addons.addonSettings}</button>}
|
2019-06-27 22:18:40 +02:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
if (this.state.settingsOpen) return this.settingsComponent;
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
const addon = this.props.addon;
|
2019-06-27 22:18:40 +02:00
|
|
|
const name = this.getString(addon.name);
|
|
|
|
const author = this.getString(addon.author);
|
|
|
|
const description = this.getString(addon.description);
|
|
|
|
const version = this.getString(addon.version);
|
|
|
|
|
|
|
|
return <li dataName={name} dataVersion={version} className="settings-closed bd-switch-item">
|
|
|
|
<div className="bd-header">
|
|
|
|
<span className="bd-header-title">{this.buildTitle(name, version, author)}</span>
|
|
|
|
<div className="bd-controls">
|
|
|
|
{this.props.showReloadIcon && <ReloadIcon className="bd-reload bd-reload-card" onClick={this.reload} />}
|
2019-06-28 01:50:20 +02:00
|
|
|
<label className="bd-switch-wrapper">
|
2019-06-27 22:18:40 +02:00
|
|
|
<input className="bd-switch-checkbox" checked={this.state.checked} onChange={this.onChange} type="checkbox" />
|
|
|
|
<div className={this.state.checked ? "bd-switch checked" : "bd-switch"} />
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{description}</div></div>
|
|
|
|
{this.footer}
|
|
|
|
</li>;
|
|
|
|
}
|
2019-06-28 01:50:20 +02:00
|
|
|
}
|