Make t function return a span element with a lang attribute unl…

…ess `html: false` is specified in the options (re: #7963) Update `text` functions to `html` to support inserting the `span` elements Specify `html: false` for various instances where a `span` is not desired, e.g. `placeholder` and `title` attributes
openstreetmap · Sep 16, 2020 · 32f8274 · 32f8274
1 parent 7aa6c1d
commit 32f8274
Show file tree

Hide file tree

Showing 150 changed files with 471 additions and 463 deletions.
diff --git a/modules/core/localizer.js b/modules/core/localizer.js
@@ -221,6 +221,8 @@ export function coreLocalizer() {
       return 'other';
     }
 
+    let _lastUsedTCode;
+
     /**
     * Given a string identifier, try to find that string in the current
     * language, and return it.  This function will be called recursively
@@ -232,17 +234,19 @@ export function coreLocalizer() {
     * @return {string?}  localized string
     */
     localizer.t = function(stringId, replacements, locale) {
-        locale = locale || _localeCode;
+        _lastUsedTCode = null;
 
-        // US English is the default
-        if (locale.toLowerCase() === 'en-us') locale = 'en';
+        locale = locale || _localeCode;
 
         let path = stringId
           .split('.')
           .map(s => s.replace(/<TX_DOT>/g, '.'))
           .reverse();
 
-        let result = _localeStrings[locale];
+        let stringsKey = locale;
+        // US English is the default
+        if (stringsKey.toLowerCase() === 'en-us') stringsKey = 'en';
+        let result = _localeStrings[stringsKey];
 
         while (result !== undefined && path.length) {
           result = result[path.pop()];
@@ -287,7 +291,11 @@ export function coreLocalizer() {
           }
           if (typeof result === 'string') {
             // found a localized string!
-            return result;
+            _lastUsedTCode = locale;
+            if (replacements && replacements.html === false) {
+                return result;
+            }
+            return `<span class="localized-text" lang="${locale}">${result}</span>`;
           }
         }
         // no localized string found...
@@ -311,6 +319,8 @@ export function coreLocalizer() {
         return missing;
     };
 
+    localizer.t.lastCode = () => _lastUsedTCode;
+
     localizer.languageName = (code, options) => {
 
         if (_languageNames[code]) {  // name in locale language

diff --git a/modules/modes/add_note.js b/modules/modes/add_note.js
@@ -12,7 +12,7 @@ export function modeAddNote(context) {
         button: 'note',
         title: t('modes.add_note.title'),
         description: t('modes.add_note.description'),
-        key: t('modes.add_note.key')
+        key: t('modes.add_note.key', { html: false })
     };
 
     var behavior = behaviorDraw(context)

diff --git a/modules/modes/select.js b/modules/modes/select.js
@@ -230,7 +230,7 @@ export function modeSelect(context, selectedIDs) {
         _behaviors.forEach(context.install);
 
         keybinding
-            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
             .on(['[', 'pgup'], previousVertex)
             .on([']', 'pgdown'], nextVertex)
             .on(['{', uiCmd('⌘['), 'home'], firstVertex)

diff --git a/modules/modes/select_data.js b/modules/modes/select_data.js
@@ -72,7 +72,7 @@ export function modeSelectData(context, selectedDatum) {
         behaviors.forEach(context.install);
 
         keybinding
-            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

diff --git a/modules/modes/select_error.js b/modules/modes/select_error.js
@@ -98,7 +98,7 @@ export function modeSelectError(context, selectedErrorID, selectedErrorService)
 
         behaviors.forEach(context.install);
         keybinding
-            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js
@@ -108,7 +108,7 @@ export function modeSelectNote(context, selectedNoteID) {
         _behaviors.forEach(context.install);
 
         _keybinding
-            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

diff --git a/modules/operations/circularize.js b/modules/operations/circularize.js
@@ -107,7 +107,7 @@ export function operationCircularize(context, selectedIDs) {
 
 
     operation.id = 'circularize';
-    operation.keys = [t('operations.circularize.key')];
+    operation.keys = [t('operations.circularize.key', { html: false })];
     operation.title = t('operations.circularize.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/continue.js b/modules/operations/continue.js
@@ -65,7 +65,7 @@ export function operationContinue(context, selectedIDs) {
 
 
     operation.id = 'continue';
-    operation.keys = [t('operations.continue.key')];
+    operation.keys = [t('operations.continue.key', { html: false })];
     operation.title = t('operations.continue.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/disconnect.js b/modules/operations/disconnect.js
@@ -183,7 +183,7 @@ export function operationDisconnect(context, selectedIDs) {
 
 
     operation.id = 'disconnect';
-    operation.keys = [t('operations.disconnect.key')];
+    operation.keys = [t('operations.disconnect.key', { html: false })];
     operation.title = t('operations.disconnect.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/extract.js b/modules/operations/extract.js
@@ -84,7 +84,7 @@ export function operationExtract(context, selectedIDs) {
 
 
     operation.id = 'extract';
-    operation.keys = [t('operations.extract.key')];
+    operation.keys = [t('operations.extract.key', { html: false })];
     operation.title = t('operations.extract.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/merge.js b/modules/operations/merge.js
@@ -88,7 +88,7 @@ export function operationMerge(context, selectedIDs) {
     };
 
     operation.id = 'merge';
-    operation.keys = [t('operations.merge.key')];
+    operation.keys = [t('operations.merge.key', { html: false })];
     operation.title = t('operations.merge.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/move.js b/modules/operations/move.js
@@ -72,7 +72,7 @@ export function operationMove(context, selectedIDs) {
 
 
     operation.id = 'move';
-    operation.keys = [t('operations.move.key')];
+    operation.keys = [t('operations.move.key', { html: false })];
     operation.title = t('operations.move.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/orthogonalize.js b/modules/operations/orthogonalize.js
@@ -130,7 +130,7 @@ export function operationOrthogonalize(context, selectedIDs) {
 
 
     operation.id = 'orthogonalize';
-    operation.keys = [t('operations.orthogonalize.key')];
+    operation.keys = [t('operations.orthogonalize.key', { html: false })];
     operation.title = t('operations.orthogonalize.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/reverse.js b/modules/operations/reverse.js
@@ -68,7 +68,7 @@ export function operationReverse(context, selectedIDs) {
 
 
     operation.id = 'reverse';
-    operation.keys = [t('operations.reverse.key')];
+    operation.keys = [t('operations.reverse.key', { html: false })];
     operation.title = t('operations.reverse.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/rotate.js b/modules/operations/rotate.js
@@ -72,7 +72,7 @@ export function operationRotate(context, selectedIDs) {
 
 
     operation.id = 'rotate';
-    operation.keys = [t('operations.rotate.key')];
+    operation.keys = [t('operations.rotate.key', { html: false })];
     operation.title = t('operations.rotate.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/split.js b/modules/operations/split.js
@@ -63,7 +63,7 @@ export function operationSplit(context, selectedIDs) {
 
 
     operation.id = 'split';
-    operation.keys = [t('operations.split.key')];
+    operation.keys = [t('operations.split.key', { html: false })];
     operation.title = t('operations.split.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/operations/straighten.js b/modules/operations/straighten.js
@@ -135,7 +135,7 @@ export function operationStraighten(context, selectedIDs) {
 
 
     operation.id = 'straighten';
-    operation.keys = [t('operations.straighten.key')];
+    operation.keys = [t('operations.straighten.key', { html: false })];
     operation.title = t('operations.straighten.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

diff --git a/modules/presets/category.js b/modules/presets/category.js
@@ -33,7 +33,7 @@ export function presetCategory(categoryID, category, all) {
 
   _this.matchScore = () => -1;
 
-  _this.name = () => t(`presets.categories.${categoryID}.name`, { 'default': categoryID });
+  _this.name = () => t(`presets.categories.${categoryID}.name`, { 'default': categoryID, html: false });
 
   _this.terms = () => [];
 

diff --git a/modules/presets/field.js b/modules/presets/field.js
@@ -22,14 +22,14 @@ export function presetField(fieldID, field) {
 
   _this.t = (scope, options) => t(`presets.fields.${fieldID}.${scope}`, options);
 
-  _this.label = () => _this.overrideLabel || _this.t('label', { 'default': fieldID });
+  _this.label = () => _this.overrideLabel || _this.t('label', { 'default': fieldID, html: false });
 
   const _placeholder = _this.placeholder;
-  _this.placeholder = () => _this.t('placeholder', { 'default': _placeholder });
+  _this.placeholder = () => _this.t('placeholder', { 'default': _placeholder, html: false });
 
   _this.originalTerms = (_this.terms || []).join();
 
-  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms })
+  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms, html: false })
     .toLowerCase().trim().split(/\s*,+\s*/);
 
 

diff --git a/modules/presets/preset.js b/modules/presets/preset.js
@@ -79,11 +79,9 @@ export function presetPreset(presetID, preset, addable, allFields, allPresets) {
   };
 
 
-  let _textCache = {};
   _this.t = (scope, options) => {
     const textID = `presets.presets.${presetID}.${scope}`;
-    if (_textCache[textID]) return _textCache[textID];
-    return _textCache[textID] = t(textID, options);
+    return t(textID, options);
   };
 
 
@@ -92,13 +90,13 @@ export function presetPreset(presetID, preset, addable, allFields, allPresets) {
       let path = presetID.split('/');
       path.pop();  // remove brand name
       // NOTE: insert an en-dash, not a hyphen (to avoid conflict with fr - nl names in Brussels etc)
-      return _this.originalName + ' – ' + t('presets.presets.' + path.join('/') + '.name');
+      return _this.originalName + ' – ' + t('presets.presets.' + path.join('/') + '.name', { html: false });
     }
-    return _this.t('name', { 'default': _this.originalName });
+    return _this.t('name', { 'default': _this.originalName, html: false });
   };
 
 
-  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms })
+  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms, html: false })
     .toLowerCase().trim().split(/\s*,+\s*/);
 
 

diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js
@@ -238,15 +238,15 @@ export function rendererTileLayer(context) {
 
             debug
                 .selectAll('.tile-label-debug-coord')
-                .text(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; });
+                .html(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; });
 
             debug
                 .selectAll('.tile-label-debug-vintage')
                 .each(function(d) {
                     var span = d3_select(this);
                     var center = context.projection.invert(tileCenter(d));
                     _source.getMetadata(center, d, function(err, result) {
-                        span.text((result && result.vintage && result.vintage.range) ||
+                        span.html((result && result.vintage && result.vintage.range) ||
                             t('info_panels.background.vintage') + ': ' + t('info_panels.background.unknown')
                         );
                     });

diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js
@@ -265,22 +265,22 @@ export default {
         controlsEnter
             .append('button')
             .on('click.back', step(-1))
-            .text('◄');
+            .html('◄');
 
         controlsEnter
             .append('button')
             .on('click.rotate-ccw', rotate(-90))
-            .text('⤿');
+            .html('⤿');
 
         controlsEnter
             .append('button')
             .on('click.rotate-cw', rotate(90))
-            .text('⤾');
+            .html('⤾');
 
         controlsEnter
             .append('button')
             .on('click.forward', step(1))
-            .text('►');
+            .html('►');
 
         wrapEnter
             .append('div')
@@ -423,30 +423,30 @@ export default {
                     .attr('class', 'captured_by')
                     .attr('target', '_blank')
                     .attr('href', 'https://openstreetcam.org/user/' + encodeURIComponent(d.captured_by))
-                    .text('@' + d.captured_by);
+                    .html('@' + d.captured_by);
 
                 attribution
                     .append('span')
-                    .text('|');
+                    .html('|');
             }
 
             if (d.captured_at) {
                 attribution
                     .append('span')
                     .attr('class', 'captured_at')
-                    .text(localeDateString(d.captured_at));
+                    .html(localeDateString(d.captured_at));
 
                 attribution
                     .append('span')
-                    .text('|');
+                    .html('|');
             }
 
             attribution
                 .append('a')
                 .attr('class', 'image-link')
                 .attr('target', '_blank')
                 .attr('href', 'https://openstreetcam.org/details/' + d.sequence_id + '/' + d.sequence_index)
-                .text('openstreetcam.org');
+                .html('openstreetcam.org');
         }
 
         return this;