From fd6f77c98e58085cd8d8642319e3539d521cf9b8 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 21 Jul 2020 01:37:48 +0200 Subject: [PATCH] Playing around with translatiosn --- Customizations/Layout.ts | 26 ++++++++++--------- Customizations/Layouts/Cyclofix.ts | 12 ++++++--- .../Questions/bike/StationOperator.ts | 4 +-- UI/Base/Combine.ts | 19 ++++++++++++++ UI/UIElement.ts | 7 ++++- index.css | 2 +- index.ts | 20 +++----------- 7 files changed, 54 insertions(+), 36 deletions(-) create mode 100644 UI/Base/Combine.ts diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index a883bd8..4645c4d 100644 --- a/Customizations/Layout.ts +++ b/Customizations/Layout.ts @@ -1,6 +1,8 @@ import {LayerDefinition} from "./LayerDefinition"; import { UIElement } from "../UI/UIElement"; -import { FixedUiElement } from "../UI/Base/FixedUiElement"; +import {FixedUiElement} from "../UI/Base/FixedUiElement"; +import Translation from "../UI/i18n/Translation"; +import Translations from "../UI/i18n/Translations"; /** * A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers). @@ -10,14 +12,14 @@ export class Layout { public title: UIElement; public layers: LayerDefinition[]; public welcomeMessage: UIElement; - public gettingStartedPlzLogin: string; - public welcomeBackMessage: string; + public gettingStartedPlzLogin: UIElement; + public welcomeBackMessage: UIElement; + public welcomeTail: UIElement; public startzoom: number; public supportedLanguages: string[]; public startLon: number; public startLat: number; - public welcomeTail: string; public locationContains: string[]; @@ -43,21 +45,21 @@ export class Layout { startLat: number, startLon: number, welcomeMessage: UIElement | string, - gettingStartedPlzLogin: string = "Please login to get started", - welcomeBackMessage: string = "You are logged in. Welcome back!", - welcomeTail: string = "" + gettingStartedPlzLogin: UIElement | string = "Please login to get started", + welcomeBackMessage: UIElement | string = "You are logged in. Welcome back!", + welcomeTail: UIElement | string = "" ) { this.supportedLanguages = supportedLanguages; - this.title = typeof(title) === 'string' ? new FixedUiElement(title) : title; + this.title = typeof (title) === 'string' ? new FixedUiElement(title) : title; this.startLon = startLon; this.startLat = startLat; this.startzoom = startzoom; this.name = name; this.layers = layers; - this.welcomeMessage = typeof(welcomeMessage) === 'string' ? new FixedUiElement(welcomeMessage) : welcomeMessage; - this.gettingStartedPlzLogin = gettingStartedPlzLogin; - this.welcomeBackMessage = welcomeBackMessage; - this.welcomeTail = welcomeTail; + this.welcomeMessage =Translations.W(welcomeMessage) + this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin); + this.welcomeBackMessage = Translations.W(welcomeBackMessage); + this.welcomeTail = Translations.W(welcomeTail); } } diff --git a/Customizations/Layouts/Cyclofix.ts b/Customizations/Layouts/Cyclofix.ts index 86edf04..32a7ad5 100644 --- a/Customizations/Layouts/Cyclofix.ts +++ b/Customizations/Layouts/Cyclofix.ts @@ -6,6 +6,7 @@ import {GhostBike} from "../Layers/GhostBike"; import Translations from "../../UI/i18n/Translations"; import {DrinkingWater} from "../Layers/DrinkingWater"; import {BikeShop} from "../Layers/BikeShop" +import Combine from "../../UI/Base/Combine"; export default class Cyclofix extends Layout { @@ -18,10 +19,13 @@ export default class Cyclofix extends Layout { 16, 50.8465573, 4.3516970, - "

" + Translations.t.cyclofix.title.Render() + "

\n" + - "\n" + - `

${Translations.t.cyclofix.description.Render()}

` - , + new Combine([ + "

", + Translations.t.cyclofix.title, + "


", + Translations.t.cyclofix.description, + "

" + ]), "", ""); } } diff --git a/Customizations/Questions/bike/StationOperator.ts b/Customizations/Questions/bike/StationOperator.ts index 5d09434..94f1efb 100644 --- a/Customizations/Questions/bike/StationOperator.ts +++ b/Customizations/Questions/bike/StationOperator.ts @@ -18,8 +18,8 @@ export default class BikeStationOperator extends TagRenderingOptions { ], freeform: { key: "operator", - template: to.template, - renderTemplate: to.render, + template: to.template.txt, + renderTemplate: to.render.txt, placeholder: "organisatie" } }); diff --git a/UI/Base/Combine.ts b/UI/Base/Combine.ts new file mode 100644 index 0000000..83f1033 --- /dev/null +++ b/UI/Base/Combine.ts @@ -0,0 +1,19 @@ +import {UIElement} from "../UIElement"; +import Translations from "../i18n/Translations"; + +export default class Combine extends UIElement { + private uiElements: UIElement[]; + + constructor(uiElements: (string | UIElement)[]) { + super(undefined); + this.uiElements = uiElements.map(Translations.W); + } + + InnerRender(): string { + let elements = ""; + for (const element of this.uiElements) { + elements += element.Render(); + } + return elements; + } +} \ No newline at end of file diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 8e1ff27..6d7b7fc 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -13,18 +13,23 @@ export abstract class UIElement { this.id = "ui-element-" + UIElement.nextId; this._source = source; UIElement.nextId++; + if (UIElement.nextId % 100 == 0) { + + console.log(UIElement.nextId) + } this.ListenTo(source); } public ListenTo(source: UIEventSource) { if (source === undefined) { - return; + return this; } const self = this; source.addCallback(() => { self.Update(); }) + return this; } private _onClick: () => void; diff --git a/index.css b/index.css index 1131c59..82a2823 100644 --- a/index.css +++ b/index.css @@ -243,7 +243,7 @@ form { cursor: pointer; position: absolute; margin-left: 2em; - margin-top: 0.5em; + margin-top: 3em; } #messagesbox-wrapper { diff --git a/index.ts b/index.ts index 0cdd19d..cdca924 100644 --- a/index.ts +++ b/index.ts @@ -164,7 +164,6 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement( // ------------- Setup the layers ------------------------------- -const controls = {}; const addButtons: { name: string, icon: string, @@ -194,8 +193,6 @@ for (const layer of layoutToUse.layers) { const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo); - controls[layer.name] = flayer.isDisplayed; - const addButton = { name: layer.name, icon: layer.icon, @@ -272,17 +269,17 @@ new CollapseButton("messagesbox") var generateWelcomeMessage = () => { return new VariableUiElement( osmConnection.userDetails.map((userdetails) => { - var login = layoutToUse.gettingStartedPlzLogin; + var login = layoutToUse.gettingStartedPlzLogin.Render(); if (userdetails.loggedIn) { - login = layoutToUse.welcomeBackMessage; + login = layoutToUse.welcomeBackMessage.Render(); } return "
" + - layoutToUse.welcomeMessage.Render() + login + layoutToUse.welcomeTail + + layoutToUse.welcomeMessage.Render() + login + layoutToUse.welcomeTail.Render() + "
"; }), function () { osmConnection.registerActivateOsmAUthenticationClass() - }); + }).ListenTo(Locale.language); } generateWelcomeMessage().AttachTo("messagesbox"); fullScreenMessage.setData(generateWelcomeMessage()); @@ -314,12 +311,3 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button"); locationControl.ping(); messageBox.update(); - -/* -const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement -eLanguageSelect.addEventListener('input', e => { - // @ts-ignore - const selectedLanguage = e.target.value as string - Locale.language.setData(selectedLanguage.toLowerCase()) -}) -*/ \ No newline at end of file