Fix edge case in name display in data browser

umap/static/umap/js/umap.autocomplete.js

@@ -173,7 +173,7 @@ L.U.AutoComplete = L.Class.extend({
 
     createResult: function (item) {
         var el = L.DomUtil.element('li', {}, this.container);
-        el.innerHTML = item.label;
+        el.textContent = item.label;
         var result = {
             item: item,
             el: el
@@ -279,9 +279,9 @@ L.U.AutoComplete.Ajax.SelectMultiple = L.U.AutoComplete.Ajax.extend({
 
     displaySelected: function (result) {
         var result_el = L.DomUtil.element('li', {}, this.selected_container);
-        result_el.innerHTML = result.item.label;
+        result_el.textContent = result.item.label;
         var close = L.DomUtil.element('span', {className: 'close'}, result_el);
-        close.innerHTML = '×';
+        close.textContent = '×';
         L.DomEvent.on(close, 'click', function () {
             this.selected_container.removeChild(result_el);
             this.options.on_unselect(result);
@@ -300,9 +300,9 @@ L.U.AutoComplete.Ajax.Select = L.U.AutoComplete.Ajax.extend({
 
     displaySelected: function (result) {
         var result_el = L.DomUtil.element('div', {}, this.selected_container);
-        result_el.innerHTML = result.item.label;
+        result_el.textContent = result.item.label;
         var close = L.DomUtil.element('span', {className: 'close'}, result_el);
-        close.innerHTML = '×';
+        close.textContent = '×';
         this.input.style.display = 'none';
         L.DomEvent.on(close, 'click', function () {
             this.selected_container.innerHTML = '';

umap/static/umap/js/umap.controls.js

@@ -458,7 +458,7 @@ L.U.DataLayersControl = L.Control.extend({
 
         var link = L.DomUtil.create('a', 'umap-browse-link', actions);
         link.href = '#';
-        link.title = link.innerHTML = L._('Browse data');
+        link.title = link.textContent = L._('Browse data');
 
         var toggle = L.DomUtil.create('a', 'umap-browse-toggle', container);
         toggle.href = '#';
@@ -532,7 +532,7 @@ L.U.DataLayersControl = L.Control.extend({
         datalayerLi.id = 'browse_data_toggle_' + L.stamp(datalayer);
         L.DomUtil.classIf(datalayerLi, 'off', !datalayer.isVisible());
 
-        title.innerHTML = datalayer.options.name;
+        title.textContent = datalayer.options.name;
     },
 
     newDataLayer: function () {
@@ -563,7 +563,7 @@ L.U.DataLayersControl = L.Control.extend({
         var bar = L.DomUtil.create('div', 'button-bar', container),
             add = L.DomUtil.create('a', 'show-on-edit block add-datalayer button', bar);
         add.href = '#';
-        add.innerHTML = add.title = L._('Add a layer');
+        add.textContent = add.title = L._('Add a layer');
 
         L.DomEvent
             .on(add, 'click', L.DomEvent.stop)
@@ -664,7 +664,7 @@ L.U.Map.include({
                 symbol = feature._getIconUrl ? L.U.Icon.prototype.formatUrl(feature._getIconUrl(), feature): null;
             zoom_to.title = L._('Bring feature to center');
             edit.title = L._('Edit this feature');
-            title.innerHTML = feature.getDisplayName() || '—';
+            title.textContent = feature.getDisplayName() || '—';
             color.style.backgroundColor = feature.getOption('color');
             if (symbol) {
                 color.style.backgroundImage = 'url(' + symbol + ')';
@@ -729,7 +729,7 @@ L.U.Map.include({
         var link = L.DomUtil.create('li', '');
         L.DomUtil.create('i', 'umap-icon-16 umap-caption', link);
         var label = L.DomUtil.create('span', '', link);
-        label.innerHTML = label.title = L._('About');
+        label.textContent = label.title = L._('About');
         L.DomEvent.on(link, 'click', this.displayCaption, this);
         this.ui.openPanel({data: {html: browserContainer}, actions: [link]});
     }
@@ -783,7 +783,7 @@ L.U.TileLayerControl = L.Control.extend({
             img = L.DomUtil.create('img', '', el),
             name = L.DomUtil.create('div', '', el);
         img.src = L.Util.template(tilelayer.options.url_template, this.map.demoTileInfos);
-        name.innerHTML = tilelayer.options.name;
+        name.textContent = tilelayer.options.name;
         L.DomEvent.on(el, 'click', function () {
             this.map.selectTileLayer(tilelayer);
             this.map.ui.closePanel();

umap/static/umap/js/umap.core.js

@@ -306,7 +306,7 @@ L.U.Help = L.Class.extend({
         closeLink.href = '#';
         L.DomUtil.add('i', 'umap-close-icon', closeLink);
         var label = L.DomUtil.create('span', '', closeLink);
-        label.title = label.innerHTML = L._('Close');
+        label.title = label.textContent = L._('Close');
         this.content = L.DomUtil.create('div', 'umap-help-content', this.box);
         L.DomEvent.on(closeLink, 'click', this.hide, this);
     },
@@ -366,7 +366,7 @@ L.U.Help = L.Class.extend({
             L.DomEvent.on(actionContainer, 'click', action.addHooks, action);
             L.DomEvent.on(actionContainer, 'click', self.hide, self);
         };
-        title.innerHTML = L._('Where do we go from here?');
+        title.textContent = L._('Where do we go from here?');
         for (var id in this.map.helpMenuActions) {
             addAction(this.map.helpMenuActions[id]);
         }

umap/static/umap/js/umap.features.js

@@ -109,7 +109,7 @@ L.U.FeatureMixin = {
     getAdvancedEditActions: function (container) {
         var deleteLink = L.DomUtil.create('a', 'button umap-delete', container);
         deleteLink.href = '#';
-        deleteLink.innerHTML = L._('Delete');
+        deleteLink.textContent = L._('Delete');
         L.DomEvent.on(deleteLink, 'click', function (e) {
             L.DomEvent.stop(e);
             if (this.confirmDelete()) this.map.ui.closePanel();
@@ -894,7 +894,7 @@ L.U.Polyline = L.Polyline.extend({
         L.U.FeatureMixin.getAdvancedEditActions.call(this, container);
         var toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container);
         toPolygon.href = '#';
-        toPolygon.innerHTML = L._('Transform to polygon');
+        toPolygon.textContent = L._('Transform to polygon');
         L.DomEvent.on(toPolygon, 'click', this.toPolygon, this);
     },
 
@@ -1029,7 +1029,7 @@ L.U.Polygon = L.Polygon.extend({
         L.U.FeatureMixin.getAdvancedEditActions.call(this, container);
         var toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container);
         toPolyline.href = '#';
-        toPolyline.innerHTML = L._('Transform to lines');
+        toPolyline.textContent = L._('Transform to lines');
         L.DomEvent.on(toPolyline, 'click', this.toPolyline, this);
     },
 

umap/static/umap/js/umap.forms.js

@@ -50,7 +50,7 @@ L.FormBuilder.Element.include({
     buildLabel: function () {
         if (this.options.label) {
             this.label = L.DomUtil.create('label', '', this.getLabelParent());
-            this.label.innerHTML = this.label.title = this.options.label;
+            this.label.textContent = this.label.title = this.options.label;
             if (this.options.helpEntries) this.builder.map.help.button(this.label, this.options.helpEntries);
             else if (this.options.helpTooltip) {
                 var info = L.DomUtil.create('i', 'info', this.label);
@@ -415,7 +415,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
             }
         }
         this.button = L.DomUtil.create('a', '', this.buttonsContainer);
-        this.button.innerHTML = this.value() ? L._('Change symbol') : L._('Add symbol');
+        this.button.textContent = this.value() ? L._('Change symbol') : L._('Add symbol');
         this.button.href = '#';
         L.DomEvent
             .on(this.button, 'click', L.DomEvent.stop)
@@ -457,7 +457,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
             this.addIconPreview(data.pictogram_list[idx]);
         }
         var cancelButton = L.DomUtil.create('a', '', this.pictogramsContainer);
-        cancelButton.innerHTML = L._('Cancel');
+        cancelButton.textContent = L._('Cancel');
         cancelButton.href = '#';
         cancelButton.style.display = 'block';
         cancelButton.style.clear = 'both';
@@ -468,7 +468,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
                 this.udpatePreview();
             }, this);
         var customButton = L.DomUtil.create('a', '', this.pictogramsContainer);
-        customButton.innerHTML = L._('Set symbol');
+        customButton.textContent = L._('Set symbol');
         customButton.href = '#';
         customButton.style.display = 'block';
         customButton.style.clear = 'both';

umap/static/umap/js/umap.icon.js

@@ -164,7 +164,7 @@ L.U.Icon.Cluster = L.DivIcon.extend({
             div = L.DomUtil.create('div', '', container),
             span = L.DomUtil.create('span', '', div),
             backgroundColor = this.datalayer.getColor();
-        span.innerHTML = this.cluster.getChildCount();
+        span.textContent = this.cluster.getChildCount();
         div.style.backgroundColor = backgroundColor;
         return container;
     },

umap/static/umap/js/umap.js

@@ -645,13 +645,13 @@ L.U.Map.include({
             if (types.hasOwnProperty(key)) {
                 option = L.DomUtil.create('option', '', typeInput);
                 option.value = key;
-                option.innerHTML = types[key].name || key;
+                option.textContent = types[key].name || key;
                 if (types[key].selected) option.selected = true;
             }
         }
         toggleCaveat();
         var download = L.DomUtil.create('a', 'button', container);
-        download.innerHTML = L._('Download data');
+        download.textContent = L._('Download data');
         L.DomEvent.on(download, 'click', function () {
             var type = types[typeInput.value],
                 content = type.formatter(this),
@@ -694,17 +694,17 @@ L.U.Map.include({
             submitInput = L.DomUtil.create('input', '', container),
             map = this, option,
             types = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap'];
-        title.innerHTML = L._('Import data');
+        title.textContent = L._('Import data');
         fileInput.type = 'file';
         fileInput.multiple = 'multiple';
         submitInput.type = 'button';
         submitInput.value = L._('Import');
         submitInput.className = 'button';
-        typeLabel.innerHTML = L._('Choose the format of the data to import');
+        typeLabel.textContent = L._('Choose the format of the data to import');
         this.help.button(typeLabel, 'importFormats');
         var typeInput = L.DomUtil.create('select', '', typeLabel);
         typeInput.name = 'format';
-        layerLabel.innerHTML = L._('Choose the layer to import in');
+        layerLabel.textContent = L._('Choose the layer to import in');
         var layerInput = L.DomUtil.create('select', '', layerLabel);
         layerInput.name = 'datalayer';
         urlInput.type = 'text';
@@ -719,22 +719,22 @@ L.U.Map.include({
                 var id = L.stamp(datalayer);
                 option = L.DomUtil.create('option', '', layerInput);
                 option.value = id;
-                option.innerHTML = datalayer.options.name;
+                option.textContent = datalayer.options.name;
             }
         });
-        L.DomUtil.element('option', {value: '', innerHTML: L._('Import in a new layer')}, layerInput);
+        L.DomUtil.element('option', {value: '', textContent: L._('Import in a new layer')}, layerInput);
-        L.DomUtil.element('option', {value: '', innerHTML: L._('Choose the data format')}, typeInput);
+        L.DomUtil.element('option', {value: '', textContent: L._('Choose the data format')}, typeInput);
         for (var i = 0; i < types.length; i++) {
             option = L.DomUtil.create('option', '', typeInput);
-            option.value = option.innerHTML = types[i];
+            option.value = option.textContent = types[i];
         }
         if (this.options.importPresets.length) {
             var noPreset = L.DomUtil.create('option', '', presetSelect);
-            noPreset.value = noPreset.innerHTML = L._('Choose a preset');
+            noPreset.value = noPreset.textContent = L._('Choose a preset');
             for (var j = 0; j < this.options.importPresets.length; j++) {
                 option = L.DomUtil.create('option', '', presetSelect);
                 option.value = this.options.importPresets[j].url;
-                option.innerHTML = this.options.importPresets[j].label;
+                option.textContent = this.options.importPresets[j].label;
             }
         } else {
             presetBox.style.display = 'none';
@@ -855,7 +855,7 @@ L.U.Map.include({
     displayCaption: function () {
         var container = L.DomUtil.create('div', 'umap-caption'),
             title = L.DomUtil.create('h3', '', container);
-        title.innerHTML = this.options.name;
+        title.textContent = this.options.name;
         this.permissions.addOwnerLink('h5', container);
         if (this.options.description) {
             var description = L.DomUtil.create('div', 'umap-map-description', container);
@@ -891,11 +891,11 @@ L.U.Map.include({
         }
         L.DomUtil.create('hr', '', credits);
         title = L.DomUtil.create('h5', '', credits);
-        title.innerHTML = L._('Map background credits');
+        title.textContent = L._('Map background credits');
         var tilelayerCredit = L.DomUtil.create('p', '', credits),
             name = L.DomUtil.create('strong', '', tilelayerCredit),
             attribution = L.DomUtil.create('span', '', tilelayerCredit);
-        name.innerHTML = this.selected_tilelayer.options.name + ' ';
+        name.textContent = this.selected_tilelayer.options.name + ' ';
         attribution.innerHTML = this.selected_tilelayer.getAttribution();
         L.DomUtil.create('hr', '', credits);
         var umapCredit = L.DomUtil.create('p', '', credits),
@@ -908,7 +908,7 @@ L.U.Map.include({
         var browser = L.DomUtil.create('li', '');
         L.DomUtil.create('i', 'umap-icon-16 umap-list', browser);
         var label = L.DomUtil.create('span', '', browser);
-        label.innerHTML = label.title = L._('Browse data');
+        label.textContent = label.title = L._('Browse data');
         L.DomEvent.on(browser, 'click', this.openBrowser, this);
         this.ui.openPanel({data: {html: container}, actions: [browser]});
     },
@@ -1156,7 +1156,7 @@ L.U.Map.include({
                 'options.description'
             ],
             title = L.DomUtil.create('h4', '', container);
-        title.innerHTML = L._('Edit map properties');
+        title.textContent = L._('Edit map properties');
         var builder = new L.U.FormBuilder(this, metadataFields);
         var form = builder.build();
         container.appendChild(form);
@@ -1332,27 +1332,27 @@ L.U.Map.include({
         var advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions);
         var del = L.DomUtil.create('a', 'button umap-delete', advancedButtons);
         del.href = '#';
-        del.innerHTML = L._('Delete');
+        del.textContent = L._('Delete');
         L.DomEvent
             .on(del, 'click', L.DomEvent.stop)
             .on(del, 'click', this.del, this);
         var clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons);
         clone.href = '#';
-        clone.innerHTML = L._('Clone');
+        clone.textContent = L._('Clone');
         clone.title = L._('Clone this map');
         L.DomEvent
             .on(clone, 'click', L.DomEvent.stop)
             .on(clone, 'click', this.clone, this);
         var empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons);
         empty.href = '#';
-        empty.innerHTML = L._('Empty');
+        empty.textContent = L._('Empty');
         empty.title = L._('Delete all layers');
         L.DomEvent
             .on(empty, 'click', L.DomEvent.stop)
             .on(empty, 'click', this.empty, this);
         var download = L.DomUtil.create('a', 'button umap-download', advancedButtons);
         download.href = '#';
-        download.innerHTML = L._('Download');
+        download.textContent = L._('Download');
         download.title = L._('Open download panel');
         L.DomEvent
             .on(download, 'click', L.DomEvent.stop)
@@ -1391,7 +1391,7 @@ L.U.Map.include({
         L.DomEvent.on(browser, 'click', L.DomEvent.stop)
                   .on(browser, 'click', this.openBrowser, this);
         var setName = function () {
-            name.innerHTML = this.getDisplayName();
+            name.textContent = this.getDisplayName();
         };
         L.bind(setName, this)();
         this.on('postsync', L.bind(setName, this));
@@ -1405,7 +1405,7 @@ L.U.Map.include({
             title = L.DomUtil.add('h3', '', container, L._('Editing') + '&nbsp;'),
             name = L.DomUtil.create('a', 'umap-click-to-edit', title),
             setName = function () {
-                name.innerHTML = this.getDisplayName();
+                name.textContent = this.getDisplayName();
             };
         L.bind(setName, this)();
         L.DomEvent.on(name, 'click', this.edit, this);
@@ -1414,14 +1414,14 @@ L.U.Map.include({
         var save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container);
         save.href = '#';
         save.title = L._('Save current edits') + ' (Ctrl-S)';
-        save.innerHTML = L._('Save');
+        save.textContent = L._('Save');
         var cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel button', container);
         cancel.href = '#';
         cancel.title = L._('Cancel edits');
-        cancel.innerHTML = L._('Cancel');
+        cancel.textContent = L._('Cancel');
         var disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container);
         disable.href = '#';
-        disable.title = disable.innerHTML = L._('Disable editing');
+        disable.title = disable.textContent = L._('Disable editing');
 
 
         L.DomEvent

umap/static/umap/js/umap.layer.js

@@ -815,7 +815,7 @@ L.U.DataLayer = L.Evented.extend({
         var advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'));
         var advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions);
         var deleteLink = L.DomUtil.create('a', 'button delete_datalayer_button umap-delete', advancedButtons);
-        deleteLink.innerHTML = L._('Delete');
+        deleteLink.textContent = L._('Delete');
         deleteLink.href = '#';
         L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop)
                   .on(deleteLink, 'click', function () {
@@ -824,13 +824,13 @@ L.U.DataLayer = L.Evented.extend({
                 }, this);
         if (!this.isRemoteLayer()) {
             var emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons);
-            emptyLink.innerHTML = L._('Empty');
+            emptyLink.textContent = L._('Empty');
             emptyLink.href = '#';
             L.DomEvent.on(emptyLink, 'click', L.DomEvent.stop)
                       .on(emptyLink, 'click', this.empty, this);
         }
         var cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons);
-        cloneLink.innerHTML = L._('Clone');
+        cloneLink.textContent = L._('Clone');
         cloneLink.href = '#';
         L.DomEvent.on(cloneLink, 'click', L.DomEvent.stop)
                   .on(cloneLink, 'click', function () {
@@ -839,7 +839,7 @@ L.U.DataLayer = L.Evented.extend({
                 }, this);
         if (this.umap_id) {
             var download = L.DomUtil.create('a', 'button umap-download', advancedButtons);
-            download.innerHTML = L._('Download');
+            download.textContent = L._('Download');
             download.href = this._dataUrl();
             download.target = '_blank';
         }

umap/static/umap/js/umap.permissions.js

@@ -65,7 +65,7 @@ L.U.MapPermissions = L.Class.extend({
             }
             fields.push(['options.editors', {handler: 'ManageEditors', label: L._("Map's editors")}]);
         }
-        title.innerHTML = L._('Update permissions');
+        title.textContent = L._('Update permissions');
         var builder = new L.U.FormBuilder(this, fields);
         var form = builder.build();
         container.appendChild(form);
@@ -76,7 +76,7 @@ L.U.MapPermissions = L.Class.extend({
             var advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions);
             var download = L.DomUtil.create('a', 'button', advancedButtons);
             download.href = '#';
-            download.innerHTML = L._('Attach the map to my account');
+            download.textContent = L._('Attach the map to my account');
             L.DomEvent
                 .on(download, 'click', L.DomEvent.stop)
                 .on(download, 'click', this.attach, this);
@@ -130,7 +130,7 @@ L.U.MapPermissions = L.Class.extend({
             var ownerContainer = L.DomUtil.add(element, 'umap-map-owner', container, ' ' + L._('by') + ' '),
                 owner = L.DomUtil.create('a');
             owner.href = this.options.owner.url;
-            owner.innerHTML = this.options.owner.name;
+            owner.textContent = this.options.owner.name;
             ownerContainer.appendChild(owner);
         }
     }

umap/static/umap/js/umap.popup.js

@@ -57,7 +57,7 @@ L.U.Popup.Panel = L.U.Popup.extend({
         var button = L.DomUtil.create('li', '');
         L.DomUtil.create('i', 'umap-icon-16 umap-list', button);
         var label = L.DomUtil.create('span', '', button);
-        label.innerHTML = label.title = L._('See all');
+        label.textContent = label.title = L._('See all');
         L.DomEvent.on(button, 'click', this.feature.map.openBrowser, this.feature.map);
         return button;
     },
@@ -144,7 +144,7 @@ L.U.PopupTemplate.BaseWithTitle = L.U.PopupTemplate.Default.extend({
         var title;
         if (this.feature.getDisplayName()) {
             title = L.DomUtil.create('h3', 'popup-title');
-            title.innerHTML = L.Util.escapeHTML(this.feature.getDisplayName());
+            title.textContent = this.feature.getDisplayName();
         }
         return title;
     }

umap/static/umap/js/umap.tableeditor.js

@@ -83,7 +83,7 @@ L.U.TableEditor = L.Class.extend({
         var addButton = L.DomUtil.create('li', 'add-property');
         L.DomUtil.create('i', 'umap-icon-16 umap-add', addButton);
         var label = L.DomUtil.create('span', '', addButton);
-        label.innerHTML = label.title = L._('Add a new property');
+        label.textContent = label.title = L._('Add a new property');
         var addProperty = function () {
             var newName = prompt(L._('Please enter the name of the property'));
             if (!newName) return;

umap/static/umap/js/umap.ui.js

@@ -39,7 +39,7 @@ L.U.UI = L.Evented.extend({
         var closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer);
         L.DomUtil.add('i', 'umap-close-icon', closeLink);
         var label = L.DomUtil.create('span', '', closeLink);
-        label.title = label.innerHTML = L._('Close');
+        label.title = label.textContent = L._('Close');
         if (e.actions) {
             for (var i = 0; i < e.actions.length; i++) {
                 actionsContainer.appendChild(e.actions[i]);
@@ -92,7 +92,7 @@ L.U.UI = L.Evented.extend({
         closeLink.href = '#';
         L.DomUtil.add('i', 'umap-close-icon', closeLink);
         var label = L.DomUtil.create('span', '', closeLink);
-        label.title = label.innerHTML = L._('Close');
+        label.title = label.textContent = L._('Close');
         L.DomEvent.on(closeLink, 'click', L.DomEvent.stop)
                   .on(closeLink, 'click', close, this);
         L.DomUtil.add('div', '', this._alert, e.content);
@@ -102,7 +102,7 @@ L.U.UI = L.Evented.extend({
                 action = e.actions[i];
                 el = L.DomUtil.element('a', {'className': 'umap-action'}, this._alert);
                 el.href = '#';
-                el.innerHTML = action.label;
+                el.textContent = action.label;
                 L.DomEvent.on(el, 'click', L.DomEvent.stop)
                           .on(el, 'click', close, this);
                 if (action.callback) L.DomEvent.on(el, 'click', action.callback, action.callbackContext || this.map);