WIP: start working to replace even more raw html injection

openstreetmap · Nov 23, 2021 · f419176 · f419176
1 parent ca07e33
commit f419176
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/modules/core/localizer.js b/modules/core/localizer.js
@@ -370,6 +370,26 @@ export function coreLocalizer() {
       }
     };
 
+    // Adds localized text wrapped as an HTML element with locale info to the DOM
+    localizer.t.htmlDom = function(stringId, replacements, locale) {
+      return function(selection) {
+        // replacement string might be html unsafe, so we need to escape it except if it is explicitly marked as html code
+        replacements = Object.assign({}, replacements);
+        for (var k in replacements) {
+          if (typeof replacements[k] === 'object' && typeof replacements[k].html === 'string') {
+            // todo: some kind of replacement mechanism for this??!
+            replacements[k] = replacements[k].html;
+          }
+        }
+
+        const info = localizer.tInfo(stringId, replacements, locale);
+        return selection.append('span')
+            .attr('class', 'localized-text')
+            .attr('lang', info.locale || 'und')
+            .text(info.text);
+      }
+    };
+
     localizer.languageName = (code, options) => {
 
         if (_languageNames[code]) {  // name in locale language

diff --git a/modules/ui/panels/history.js b/modules/ui/panels/history.js
@@ -21,7 +21,7 @@ export function uiPanelHistory(context) {
         if (!userName) {
             selection
                 .append('span')
-                .html(t.html('info_panels.history.unknown'));
+                .call(t.htmlDom('info_panels.history.unknown'));
             return;
         }
 
@@ -57,7 +57,7 @@ export function uiPanelHistory(context) {
         if (!changeset) {
             selection
                 .append('span')
-                .html(t.html('info_panels.history.unknown'));
+                .call(t.htmlDom('info_panels.history.unknown'));
             return;
         }
 
@@ -115,10 +115,17 @@ export function uiPanelHistory(context) {
 
         selection.html('');
 
-        selection
-            .append('h4')
-            .attr('class', 'history-heading')
-            .html(singular || t.html('info_panels.selected', { n: selected.length }));
+        if (singular) {
+            selection
+                .append('h4')
+                .attr('class', 'history-heading')
+                .html(singular);
+        } else {
+            selection
+                .append('h4')
+                .attr('class', 'history-heading')
+                .call(t.htmlDom('info_panels.selected', { n: selected.length }));
+        }
 
         if (!singular) return;
 
@@ -134,7 +141,7 @@ export function uiPanelHistory(context) {
         if (!note || note.isNew()) {
             selection
                 .append('div')
-                .html(t.html('info_panels.history.note_no_history'));
+                .call(t.htmlDom('info_panels.history.note_no_history'));
             return;
         }
 
@@ -143,20 +150,20 @@ export function uiPanelHistory(context) {
 
         list
             .append('li')
-            .html(t.html('info_panels.history.note_comments') + ':')
+            .call(selection => t.htmlDom('info_panels.history.note_comments')(selection) + ':')
             .append('span')
             .text(note.comments.length);
 
         if (note.comments.length) {
             list
                 .append('li')
-                .html(t.html('info_panels.history.note_created_date') + ':')
+                .call(selection => t.htmlDom('info_panels.history.note_created_date')(selection) + ':')
                 .append('span')
                 .text(displayTimestamp(note.comments[0].date));
 
             list
                 .append('li')
-                .html(t.html('info_panels.history.note_created_user') + ':')
+                .call(selection => t.htmlDom('info_panels.history.note_created_user')(selection) + ':')
                 .call(displayUser, note.comments[0].user);
         }
 
@@ -168,7 +175,7 @@ export function uiPanelHistory(context) {
                 .attr('href', osm.noteURL(note))
                 .call(svgIcon('#iD-icon-out-link', 'inline'))
                 .append('span')
-                .html(t.html('info_panels.history.note_link_text'));
+                .call(t.htmlDom('info_panels.history.note_link_text'));
         }
     }
 
@@ -177,7 +184,7 @@ export function uiPanelHistory(context) {
         if (!entity || entity.isNew()) {
             selection
                 .append('div')
-                .html(t.html('info_panels.history.no_history'));
+                .call(t.htmlDom('info_panels.history.no_history'));
             return;
         }
 
@@ -207,24 +214,24 @@ export function uiPanelHistory(context) {
 
         list
             .append('li')
-            .html(t.html('info_panels.history.version') + ':')
+            .call(selection => t.htmlDom('info_panels.history.version')(selection) + ':')
             .append('span')
             .text(entity.version);
 
         list
             .append('li')
-            .html(t.html('info_panels.history.last_edit') + ':')
+            .call(selection => t.htmlDom('info_panels.history.last_edit')(selection) + ':')
             .append('span')
             .text(displayTimestamp(entity.timestamp));
 
         list
             .append('li')
-            .html(t.html('info_panels.history.edited_by') + ':')
+            .call(selection => t.htmlDom('info_panels.history.edited_by')(selection) + ':')
             .call(displayUser, entity.user);
 
         list
             .append('li')
-            .html(t.html('info_panels.history.changeset') + ':')
+            .call(selection => t.htmlDom('info_panels.history.changeset')(selection) + ':')
             .call(displayChangeset, entity.changeset);
     }