From 93db813cfc76026901275ee7b806d4cc0fb4f0f5 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 15:54:50 +0200 Subject: [PATCH] Intermediary refactoring --- Customizations/TagRendering.ts | 203 +++++++++++------- UI/AddButton.ts | 1 + UI/Base/FixedUiElement.ts | 2 +- UI/Base/UIInputElement.ts | 10 - UI/FeatureInfoBox.ts | 2 + UI/ImageUploadFlow.ts | 4 +- UI/{Base/DropDownUI.ts => Input/DropDown.ts} | 2 +- UI/{Base => Input}/FixedInputElement.ts | 10 +- UI/Input/InputElement.ts | 11 + UI/Input/InputElementWrapper.ts | 37 ++++ .../UIRadioButton.ts => Input/RadioButton.ts} | 86 ++++---- UI/{Base => Input}/TextField.ts | 47 ++-- UI/SearchAndGo.ts | 9 +- UI/UIElement.ts | 8 +- test.ts | 26 +-- 15 files changed, 280 insertions(+), 178 deletions(-) delete mode 100644 UI/Base/UIInputElement.ts rename UI/{Base/DropDownUI.ts => Input/DropDown.ts} (97%) rename UI/{Base => Input}/FixedInputElement.ts (70%) create mode 100644 UI/Input/InputElement.ts create mode 100644 UI/Input/InputElementWrapper.ts rename UI/{Base/UIRadioButton.ts => Input/RadioButton.ts} (56%) rename UI/{Base => Input}/TextField.ts (57%) diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index ea8ca32..2b9c8bf 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -1,17 +1,18 @@ import {UIElement} from "../UI/UIElement"; import {UIEventSource} from "../UI/UIEventSource"; import {And, Tag, TagsFilter, TagUtils} from "../Logic/TagsFilter"; -import {UIRadioButton} from "../UI/Base/UIRadioButton"; import {FixedUiElement} from "../UI/Base/FixedUiElement"; import {SaveButton} from "../UI/SaveButton"; import {Changes} from "../Logic/Changes"; -import {TextField} from "../UI/Base/TextField"; -import {UIInputElement} from "../UI/Base/UIInputElement"; -import {UIRadioButtonWithOther} from "../UI/Base/UIRadioButtonWithOther"; import {VariableUiElement} from "../UI/Base/VariableUIElement"; import {TagDependantUIElement, TagDependantUIElementConstructor} from "./UIElementConstructor"; import {OnlyShowIfConstructor} from "./OnlyShowIf"; import {UserDetails} from "../Logic/OsmConnection"; +import {TextField} from "../UI/Input/TextField"; +import {InputElement} from "../UI/Input/InputElement"; +import {InputElementWrapper} from "../UI/Input/InputElementWrapper"; +import {FixedInputElement} from "../UI/Input/FixedInputElement"; +import {RadioButton} from "../UI/Input/RadioButton"; export class TagRenderingOptions implements TagDependantUIElementConstructor { @@ -129,12 +130,9 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor { class TagRendering extends UIElement implements TagDependantUIElement { - private _priority: number; private _userDetails: UIEventSource; + private _priority: number; - Priority(): number { - return this._priority; - } private _question: string; private _primer: string; @@ -150,8 +148,8 @@ class TagRendering extends UIElement implements TagDependantUIElement { extraTags?: TagsFilter }; - private readonly _questionElement: UIElement; - private readonly _textField: TextField; // Only here to update + + private readonly _questionElement: InputElement; private readonly _saveButton: UIElement; private readonly _skipButton: UIElement; @@ -238,60 +236,12 @@ class TagRendering extends UIElement implements TagDependantUIElement { } } - // Map radiobutton choice and textfield answer onto tagfilter. That tagfilter will be pushed into the changes later on - const pickChoice = (i => { - if (i === undefined || i === null) { - return undefined - } - return self._mapping[i].k - }); - const pickString = - (string) => { - if (string === "" || string === undefined) { - return undefined; - } - const tag = new Tag(self._freeform.key, string); - if (self._freeform.extraTags === undefined) { - return tag; - } - return new And([ - self._freeform.extraTags, - tag - ] - ); - }; - // Prepare the actual input element -> pick an appropriate implementation - let inputElement: UIInputElement; - - - if (this._freeform !== undefined && this._mapping !== undefined) { - // Radio buttons with 'other' - inputElement = new UIRadioButtonWithOther( - choices, - this._freeform.template, - this._freeform.placeholder, - pickChoice, - pickString - ); - this._questionElement = inputElement; - } else if (this._mapping !== [] && this._mapping.length > 0) { - // This is a classic radio selection element - inputElement = new UIRadioButton(new UIEventSource(choices), pickChoice, false) - this._questionElement = inputElement; - } else if (this._freeform !== undefined) { - this._textField = new TextField(new UIEventSource(this._freeform.placeholder), pickString); - inputElement = this._textField; - this._questionElement = new FixedUiElement( - "
" + this._freeform.template.replace("$$$", inputElement.Render()) + "
") - } else { - throw "Invalid questionRendering, expected at least choices or a freeform" - } - + this._questionElement = this.InputElementFor(options); const save = () => { - const selection = inputElement.GetValue().data; + const selection = self._questionElement.GetValue().data; if (selection) { changes.addTag(tags.data.id, selection); } @@ -305,21 +255,16 @@ class TagRendering extends UIElement implements TagDependantUIElement { } // Setup the save button and it's action - this._saveButton = new SaveButton(inputElement.GetValue()) + this._saveButton = new SaveButton(this._questionElement.GetValue()) .onClick(save); + this._editButton = new FixedUiElement(""); if (this._question !== undefined) { this._editButton = new FixedUiElement("edit") .onClick(() => { - console.log("Click", self._editButton); - if (self._textField) { - self._textField.value.setData(self._source.data["name"] ?? ""); - } - + self._questionElement.GetValue().setData(self.CurrentValue()); self._editMode.setData(true); }); - } else { - this._editButton = new FixedUiElement(""); } @@ -332,15 +277,95 @@ class TagRendering extends UIElement implements TagDependantUIElement { }); // And at last, set up the skip button this._skipButton = new VariableUiElement(cancelContents).onClick(cancel); + } + private InputElementFor(options: { + freeform?: { + key: string, template: string, + renderTemplate: string + placeholder?: string, + extraTags?: TagsFilter, + }, + mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[] + }): + InputElement { + + const elements = []; + + if (options.mappings !== undefined) { + for (const mapping of options.mappings) { + elements.push(this.InputElementForMapping(mapping)); + } + } + + if (options.freeform !== undefined) { + elements.push(this.InputForFreeForm(options.freeform)); + } + + + if (elements.length == 0) { + throw "NO TAGRENDERINGS!" + } + if (elements.length == 1) { + return elements[0]; + } + + return new RadioButton(elements, false); + } - private ApplyTemplate(template: string): string { - const tags = this._tagsPreprocessor(this._source.data); - return TagUtils.ApplyTemplate(template, tags); + + private InputElementForMapping(mapping: { k: TagsFilter, txt: string }) { + return new FixedInputElement(mapping.txt, mapping.k); } + + private InputForFreeForm(freeform): InputElement { + if (freeform === undefined) { + return undefined; + } + + + const pickString = + (string) => { + if (string === "" || string === undefined) { + return undefined; + } + const tag = new Tag(freeform.key, string); + if (freeform.extraTags === undefined) { + return tag; + } + return new And([ + freeform.extraTags, + tag + ] + ); + }; + + const toString = + (tag) => { + if (tag instanceof And) { + return toString(tag.and[0]) + } else if (tag instanceof Tag) { + return tag.value + } + return undefined; + } + + + let inputElement: InputElement; + const textField = new TextField({ + placeholder: this._freeform.placeholder, + fromString: pickString, + toString: toString + }); + + const prepost = freeform.template.split("$$$"); + return new InputElementWrapper(prepost[0], textField, prepost[1]); + } + + IsKnown(): boolean { const tags = TagUtils.proprtiesToKV(this._source.data); @@ -349,10 +374,26 @@ class TagRendering extends UIElement implements TagDependantUIElement { return true; } } - + return this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined; } + private CurrentValue(): TagsFilter { + const tags = TagUtils.proprtiesToKV(this._source.data); + + for (const oneOnOneElement of this._mapping.concat(this._renderMapping)) { + if (oneOnOneElement.k === null || oneOnOneElement.k.matches(tags)) { + return oneOnOneElement.k; + } + } + if (this._freeform === undefined) { + return undefined; + } + + return new Tag(this._freeform.key, this._source.data[this._freeform.key]); + } + + IsQuestioning(): boolean { if (this.IsKnown()) { return false; @@ -430,7 +471,7 @@ class TagRendering extends UIElement implements TagDependantUIElement { if(this._userDetails.data.loggedIn){ editButton = this._editButton.Render(); } - + return "" + "" + html + "" + editButton + @@ -441,13 +482,15 @@ class TagRendering extends UIElement implements TagDependantUIElement { } - InnerUpdate(htmlElement: HTMLElement) { - super.InnerUpdate(htmlElement); - this._questionElement.Update(); - this._saveButton.Update(); - this._skipButton.Update(); - this._textField?.Update(); - this._editButton.Update(); + + Priority(): number { + return this._priority; } + private ApplyTemplate(template: string): string { + const tags = this._tagsPreprocessor(this._source.data); + return TagUtils.ApplyTemplate(template, tags); + } + + } \ No newline at end of file diff --git a/UI/AddButton.ts b/UI/AddButton.ts index ac0a343..3b493a9 100644 --- a/UI/AddButton.ts +++ b/UI/AddButton.ts @@ -123,6 +123,7 @@ export class AddButton extends UIElement { const self = this; htmlElement.onclick = function (event) { + // @ts-ignore if(event.consumed){ return; } diff --git a/UI/Base/FixedUiElement.ts b/UI/Base/FixedUiElement.ts index 39fee94..6680b89 100644 --- a/UI/Base/FixedUiElement.ts +++ b/UI/Base/FixedUiElement.ts @@ -5,7 +5,7 @@ export class FixedUiElement extends UIElement { constructor(html: string) { super(undefined); - this._html = html; + this._html = html ?? ""; } protected InnerRender(): string { diff --git a/UI/Base/UIInputElement.ts b/UI/Base/UIInputElement.ts deleted file mode 100644 index fc4b3a6..0000000 --- a/UI/Base/UIInputElement.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {UIElement} from "../UIElement"; -import {UIEventSource} from "../UIEventSource"; - -export abstract class UIInputElement extends UIElement{ - - abstract GetValue() : UIEventSource; - - - -} \ No newline at end of file diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index 441c63a..47b5011 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -115,4 +115,6 @@ export class FeatureInfoBox extends UIElement { ""; } + + } diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 6542824..e332bc2 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -3,7 +3,7 @@ import {UIEventSource} from "./UIEventSource"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; import {UserDetails} from "../Logic/OsmConnection"; -import {DropDownUI} from "./Base/DropDownUI"; +import {DropDown} from "./Input/DropDown"; import {VariableUiElement} from "./Base/VariableUIElement"; export class ImageUploadFlow extends UIElement { @@ -31,7 +31,7 @@ export class ImageUploadFlow extends UIElement { this._uploadOptions = uploadOptions; this.ListenTo(this._isUploading); - const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ", + const licensePicker = new DropDown("Jouw foto wordt gepubliceerd ", [ {value: "CC0", shown: "in het publiek domein"}, diff --git a/UI/Base/DropDownUI.ts b/UI/Input/DropDown.ts similarity index 97% rename from UI/Base/DropDownUI.ts rename to UI/Input/DropDown.ts index 208ea85..78e2896 100644 --- a/UI/Base/DropDownUI.ts +++ b/UI/Input/DropDown.ts @@ -1,7 +1,7 @@ import {UIEventSource} from "../UIEventSource"; import {UIElement} from "../UIElement"; -export class DropDownUI extends UIElement { +export class DropDown extends UIElement { selectedElement: UIEventSource private _label: string; diff --git a/UI/Base/FixedInputElement.ts b/UI/Input/FixedInputElement.ts similarity index 70% rename from UI/Base/FixedInputElement.ts rename to UI/Input/FixedInputElement.ts index 0d7cf0a..d3ea566 100644 --- a/UI/Base/FixedInputElement.ts +++ b/UI/Input/FixedInputElement.ts @@ -1,10 +1,10 @@ -import {UIInputElement} from "./UIInputElement"; +import {InputElement} from "./InputElement"; import {UIEventSource} from "../UIEventSource"; import {UIElement} from "../UIElement"; -import {FixedUiElement} from "./FixedUiElement"; +import {FixedUiElement} from "../Base/FixedUiElement"; -export class FixedInputElement extends UIInputElement { +export class FixedInputElement extends InputElement { private rendering: UIElement; private value: UIEventSource; @@ -22,4 +22,8 @@ export class FixedInputElement extends UIInputElement { return this.rendering.Render(); } + IsValid(t: T): boolean { + return t === this.value.data; + } + } \ No newline at end of file diff --git a/UI/Input/InputElement.ts b/UI/Input/InputElement.ts new file mode 100644 index 0000000..62e0969 --- /dev/null +++ b/UI/Input/InputElement.ts @@ -0,0 +1,11 @@ +import {UIElement} from "../UIElement"; +import {UIEventSource} from "../UIEventSource"; +import {FixedUiElement} from "../Base/FixedUiElement"; + +export abstract class InputElement extends UIElement{ + + abstract GetValue() : UIEventSource; + + abstract IsValid(t: T) : boolean; + +} \ No newline at end of file diff --git a/UI/Input/InputElementWrapper.ts b/UI/Input/InputElementWrapper.ts new file mode 100644 index 0000000..e04a4f1 --- /dev/null +++ b/UI/Input/InputElementWrapper.ts @@ -0,0 +1,37 @@ +import {InputElement} from "./InputElement"; +import {UIEventSource} from "../UIEventSource"; +import {UIElement} from "../UIElement"; +import {FixedUiElement} from "../Base/FixedUiElement"; + + +export class InputElementWrapper extends InputElement{ + private pre: UIElement ; + private input: InputElement; + private post: UIElement ; + + constructor( + pre: UIElement | string, + input: InputElement, + post: UIElement | string + + ) { + super(undefined); + this.pre = typeof(pre) === 'string' ? new FixedUiElement(pre) : pre + this.input = input; + this.post =typeof(post) === 'string' ? new FixedUiElement(post) : post + } + + + GetValue(): UIEventSource { + return this.input.GetValue(); + } + + protected InnerRender(): string { + return this.pre.Render() + this.input.Render() + this.post.Render(); + } + + IsValid(t: T): boolean { + return this.input.IsValid(t); + } + +} \ No newline at end of file diff --git a/UI/Base/UIRadioButton.ts b/UI/Input/RadioButton.ts similarity index 56% rename from UI/Base/UIRadioButton.ts rename to UI/Input/RadioButton.ts index 12a1e24..b463633 100644 --- a/UI/Base/UIRadioButton.ts +++ b/UI/Input/RadioButton.ts @@ -1,31 +1,27 @@ import {UIElement} from "../UIElement"; import {UIEventSource} from "../UIEventSource"; -import {UIInputElement} from "./UIInputElement"; +import {InputElement} from "./InputElement"; -export class UIRadioButton extends UIInputElement { +export class RadioButton extends InputElement { - public readonly SelectedElementIndex: UIEventSource + private readonly _selectedElementIndex: UIEventSource = new UIEventSource(null); private value: UIEventSource; - private readonly _elements: UIInputElement[] + private readonly _elements: InputElement[] private _selectFirstAsDefault: boolean; - private _valueMapping: (i: number) => T; - constructor(elements: UIInputElement[], + constructor(elements: InputElement[], selectFirstAsDefault = true) { super(undefined); this._elements = elements; this._selectFirstAsDefault = selectFirstAsDefault; const self = this; - this.SelectedElementIndex.addCallback(() => { - self.InnerUpdate(undefined); - }) this.value = - UIEventSource.flatten(this.SelectedElementIndex.map( + UIEventSource.flatten(this._selectedElementIndex.map( (selectedIndex) => { if (selectedIndex !== undefined && selectedIndex !== null) { return elements[selectedIndex].GetValue() @@ -34,16 +30,29 @@ export class UIRadioButton extends UIInputElement { ), elements.map(e => e.GetValue())) ; + this.value.addCallback((t) => { + self.SetCorrectValue(t); + }) - for (let i = 0; i < elements.length; i ++){ - elements[i].onClick(( ) => { - self.SelectedElementIndex.setData(i); + + for (let i = 0; i < elements.length; i++) { + // If an element is clicked, the radio button corresponding with it should be selected as well + elements[i].onClick(() => { + self._selectedElementIndex.setData(i); }); } - } - + + IsValid(t: T): boolean { + for (const inputElement of this._elements) { + if (inputElement.IsValid(t)) { + return true; + } + } + return false; + } + GetValue(): UIEventSource { return this.value; } @@ -70,6 +79,24 @@ export class UIRadioButton extends UIInputElement { return "
" + body + "
"; } + private SetCorrectValue(t: T) { + if (t === undefined) { + return; + } + // We check that what is selected matches the previous rendering + for (let i = 0; i < this._elements.length; i++) { + const e = this._elements[i]; + if (e.IsValid(t)) { + this._selectedElementIndex.setData(i); + e.GetValue().setData(t); + // @ts-ignore + document.getElementById(this.IdFor(i)).checked = true; + return; + } + + } + } + InnerUpdate(htmlElement: HTMLElement) { const self = this; @@ -78,7 +105,7 @@ export class UIRadioButton extends UIInputElement { const el = document.getElementById(self.IdFor(i)); // @ts-ignore if (el.checked) { - self.SelectedElementIndex.setData(i); + self._selectedElementIndex.setData(i); } } } @@ -91,8 +118,9 @@ export class UIRadioButton extends UIInputElement { } ); - if (this.SelectedElementIndex.data == null) { - if (this._selectFirstAsDefault) { + if (this._selectFirstAsDefault) { + this.SetCorrectValue(this.value.data); + if (this._selectedElementIndex.data === null || this._selectedElementIndex.data === undefined) { const el = document.getElementById(this.IdFor(0)); if (el) { // @ts-ignore @@ -100,30 +128,10 @@ export class UIRadioButton extends UIInputElement { checkButtons(); } } - } else { - - // We check that what is selected matches the previous rendering - var checked = -1; - var expected = this.SelectedElementIndex.data; - if (expected) { - - for (let i = 0; i < self._elements.length; i++) { - const el = document.getElementById(self.IdFor(i)); - // @ts-ignore - if (el.checked) { - checked = i; - } - } - if (expected != checked) { - const el = document.getElementById(this.IdFor(expected)); - // @ts-ignore - el.checked = true; - } - } } - } + }; } \ No newline at end of file diff --git a/UI/Base/TextField.ts b/UI/Input/TextField.ts similarity index 57% rename from UI/Base/TextField.ts rename to UI/Input/TextField.ts index 31560d2..32ffb1c 100644 --- a/UI/Base/TextField.ts +++ b/UI/Input/TextField.ts @@ -1,9 +1,10 @@ import {UIElement} from "../UIElement"; import {UIEventSource} from "../UIEventSource"; -import {UIInputElement} from "./UIInputElement"; +import {InputElement} from "./InputElement"; +import {FixedUiElement} from "../Base/FixedUiElement"; -export class TextField extends UIInputElement { +export class TextField extends InputElement { private value: UIEventSource; private mappedValue: UIEventSource; @@ -11,28 +12,32 @@ export class TextField extends UIInputElement { * Pings and has the value data */ public enterPressed = new UIEventSource(undefined); - private _placeholder: UIEventSource; - private _pretext: string; - private _fromString: (string: string) => T; + private _placeholder: UIElement; + private _fromString?: (string: string) => T; + private _toString: (t: T) => string; constructor(options: { - placeholder?: UIEventSource, - toString: (t: T) => string, - fromString: (string: string) => T, - pretext?: string, + placeholder?: string | UIElement, + toString?: (t: T) => string, + fromString?: (string: string) => T, value?: UIEventSource }) { - super(options?.placeholder); + super(undefined); this.value = new UIEventSource(""); this.mappedValue = options?.value ?? new UIEventSource(undefined); + // @ts-ignore + this._fromString = options.fromString ?? ((str) => (str)) this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str))); this.mappedValue.addCallback((t) => this.value.setData(options.toString(t))); - this._placeholder = options?.placeholder ?? new UIEventSource(""); - this._pretext = options?.pretext ?? ""; + this._placeholder = + typeof(options.placeholder) === "string" ? new FixedUiElement(options.placeholder) : + (options.placeholder ?? new FixedUiElement("")); + this._toString = options.toString ?? ((t) => ("" + t)); + const self = this; this.mappedValue.addCallback((t) => { @@ -40,9 +45,10 @@ export class TextField extends UIInputElement { return; } const field = document.getElementById('text-' + this.id); - if (field === undefined && field === null) { + if (field === undefined || field === null) { return; } + // @ts-ignore field.value = options.toString(t); }) } @@ -52,13 +58,16 @@ export class TextField extends UIInputElement { } protected InnerRender(): string { - return this._pretext + "
" + - "" + + return "" + + "" + "
"; } InnerUpdate(htmlElement: HTMLElement) { const field = document.getElementById('text-' + this.id); + if(field === null){ + return; + } const self = this; field.oninput = () => { // @ts-ignore @@ -75,6 +84,14 @@ export class TextField extends UIInputElement { } + IsValid(t: T): boolean { + if(t === undefined || t === null){ + return false; + } + const result = this._toString(t); + return result !== undefined && result !== null; + } + Clear() { const field = document.getElementById('text-' + this.id); if (field !== undefined) { diff --git a/UI/SearchAndGo.ts b/UI/SearchAndGo.ts index 3916168..1ddf995 100644 --- a/UI/SearchAndGo.ts +++ b/UI/SearchAndGo.ts @@ -1,5 +1,5 @@ import {UIElement} from "./UIElement"; -import {TextField} from "./Base/TextField"; +import {TextField} from "./Input/TextField"; import {UIEventSource} from "./UIEventSource"; import {FixedUiElement} from "./Base/FixedUiElement"; import {Geocoding} from "../Logic/Geocoding"; @@ -9,7 +9,10 @@ import {Basemap} from "../Logic/Basemap"; export class SearchAndGo extends UIElement { private _placeholder = new UIEventSource("Zoek naar een locatie...") - private _searchField = new TextField(this._placeholder); + private _searchField = new TextField({ + placeholder: this._placeholder + } + ); private _foundEntries = new UIEventSource([]); private _map: Basemap; @@ -33,7 +36,7 @@ export class SearchAndGo extends UIElement { // Triggered by 'enter' or onclick private RunSearch() { - const searchString = this._searchField.value.data; + const searchString = this._searchField.GetValue().data; this._searchField.Clear(); this._placeholder.setData("Bezig met zoeken..."); const self = this; diff --git a/UI/UIElement.ts b/UI/UIElement.ts index c3a9fdd..b4bdd69 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -1,8 +1,7 @@ import {UIEventSource} from "./UIEventSource"; -import instantiate = WebAssembly.instantiate; export abstract class UIElement { - + private static nextId: number = 0; public readonly id: string; @@ -35,7 +34,7 @@ export abstract class UIElement { this.Update(); return this; } - + Update(): void { let element = document.getElementById(this.id); if (element === null || element === undefined) { @@ -121,5 +120,6 @@ export abstract class UIElement { public IsEmpty(): boolean { return this.InnerRender() === ""; } +} + -} \ No newline at end of file diff --git a/test.ts b/test.ts index eb72b65..d71a3ff 100644 --- a/test.ts +++ b/test.ts @@ -7,33 +7,19 @@ import {OsmLink} from "./Customizations/Questions/OsmLink"; import {ConfirmDialog} from "./UI/ConfirmDialog"; import {Imgur} from "./Logic/Imgur"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; -import {UIRadioButton} from "./UI/Base/UIRadioButton"; -import {FixedInputElement} from "./UI/Base/FixedInputElement"; -import {TextField} from "./UI/Base/TextField"; +import {TextField} from "./UI/Input/TextField"; +import {FixedInputElement} from "./UI/Input/FixedInputElement"; +import {RadioButton} from "./UI/Input/RadioButton"; -const buttons = new UIRadioButton( +const buttons = new RadioButton( [new FixedInputElement("Five", 5), new FixedInputElement("Ten", 10), new TextField({ fromString: (str) => parseInt(str), toString: (i) => ("" + i), }) - ] + ], false ).AttachTo("maindiv"); -buttons.GetValue().addCallback(console.log); -buttons.GetValue().setData(10) - -const value = new TextField({ - fromString: (str) => parseInt(str), - toString: (i) => { - if(isNaN(i)){ - return "" - } - return ("" + i) - }, -}).AttachTo("extradiv").GetValue(); - -value.setData(42); -value.addCallback(console.log) \ No newline at end of file +buttons.GetValue().addCallback(console.log); \ No newline at end of file