pardus-options-library 2.7.0

package/src/classes/save-button-row/preset-row.js

@@ -0,0 +1,106 @@
+import DisableableHtmlElement from '../disableable-html-element.js';
+import SaveButton from './save-button.js';
+import LoadButton from './load-button.js';
+import PresetLabel from './preset-label.js';
+
+export default class PresetRow extends DisableableHtmlElement {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+        presetNumber,
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.premium = premium;
+        this.saveButton = new SaveButton({
+            id: `${this.id}-save-button`,
+            premium,
+            disabled,
+        });
+        this.loadButton = new LoadButton({
+            id: `${this.id}-load-button`,
+            premium,
+            disabled,
+        });
+        this.presetNumber = presetNumber;
+        this.label = new PresetLabel({
+            id: `${this.id}-label`,
+            defaultValue: `Preset ${this.presetNumber}`,
+            disabled,
+        });
+
+        if (!this.hasValue()) {
+            this.loadButton.disable();
+        }
+    }
+
+    toString() {
+        return `<tr id="${this.id}"><td align="left">${this.label}</input></td><td align="right">${this.loadButton} ${this.saveButton}</td></tr>`;
+    }
+
+    /**
+     * Allows disabling or enabling this element and all nested elements without refreshing
+     * @function PresetRow#setDisabled
+     */
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        this.saveButton.setDisabled(disabled);
+        this.loadButton.setDisabled(disabled);
+        this.label.setDisabled(disabled);
+    }
+
+    displaySaved() {
+        this.saveButton.displaySaved();
+    }
+
+    displayLoaded() {
+        if (this.loadButton) {
+            this.loadButton.displayLoaded();
+        }
+    }
+
+    hasValue() {
+        return this.label.hasValue();
+    }
+
+    setFunctions(options) {
+        if (options.length !== 0) {
+            this.addSaveEventListener(() => {
+                for (const option of options) {
+                    option.saveValue((name, value) => {
+                        option.saveFunction(`preset-${this.presetNumber}-${name}`, value);
+                    });
+                }
+                this.displaySaved();
+                this.loadButton.enable();
+
+                this.label.save();
+
+                const event = new Event('preset-save', { bubbles: true });
+                this.getElement().dispatchEvent(event);
+            });
+            this.addLoadEventListener(() => {
+                for (const option of options) {
+                    option.loadValue(option.getValue((name, value) => option.getFunction(`preset-${this.presetNumber}-${name}`, value)));
+                }
+                this.displayLoaded();
+
+                const event = new Event('preset-load', { bubbles: true });
+                this.getElement().dispatchEvent(event);
+            });
+        }
+    }
+
+    addSaveEventListener(func) {
+        this.saveButton.addEventListener('click', func);
+    }
+
+    addLoadEventListener(func) {
+        if (this.loadButton) {
+            this.loadButton.addEventListener('click', func);
+        }
+    }
+}

package/src/classes/save-button-row/presets.js

@@ -0,0 +1,57 @@
+import DisableableHtmlElement from '../disableable-html-element.js';
+import PresetRow from './preset-row.js';
+
+export default class Presets extends DisableableHtmlElement {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+        presets = 0,
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.premium = premium;
+        this.presets = [];
+        for (let i = 0; i < presets; i += 1) {
+            this.presets.push(new PresetRow({
+                id: `${this.id}-preset-row-${i}`,
+                premium,
+                disabled,
+                presetNumber: i + 1,
+            }));
+        }
+    }
+
+    /**
+     * Allows disabling or enabling this element and all nested elements without refreshing
+     * @function Presets#setDisabled
+     */
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        for (const preset of this.presets) {
+            preset.setDisabled(disabled);
+        }
+    }
+
+    toString() {
+        if (this.presets.length === 0) {
+            return '';
+        }
+
+        let html = `<tr id="${this.id}"><td><table width="100%">`;
+
+        for (const presetRow of this.presets) {
+            html += presetRow;
+        }
+
+        return `${html}</table></td></tr>`;
+    }
+
+    setFunctions(options) {
+        for (const presetRow of this.presets) {
+            presetRow.setFunctions(options);
+        }
+    }
+}

package/src/classes/save-button-row/reset-button.js

@@ -0,0 +1,21 @@
+import AbstractButton from '../abstract/abstract-button.js';
+
+export default class ResetButton extends AbstractButton {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+    }) {
+        super({
+            id,
+            premium,
+            disabled,
+            actionText: 'Reset',
+            actionPerformedText: 'Reset',
+        });
+    }
+
+    displayReset() {
+        this.displayClicked();
+    }
+}

package/src/classes/save-button-row/save-button-row.js

@@ -0,0 +1,69 @@
+import DisableableHtmlElement from '../disableable-html-element.js';
+import SaveButton from './save-button.js';
+import ResetButton from './reset-button.js';
+
+export default class SaveButtonRow extends DisableableHtmlElement {
+    constructor({
+        id,
+        premium = false,
+        resetButton = false,
+        disabled = false,
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.premium = premium;
+        this.saveButton = new SaveButton({
+            id: `${this.id}-button`,
+            premium,
+            disabled,
+        });
+
+        if (resetButton) {
+            this.resetButton = new ResetButton({
+                id: `${this.id}-reset-button`,
+                premium,
+                disabled,
+            });
+        } else {
+            this.resetButton = null;
+        }
+    }
+
+    toString() {
+        return `<tr id="${this.id}"><td align="right" style="padding-right: 6px;">${(this.resetButton) ? `${this.resetButton}&nbsp` : ''}${this.saveButton}</td></tr>`;
+    }
+
+    /**
+     * Allows disabling or enabling this element and all nested elements without refreshing
+     * @function SaveButtonRow#setDisabled
+     */
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        this.saveButton.setDisabled(disabled);
+        if (this.resetButton) {
+            this.resetButton.setDisabled(disabled);
+        }
+    }
+
+    displaySaved() {
+        this.saveButton.displaySaved();
+    }
+
+    displayReset() {
+        if (this.resetButton) {
+            this.resetButton.displayReset();
+        }
+    }
+
+    addSaveEventListener(func) {
+        this.saveButton.addEventListener('click', func);
+    }
+
+    addResetEventListener(func) {
+        if (this.resetButton) {
+            this.resetButton.addEventListener('click', func);
+        }
+    }
+}

package/src/classes/save-button-row/save-button.js

@@ -0,0 +1,21 @@
+import AbstractButton from '../abstract/abstract-button.js';
+
+export default class SaveButton extends AbstractButton {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+    }) {
+        super({
+            id,
+            premium,
+            disabled,
+            actionText: 'Save',
+            actionPerformedText: 'Saved',
+        });
+    }
+
+    displaySaved() {
+        this.displayClicked();
+    }
+}

package/src/classes/tabs/sub-tab.js

@@ -0,0 +1,66 @@
+import PardusOptionsUtility from '../pardus-options-utility.js';
+import OptionsContent from '../options-content.js';
+import TabLabel from './tab-label.js';
+
+export default class SubTab {
+    constructor({
+        id,
+        label,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+        active = false,
+        padding,
+    }) {
+        this.id = id;
+        this.active = active;
+        this.label = new TabLabel({
+            id: `${this.id}-label`,
+            heading: label,
+            active: this.active,
+            padding,
+        });
+        this.content = new OptionsContent({
+            id: `${this.id}-content`,
+            saveFunction,
+            getFunction,
+            refresh,
+            active: this.active,
+        });
+    }
+
+    setActive() {
+        if (this.active === true) {
+            return;
+        }
+        this.active = true;
+        this.label.setActive();
+        this.content.setActive();
+    }
+
+    setInactive() {
+        if (this.active === false) {
+            return;
+        }
+        this.active = false;
+        this.label.setInactive();
+        this.content.setInactive();
+    }
+
+    afterRefreshElement(opts) {
+        this.label.afterRefreshElement(opts);
+        this.content.afterRefreshElement(opts);
+    }
+
+    getLabel() {
+        return this.label;
+    }
+
+    getContent() {
+        return this.content;
+    }
+
+    toString() {
+        return this.content.toString();
+    }
+}

package/src/classes/tabs/tab-content.js

@@ -0,0 +1,149 @@
+import HtmlElement from '../html-element.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+import TabsRow from './tabs-row.js';
+import SubTab from './sub-tab.js';
+import VersionRow from '../version-row.js';
+
+export default class TabContent extends HtmlElement {
+    constructor({
+        id,
+        heading,
+        defaultLabel = 'Default tab',
+        content = null,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+    }) {
+        super(id);
+        this.heading = heading;
+        this.content = content;
+        this.saveFunction = saveFunction;
+        this.getFunction = getFunction;
+        this.subTabsRow = new TabsRow({
+            id: `${this.id}-tabsrow`,
+        });
+        this.refresh = refresh;
+        this.subTabs = [];
+        this.defaultTab = this.addSubTab({
+            label: defaultLabel,
+            saveFunction: this.saveFunction,
+            getFunction: this.getFunction,
+            refresh: false,
+            active: true,
+        });
+        this.versionRow = new VersionRow({
+            id: `${this.id}-versionrow`,
+        });
+        this.addAfterRefreshHook((opts) => {
+            if (opts.maintainRefreshStatus) {
+                return;
+            }
+            this.refresh = true;
+        });
+        this.addAfterRefreshHook((opts) => {
+            if (!this.refresh && opts.maintainRefreshStatus) {
+                return;
+            }
+            for (const subTab of this.subTabs) {
+                subTab.afterRefreshElement(opts);
+            }
+        });
+    }
+
+    addSubTab({
+        label,
+        saveFunction = this.saveFunction,
+        getFunction = this.getFunction,
+        refresh = this.refresh,
+        active = false,
+        padding,
+    }) {
+        const newSubTab = new SubTab({
+            id: `${this.id}-subtab-${this.subTabs.length}`,
+            label,
+            saveFunction,
+            getFunction,
+            refresh,
+            active,
+            padding,
+        });
+
+        const newSubTabContent = newSubTab.getContent();
+        const newSubTabLabel = newSubTab.getLabel();
+
+        this.subTabsRow.addLabel({
+            label: newSubTabLabel,
+        });
+
+        this.subTabs.push(newSubTab);
+
+        newSubTabLabel.addEventListener('click', () => {
+            this.setActiveSubTab(newSubTab.id);
+        });
+
+        if (refresh) {
+            this.refreshElement();
+        }
+
+        return newSubTabContent;
+    }
+
+    setActiveSubTab(subTabId) {
+        for (const subTab of this.subTabs) {
+            if (subTab.id === subTabId) {
+                subTab.setActive();
+            } else {
+                subTab.setInactive();
+            }
+        }
+    }
+
+    addBox(args) {
+        return this.defaultTab.addBox(args);
+    }
+
+    addBoxBottom(args) {
+        return this.defaultTab.addBoxBottom(args);
+    }
+
+    addBoxTop(args) {
+        return this.defaultTab.addBoxTop(args);
+    }
+
+    addBoxLeft(args) {
+        return this.defaultTab.addBoxLeft(args);
+    }
+
+    addBoxRight(args) {
+        return this.defaultTab.addBoxRight(args);
+    }
+
+    addPremiumBox(args) {
+        return this.defaultTab.addPremiumBox(args);
+    }
+
+    addPremiumBoxLeft(args) {
+        return this.defaultTab.addPremiumBoxLeft(args);
+    }
+
+    addPremiumBoxRight(args) {
+        return this.defaultTab.addPremiumBoxRight(args);
+    }
+
+    setActive() {
+        this.getElement().removeAttribute('hidden');
+    }
+
+    setInactive() {
+        this.getElement().setAttribute('hidden', '');
+    }
+
+    toString() {
+        if (this.content !== null) {
+            return this.content;
+        }
+        const hidden = (this.subTabs.length > 1) ? '' : 'hidden';
+        const innerStyle = (this.subTabs.length > 1) ? 'class="tabstyle"' : '';
+        return `<table id="${this.id}" hidden class="tabstyle" style="background:url(${PardusOptionsUtility.getImagePackUrl()}bgdark.gif)" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td><div align="center"><h1>${this.heading}</h1></div></td></tr><tr><td><table width="100%" align="center" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td><table cellspacing="0" cellpadding="0" border="0" ${hidden}><tbody>${this.subTabsRow}</tbody></table></td></tr><tr><td><table ${innerStyle} cellspacing="0" cellpadding="0" border="0"><tbody>${this.subTabs.join('')}</tbody></table></td></tr></tbody></table></td></tr>${this.versionRow}</tbody></table>`;
+    }
+}

package/src/classes/tabs/tab-label.js

@@ -0,0 +1,45 @@
+import HtmlElement from '../html-element.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class TabLabel extends HtmlElement {
+    constructor({
+        id,
+        heading,
+        active = false,
+        padding = '10px',
+    }) {
+        super(id);
+        this.padding = padding;
+        this.heading = heading;
+        this.active = active;
+        this.addEventListener('mouseover', () => {
+            if (this.active) {
+                this.getElement().style.cursor = 'default';
+            } else {
+                this.getElement().style.backgroundImage = `url(${PardusOptionsUtility.getImagePackUrl()}tabactive.png)`;
+                this.getElement().style.cursor = 'default';
+            }
+        });
+        this.addEventListener('mouseout', () => {
+            if (!this.active) {
+                this.getElement().style.backgroundImage = `url(${PardusOptionsUtility.getImagePackUrl()}tab.png)`;
+                this.getElement().style.cursor = 'default';
+            }
+        });
+    }
+
+    toString() {
+        const imageUrl = (this.active) ? 'tabactive' : 'tab';
+        return `<td id="${this.id}" style="background: transparent url(&quot;${PardusOptionsUtility.getImagePackUrl()}${imageUrl}.png&quot;) no-repeat scroll 0% 0%; background-size: cover; cursor: default; padding-left: ${this.padding}; padding-right: ${this.padding}; box-sizing: border-box" class="tabcontent">${this.heading}</td>`;
+    }
+
+    setActive() {
+        this.getElement().style.backgroundImage = `url('${PardusOptionsUtility.getImagePackUrl()}tabactive.png')`;
+        this.active = true;
+    }
+
+    setInactive() {
+        this.getElement().style.backgroundImage = `url('${PardusOptionsUtility.getImagePackUrl()}tab.png')`;
+        this.active = false;
+    }
+}

package/src/classes/tabs/tab.js

@@ -0,0 +1,66 @@
+import PardusOptionsUtility from '../pardus-options-utility.js';
+import TabLabel from './tab-label.js';
+import TabContent from './tab-content.js';
+
+export default class Tab {
+    constructor({
+        id,
+        heading,
+        content = null,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+        defaultLabel,
+    }) {
+        this.id = id;
+        this.heading = heading;
+        this.content = new TabContent({
+            id: `options-content-${this.id}`,
+            heading,
+            content,
+            saveFunction,
+            getFunction,
+            refresh,
+            defaultLabel,
+        });
+        this.label = new TabLabel({
+            id: `${this.id}-label`,
+            heading,
+        });
+        this.active = false;
+        this.saveFunction = saveFunction;
+        this.getFunction = getFunction;
+    }
+
+    addListeners() {
+        this.getLabel().addEventListener('click', () => PardusOptionsUtility.setActiveTab(this.id), true);
+        window.addEventListener('storage', () => {
+            if (window.localStorage.getItem('pardusOptionsOpenTab') === this.id && !this.active) {
+                this.setActive();
+            }
+            if (window.localStorage.getItem('pardusOptionsOpenTab') !== this.id && this.active) {
+                this.setInactive();
+            }
+        });
+    }
+
+    setActive() {
+        this.label.setActive();
+        this.content.setActive();
+        this.active = true;
+    }
+
+    setInactive() {
+        this.label.setInactive();
+        this.content.setInactive();
+        this.active = false;
+    }
+
+    getContent() {
+        return this.content;
+    }
+
+    getLabel() {
+        return this.label;
+    }
+}

package/src/classes/tabs/tabs-element.js

@@ -0,0 +1,25 @@
+import HtmlElement from '../html-element.js';
+import TabsRow from './tabs-row.js';
+
+export default class TabsElement extends HtmlElement {
+    constructor({
+        id,
+    }) {
+        super(id);
+        this.tabsRow = new TabsRow({
+            id: `${this.id}-row`,
+        });
+    }
+
+    addLabel({
+        label,
+    }) {
+        this.tabsRow.addLabel({
+            label,
+        });
+    }
+
+    toString() {
+        return `<table id="${this.id}" cellspacing="0" cellpadding="0" border="0" align="left"><tbody>${this.tabsRow}</tbody></table>`;
+    }
+}

package/src/classes/tabs/tabs-row.js

@@ -0,0 +1,44 @@
+import HtmlElement from '../html-element.js';
+
+export default class TabsRow extends HtmlElement {
+    constructor({
+        id,
+        hidden = false,
+    }) {
+        super(id);
+        this.hidden = hidden;
+        this.labels = [];
+        this.addAfterRefreshHook(() => {
+            for (const label of this.labels) {
+                label.afterRefreshElement();
+            }
+        });
+    }
+
+    addLabel({
+        label,
+    }) {
+        this.labels.push(label);
+        if (this.getElement()) {
+            this.appendChild(label.toElement());
+            label.afterRefreshElement();
+        }
+    }
+
+    show() {
+        this.hidden = false;
+        this.refreshElement();
+    }
+
+    hide() {
+        this.hidden = true;
+        this.refreshElement();
+    }
+
+    toString() {
+        if (this.hidden) {
+            return `<tr id="${this.id}" cellspacing="0" cellpadding="0" border="0" hidden="">${this.labels.join('')}</tr>`;
+        }
+        return `<tr id="${this.id}" cellspacing="0" cellpadding="0" border="0">${this.labels.join('')}</tr>`;
+    }
+}