diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index 67b2b2864..6c8eb3965 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -463,7 +463,7 @@ class TagRendering extends UIElement implements TagDependantUIElement { return "
" + "" + question + "" + - (question !== "" ? "
" : "") + + (this._question.IsEmpty() ? "" : "
") + "
" + this._questionElement.Render() + "
" + this._skipButton.Render() + this._saveButton.Render() + @@ -471,10 +471,11 @@ class TagRendering extends UIElement implements TagDependantUIElement { } if (this.IsKnown()) { - const html = this.RenderAnwser().Render(); - if (html == "") { + const answer = this.RenderAnwser() + if (answer.IsEmpty()) { return ""; } + const html = answer.Render(); let editButton = ""; if (this._userDetails.data.loggedIn && this._question !== undefined) { editButton = this._editButton.Render(); diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 1a628ad7b..8cf558b46 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -31,11 +31,12 @@ export class ImageUploadFlow extends UIElement { this._uploadOptions = uploadOptions; this.ListenTo(this._isUploading); - const licensePicker = new DropDown("The picture is published ", + const licensePicker = new DropDown( + Translations.general.picture.licenseIntro, [ - {value: "CC0", shown: "in the public domain"}, - {value: "CC-BY-SA 4.0", shown: "with a CC-BY-SA license"}, - {value: "CC-BY 4.0", shown: "with a CC-BY license"} + {value: "CC0", shown: Translations.general.picture.publicDomain}, + {value: "CC-BY-SA 4.0", shown:Translations.general.picture.ccbysa}, + {value: "CC-BY 4.0", shown:Translations.general.picture.ccby} ], preferedLicense ); @@ -67,7 +68,7 @@ export class ImageUploadFlow extends UIElement { "
" + "upload image " + - ""+Translations.general.uploadAPicture.R()+"" + + ""+Translations.general.picture.uploadAPicture.R()+"" + "
" + "
" + diff --git a/UI/Input/DropDown.ts b/UI/Input/DropDown.ts index dfbcafd9f..fc7012abc 100644 --- a/UI/Input/DropDown.ts +++ b/UI/Input/DropDown.ts @@ -3,27 +3,31 @@ import {UIElement} from "../UIElement"; import {InputElement} from "./InputElement"; import instantiate = WebAssembly.instantiate; import {FixedUiElement} from "../Base/FixedUiElement"; +import Translations from "../i18n/Translations"; export class DropDown extends InputElement { - private readonly _label: string; + private readonly _label: UIElement; private readonly _values: { value: T; shown: UIElement }[]; private readonly _value; - constructor(label: string, + constructor(label: string | UIElement, values: { value: T, shown: string | UIElement }[], value: UIEventSource = undefined) { super(undefined); this._value = value ?? new UIEventSource(undefined); - this._label = label; + this._label = Translations.W(label); this._values = values.map(v => { return { value: v.value, - shown: v.shown instanceof UIElement ? v.shown : new FixedUiElement(v.shown) + shown: Translations.W(v.shown) } } ); + for (const v of this._values) { + this.ListenTo(v.shown._source); + } this.ListenTo(this._value) } @@ -60,7 +64,7 @@ export class DropDown extends InputElement { } return "
" + - "" + + "" + "" + diff --git a/UI/Input/TextField.ts b/UI/Input/TextField.ts index 44a816b16..f025b28be 100644 --- a/UI/Input/TextField.ts +++ b/UI/Input/TextField.ts @@ -2,6 +2,7 @@ import {UIElement} from "../UIElement"; import {UIEventSource} from "../UIEventSource"; import {InputElement} from "./InputElement"; import {FixedUiElement} from "../Base/FixedUiElement"; +import Translations from "../i18n/Translations"; export class TextField extends InputElement { @@ -35,12 +36,8 @@ export class TextField extends InputElement { this.mappedValue.addCallback((t) => this.value.setData(options.toString(t))); - options.placeholder = options.placeholder ?? ""; - if (options.placeholder instanceof UIElement) { - this._placeholder = options.placeholder - } else { - this._placeholder = new FixedUiElement(options.placeholder); - } + this._placeholder = Translations.W(options.placeholder ?? ""); + this.ListenTo(this._placeholder._source); this._toString = options.toString ?? ((t) => ("" + t)); diff --git a/UI/SearchAndGo.ts b/UI/SearchAndGo.ts index 679764e40..d5fb27528 100644 --- a/UI/SearchAndGo.ts +++ b/UI/SearchAndGo.ts @@ -5,13 +5,18 @@ import {FixedUiElement} from "./Base/FixedUiElement"; import {Geocoding} from "../Logic/Geocoding"; import {Basemap} from "../Logic/Basemap"; import {VariableUiElement} from "./Base/VariableUIElement"; +import Translation from "./i18n/Translation"; +import Locale from "./i18n/Locale"; +import Translations from "./i18n/Translations"; export class SearchAndGo extends UIElement { - private _placeholder = new UIEventSource("Search a location...") + private _placeholder = new UIEventSource(Translations.general.search.search) private _searchField = new TextField({ - placeholder: new VariableUiElement(this._placeholder), + placeholder: new VariableUiElement( + this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language]) + ), fromString: str => str, toString: str => str } @@ -41,12 +46,12 @@ export class SearchAndGo extends UIElement { private RunSearch() { const searchString = this._searchField.GetValue().data; this._searchField.Clear(); - this._placeholder.setData("Searching..."); + this._placeholder.setData(Translations.general.search.searching); const self = this; Geocoding.Search(searchString, this._map, (result) => { if (result.length == 0) { - this._placeholder.setData("Niets gevonden"); + this._placeholder.setData(Translations.general.search.nothing); return; } @@ -56,16 +61,15 @@ export class SearchAndGo extends UIElement { [bb[1], bb[3]] ] self._map.map.fitBounds(bounds); - this._placeholder.setData("Search a location..."); + this._placeholder.setData(Translations.general.search.search); }, () => { - this._placeholder.setData("Something went wrong. Try again."); + this._placeholder.setData(Translations.general.search.error); }); } InnerRender(): string { - // "Search " + return this._searchField.Render() + this._goButton.Render(); diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index 8536c01e3..c793f0f36 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -24,15 +24,53 @@ export default class Translations { en: "Click here to login with OpenStreetMap", nl: "Klik hier op je aan te melden met OpenStreetMap" }), - uploadAPicture: new Translation({ - en: "Add a picture", - nl: "Voeg een foto toe" - }) + search: { + search: new Translation({ + en: "Search a location", + nl: "Zoek naar een locatie" + }), + searching: new Translation({ + en: "Searching...", + nl: "Aan het zoeken..." + }), + nothing: new Translation({ + en: "Nothing found...", + nl: "Niet gevonden..." + }), + error: new Translation({ + en: "Something went wrong...", + nl: "Niet gelukt..." + }) + + }, + + picture: { + uploadAPicture: new Translation({ + en: "Add a picture", + nl: "Voeg een foto toe" + + }), + licenseIntro: new Translation({ + en: "Your picture is published", + nl: "Je foto wordt gepubliceerd" + }), + publicDomain: new Translation({ + en: "in the public domain", + nl: "in het publiek domein" + }), + ccby: new Translation({ + en: "with a CC-BY license", + nl: "met een CC-BY licentie" + }), + ccbysa: new Translation({ + en: "with a CC-BY-SA license", + nl: "met een CC-BY-SA licentie" + }) + } } - public static W(s: string | UIElement): - UIElement { + public static W(s: string | UIElement): UIElement { if (s instanceof UIElement) { return s; }