pardus-options-library 2.7.0

package/src/classes/options-content.js

@@ -0,0 +1,178 @@
+import HtmlElement from './html-element.js';
+import PardusOptionsUtility from './pardus-options-utility.js';
+import OptionsBox from './options-box.js';
+
+export default class OptionsContent extends HtmlElement {
+    constructor({
+        id,
+        content = null,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+        active = true,
+    }) {
+        super(id);
+        this.content = content;
+        this.saveFunction = saveFunction;
+        this.getFunction = getFunction;
+        this.leftBoxes = [];
+        this.rightBoxes = [];
+        this.topBoxes = [];
+        this.bottomBoxes = [];
+        this.refresh = refresh;
+        this.active = active;
+        this.addAfterRefreshHook((opts) => {
+            if (opts.maintainRefreshStatus) {
+                return;
+            }
+            this.refresh = true;
+        });
+        this.addAfterRefreshHook(() => {
+            for (const box of this.topBoxes) {
+                box.afterRefreshElement();
+            }
+            for (const box of this.leftBoxes) {
+                box.afterRefreshElement();
+            }
+            for (const box of this.rightBoxes) {
+                box.afterRefreshElement();
+            }
+            for (const box of this.bottomBoxes) {
+                box.afterRefreshElement();
+            }
+        });
+    }
+
+    addBox({
+        top = false,
+        bottom = false,
+        ...args
+    }) {
+        let newBox = null;
+        if (top) {
+            newBox = this.addBoxTop(args);
+        } else if (bottom) {
+            newBox = this.addBoxBottom(args);
+        } else if (this.leftBoxes.length <= this.rightBoxes.length) {
+            newBox = this.addBoxLeft(args);
+        } else {
+            newBox = this.addBoxRight(args);
+        }
+        return newBox;
+    }
+
+    addBoxBottom({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newBox = new OptionsBox({
+            id: `${this.id}-bottom-box-${this.bottomBoxes.length}`,
+            refresh,
+            ...args,
+        });
+
+        this.bottomBoxes.push(newBox);
+
+        if (refresh) {
+            this.refreshElement();
+        }
+
+        return newBox;
+    }
+
+    addBoxTop({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newBox = new OptionsBox({
+            id: `${this.id}-top-box-${this.topBoxes.length}`,
+            refresh,
+            ...args,
+        });
+
+        this.topBoxes.push(newBox);
+
+        if (refresh) {
+            this.refreshElement();
+        }
+
+        return newBox;
+    }
+
+    addBoxLeft({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newBox = new OptionsBox({
+            id: `${this.id}-left-box-${this.leftBoxes.length}`,
+            refresh,
+            ...args,
+        });
+
+        this.leftBoxes.push(newBox);
+
+        if (refresh) {
+            this.refreshElement();
+        }
+
+        return newBox;
+    }
+
+    addBoxRight({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newBox = new OptionsBox({
+            id: `${this.id}-right-box-${this.rightBoxes.length}`,
+            refresh,
+            ...args,
+        });
+
+        this.rightBoxes.push(newBox);
+
+        if (refresh) {
+            this.refreshElement();
+        }
+
+        return newBox;
+    }
+
+    addPremiumBox(args) {
+        return this.addBox({
+            premium: true,
+            ...args,
+        });
+    }
+
+    addPremiumBoxLeft(args) {
+        return this.addBoxLeft({
+            premium: true,
+            ...args,
+        });
+    }
+
+    addPremiumBoxRight(args) {
+        return this.addBoxRight({
+            premium: true,
+            ...args,
+        });
+    }
+
+    toString() {
+        if (this.content !== null) {
+            return this.content;
+        }
+        const hidden = this.active ? '' : 'hidden';
+        return `<tr id="${this.id}" ${hidden}><td><table width="100%" align="center"><tbody><tr><td id="${this.id}-top" colspan="3" valign="top">${this.topBoxes.join('<br><br>')}${(this.topBoxes.length > 0) ? '<br><br>' : ''}</td></tr><tr><td id="${this.id}-left" width="350" valign="top">${this.leftBoxes.join('<br><br>')}</td><td width="40"></td><td id="${this.id}-right" width="350" valign="top">${this.rightBoxes.join('<br><br>')}</td></tr><tr><td id="${this.id}-bottom" colspan="3" valign="top">${(this.bottomBoxes.length > 0) ? '<br><br>' : ''}${this.bottomBoxes.join('<br><br>')}</td></tr></tbody></table></td></tr>`;
+    }
+
+    setActive() {
+        this.active = true;
+        this.getElement().removeAttribute('hidden');
+    }
+
+    setInactive() {
+        this.active = false;
+        this.getElement().setAttribute('hidden', '');
+    }
+}

package/src/classes/options-group.js

@@ -0,0 +1,114 @@
+import DisableableHtmlElement from './disableable-html-element.js';
+import PardusOptionsUtility from './pardus-options-utility.js';
+import BooleanOption from './options/boolean-option.js';
+import TextAreaOption from './options/text-area-option.js';
+import NumericOption from './options/numeric-option.js';
+import KeyDownOption from './options/key-down-option.js';
+import SelectOption from './options/select-option.js';
+import GroupedOptions from './options/grouped-options.js';
+
+export default class OptionsGroup extends DisableableHtmlElement {
+    constructor({
+        id,
+        premium = false,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        disabled = false,
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.premium = premium;
+        this.saveFunction = saveFunction;
+        this.getFunction = getFunction;
+        this.options = [];
+        this.disabled = disabled;
+        this.addAfterRefreshHook(() => {
+            for (const option of this.options) {
+                option.afterRefreshElement();
+            }
+        });
+    }
+
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        for (const option of this.options) {
+            option.setDisabled(disabled);
+        }
+    }
+
+    addBooleanOption(args) {
+        const newOption = new BooleanOption({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            ...args,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    addTextAreaOption(args) {
+        const newOption = new TextAreaOption({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            ...args,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    addNumericOption(args) {
+        const newOption = new NumericOption({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            ...args,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    addKeyDownOption(args) {
+        const newOption = new KeyDownOption({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            ...args,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    addSelectOption(args) {
+        const newOption = new SelectOption({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            ...args,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    addGroupedOption({
+        description,
+        saveFunction = this.saveFunction,
+        getFunction = this.getFunction,
+    }) {
+        const newOption = new GroupedOptions({
+            id: `${this.id}-option-${this.options.length}`,
+            disabled: this.disabled,
+            description,
+            saveFunction,
+            getFunction,
+        });
+        this.options.push(newOption);
+        return newOption;
+    }
+
+    toString() {
+        // If no options have been defined, then don't add any elements
+        if (this.options.length === 0) {
+            return `<tr id="${this.id}" style="display: none;"><td><table width="100%"><tbody></tbody></table></td></tr>`;
+        }
+        return `<tr id="${this.id}"><td><table width="100%"><tbody>${this.options.join('')}</tbody></table></td></tr>`;
+    }
+}

package/src/classes/pardus-options-utility.js

@@ -0,0 +1,139 @@
+/**
+ * @module PardusOptionsUtility
+ */
+export default class PardusOptionsUtility {
+    /**
+     *  @ignore
+     */
+    static defaultSaveFunction(key, value) {
+        return GM_setValue(key, value);
+    }
+
+    /**
+     *  @ignore
+     */
+    static defaultGetFunction(key, defaultValue = null) {
+        return GM_getValue(key, defaultValue);
+    }
+
+    /**
+     *  @ignore
+     */
+    static defaultDeleteFunction(key) {
+        return GM_deleteValue(key);
+    }
+
+    /**
+     *  Returns the active universe
+     *  @returns {string} One of 'orion', 'artemis', or 'pegasus'
+     *  @throws Will throw an error if no universe could be determined.
+     */
+    static getUniverse() {
+        switch (document.location.hostname) {
+            case 'orion.pardus.at':
+                return 'orion';
+            case 'artemis.pardus.at':
+                return 'artemis';
+            case 'pegasus.pardus.at':
+                return 'pegasus';
+            default:
+                throw new Error('Unable to determine universe');
+        }
+    }
+
+    /**
+     *  Returns the universe-specific name of a variable
+     *  @ignore
+     */
+    static getVariableName(variableName) {
+        return `${this.getUniverse()}_${variableName}`;
+    }
+
+    /**
+     *  Returns the universe-specific value of a variable
+     *  @param {string} variableName The name of the universe-specific variable to retrieve
+     *  @param {*} [defaultValue=null] A default value to return if the universe-specific variable has never been set.
+     *  @returns {*} Value of the universe-specific value, or if not set, the default value.
+     */
+    static getVariableValue(variableName, defaultValue = null) {
+        return this.defaultGetFunction(this.getVariableName(variableName), defaultValue);
+    }
+
+    /**
+     *  Sets the universe-specific value of a variable
+     *  @param {string} variableName The name of the universe-specific variable to set
+     *  @param {*} value The value to set for the universe-specific variable.
+     */
+    static setVariableValue(variableName, value) {
+        return this.defaultSaveFunction(this.getVariableName(variableName), value);
+    }
+
+    /**
+     *  Deletes the universe-specific value of a variable
+     *  @param {string} variableName The name of the universe-specific variable to delete
+     */
+    static deleteVariableValue(variableName) {
+        return this.defaultDeleteFunction(this.getVariableName(variableName));
+    }
+
+    /**
+     *  @ignore
+     */
+    static setActiveTab(id) {
+        window.localStorage.setItem('pardusOptionsOpenTab', id);
+        window.dispatchEvent(new window.Event('storage'));
+    }
+
+    /**
+     *  Returns a path to the user's image pack to use as a base for relative image URLs
+     *  @returns {string} Path to the user's iamge pack
+     */
+    static getImagePackUrl() {
+        const defaultImagePackUrl = '//static.pardus.at/img/std/';
+        const imagePackUrl = String(document.querySelector('body').style.backgroundImage).replace(/url\("*|"*\)|[a-z0-9]+\.gif/g, '');
+
+        return imagePackUrl !== '' ? imagePackUrl : defaultImagePackUrl;
+    }
+
+    /**
+     *  @ignore
+     */
+    static addGlobalListeners() {
+        EventTarget.prototype.addPardusKeyDownListener = function addPardusKeyDownListener(pardusVariable, defaultValue, listener, options = false) {
+            const pardusVariableKey = PardusOptionsUtility.getVariableValue(pardusVariable, defaultValue);
+
+            if (!pardusVariableKey) {
+                throw new Error(`No Pardus variable ${pardusVariable} defined!`);
+            }
+
+            if (Object.hasOwn(pardusVariableKey, 'disabled')) {
+                return;
+            }
+
+            if (!this.pardusListeners) {
+                this.pardusListeners = [];
+            }
+
+            // Prevent duplicates from being added
+            if (this.pardusListeners.includes(`${pardusVariableKey.code}${pardusVariable}`)) {
+                return;
+            }
+
+            this.pardusListeners.push(`${pardusVariableKey.code}${pardusVariable}`);
+
+            const eventListener = (event) => {
+                if (event.isComposing || event.keyCode === 229 || event.repeat) {
+                    return;
+                }
+
+                if (event.keyCode !== pardusVariableKey.code) {
+                    return;
+                }
+
+                listener(event);
+            };
+
+            this.addEventListener('keydown', eventListener, options);
+        };
+    }
+}

package/src/classes/pardus-options.js

@@ -0,0 +1,144 @@
+import PardusOptionsUtility from './pardus-options-utility.js';
+import TipBox from './tip-box.js';
+import TabsElement from './tabs/tabs-element.js';
+import ContentsArea from './contents-area.js';
+import Tab from './tabs/tab.js';
+
+/**
+ * @module PardusOptions
+ */
+export default class PardusOptions {
+    /**
+     *  @ignore
+     */
+    static init() {
+        if (document.getElementById('options-area')) {
+            return;
+        }
+
+        // Get the normal Pardus options
+        const defaultPardusOptionsContent = document.getElementsByTagName('table')[2];
+
+        // Identify the containing HTML element to house all the options HTML
+        const pardusMainElement = defaultPardusOptionsContent.parentNode;
+
+        // Give the Pardus options an appropriate id, and remove it from the DOM
+        defaultPardusOptionsContent.setAttribute('id', 'options-content-pardus-default');
+        defaultPardusOptionsContent.setAttribute('class', 'tabstyle');
+        defaultPardusOptionsContent.remove();
+
+        // Add this object to the DOM within the main containing element
+        pardusMainElement.appendChild(this.getPardusOptionsElement());
+
+        const defaultTipBox = this.createDefaultTipBox();
+        pardusMainElement.appendChild(defaultTipBox.toElement());
+
+        // Add the Pardus options back in
+        this.addTab({
+            id: 'pardus-default',
+            heading: 'Pardus Options',
+            content: defaultPardusOptionsContent.outerHTML,
+            refresh: false,
+        });
+
+        // Set the Pardus options tab to be active by default
+        PardusOptionsUtility.setActiveTab('pardus-default');
+    }
+
+    /**
+     *  @deprecated Get the version of the Pardus Options Library running
+     */
+    static version() {
+        return 1.6;
+    }
+
+    /**
+     * @ignore
+     */
+    static createDefaultTipBox() {
+        return new TipBox({
+            id: 'options-default-tip-box',
+        });
+    }
+
+    /**
+     * @ignore
+     */
+    static getDefaultTipBox() {
+        const defaultTipBox = this.createDefaultTipBox();
+        defaultTipBox.refreshElement();
+        return defaultTipBox;
+    }
+
+    /**
+     * @ignore
+     */
+    static getTabsElement() {
+        return new TabsElement({
+            id: 'options-tabs',
+        });
+    }
+
+    /**
+     * @ignore
+     */
+    static getContentElement() {
+        return new ContentsArea({
+            id: 'options-content',
+        });
+    }
+
+    /**
+     * @ignore
+     */
+    static getPardusOptionsElement() {
+        const template = document.createElement('template');
+        template.innerHTML = `<table id="options-area" cellspacing="0" cellpadding="0" border="0"><tbody><tr cellspacing="0" cellpadding="0" border="0"><td>${this.getTabsElement()}</td></tr>${this.getContentElement()}</tbody></table>`;
+        return template.content.firstChild;
+    }
+
+    /**
+     * Add a tab on the Options page on Pardus to show your options
+     * @param {Object} params An object containing parameter values
+     * @param {string} params.id A namespace identifier to identify the tab from other tabs. Must be globally unique.
+     * @param {string} params.heading Text to display in the tab
+     * @param {string} params.content HTML to embed within the tab.
+     * @returns {TabContent} Tab
+     */
+    static addTab({
+        id,
+        heading,
+        content = null,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+        defaultLabel,
+    }) {
+        const newTab = new Tab({
+            id,
+            heading,
+            content,
+            saveFunction,
+            getFunction,
+            refresh,
+            defaultLabel,
+        });
+
+        // Check for id uniqueness
+        if (document.getElementById(newTab.id)) {
+            throw new Error(`Tab '${newTab.id}' already exists!`);
+        }
+
+        this.getTabsElement().addLabel({
+            label: newTab.getLabel(),
+        });
+
+        this.getContentElement().addContent({
+            content: newTab.getContent(),
+        });
+
+        newTab.addListeners();
+
+        return newTab.getContent();
+    }
+}

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

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

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

@@ -0,0 +1,95 @@
+import DisableableHtmlElement from '../disableable-html-element.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class PresetLabel extends DisableableHtmlElement {
+    constructor({
+        id,
+        disabled = false,
+        defaultValue = '',
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.defaultValue = defaultValue;
+        this.styleExtra = '';
+        this.colour = '#D0D1D9';
+        this.backgroundColour = '#00001C';
+
+        if (this.disabled) {
+            this.colour = '#B5B5B5';
+            this.backgroundColour = '#CCCCCC';
+        }
+
+        this.style = `color: ${this.colour};background-color: ${this.backgroundColour};${this.styleExtra}`;
+    }
+
+    toString() {
+        return `<input id="${this.id}" type="text" value="${this.getValue()}" style="${this.style}" ${this.disabled ? 'disabled' : ''}></input>`;
+    }
+
+    save() {
+        PardusOptionsUtility.defaultSaveFunction(`${PardusOptionsUtility.getVariableName(this.id)}`, this.getCurrentValue());
+    }
+
+    hasValue() {
+        if (!PardusOptionsUtility.defaultGetFunction(`${PardusOptionsUtility.getVariableName(this.id)}`, false)) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Disables the input element
+     * @function AbstractOption#disable
+     */
+    disable() {
+        this.setDisabled(true);
+        if (this.getInputElement()) {
+            this.getInputElement().removeAttribute('disabled');
+            this.getInputElement().setAttribute('style', this.style);
+        }
+    }
+
+    /**
+     * Enables the input element
+     * @function AbstractOption#enable
+     */
+    enable() {
+        this.setDisabled(false);
+        if (this.getInputElement()) {
+            this.getInputElement().removeAttribute('disabled');
+            this.getInputElement().setAttribute('style', this.style);
+        }
+    }
+
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        if (this.disabled) {
+            this.colour = '#B5B5B5';
+            this.backgroundColour = '#CCCCCC';
+        } else {
+            this.colour = '#D0D1D9';
+            this.backgroundColour = '#00001C';
+        }
+        this.style = `color: ${this.colour};background-color: ${this.backgroundColour};${this.styleExtra}`;
+    }
+
+    /**
+     * Gets the input element for the option
+     * @function PresetLabel#getInputElement
+     * @returns {object} Input element
+     */
+    getInputElement() {
+        return document.getElementById(this.id);
+    }
+
+    getCurrentValue() {
+        return this.getInputElement().value;
+    }
+
+    getValue() {
+        return PardusOptionsUtility.defaultGetFunction(`${PardusOptionsUtility.getVariableName(this.id)}`, this.defaultValue);
+    }
+}