139 lines
3.6 KiB
JavaScript
139 lines
3.6 KiB
JavaScript
"use strict";
|
|
|
|
Toolkit.TextBox = class TextBox extends Toolkit.Component {
|
|
|
|
constructor(application, options) {
|
|
super(application, "input", options);
|
|
options = options || {};
|
|
|
|
// Configure instance fields
|
|
this.changeListeners = [];
|
|
this.commitListeners = [];
|
|
this.enabled = "enabled" in options ? !!options.enabled : true;
|
|
this.name = options.name || "";
|
|
this.lastCommit = "";
|
|
|
|
// Configure element
|
|
this.element.size = 1;
|
|
this.element.type = "text";
|
|
this.element.addEventListener("blur" , e=>this.commit (e));
|
|
this.element.addEventListener("input" , e=>this.onchange (e));
|
|
this.element.addEventListener("keydown", e=>this.onkeydown(e));
|
|
|
|
// Configure properties
|
|
this.setEnabled(this.enabled);
|
|
this.setName (this.name );
|
|
this.setText (options.text || "");
|
|
this.application.addComponent(this);
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Public Methods //////////////////////////////
|
|
|
|
// Add a callback for change events
|
|
addChangeListener(listener) {
|
|
if (this.changeListeners.indexOf(listener) == -1)
|
|
this.changeListeners.push(listener);
|
|
}
|
|
|
|
// Add a callback for commit events
|
|
addCommitListener(listener) {
|
|
if (this.commitListeners.indexOf(listener) == -1)
|
|
this.commitListeners.push(listener);
|
|
}
|
|
|
|
// Request focus on the appropriate element
|
|
focus() {
|
|
this.element.focus();
|
|
}
|
|
|
|
// Retrieve the component's accessible name
|
|
getName() {
|
|
return this.name;
|
|
}
|
|
|
|
// Retrieve the component's display text
|
|
getText() {
|
|
return this.element.value;
|
|
}
|
|
|
|
// Determine whether the component is enabled
|
|
isEnabled() {
|
|
return this.enabled;
|
|
}
|
|
|
|
// Specify whether the component is enabled
|
|
setEnabled(enabled) {
|
|
this.enabled = enabled = !!enabled;
|
|
this.element.setAttribute("aria-disabled", !enabled);
|
|
if (enabled)
|
|
this.element.removeAttribute("disabled");
|
|
else this.element.setAttribute("disabled", "");
|
|
}
|
|
|
|
// Specify the component's accessible name
|
|
setName(name) {
|
|
this.name = name || "";
|
|
this.localize();
|
|
}
|
|
|
|
// Specify the component's display text
|
|
setText(text) {
|
|
text = !text && text !== 0 ? "" : "" + text;
|
|
this.lastCommit = text;
|
|
this.element.value = text;
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// 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 /////////////////////////////
|
|
|
|
// Input finalized
|
|
commit(e) {
|
|
let text = this.element.value || "";
|
|
if (!this.enabled || text == this.lastCommit)
|
|
return;
|
|
this.lastCommit = text;
|
|
for (let listener of this.commitListeners)
|
|
listener(e, this);
|
|
}
|
|
|
|
// Text changed event handler
|
|
onchange(e) {
|
|
e.stopPropagation();
|
|
if (!this.enabled)
|
|
return;
|
|
for (let listener of this.changeListeners)
|
|
listener(e, this);
|
|
}
|
|
|
|
// Key press event handler
|
|
onkeydown(e) {
|
|
|
|
// Configure event
|
|
e.stopPropagation();
|
|
|
|
// Error checking
|
|
if (!this.enabled)
|
|
return;
|
|
|
|
// The Enter key was pressed
|
|
if (e.key == "Enter")
|
|
this.commit(e);
|
|
}
|
|
|
|
};
|