pardus-options-library 2.7.0

package/src/classes/options/key-down-disable-button.js

@@ -0,0 +1,20 @@
+import AbstractToggleButton from '../abstract/abstract-toggle-button.js';
+
+export default class DisableButton extends AbstractToggleButton {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+        toggled = false,
+    }) {
+        super({
+            id,
+            premium,
+            disabled,
+            toggled,
+            actionText: 'Disable',
+            toggleText: 'Enable',
+            styleExtra: 'width:58px;',
+        });
+    }
+}

package/src/classes/options/key-down-option.js

@@ -0,0 +1,178 @@
+import AbstractOption from './abstract-option.js';
+import SetKeyButton from './key-down-set-key-button.js';
+import DisableButton from './key-down-disable-button.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class KeyDownOption extends AbstractOption {
+    constructor({
+        id,
+        variable,
+        description = '',
+        defaultValue = false,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        shallow = false,
+        reverse = false,
+        info = null,
+    }) {
+        const currValue = getFunction(`${PardusOptionsUtility.getVariableName(variable)}`, defaultValue);
+        const currDisabled = Object.hasOwn(currValue, 'disabled') && currValue.disabled;
+        super({
+            id,
+            variable,
+            description,
+            defaultValue,
+            saveFunction,
+            getFunction,
+            shallow,
+            reverse,
+            info,
+            disabled: currDisabled,
+            styleExtra: 'width: 20px;padding: 2px;text-align: center;margin: 2px 7px 2px;',
+        });
+        this.setKeyButton = new SetKeyButton({
+            id: `${this.id}-setkey`,
+            disabled: currDisabled,
+        });
+        this.disableButton = new DisableButton({
+            id: `${this.id}-disable`,
+            toggled: currDisabled,
+        });
+        this.boundCaptureKeyListener = this.captureKeyListener.bind(this);
+        this.setKeyButton.addClickListener(() => {
+            document.getElementById(`${this.inputId}-key`).value = '_';
+            document.getElementById(`${this.inputId}-key`).style.color = 'lime';
+            document.addEventListener('keydown', this.boundCaptureKeyListener, {
+                once: true,
+                ephemeral: true,
+            });
+            this.setKeyButton.toggle();
+            this.disableButton.disable();
+        });
+        this.setKeyButton.addToggleClickListener(() => {
+            document.removeEventListener('keydown', this.boundCaptureKeyListener);
+            this.setKeyButton.toggle();
+            this.disableButton.enable();
+            this.refreshElement();
+        });
+        this.disableButton.addClickListener(() => {
+            this.disable();
+            this.disableButton.toggle();
+        });
+        this.disableButton.addToggleClickListener(() => {
+            this.enable();
+            this.disableButton.toggle();
+        });
+        this.addAfterRefreshHook(() => {
+            this.setKeyButton.afterRefreshElement();
+            this.disableButton.afterRefreshElement();
+        });
+    }
+
+    captureKeyListener(event) {
+        this.getInputElement().value = JSON.stringify({
+            code: event.keyCode,
+            key: event.code,
+            description: event.key,
+        });
+        document.getElementById(`${this.inputId}-key`).value = this.getCurrentKeyDescription();
+        document.getElementById(`${this.inputId}-key`).style.color = '#D0D1D9';
+        this.disableButton.enable();
+        this.setKeyButton.toggle();
+    }
+
+    getInnerHTML() {
+        let keyPressHtml = `<input id='${this.inputId}' type='text' hidden value='${JSON.stringify(this.getValue())}'>`;
+        keyPressHtml += `<table width='100%' style='border-collapse: collapse;'><tbody><tr><td align="left"><input id='${this.inputId}-key' type='text' cols='1' maxlength='1' readonly value="${this.getKeyDescription()}" style="${this.style}" ${this.disabled ? 'disabled' : ''}/></td><td align="right">${this.setKeyButton}</td><td align="right" style='padding-right: 0px;'>${this.disableButton}</td></tr></tbody></table>`;
+        return keyPressHtml;
+    }
+
+    /**
+     * Disables the input element
+     * @function AbstractOption#disable
+     */
+    disable() {
+        this.setDisabled(true);
+        document.getElementById(`${this.inputId}-key`).removeAttribute('disabled');
+        document.getElementById(`${this.inputId}-key`).setAttribute('style', this.style);
+
+        this.getInputElement().value = JSON.stringify({
+            ...this.getCurrentValue(),
+            disabled: true,
+        });
+    }
+
+    /**
+     * Enables the input element
+     * @function AbstractOption#enable
+     */
+    enable() {
+        this.setDisabled(false);
+        document.getElementById(`${this.inputId}-key`).removeAttribute('disabled');
+        document.getElementById(`${this.inputId}-key`).setAttribute('style', this.style);
+
+        const newValue = this.getCurrentValue();
+        delete newValue.disabled;
+        this.getInputElement().value = JSON.stringify(newValue);
+    }
+
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        if (this.disabled) {
+            this.colour = '#B5B5B5';
+            this.backgroundColour = '#CCCCCC';
+            this.setKeyButton.disable();
+        } else {
+            this.colour = '#D0D1D9';
+            this.backgroundColour = '#00001C';
+            this.setKeyButton.enable();
+        }
+        this.style = `color: ${this.colour};background-color: ${this.backgroundColour};${this.styleExtra}`;
+    }
+
+    saveValue(overrideSaveFunction = null) {
+        if (overrideSaveFunction && typeof overrideSaveFunction === 'function') {
+            overrideSaveFunction(`${PardusOptionsUtility.getVariableName(this.variable)}`, this.getCurrentValue());
+        } else {
+            this.saveFunction(`${PardusOptionsUtility.getVariableName(this.variable)}`, this.getCurrentValue());
+        }
+    }
+
+    getKey() {
+        return this.getValue().key;
+    }
+
+    getKeyDescription() {
+        return this.getValue().description;
+    }
+
+    getKeyCode() {
+        return this.getValue().code;
+    }
+
+    isDisabled() {
+        const value = this.getValue();
+
+        if (Object.hasOwn(value, 'disabled') && value.disabled) {
+            return true;
+        }
+
+        return false;
+    }
+
+    getCurrentKey() {
+        return this.getCurrentValue().key;
+    }
+
+    getCurrentKeyDescription() {
+        return this.getCurrentValue().description;
+    }
+
+    getCurrentCode() {
+        return this.getCurrentValue().code;
+    }
+
+    getCurrentValue() {
+        return JSON.parse(this.getInputElement().value);
+    }
+}

package/src/classes/options/key-down-set-key-button.js

@@ -0,0 +1,18 @@
+import AbstractToggleButton from '../abstract/abstract-toggle-button.js';
+
+export default class SetKeyButton extends AbstractToggleButton {
+    constructor({
+        id,
+        premium = false,
+        disabled = false,
+    }) {
+        super({
+            id,
+            premium,
+            disabled,
+            actionText: 'Set Key',
+            toggleText: 'Cancel',
+            styleExtra: 'width:58px;',
+        });
+    }
+}

package/src/classes/options/numeric-option.js

@@ -0,0 +1,40 @@
+import AbstractOption from './abstract-option.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class NumericOption extends AbstractOption {
+    constructor({
+        id,
+        variable,
+        description,
+        defaultValue = 0,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        disabled = false,
+        min = 0,
+        max = 0,
+        step = 1,
+        info = null,
+    }) {
+        super({
+            id,
+            variable,
+            description,
+            defaultValue,
+            saveFunction,
+            getFunction,
+            info,
+            disabled,
+        });
+        this.minValue = min;
+        this.maxValue = max;
+        this.stepValue = step;
+    }
+
+    getInnerHTML() {
+        return `<input id="${this.inputId}" type="number" min="${this.minValue}" max="${this.maxValue}" step="${this.stepValue}" value="${this.getValue()}" style="${this.style}" ${this.disabled ? 'disabled' : ''}>`;
+    }
+
+    getCurrentValue() {
+        return this.getInputElement().value;
+    }
+}

package/src/classes/options/select-option.js

@@ -0,0 +1,74 @@
+import AbstractOption from './abstract-option.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class SelectOption extends AbstractOption {
+    constructor({
+        id,
+        variable,
+        description,
+        defaultValue = null,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        disabled = false,
+        info = null,
+        inheritStyle = false,
+        options = [],
+    }) {
+        super({
+            id,
+            variable,
+            description,
+            defaultValue,
+            saveFunction,
+            getFunction,
+            info,
+            disabled,
+            align: 'right',
+        });
+        this.options = options;
+
+        if (inheritStyle) {
+            this.addEventListener('change', () => {
+                this.updateSelectStyle();
+            });
+        }
+    }
+
+    getInnerHTML() {
+        let selectHtml = '';
+        const savedValue = this.getValue();
+        let hasSelected = false;
+        let selectStyle = '';
+        for (const option of this.options) {
+            const style = (option.style) ? ` style="${option.style}"` : '';
+            if (!hasSelected && (option.value === savedValue || (option.default && option.default === true && !savedValue))) {
+                selectHtml += `<option value=${option.value}${style} selected>${option.text}</option>`;
+                hasSelected = true;
+                selectStyle = (option.style) ? ` style="${option.style}"` : '';
+            } else {
+                selectHtml += `<option value=${option.value}${style}>${option.text}</option>`;
+            }
+        }
+
+        selectHtml = `<select id="${this.inputId}"${selectStyle} style="${this.style}" ${this.disabled ? 'disabled' : ''}>${selectHtml}`;
+
+        return selectHtml;
+    }
+
+    updateSelectStyle() {
+        const currentStyle = this.getInputElement().selectedOptions[0].getAttribute('style');
+        this.getInputElement().setAttribute('style', currentStyle);
+    }
+
+    getOptions() {
+        return this.options;
+    }
+
+    setOptions(options = []) {
+        this.options = options;
+    }
+
+    getCurrentValue() {
+        return this.getInputElement().value;
+    }
+}

package/src/classes/options/text-area-option.js

@@ -0,0 +1,39 @@
+import AbstractOption from './abstract-option.js';
+import PardusOptionsUtility from '../pardus-options-utility.js';
+
+export default class TextAreaOption extends AbstractOption {
+    constructor({
+        id,
+        variable,
+        description,
+        defaultValue = 0,
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        disabled = false,
+        info = null,
+        rows = 3,
+        cols = 65,
+    }) {
+        super({
+            id,
+            variable,
+            description,
+            defaultValue,
+            saveFunction,
+            getFunction,
+            info,
+            disabled,
+            styleExtra: 'font-family: Helvetica, Arial, sans-serif;font-size:11px;',
+        });
+        this.rows = rows;
+        this.cols = cols;
+    }
+
+    getInnerHTML() {
+        return `<textarea id="${this.inputId}" width="100%" autocomplete="off" autocorrect="off" spellcheck="false" ${(this.rows === 0) ? '' : `rows="${this.rows}"`} ${(this.cols === 0) ? '' : `cols="${this.cols}"`} style="${this.style}" ${this.disabled ? 'disabled' : ''}>${this.getValue()}</textarea>`;
+    }
+
+    getCurrentValue() {
+        return this.getInputElement().value;
+    }
+}

package/src/classes/options-box.js

@@ -0,0 +1,200 @@
+import DisableableHtmlElement from './disableable-html-element.js';
+import PardusOptionsUtility from './pardus-options-utility.js';
+import SaveButtonRow from './save-button-row/save-button-row.js';
+import Presets from './save-button-row/presets.js';
+import OptionsGroup from './options-group.js';
+import DescriptionElement from './description-element.js';
+
+export default class OptionsBox extends DisableableHtmlElement {
+    constructor({
+        id,
+        heading,
+        premium = false,
+        description = '',
+        imageLeft = '',
+        imageRight = '',
+        saveFunction = PardusOptionsUtility.defaultSaveFunction,
+        getFunction = PardusOptionsUtility.defaultGetFunction,
+        refresh = true,
+        resetButton = false,
+        presets = 0,
+        disabled = false,
+    }) {
+        super({
+            id,
+            disabled,
+        });
+        this.heading = heading;
+        this.premium = premium;
+        this.saveFunction = saveFunction;
+        this.getFunction = getFunction;
+        this.refresh = refresh;
+        this.resetButton = resetButton;
+        this.disabled = disabled;
+
+        const headerHtml = (premium) ? '<th class="premium">' : '<th>';
+        this.frontContainer = `<form id="${this.id}" action="none"><table style="background:url(${PardusOptionsUtility.getImagePackUrl()}bgd.gif)" width="100%" cellpadding="3" align="center"><tbody><tr>${headerHtml}${heading}</th></tr>`;
+        this.backContainer = '</tbody></table></form>';
+        this.innerHtml = '';
+        this.description = new DescriptionElement({
+            id: `${this.id}-description`,
+            description,
+            imageLeft,
+            imageRight,
+        });
+        this.optionsGroup = new OptionsGroup({
+            id: `${this.id}-options-group`,
+            premium,
+            saveFunction,
+            getFunction,
+            disabled,
+        });
+        this.saveButtonRow = new SaveButtonRow({
+            id: `${this.id}-save`,
+            premium,
+            resetButton,
+            disabled,
+        });
+        this.presets = new Presets({
+            id: `${this.id}-presets`,
+            premium,
+            presets,
+            disabled,
+        });
+        this.addAfterRefreshHook((opts) => {
+            if (opts.maintainRefreshStatus) {
+                return;
+            }
+            this.refresh = true;
+        });
+        this.addAfterRefreshHook(() => {
+            this.optionsGroup.afterRefreshElement();
+            this.saveButtonRow.afterRefreshElement();
+        });
+        this.addAfterRefreshHook(() => {
+            this.setFunctions();
+        });
+    }
+
+    toString() {
+        if (this.optionsGroup.options.length === 0) {
+            return this.frontContainer + this.description + this.innerHtml + this.optionsGroup + this.backContainer;
+        }
+        return this.frontContainer + this.description + this.innerHtml + this.optionsGroup + this.saveButtonRow + this.presets + this.backContainer;
+    }
+
+    setFunctions() {
+        if (this.optionsGroup.options.length !== 0) {
+            this.saveButtonRow.addSaveEventListener(() => {
+                for (const option of this.optionsGroup.options) {
+                    option.saveValue();
+                }
+                this.saveButtonRow.displaySaved();
+
+                const event = new Event('save');
+                this.getElement().dispatchEvent(event);
+            });
+            this.saveButtonRow.addResetEventListener(() => {
+                for (const option of this.optionsGroup.options) {
+                    option.resetValue();
+                }
+                this.saveButtonRow.displayReset();
+                this.optionsGroup.refreshElement();
+
+                const event = new Event('reset');
+                this.getElement().dispatchEvent(event);
+            });
+        }
+
+        this.presets.setFunctions(this.optionsGroup.options);
+    }
+
+    /**
+     * Allows disabling or enabling this element and all nested elements without refreshing
+     * @function OptionsBox#setDisabled
+     */
+    setDisabled(disabled = false) {
+        this.disabled = disabled;
+        this.optionsGroup.setDisabled(disabled);
+        this.saveButtonRow.setDisabled(disabled);
+        this.presets.setDisabled(disabled);
+    }
+
+    addSaveEventListener(func) {
+        return this.saveButtonRow.addSaveEventListener(func);
+    }
+
+    addBooleanOption({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newOption = this.optionsGroup.addBooleanOption(args);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+
+    addTextAreaOption({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newOption = this.optionsGroup.addTextAreaOption(args);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+
+    addNumericOption({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newOption = this.optionsGroup.addNumericOption(args);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+
+    addKeyDownOption({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newOption = this.optionsGroup.addKeyDownOption(args);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+
+    addSelectOption({
+        refresh = this.refresh,
+        ...args
+    }) {
+        const newOption = this.optionsGroup.addSelectOption(args);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+
+    addGroupedOption({
+        description,
+        saveFunction = this.saveFunction,
+        getFunction = this.getFunction,
+        refresh = this.refresh,
+    }) {
+        const groupedOptions = {
+            description,
+            saveFunction,
+            getFunction,
+        };
+
+        const newOption = this.optionsGroup.addGroupedOption(groupedOptions);
+        if (refresh) {
+            this.refreshElement();
+        }
+        return newOption;
+    }
+}