155 lines
3.9 KiB
JavaScript
155 lines
3.9 KiB
JavaScript
let register = Toolkit => Toolkit.DropDown =
|
|
|
|
class DropDown extends Toolkit.Component {
|
|
|
|
///////////////////////// Initialization Methods //////////////////////////
|
|
|
|
constructor(app, options = {}) {
|
|
super(app, Object.assign({
|
|
class: "tk drop-down",
|
|
tag : "select"
|
|
}, options));
|
|
|
|
// Configure instance fields
|
|
this.items = [];
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Public Methods //////////////////////////////
|
|
|
|
// Add an item
|
|
add(text, localize, value) {
|
|
|
|
// Record the item data
|
|
this.items.push([ text, localize, value ]);
|
|
|
|
// Add an <option> element
|
|
let option = document.createElement("option");
|
|
this.element.append(option);
|
|
option.innerText = !localize ? text :
|
|
this.app.localize(text, this.substitutions);
|
|
}
|
|
|
|
// Remove all items
|
|
clear() {
|
|
this.items.splice(0);
|
|
this.element.replaceChildren();
|
|
this.element.selectedIndex = -1;
|
|
}
|
|
|
|
// Retrieve an item
|
|
get(index) {
|
|
|
|
// Error checking
|
|
if (index < 0 || index >= this.items.length)
|
|
return null;
|
|
|
|
// Return the item as an item with properties
|
|
let item = this.items[item];
|
|
return {
|
|
localize: item[1],
|
|
text : item[0],
|
|
value : item[2]
|
|
};
|
|
}
|
|
|
|
// Number of items in the list
|
|
get length() { return this.items.length; }
|
|
set length(v) { }
|
|
|
|
// Remove an item
|
|
remove(index) {
|
|
|
|
// Error checking
|
|
if (index < 0 || index >= this.length)
|
|
return;
|
|
|
|
// Determine what selectedIndex will be after the operation
|
|
let newIndex = index;
|
|
if (
|
|
newIndex <= this.selectedIndex ||
|
|
newIndex == this.length - 1
|
|
) newIndex--;
|
|
if (
|
|
newIndex == -1 &&
|
|
this.length != 0
|
|
) newIndex = 0;
|
|
|
|
// Remove the item
|
|
this.items.splice(index, 1);
|
|
this.element.options[index].remove();
|
|
this.element.selectedIndex = newIndex;
|
|
}
|
|
|
|
// Index of the currently selected item
|
|
get selectedIndex() { return this.element.selectedIndex; }
|
|
set selectedIndex(index) {
|
|
if (index < -1 || index >= this.items.length)
|
|
return this.element.selectedIndex;
|
|
return this.element.selectedIndex = index;
|
|
}
|
|
|
|
// Update an item
|
|
set(index, text, localize) {
|
|
|
|
// Error checking
|
|
if (index < 0 || index >= this.items.length)
|
|
return;
|
|
|
|
// Replace the item data
|
|
this.items[index] = [ text, localize ];
|
|
|
|
// Configure the <option> element
|
|
this.element.options[index].innerText = !localize ? text :
|
|
this.app.localize(text, this.substitutions);
|
|
}
|
|
|
|
// Update the selectedIndex property, firing an event
|
|
setSelectedIndex(index) {
|
|
|
|
// Error checking
|
|
if (index < -1 || index >= this.items.length)
|
|
return this.selectedIndex;
|
|
|
|
// Update the element and fire an event
|
|
this.element.selectedIndex = index;
|
|
this.element.dispatchEvent(new Event("input"));
|
|
return index;
|
|
}
|
|
|
|
// Currently selected value
|
|
get value() {
|
|
return this.selectedIndex == -1 ? null :
|
|
this.items[this.selectedIndex][2];
|
|
}
|
|
set value(value) {
|
|
let index = this.items.findIndex(i=>i[2] == value);
|
|
if (index != -1)
|
|
this.selectedIndex = index;
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Package Methods /////////////////////////////
|
|
|
|
// Update localization strings
|
|
localize() {
|
|
|
|
// Label and title
|
|
this.localizeLabel();
|
|
this.localizeTitle();
|
|
|
|
// Items
|
|
for (let x = 0; x < this.items.length; x++) {
|
|
let item = this.items[x];
|
|
this.element.options[x].innerText = !item[1] ? item[0] :
|
|
this.app.localize(item[0], this.substitutions);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export { register };
|