Tweaks from concurrent project

app/toolkit/ListBox.js

@@ -0,0 +1,234 @@
+"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;
+    }
+
+};

app/toolkit/Panel.js

@@ -91,6 +91,11 @@ Toolkit.Panel = class Panel extends Toolkit.Component {
         return new Toolkit.Label(this.application, options);
     }
 
+    // Create a ListBox and associate it with the application
+    newListBox(options) {
+        return new Toolkit.ListBox(this.application, options);
+    }
+
     // Create a MenuBar and associate it with the application
     newMenuBar(options) {
         return new Toolkit.MenuBar(this.application, options);