235 lines
6.1 KiB
JavaScript
235 lines
6.1 KiB
JavaScript
"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;
|
|
}
|
|
|
|
};
|