2017-09-24 22:23:22 +00:00
|
|
|
module TK.SpaceTac.UI {
|
2017-05-03 18:12:13 +00:00
|
|
|
/**
|
|
|
|
* UI component to allow the user to enter a small text
|
|
|
|
*/
|
2018-04-12 16:30:08 +00:00
|
|
|
export class UITextInput {
|
2018-05-15 14:57:45 +00:00
|
|
|
private container: UIButton
|
|
|
|
private content: UIText
|
|
|
|
private placeholder: UIText
|
2017-05-03 18:12:13 +00:00
|
|
|
private maxlength: number
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
constructor(builder: UIBuilder, background: string, x = 0, y = 0, maxlength: number, placeholder = "") {
|
2018-05-15 14:57:45 +00:00
|
|
|
this.container = builder.button(background, x, y, () => {
|
2018-04-12 16:30:08 +00:00
|
|
|
builder.view.inputs.grabKeyboard(this, key => this.processKey(key));
|
2018-05-15 14:57:45 +00:00
|
|
|
}, undefined, undefined, { center: true });
|
2018-04-12 16:30:08 +00:00
|
|
|
|
2018-05-15 14:57:45 +00:00
|
|
|
this.content = builder.in(this.container).text("", 0, 0, { center: true });
|
|
|
|
this.placeholder = builder.in(this.container).text(placeholder, 0, 0, { center: true });
|
|
|
|
this.placeholder.setAlpha(0.5);
|
2018-04-12 16:30:08 +00:00
|
|
|
this.maxlength = maxlength;
|
2017-05-03 18:12:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Process a key press
|
|
|
|
*/
|
|
|
|
processKey(key: string): void {
|
|
|
|
if (key.length == 1 && this.content.text.length < this.maxlength) {
|
2018-04-12 16:30:08 +00:00
|
|
|
this.setContent(this.content.text + key);
|
2017-05-03 18:12:13 +00:00
|
|
|
} else if (key == "Backspace" && this.content.text.length > 0) {
|
2018-04-12 16:30:08 +00:00
|
|
|
this.setContent(this.content.text.substr(0, this.content.text.length - 1));
|
2017-05-03 18:12:13 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get current text content
|
|
|
|
*/
|
|
|
|
getContent(): string {
|
|
|
|
return this.content.text;
|
|
|
|
}
|
2017-06-08 21:58:23 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the current text content
|
|
|
|
*/
|
|
|
|
setContent(content: string): void {
|
2018-05-15 14:57:45 +00:00
|
|
|
this.content.setText(content.slice(0, this.maxlength));
|
|
|
|
this.placeholder.setVisible(!this.content.text);
|
2017-06-08 21:58:23 +00:00
|
|
|
}
|
2017-05-03 18:12:13 +00:00
|
|
|
}
|
|
|
|
}
|