Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

New question system

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-05 18:59:47 +02:00
parent 1738fc4252
commit d1f8080c24
45 changed files with 1391 additions and 689 deletions
Download patch file Download diff file Expand all files Collapse all files

21
UI/Base/TextField.ts
View file

@ -1,24 +1,32 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
import {UIInputElement} from "./UIInputElement";
export class TextField extends UIElement {
export class TextField<T> extends UIInputElement<T> {
public value = new UIEventSource("");
public value: UIEventSource<string> = new UIEventSource<string>("");
/**
* Pings and has the value data
*/
public enterPressed = new UIEventSource<string>(undefined);
private _placeholder: UIEventSource<string>;
private _mapping: (string) => T;
constructor(placeholder : UIEventSource<string>) {
constructor(placeholder: UIEventSource<string>,
mapping: ((string) => T)) {
super(placeholder);
this._placeholder = placeholder;
this._mapping = mapping;
}
GetValue(): UIEventSource<T> {
return this.value.map(this._mapping);
}
protected InnerRender(): string {
return "<form onSubmit='return false' class='form-text-field'>" +
"<input type='text' placeholder='"+this._placeholder.data+"' id='text-" + this.id + "'>" +
"<input type='text' placeholder='" + (this._placeholder.data ?? "") + "' id='text-" + this.id + "'>" +
"</form>";
}
@ -27,19 +35,24 @@ export class TextField extends UIElement {
const field = document.getElementById('text-' + this.id);
const self = this;
field.oninput = () => {
// @ts-ignore
self.value.setData(field.value);
};
field.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
// @ts-ignore
self.enterPressed.setData(field.value);
}
});
}
Clear() {
const field = document.getElementById('text-' + this.id);
if (field !== undefined) {
// @ts-ignore
field.value = "";
}
}