From 1343955f442c1d431a366369d5cad6832d5d71f3 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 27 Jul 2020 01:19:38 +0200 Subject: [PATCH] Translations --- Customizations/Layers/Bookcases.ts | 19 ++++++++------ Customizations/TagRendering.ts | 41 ++++++++++++++++++------------ UI/Image/ImgurImage.ts | 2 +- UI/UIElement.ts | 6 +++-- UI/i18n/Translations.ts | 39 +++++++++++++++++++++++++--- test.ts | 9 ------- 6 files changed, 76 insertions(+), 40 deletions(-) diff --git a/Customizations/Layers/Bookcases.ts b/Customizations/Layers/Bookcases.ts index c5c3bec4c4..868ce3b648 100644 --- a/Customizations/Layers/Bookcases.ts +++ b/Customizations/Layers/Bookcases.ts @@ -4,6 +4,7 @@ import {TagRenderingOptions} from "../TagRendering"; import {NameInline} from "../Questions/NameInline"; import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload"; import Translations from "../../UI/i18n/Translations"; +import T from "../../UI/i18n/Translation"; export class Bookcases extends LayerDefinition { @@ -16,36 +17,38 @@ export class Bookcases extends LayerDefinition { this.overpassFilter = new Tag("amenity", "public_bookcase"); this.minzoom = 11; + const Tr = Translations.t; + const Trq = Tr.bookcases.questions; this.title = new NameInline(Translations.t.bookcases.bookcase); this.elementsToShow = [ new ImageCarouselWithUploadConstructor(), new TagRenderingOptions({ - question: "Heeft dit boekenruilkastje een naam?", + question: Trq.hasName, freeform: { key: "name", - template: "De naam is $$$", + template: "$$$", renderTemplate: "", // We don't actually render it, only ask placeholder: "", - extraTags: new Tag("noname","") + extraTags: new Tag("noname", "") }, mappings: [ - {k: new Tag("noname", "yes"), txt: "Neen, er is geen naam aangeduid op het boekenruilkastje"}, + {k: new Tag("noname", "yes"), txt: Trq.noname}, ] }), new TagRenderingOptions( { - question: "Hoeveel boeken passen in dit boekenruilkastje?", + question: Trq.capacity, freeform: { - renderTemplate: "Er passen {capacity} boeken in dit boekenruilkastje", - template: "Er passen $nat$ boeken in dit boekenruilkastje", + renderTemplate: Trq.capacityRender, + template: Trq.capacityInput, key: "capacity", placeholder: "aantal" }, } ), new TagRenderingOptions({ - question: "Wat voor soort boeken heeft dit boekenruilkastje?", + question: Trq.bookkinds, mappings: [ {k: new Tag("books", "children"), txt: "Voornamelijk kinderboeken"}, {k: new Tag("books", "adults"), txt: "Voornamelijk boeken voor volwassenen"}, diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index 26f2010fb3..3316421206 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -28,10 +28,11 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor { "int": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)), "nat": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)) && Number(str) > 0, "float": (str) => !isNaN(Number(str)), + "pfloat": (str) => !isNaN(Number(str)) && Number(str) > 0, "email": (str) => EmailValidator.validate(str), "phone": (str, country) => { return parsePhoneNumberFromString(str, country.toUpperCase())?.isValid() ?? false; - } + }, } public static formatting = { @@ -212,9 +213,7 @@ class TagRendering extends UIElement implements TagDependantUIElement { this._userDetails = changes.login.userDetails; this.ListenTo(this._userDetails); - if (options.question !== undefined) { - this._question = Translations.W(options.question); - } + this._priority = options.priority ?? 0; this._tagsPreprocessor = function (properties) { if (options.tagsPreprocessor === undefined) { @@ -227,6 +226,10 @@ class TagRendering extends UIElement implements TagDependantUIElement { options.tagsPreprocessor(newTags); return newTags; }; + + if (options.question !== undefined) { + this._question = this.ApplyTemplate(options.question); + } this._mapping = []; this._freeform = options.freeform; @@ -497,7 +500,8 @@ class TagRendering extends UIElement implements TagDependantUIElement { if (this.IsQuestioning() || this._editMode.data) { // Not yet known or questioning, we have to ask a question - const question = this._question.Render(); + const question = + this.ApplyTemplate(this._question).Render(); return "
" + "" + question + "" + @@ -535,20 +539,25 @@ class TagRendering extends UIElement implements TagDependantUIElement { } private ApplyTemplate(template: string | UIElement): UIElement { - if(template === undefined || template === null){ + if (template === undefined || template === null) { throw "Trying to apply a template, but the template is null/undefined" } - const tags = this._tagsPreprocessor(this._source.data); - if (template instanceof UIElement) { - template = template.Render(); - } - return new FixedUiElement(TagUtils.ApplyTemplate(template, tags)); + + const contents = Translations.W(template).map(contents => + { + let templateStr = ""; + if (template instanceof UIElement) { + templateStr = template.Render(); + } else { + templateStr = template; + } + const tags = this._tagsPreprocessor(this._source.data); + return TagUtils.ApplyTemplate(templateStr, tags); + }, [this._source] + ); + return new VariableUiElement(contents); } - InnerUpdate(htmlElement: HTMLElement) { - super.InnerUpdate(htmlElement); - this._questionElement.Update(); // Another manual update for them - } - + } \ No newline at end of file diff --git a/UI/Image/ImgurImage.ts b/UI/Image/ImgurImage.ts index c2d104135e..01dd4798a5 100644 --- a/UI/Image/ImgurImage.ts +++ b/UI/Image/ImgurImage.ts @@ -4,7 +4,7 @@ import {LicenseInfo} from "../../Logic/Wikimedia"; import {Imgur} from "../../Logic/Imgur"; -export class ImgurImage extends UIElement { +export class ImgurImage extends UIElement { /*** diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 11316bef01..48b42687e5 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -1,7 +1,7 @@ import {UIEventSource} from "./UIEventSource"; import {TagDependantUIElement} from "../Customizations/UIElementConstructor"; -export abstract class UIElement { +export abstract class UIElement extends UIEventSource{ private static nextId: number = 0; @@ -14,6 +14,7 @@ export abstract class UIElement { public static runningFromConsole = false; protected constructor(source: UIEventSource) { + super(""); this.id = "ui-element-" + UIElement.nextId; this._source = source; UIElement.nextId++; @@ -50,7 +51,8 @@ export abstract class UIElement { // The element is not painted return; } - element.innerHTML = this.InnerRender(); + this.setData(this.InnerRender()); + element.innerHTML = this.data; if (this._hideIfEmpty) { if (element.innerHTML === "") { element.parentElement.style.display = "none"; diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index ca7bbfe16b..fca9cb4f4e 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -327,8 +327,39 @@ export default class Translations { } ), bookcase: new T({ - nl: "Boekenruilkastje" - }) + nl: "Boekenruilkastje", + en: "Public bookcase" + }), + questions: { + hasName: new T( + { + nl: "Heeft dit boekenruilkastje een naam?", + en: "Does this bookcase have a name?" + }), + noname: new T({ + nl: "Neen, er is geen naam aangeduid op het boekenruilkastje", + en: "No, there is no clearly visible name on the public bookcase" + }, + ), + capacity: new T({ + nl: "Hoeveel boeken passen in dit boekenruilkastje?", + en: "How much books fit into this public bookcase?" + }), + capacityRender: new T({ + nl: "Er passen {capacity} boeken in dit boekenruilkastje", + en: "{capacity} books fit in this bookcase" + }), + capacityInput: new T({ + nl: "Er passen $nat$ boeken in dit boekenruilkastje", + en: "$nat$ books fit into this public bookcase" + }), + bookkinds: new T({ + nl: "Wat voor soort boeken heeft dit boekenruilkastje?", + en: "What kind of books can be found in this public bookcase" + }) + } + + }, image: { @@ -469,8 +500,8 @@ export default class Translations { }), phoneNumberIs: new T({ - en: "The phone number of this {category} is {phone}", - nl: "Het telefoonnummer van {category} is {phone}" + en: "The phone number of this {category} is {phone}", + nl: "Het telefoonnummer van {category} is {phone}" }) } diff --git a/test.ts b/test.ts index 0ffeb9fd48..e69de29bb2 100644 --- a/test.ts +++ b/test.ts @@ -1,9 +0,0 @@ -import {DropDown} from "./UI/Input/DropDown"; -import {UIEventSource} from "./UI/UIEventSource"; - -const source = new UIEventSource(10) - -const dd = new DropDown("Test", [ - {value: 5, shown: "five"}, - {value: 10, shown: "ten"} -], source).AttachTo("maindiv")