68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
let register = Toolkit => Toolkit.TextBox =
|
|
|
|
// Check box
|
|
class TextBox extends Toolkit.Component {
|
|
|
|
///////////////////////// Initialization Methods //////////////////////////
|
|
|
|
constructor(app, options = {}) {
|
|
super(app, options = Object.assign({
|
|
class : "tk text-box",
|
|
tag : "input",
|
|
type : "text"
|
|
}, options));
|
|
this.element.addEventListener("focusout", e=>this.commit ( ));
|
|
this.element.addEventListener("keydown" , e=>this.onKeyDown(e));
|
|
this.value = options.value || null;
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Event Handlers //////////////////////////////
|
|
|
|
// Key press
|
|
onKeyDown(e) {
|
|
if (e.altKey || e.ctrlKey || e.shiftKey || this.disabled)
|
|
return;
|
|
if (e.key != "Tab")
|
|
e.stopPropagation();
|
|
if (e.key == "Enter")
|
|
this.commit();
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Public Methods //////////////////////////////
|
|
|
|
// Contained text
|
|
get value() { return this.element.value; }
|
|
set value(value) {
|
|
value = value === undefined || value === null ? "" : value.toString();
|
|
if (value == this.value)
|
|
return;
|
|
this.element.value = value;
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Package Methods /////////////////////////////
|
|
|
|
// Update localization strings
|
|
localize() {
|
|
this.localizeLabel();
|
|
this.localizeTitle();
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Private Methods /////////////////////////////
|
|
|
|
// Complete editing
|
|
commit() {
|
|
this.element.dispatchEvent(new Event("action"));
|
|
}
|
|
|
|
}
|
|
|
|
export { register };
|