126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
import { Component } from /**/"./Component.js";
|
|
let Toolkit;
|
|
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////////////////
|
|
// DropDown //
|
|
///////////////////////////////////////////////////////////////////////////////
|
|
|
|
// Text entry field
|
|
class DropDown extends Component {
|
|
static Component = Component;
|
|
|
|
///////////////////////// Initialization Methods //////////////////////////
|
|
|
|
constructor(gui, options) {
|
|
super(gui, options, {
|
|
className: "tk tk-dropdown",
|
|
tagName : "select"
|
|
});
|
|
|
|
// Configure instance fields
|
|
this.isEnabled = null;
|
|
this.options = [];
|
|
|
|
// Configure component
|
|
options = options || {};
|
|
this.setEnabled(!("enabled" in options) || options.enabled);
|
|
if ("options" in options)
|
|
this.setOptions(options.options);
|
|
this.setSelectedIndex(
|
|
("selectedIndex" in options ? options : this).selectedIndex);
|
|
|
|
// Configure event handlers
|
|
this.addEventListener("keydown" , e=>e.stopPropagation());
|
|
this.addEventListener("pointerdown", e=>e.stopPropagation());
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Public Methods //////////////////////////////
|
|
|
|
// Programmatically change the selection
|
|
change() {
|
|
this.element.dispatchEvent(this.event("input"));
|
|
}
|
|
|
|
// Retrieve the current selection index
|
|
getSelectedIndex() {
|
|
return this.element.selectedIndex;
|
|
}
|
|
|
|
// Specify whether the button can be activated
|
|
setEnabled(enabled) {
|
|
this.isEnabled = enabled = !!enabled;
|
|
this.setAttribute("disabled", enabled ? null : "true");
|
|
}
|
|
|
|
// Specify the list contents
|
|
setOptions(options) {
|
|
|
|
// Error checking
|
|
if (!Array.isArray(options))
|
|
return;
|
|
|
|
// Erase the list of options
|
|
this.options.splice(0);
|
|
this.element.replaceChildren();
|
|
|
|
// Add options from the input
|
|
for (let option of options) {
|
|
if (typeof option != "string")
|
|
continue;
|
|
this.options.push(option);
|
|
this.element.add(document.createElement("option"));
|
|
}
|
|
|
|
// Update the display text
|
|
this.translate();
|
|
}
|
|
|
|
// Specify the current selection
|
|
setSelectedIndex(index) {
|
|
|
|
// Error checking
|
|
if (typeof index != "number" || isNaN(index))
|
|
return this.element.selectedIndex;
|
|
index = Math.round(index);
|
|
if (index < -1 || index >= this.options.length)
|
|
return this.element.selectedIndex;
|
|
|
|
// Configure element and instance fields
|
|
return this.element.selectedIndex = index;
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Package Methods /////////////////////////////
|
|
|
|
// Update the global Toolkit object
|
|
static setToolkit(toolkit) {
|
|
Toolkit = toolkit;
|
|
}
|
|
|
|
// Regenerate localized display text
|
|
translate() {
|
|
super.translate();
|
|
|
|
// Error checking
|
|
if (!this.options)
|
|
return;
|
|
|
|
// Update the list items
|
|
for (let x = 0; x < this.options.length; x++) {
|
|
this.element.item(x).innerText =
|
|
this.gui.translate(this.options[x], this);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export { DropDown };
|