pvbemu/app/toolkit/ListBox.js

"use strict";

// Multi-item list picker
Toolkit.ListBox = class ListBox extends Toolkit.Component {

    // Object constructor
    constructor(application, options) {
        super(application, "select", options);
        options = options || {};

        // Configure instance fields
        this.changeListeners = [];
        this.dropDown        = true;
        this.enabled         = "enabled" in options ? !!options.enabled : true;
        this.items           = [];
        this.name            = options.name  || "";

        // Configure element
        this.element.addEventListener("input", e=>this.onchange(e));

        // Configure properties
        this.setDropDown(this.dropDown);
        this.setEnabled (this.enabled );
        this.setName    (this.name    );
        if ("items" in options)
            this.add(options.items);
        this.application.addComponent(this);
    }



    ///////////////////////////// Public Methods //////////////////////////////

    // Add one or more items to the list box
    add(items, offset, count) {

        // Configure arguments
        if (!Array.isArray(items))
            items = [ items ];
        offset = offset || 0;
        if (offset < 0 || offset >= items.length)
            return;
        count = count || items.length - offset;
        if (count < 1)
            return;
        count = Math.min(count, items.length - offset)

        // Add the items to the list
        for (let x = 0; x < count; x++) {
            let item   = items[offset + x];
            let option = new Toolkit.ListBox.Option(this.application, item);
            this.items.push(option);
            this.element.appendChild(option.element);
        }

    }

    // Add a callback for chabge events
    addChangeListener(listener) {
        if (this.changeListeners.indexOf(listener) == -1)
            this.changeListeners.push(listener);
    }

    // Remove all items from the list
    clear() {
        for (let item of this.items)
            this.remove(item);
        this.items.splice(0, this.items.length);
    }

    // Request focus on the appropriate element
    focus() {
        this.element.focus();
    }

    // Retrieve the component's accessible name
    getName() {
        return this.name;
    }

    // Retrieve the index of the currently selected item
    getSelectedIndex() {
        return this.element.selectedIndex;
    }

    // Retrieve the currently selected item
    getSelectedItem() {
        let index = this.element.selectedIndex;
        return index == -1 ? null : this.items[index];
    }

    // Retrieve the value of the currently selected item
    getValue() {
        let item = this.getSelectedItem();
        return item == null ? null : item.getValue();
    }

    // Determine whether the component is a drop-down list
    isDropDown() {
        return this.dropDown;
    }

    // Determine whether the component is enabled
    isEnabled() {
        return this.enabled;
    }

    // Remove an item from the list
    remove(item, delocalize) {
        let index = this.items.indexOf(item);

        // Error checking
        if (index == -1)
            return;

        // Remove the element
        item.element.remove();
        this.items.splice(index, 1);

        // De-localize the element
        if (delocalize === undefined || delocalize)
            item.application.removeComponent(item);
    }
    
    // Specify whether the component is a drop-down list
    setDropDown(dropDown) {
        // Not yet implemented
    }

    // Specify whether the component is enabled
    setEnabled(enabled) {
        this.enabled = enabled = !!enabled;
        this.element.setAttribute("aria-disabled", !enabled);
    }

    // Specify the component's accessible name
    setName(name) {
        this.name = name || "";
        this.localize();
    }

    // Specify the index of the selected item
    setSelectedIndex(index) {
        if (typeof index != "number")
            return element.selectedIndex;
        index = Math.max(Math.min(Math.trunc(index), this.items.length-1), -1);
        this.element.selectedIndex = index;
        return index;
    }



    ///////////////////////////// Package Methods /////////////////////////////

    // Update display text with localized strings
    localize() {
        let name = this.name;
        if (this.application)
            name = this.application.translate(name, this);
        this.element.setAttribute("aria-label", name);
    }



    ///////////////////////////// Private Methods /////////////////////////////

    // Selection changed event handler
    onchange(e) {
        if (!this.enabled)
            return;
        for (let listener of this.changeListeners)
            listener(e);
    }

};

// List box item
Toolkit.ListBox.Option = class Option extends Toolkit.Component {

    // Object constructor
    constructor(application, options) {
        super(application, "option", options);
        options = options || {};

        // Configure instance fields
        this.localized = "localized" in options ? !!options.localized : true;
        this.text      = options.text  || "";
        this.value     = options.value || null;

        // Configure properties
        this.setText (this.text );
        this.setValue(this.value);
        if (this.localized)
            this.application.addComponent(this);
    }



    ///////////////////////////// Public Methods //////////////////////////////

    // Retrieve the component's display text
    getText() {
        return this.text;
    }

    // Retrieve the component's value
    getValue() {
        return this.value;
    }

    // Specify the component's display text
    setText(text) {
        this.text = text || "";
        this.localize();
    }

    // Specify the component's value
    setValue(value) {
        this.value = value;
    }



    ///////////////////////////// Package Methods /////////////////////////////

    // Update display text with localized strings
    localize() {
        let text = this.text;
        if (this.localized && this.application)
            text = this.application.translate(text, this);
        this.element.innerText = text;
    }

};