Finish up strings

src/components/MapMaplibreGl.tsx

@@ -155,7 +155,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
 
     this.initGeocoder(map);
 
-    const zoomControl = new ZoomControl();
+    const zoomControl = new ZoomControl(this.props.t("Zoom:"));
     map.addControl(zoomControl, 'top-right');
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});

src/components/ModalExport.tsx

@@ -102,6 +102,7 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 
   render() {
     const t = this.props.t;
+    const fsa = fieldSpecAdditional(t);
     return <Modal
       data-wd-key="modal:export"
       isOpen={this.props.isOpen}
@@ -118,14 +119,14 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 
         <div>
           <FieldString
-            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
-            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+            label={fsa.maputnik.maptiler_access_token.label}
+            fieldSpec={fsa.maputnik.maptiler_access_token}
             value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
           />
           <FieldString
-            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
-            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+            label={fsa.maputnik.thunderforest_access_token.label}
+            fieldSpec={fsa.maputnik.thunderforest_access_token}
             value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
           />

src/components/ModalSettings.tsx

@@ -97,6 +97,7 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
   render() {
     const metadata = this.props.mapStyle.metadata || {} as any;
     const {t, onChangeMetadataProperty, mapStyle} = this.props;
+    const fsa = fieldSpecAdditional(t);
 
     const light = this.props.mapStyle.light || {};
     const transition = this.props.mapStyle.transition || {};
@@ -140,16 +141,16 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
         />
 
         <FieldString
-          label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
-          fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+          label={fsa.maputnik.maptiler_access_token.label}
+          fieldSpec={fsa.maputnik.maptiler_access_token}
           data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
           value={metadata['maputnik:openmaptiles_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
 
         <FieldString
-          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
-          fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          label={fsa.maputnik.thunderforest_access_token.label}
+          fieldSpec={fsa.maputnik.thunderforest_access_token}
           data-wd-key="modal:settings.maputnik:thunderforest_access_token"
           value={metadata['maputnik:thunderforest_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
@@ -258,8 +259,8 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
         />
 
         <FieldSelect
-          label={fieldSpecAdditional.maputnik.style_renderer.label}
-          fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
+          label={fsa.maputnik.style_renderer.label}
+          fieldSpec={fsa.maputnik.style_renderer}
           data-wd-key="modal:settings.maputnik:renderer"
           options={[
             ['mlgljs', t('MapLibreGL JS')],

src/i18n.ts

@@ -16,6 +16,8 @@ i18n
   .use(initReactI18next) // required to initialize react-i18next
   .init({
     supportedLngs: Object.keys(supportedLanguages),
+    keySeparator: false, // we do not use keys in form messages.welcome
+    nsSeparator: false,
     interpolation: {
       escapeValue: false // React already escapes for us
     }

src/libs/field-spec-additional.ts

@@ -1,18 +1,20 @@
-const spec = {
+import { TFunction } from "i18next";
+
+const spec = (t: TFunction) => ({
   maputnik: {
     maptiler_access_token: {
-      label: "MapTiler Access Token",
-      doc: "Public access token for MapTiler Cloud."
+      label: t("MapTiler Access Token"),
+      doc: t("Public access token for MapTiler Cloud.")
     },
     thunderforest_access_token: {
-      label: "Thunderforest Access Token",
-      doc: "Public access token for Thunderforest services."
+      label: t("Thunderforest Access Token"),
+      doc: t("Public access token for Thunderforest services.")
     },
     style_renderer: {
-      label: "Style Renderer",
-      doc: "Choose the default Maputnik renderer for this style.",
+      label: t("Style Renderer"),
+      doc: t("Choose the default Maputnik renderer for this style."),
     },
   }
-}
+})
 
 export default spec;

src/libs/zoomcontrol.ts

@@ -5,13 +5,15 @@ export default class ZoomControl {
   _container: HTMLDivElement | undefined = undefined;
   _textEl: HTMLSpanElement | null = null;
 
+  constructor(public label: string) {}
+
   onAdd(map: Map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
     this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this._container.innerHTML = `
-      Zoom: <span></span>
+      ${this.label} <span></span>
     `;
     this._textEl = this._container.querySelector("span");
 

src/locales/en/translation.json

@@ -81,9 +81,9 @@
   "Collapse": "Collapse",
   "Expand": "Expand",
   "Add Layer": "Add Layer",
+  "Zoom:": "Zoom:",
   "Search": "Search",
   "Close popup": "Close popup",
-  "Zoom:": "Zoom:",
   "cursor:": "cursor:",
   "center:": "center:",
   "rotation:": "rotation:",
@@ -189,7 +189,12 @@
   "Take the Maputnik Survey": "Take the Maputnik Survey",
   "It takes 7 minutes, tops! Every question is optional.": "It takes 7 minutes, tops! Every question is optional.",
   "Error:": "Error:",
-  "Zoom: {{zoom}}": "Zoom: {{zoom}}",
+  "MapTiler Access Token": "MapTiler Access Token",
+  "Public access token for MapTiler Cloud.": "Public access token for MapTiler Cloud.",
+  "Thunderforest Access Token": "Thunderforest Access Token",
+  "Public access token for Thunderforest services.": "Public access token for Thunderforest services.",
+  "Style Renderer": "Style Renderer",
+  "Choose the default Maputnik renderer for this style.": "Choose the default Maputnik renderer for this style.",
   "ID": "ID",
   "Nested filters are not supported": "Nested filters are not supported."
 }

src/locales/ja/translation.json

@@ -81,9 +81,9 @@
   "Collapse": "畳む",
   "Expand": "展開",
   "Add Layer": "レイヤー追加",
+  "Zoom:": "ズーム:",
   "Search": "検索",
   "Close popup": "__STRING_NOT_TRANSLATED__",
-  "Zoom:": "ズーム:",
   "cursor:": "カーソル",
   "center:": "中央:",
   "rotation:": "回転角度:",
@@ -189,6 +189,12 @@
   "Take the Maputnik Survey": "__STRING_NOT_TRANSLATED__",
   "It takes 7 minutes, tops! Every question is optional.": "__STRING_NOT_TRANSLATED__",
   "Error:": "__STRING_NOT_TRANSLATED__",
+  "MapTiler Access Token": "__STRING_NOT_TRANSLATED__",
+  "Public access token for MapTiler Cloud.": "__STRING_NOT_TRANSLATED__",
+  "Thunderforest Access Token": "__STRING_NOT_TRANSLATED__",
+  "Public access token for Thunderforest services.": "__STRING_NOT_TRANSLATED__",
+  "Style Renderer": "__STRING_NOT_TRANSLATED__",
+  "Choose the default Maputnik renderer for this style.": "__STRING_NOT_TRANSLATED__",
   "ID": "ID",
   "Layer options": "レイヤー設定",
   "Paint properties": "ペイントプロパティ",