diff --git a/Customizations/Layers/GrbToFix.ts b/Customizations/Layers/GrbToFix.ts index de444aa..84b277f 100644 --- a/Customizations/Layers/GrbToFix.ts +++ b/Customizations/Layers/GrbToFix.ts @@ -51,7 +51,7 @@ export class GrbToFix extends LayerDefinition { }, question: "Wat is het huisnummer?" } - ).OnlyShowIf(new Tag("fixme","*","")), + ), new TagRenderingOptions({ diff --git a/State.ts b/State.ts index 6eb66a2..2912ce0 100644 --- a/State.ts +++ b/State.ts @@ -24,7 +24,7 @@ export class State { // The singleton of the global state public static state: State; - public static vNumber = "0.0.7"; + public static vNumber = "0.0.7a ¿hablas español?"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/UI/ShareScreen.ts b/UI/ShareScreen.ts index ac495fb..2aa7f9e 100644 --- a/UI/ShareScreen.ts +++ b/UI/ShareScreen.ts @@ -12,6 +12,8 @@ import {FilteredLayer} from "../Logic/FilteredLayer"; import {Utils} from "../Utils"; import {UIEventSource} from "../Logic/UIEventSource"; import {UserDetails} from "../Logic/Osm/OsmConnection"; +import Translation from "./i18n/Translation"; +import {SubtleButton} from "./Base/SubtleButton"; export class ShareScreen extends UIElement { @@ -20,7 +22,7 @@ export class ShareScreen extends UIElement { private _options: UIElement; private _iframeCode: UIElement; private _link: UIElement; - private _linkStatus: UIElement; + private _linkStatus: UIEventSource; private _editLayout: UIElement; constructor() { @@ -83,7 +85,7 @@ export class ShareScreen extends UIElement { } return "layer-"+flayer.layerDef.id+"="+flayer.isDisplayed.data } - + optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => { if (includeLayerSelection) { return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&") @@ -93,21 +95,22 @@ export class ShareScreen extends UIElement { }, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed))); - const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"}, - {urlName: "fs-search", human: "Enable the search bar"}, - {urlName: "fs-welcome-message", human: "Enable the welcome message"}, - {urlName: "fs-layers", human: "Enable thelayer control"}, - {urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true}, - {urlName: "fs-add-new", human: "Enable the 'add new POI' button"}, - {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"}, + const switches = [ + {urlName: "fs-userbadge", human: tr.fsUserbadge}, + {urlName: "fs-search", human: tr.fsSearch}, + {urlName: "fs-welcome-message", human: tr.fsWelcomeMessage}, + {urlName: "fs-layers", human: tr.fsLayers}, + {urlName: "layer-control-toggle", human: tr.fsLayerControlToggle, reverse: true}, + {urlName: "fs-addXXXnew", human: tr.fsAddNew}, + {urlName: "fs-geolocation", human: tr.fsGeolocation}, ] for (const swtch of switches) { const checkbox = new CheckBox( - new Combine([Img.checkmark, swtch.human]), - new Combine([Img.no_checkmark, swtch.human]), + new Combine([Img.checkmark, Translations.W(swtch.human)]), + new Combine([Img.no_checkmark, Translations.W(swtch.human)]), swtch.reverse ? false : true ); optionCheckboxes.push(checkbox); @@ -171,16 +174,19 @@ export class ShareScreen extends UIElement { if (userDetails.csCount <= State.userJourney.themeGeneratorUnlock) { return ""; } - return `

Edit this theme

` + - `Click here to edit` + + return new SubtleButton("./assets/pencil.svg", + new Combine([tr.editThisTheme.SetClass("bold"), "
", + tr.editThemeDescription]), + {url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}).Render(); } )); } - const status = new UIEventSource(" "); - this._linkStatus = new VariableUiElement(status); + this._linkStatus = new UIEventSource(""); + this.ListenTo(this._linkStatus); const self = this; this._link = new VariableUiElement( url.map((url) => { @@ -195,7 +201,6 @@ export class ShareScreen extends UIElement { } function rejected() { - status.setData("Copying to clipboard...") var copyText = document.getElementById("code-link--copyable"); // @ts-ignore @@ -204,13 +209,17 @@ export class ShareScreen extends UIElement { copyText.setSelectionRange(0, 99999); /*For mobile devices*/ document.execCommand("copy"); - status.setData("Copied to clipboard") + const copied = tr.copiedToClipboard; + copied.SetClass("thanks") + self._linkStatus.setData(copied); } try { navigator.share(shareData) .then(() => { - status.setData("Thanks for sharing!") + const thx = tr.thanksForSharing; + thx.SetClass("thanks"); + this._linkStatus.setData(thx); }, rejected) .catch(rejected) } catch (err) { @@ -226,10 +235,10 @@ export class ShareScreen extends UIElement { const tr = Translations.t.general.sharescreen; return new VerticalCombine([ + this._editLayout, tr.intro, this._link, - this._linkStatus, - this._editLayout, + Translations.W(this._linkStatus.data), tr.addToHomeScreen, tr.embedIntro, this._options, diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index dd3a15a..bf4a7f3 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -995,6 +995,51 @@ export default class Translations { es: "

Inclúyelo en tu página web

Incluye este mapa en tu página web.
Te animamos a que lo hagas, no hace falta que pidas permiso.
Es gratis, y siempre lo será. A más gente que lo use más valioso será.", fr: "

Incorporer à votre website

AJouter la carte à votre website.
On vous en encourage - pas besoin de permission.
C'est gratuit et pour toujours. Le plus de personnes l'utilisent, le mieux ce sera.", nl: "

Plaats dit op je website

Voeg dit kaartje toe op je eigen website.
We moedigen dit zelfs aan - je hoeft geen toestemming te vragen.
Het is gratis en zal dat altijd blijven. Hoe meer het gebruikt wordt, hoe waardevoller" + }), + copiedToClipboard: new T({ + en: "Link copied to clipboard", + nl: "Link gekopieerd naar klembord" + }), + thanksForSharing: new T({ + en: "Thanks for sharing!", + nl: "Bedankt om te delen!" + }), + editThisTheme: new T({ + en: "Edit this theme", + nl: "Pas dit thema aan" + }), + editThemeDescription: new T({ + en: "Add or change questions to this map theme", + nl: "Pas vragen aan of voeg vragen toe aan dit kaartthema", + }), + fsUserbadge: new T({ + en: "Enable the login-button", + nl: "Activeer de login-knop" + }), + fsSearch: new T({ + en: "Enable the search bar", + nl: "Activeer de zoekbalk" + }), + fsWelcomeMessage: new T({ + en: "Show the welcome message popup and associated tabs", + nl: "Toon het welkomstbericht en de bijhorende tabbladen " + }), + fsLayers: new T({ + en: "Enable thelayer control", + nl: "Toon de knop voor laagbediening" + }), + + fsLayerControlToggle: new T({ + en: "Start with the layer control expanded", + nl: "Toon de laagbediening meteen volledig" + }), + fsAddNew: new T({ + en: "Enable the 'add new POI' button", + nl: "Activeer het toevoegen van nieuwe POI" + }), + fsGeolocation: new T({ + en: "Enable the 'geolocate-me' button (mobile only)", + nl: "Toon het knopje voor geolocalisatie (enkel op mobiel)" }) }, morescreen: { @@ -1070,7 +1115,11 @@ export default class Translations { es: "No se han seleccionado etiquetas", ca: "No s\'han seleccionat etiquetes" }), - customThemeIntro: new T({en: "

Custom themes

These are previously visited user-generated themes."}) + customThemeIntro: new T({ + en: "

Custom themes

These are previously visited user-generated themes.", + nl: "

Onofficiële themea's

Je bezocht deze thema's gemaakt door andere OpenStreetMappers eerder" + }), + }, favourite: { diff --git a/index.css b/index.css index d928eb7..f2abaec 100644 --- a/index.css +++ b/index.css @@ -94,6 +94,10 @@ form { color: #999; } +.bold { + font-weight: bold; +} + .thanks { background-color: #43d904; font-weight: bold;