Merge branch 'develop' into accessible_ui

modules/ui/sections/background_display_options.js

@@ -103,7 +103,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
             .attr('class', 'display-option-resetlink')
             .attr('role', 'button')
             .attr('href', '#')
-            .html(t.html('background.reset_all'))
+            .call(t.append('background.reset_all'))
             .on('click', function(d3_event) {
                 d3_event.preventDefault();
                 for (var i = 0; i < _sliders.length; i++) {
@@ -119,7 +119,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
             .property('value', function(d) { return _options[d]; });
 
         container.selectAll('.display-option-value')
-            .html(function(d) { return Math.floor(_options[d] * 100) + '%'; });
+            .text(function(d) { return Math.floor(_options[d] * 100) + '%'; });
 
         container.selectAll('.display-option-reset')
             .classed('disabled', function(d) { return _options[d] === 1; });

modules/ui/sections/background_list.js

@@ -70,7 +70,7 @@ export function uiSectionBackgroundList(context) {
 
         minimapLabelEnter
             .append('span')
-            .html(t.html('background.minimap.description'));
+            .call(t.append('background.minimap.description'));
 
 
         var panelLabelEnter = bgExtrasListEnter
@@ -93,7 +93,7 @@ export function uiSectionBackgroundList(context) {
 
         panelLabelEnter
             .append('span')
-            .html(t.html('background.panel.description'));
+            .call(t.append('background.panel.description'));
 
         var locPanelLabelEnter = bgExtrasListEnter
             .append('li')
@@ -115,7 +115,7 @@ export function uiSectionBackgroundList(context) {
 
         locPanelLabelEnter
             .append('span')
-            .html(t.html('background.location_panel.description'));
+            .call(t.append('background.location_panel.description'));
 
 
         // "Info / Report a Problem" link
@@ -129,7 +129,7 @@ export function uiSectionBackgroundList(context) {
             .call(svgIcon('#iD-icon-out-link', 'inline'))
             .attr('href', 'https://github.com/openstreetmap/iD/blob/develop/FAQ.md#how-can-i-report-an-issue-with-background-imagery')
             .append('span')
-            .html(t.html('background.imagery_problem_faq'));
+            .call(t.append('background.imagery_problem_faq'));
 
         _backgroundList
             .call(drawListItems, 'radio', function(d3_event, d) {

modules/ui/sections/background_offset.js

@@ -132,7 +132,7 @@ export function uiSectionBackgroundOffset(context) {
         containerEnter
             .append('div')
             .attr('class', 'nudge-instructions')
-            .html(t.html('background.offset'));
+            .call(t.append('background.offset'));
 
         var nudgeWrapEnter = containerEnter
             .append('div')

modules/ui/sections/changes.js

@@ -29,7 +29,7 @@ export function uiSectionChanges(context) {
         .label(function() {
             var history = context.history();
             var summary = history.difference().summary();
-            return t('inspector.title_count', { title: t.html('commit.changes'), count: summary.length });
+            return t.html('inspector.title_count', { title: { html: t.html('commit.changes') }, count: summary.length });
         })
         .disclosureContent(renderDisclosureContent);
 
@@ -79,7 +79,7 @@ export function uiSectionChanges(context) {
         buttons
             .append('strong')
             .attr('class', 'entity-type')
-            .html(function(d) {
+            .text(function(d) {
                 var matched = presetManager.match(d.entity, d.graph);
                 return (matched && matched.name()) || utilDisplayType(d.entity.id);
             });
@@ -87,7 +87,7 @@ export function uiSectionChanges(context) {
         buttons
             .append('span')
             .attr('class', 'entity-name')
-            .html(function(d) {
+            .text(function(d) {
                 var name = utilDisplayName(d.entity) || '',
                     string = '';
                 if (name !== '') {
@@ -132,7 +132,7 @@ export function uiSectionChanges(context) {
         linkEnter
             .call(svgIcon('#iD-icon-load', 'inline'))
             .append('span')
-            .html(t.html('commit.download_changes'));
+            .call(t.append('commit.download_changes'));
 
 
         function mouseover(d) {

modules/ui/sections/data_layers.js

@@ -217,7 +217,7 @@ export function uiSectionDataLayers(context) {
         containerEnter
             .append('h4')
             .attr('class', 'vectortile-header')
-            .html('Detroit Vector Tiles (Beta)');
+            .text('Detroit Vector Tiles (Beta)');
 
         containerEnter
             .append('ul')
@@ -231,7 +231,7 @@ export function uiSectionDataLayers(context) {
             .call(svgIcon('#iD-icon-out-link', 'inline'))
             .attr('href', 'https://github.com/osmus/detroit-mapping-challenge')
             .append('span')
-            .html('About these layers');
+            .text('About these layers');
 
         container = container
             .merge(containerEnter);
@@ -265,7 +265,7 @@ export function uiSectionDataLayers(context) {
 
         labelEnter
             .append('span')
-            .html(function(d) { return d.name; });
+            .text(function(d) { return d.name; });
 
         // Update
         li
@@ -324,7 +324,7 @@ export function uiSectionDataLayers(context) {
 
         labelEnter
             .append('span')
-            .html(t.html('map_data.layers.custom.title'));
+            .call(t.append('map_data.layers.custom.title'));
 
         liEnter
             .append('button')
@@ -415,7 +415,7 @@ export function uiSectionDataLayers(context) {
 
         historyPanelLabelEnter
             .append('span')
-            .html(t.html('map_data.history_panel.title'));
+            .call(t.append('map_data.history_panel.title'));
 
         var measurementPanelLabelEnter = panelsListEnter
             .append('li')
@@ -437,7 +437,7 @@ export function uiSectionDataLayers(context) {
 
         measurementPanelLabelEnter
             .append('span')
-            .html(t.html('map_data.measurement_panel.title'));
+            .call(t.append('map_data.measurement_panel.title'));
     }
 
     context.layers().on('change.uiSectionDataLayers', section.reRender);

modules/ui/sections/entity_issues.js

@@ -24,7 +24,7 @@ export function uiSectionEntityIssues(context) {
             return _issues.length > 0;
         })
         .label(function() {
-            return t('inspector.title_count', { title: t.html('issues.list_title'), count: _issues.length });
+            return t.html('inspector.title_count', { title: { html: t.html('issues.list_title') }, count: _issues.length });
         })
         .disclosureContent(renderDisclosureContent);
 
@@ -169,7 +169,7 @@ export function uiSectionEntityIssues(context) {
                         .call(d.reference);
                 } else {
                     d3_select(this)
-                        .html(t.html('inspector.no_documentation_key'));
+                        .call(t.append('inspector.no_documentation_key'));
                 }
             });
 

modules/ui/sections/map_features.js

@@ -33,7 +33,7 @@ export function uiSectionMapFeatures(context) {
             .attr('class', 'feature-list-link')
             .attr('role', 'button')
             .attr('href', '#')
-            .html(t.html('issues.disable_all'))
+            .call(t.append('issues.disable_all'))
             .on('click', function(d3_event) {
                 d3_event.preventDefault();
                 context.features().disableAll();
@@ -44,7 +44,7 @@ export function uiSectionMapFeatures(context) {
             .attr('class', 'feature-list-link')
             .attr('role', 'button')
             .attr('href', '#')
-            .html(t.html('issues.enable_all'))
+            .call(t.append('issues.enable_all'))
             .on('click', function(d3_event) {
                 d3_event.preventDefault();
                 context.features().enableAll();

modules/ui/sections/photo_overlays.js

@@ -273,7 +273,7 @@ export function uiSectionPhotoOverlays(context) {
 
         labelEnter
             .append('span')
-            .html(t.html('photo_overlays.username_filter.title'));
+            .call(t.append('photo_overlays.username_filter.title'));
 
         labelEnter
             .append('input')

modules/ui/sections/privacy.js

@@ -5,22 +5,22 @@ import { svgIcon } from '../../svg/icon';
 import { uiSection } from '../section';
 
 export function uiSectionPrivacy(context) {
-
     let section = uiSection('preferences-third-party', context)
       .label(t.html('preferences.privacy.title'))
       .disclosureContent(renderDisclosureContent);
 
-    let _showThirdPartyIcons = prefs('preferences.privacy.thirdpartyicons') || 'true';
-
     function renderDisclosureContent(selection) {
       // enter
-      let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
+      selection.selectAll('.privacy-options-list')
         .data([0])
         .enter()
         .append('ul')
         .attr('class', 'layer-list privacy-options-list');
 
-      let thirdPartyIconsEnter = privacyOptionsListEnter
+      let thirdPartyIconsEnter = selection.select('.privacy-options-list')
+        .selectAll('.privacy-third-party-icons-item')
+        .data([prefs('preferences.privacy.thirdpartyicons') || 'true'])
+        .enter()
         .append('li')
         .attr('class', 'privacy-third-party-icons-item')
         .append('label')
@@ -32,17 +32,20 @@ export function uiSectionPrivacy(context) {
       thirdPartyIconsEnter
         .append('input')
         .attr('type', 'checkbox')
-        .on('change', (d3_event) => {
+        .on('change', (d3_event, d) => {
           d3_event.preventDefault();
-          _showThirdPartyIcons = (_showThirdPartyIcons === 'true') ? 'false' : 'true';
-          prefs('preferences.privacy.thirdpartyicons', _showThirdPartyIcons);
-          update();
+          prefs('preferences.privacy.thirdpartyicons', d === 'true' ? 'false' : 'true');
         });
 
       thirdPartyIconsEnter
         .append('span')
-        .html(t.html('preferences.privacy.third_party_icons.description'));
+        .call(t.append('preferences.privacy.third_party_icons.description'));
 
+      // update
+      selection.selectAll('.privacy-third-party-icons-item')
+        .classed('active', d => d === 'true')
+        .select('input')
+        .property('checked', d => d === 'true');
 
       // Privacy Policy link
       selection.selectAll('.privacy-link')
@@ -55,18 +58,11 @@ export function uiSectionPrivacy(context) {
         .call(svgIcon('#iD-icon-out-link', 'inline'))
         .attr('href', 'https://github.com/openstreetmap/iD/blob/release/PRIVACY.md')
         .append('span')
-        .html(t.html('preferences.privacy.privacy_link'));
+        .call(t.append('preferences.privacy.privacy_link'));
 
-      update();
-
-
-      function update() {
-        selection.selectAll('.privacy-third-party-icons-item')
-          .classed('active', (_showThirdPartyIcons === 'true'))
-          .select('input')
-          .property('checked', (_showThirdPartyIcons === 'true'));
-      }
     }
 
+    prefs.onChange('preferences.privacy.thirdpartyicons', section.reRender);
+
     return section;
 }

modules/ui/sections/raw_member_editor.js

@@ -33,7 +33,7 @@ export function uiSectionRawMemberEditor(context) {
 
             var gt = entity.members.length > _maxMembers ? '>' : '';
             var count = gt + entity.members.slice(0, _maxMembers).length;
-            return t('inspector.title_count', { title: t.html('inspector.members'), count: count });
+            return t.html('inspector.title_count', { title: { html: t.html('inspector.members') }, count: count });
         })
         .disclosureContent(renderDisclosureContent);
 
@@ -190,7 +190,7 @@ export function uiSectionRawMemberEditor(context) {
                     labelLink
                         .append('span')
                         .attr('class', 'member-entity-type')
-                        .html(function(d) {
+                        .text(function(d) {
                             var matched = presetManager.match(d.member, context.graph());
                             return (matched && matched.name()) || utilDisplayType(d.member.id);
                         });
@@ -198,7 +198,7 @@ export function uiSectionRawMemberEditor(context) {
                     labelLink
                         .append('span')
                         .attr('class', 'member-entity-name')
-                        .html(function(d) { return utilDisplayName(d.member); });
+                        .text(function(d) { return utilDisplayName(d.member); });
 
                     label
                         .append('button')
@@ -221,12 +221,12 @@ export function uiSectionRawMemberEditor(context) {
                     labelText
                         .append('span')
                         .attr('class', 'member-entity-type')
-                        .html(t.html('inspector.' + d.type, { id: d.id }));
+                        .call(t.append('inspector.' + d.type, { id: d.id }));
 
                     labelText
                         .append('span')
                         .attr('class', 'member-entity-name')
-                        .html(t.html('inspector.incomplete', { id: d.id }));
+                        .call(t.append('inspector.incomplete', { id: d.id }));
 
                     label
                         .append('button')

modules/ui/sections/raw_membership_editor.js

@@ -31,7 +31,7 @@ export function uiSectionRawMembershipEditor(context) {
             var parents = getSharedParentRelations();
             var gt = parents.length > _maxMemberships ? '>' : '';
             var count = gt + parents.slice(0, _maxMemberships).length;
-            return t('inspector.title_count', { title: t.html('inspector.relations'), count: count });
+            return t.html('inspector.title_count', { title: { html: t.html('inspector.relations') }, count: count });
         })
         .disclosureContent(renderDisclosureContent);
 
@@ -341,15 +341,15 @@ export function uiSectionRawMembershipEditor(context) {
         labelLink
             .append('span')
             .attr('class', 'member-entity-type')
-            .html(function(d) {
+            .text(function(d) {
                 var matched = presetManager.match(d.relation, context.graph());
-                return (matched && matched.name()) || t('inspector.relation');
+                return (matched && matched.name()) || t.html('inspector.relation');
             });
 
         labelLink
             .append('span')
             .attr('class', 'member-entity-name')
-            .html(function(d) { return utilDisplayName(d.relation); });
+            .text(function(d) { return utilDisplayName(d.relation); });
 
         labelEnter
             .append('button')

modules/ui/sections/raw_tag_editor.js

@@ -12,13 +12,14 @@ import { utilArrayDifference, utilArrayIdentical } from '../../util/array';
 import { utilGetSetValue, utilNoAuto, utilRebind, utilTagDiff } from '../../util';
 import { uiTooltip } from '..';
 
+
 export function uiSectionRawTagEditor(id, context) {
 
     var section = uiSection(id, context)
         .classes('raw-tag-editor')
         .label(function() {
             var count = Object.keys(_tags).filter(function(d) { return d; }).length;
-            return t('inspector.title_count', { title: t.html('inspector.tags'), count: count });
+            return t.html('inspector.title_count', { title: { html: t.html('inspector.tags') }, count: count });
         })
         .expandedByDefault(false)
         .disclosureContent(renderDisclosureContent);
@@ -261,7 +262,7 @@ export function uiSectionRawTagEditor(id, context) {
             .attr('title', function(d) { return d.key; })
             .call(utilGetSetValue, function(d) { return d.key; })
             .attr('readonly', function(d) {
-                return (isReadOnly(d) || (typeof d.value !== 'string')) || null;
+                return isReadOnly(d) || null;
             });
 
         items.selectAll('input.value')
@@ -495,27 +496,29 @@ export function uiSectionRawTagEditor(id, context) {
         }
 
 
-        var row = this.parentNode.parentNode;
-        var inputVal = d3_select(row).selectAll('input.value');
-        var vNew = context.cleanTagValue(utilGetSetValue(inputVal));
-
         _pendingChange = _pendingChange || {};
 
         if (kOld) {
+            if (kOld === kNew) return;
+            // a tag key was renamed
+            _pendingChange[kNew] = _pendingChange[kOld] || { oldKey: kOld };
             _pendingChange[kOld] = undefined;
+        } else {
+            // a new tag was added
+            let row = this.parentNode.parentNode;
+            let inputVal = d3_select(row).selectAll('input.value');
+            let vNew = context.cleanTagValue(utilGetSetValue(inputVal));
+            _pendingChange[kNew] = vNew;
+            utilGetSetValue(inputVal, vNew);
         }
 
-        _pendingChange[kNew] = vNew;
-
         // update the ordered key index so this row doesn't change position
         var existingKeyIndex = _orderedKeys.indexOf(kOld);
         if (existingKeyIndex !== -1) _orderedKeys[existingKeyIndex] = kNew;
 
         d.key = kNew;    // update datum to avoid exit/enter on tag update
-        d.value = vNew;
 
         this.value = kNew;
-        utilGetSetValue(inputVal, vNew);
         scheduleChange();
     }
 

modules/ui/sections/selection_list.js

@@ -17,7 +17,7 @@ export function uiSectionSelectionList(context) {
             return _selectedIDs.length > 1;
         })
         .label(function() {
-            return t('inspector.title_count', { title: t.html('inspector.features'), count: _selectedIDs.length });
+            return t.html('inspector.title_count', { title: { html: t.html('inspector.features') }, count: _selectedIDs.length });
         })
         .disclosureContent(renderDisclosureContent);
 
@@ -116,10 +116,10 @@ export function uiSectionSelectionList(context) {
             });
 
         items.selectAll('.entity-type')
-            .html(function(entity) { return presetManager.match(entity, context.graph()).name(); });
+            .text(function(entity) { return presetManager.match(entity, context.graph()).name(); });
 
         items.selectAll('.entity-name')
-            .html(function(d) {
+            .text(function(d) {
                 // fetch latest entity
                 var entity = context.entity(d.id);
                 return utilDisplayName(entity);

modules/ui/sections/validation_issues.js

@@ -19,7 +19,7 @@ export function uiSectionValidationIssues(id, severity, context) {
         .label(function() {
             if (!_issues) return '';
             var issueCountText = _issues.length > 1000 ? '1000+' : String(_issues.length);
-            return t('inspector.title_count', { title: t.html('issues.' + severity + 's.list_title'), count: issueCountText });
+            return t.html('inspector.title_count', { title: { html: t.html('issues.' + severity + 's.list_title') }, count: issueCountText });
         })
         .disclosureContent(renderDisclosureContent)
         .shouldDisplay(function() {
@@ -174,7 +174,7 @@ export function uiSectionValidationIssues(id, severity, context) {
         linkEnter
             .append('span')
             .attr('class', 'autofix-all-link-text')
-            .html(t.html('issues.fix_all.title'));
+            .call(t.append('issues.fix_all.title'));
 
         linkEnter
             .append('span')

modules/ui/sections/validation_rules.js

@@ -46,7 +46,7 @@ export function uiSectionValidationRules(context) {
             .attr('class', 'issue-rules-link')
             .attr('role', 'button')
             .attr('href', '#')
-            .html(t.html('issues.disable_all'))
+            .call(t.append('issues.disable_all'))
             .on('click', function(d3_event) {
                 d3_event.preventDefault();
                 context.validator().disableRules(_ruleKeys);
@@ -57,7 +57,7 @@ export function uiSectionValidationRules(context) {
             .attr('class', 'issue-rules-link')
             .attr('role', 'button')
             .attr('href', '#')
-            .html(t.html('issues.enable_all'))
+            .call(t.append('issues.enable_all'))
             .on('click', function(d3_event) {
                 d3_event.preventDefault();
                 context.validator().disableRules([]);
@@ -106,7 +106,7 @@ export function uiSectionValidationRules(context) {
             .html(function(d) {
                 var params = {};
                 if (d === 'unsquare_way') {
-                    params.val = '<span class="square-degrees"></span>';
+                    params.val = { html: '<span class="square-degrees"></span>' };
                 }
                 return t.html('issues.' + d + '.title', params);
             });

modules/ui/sections/validation_status.js

@@ -78,7 +78,7 @@ export function uiSectionValidationStatus(context) {
             .merge(resetIgnoredEnter);
 
         resetIgnored.select('a')
-            .html(t('inspector.title_count', { title: t.html('issues.reset_ignored'), count: ignoredIssues.length }));
+            .html(t.html('inspector.title_count', { title: { html: t.html('issues.reset_ignored') }, count: ignoredIssues.length }));
 
         resetIgnored.on('click', function(d3_event) {
             d3_event.preventDefault();
@@ -96,7 +96,8 @@ export function uiSectionValidationStatus(context) {
                 var hiddenIssues = context.validator().getIssues(hiddenOpts);
                 if (hiddenIssues.length) {
                     selection.select('.box .details')
-                        .html(t.html(
+                        .html('')
+                        .call(t.append(
                             'issues.no_issues.hidden_issues.' + type,
                             { count: hiddenIssues.length.toString() }
                         ));
@@ -104,7 +105,8 @@ export function uiSectionValidationStatus(context) {
                 }
             }
             selection.select('.box .details')
-                .html(t.html('issues.no_issues.hidden_issues.none'));
+                .html('')
+                .call(t.append('issues.no_issues.hidden_issues.none'));
         }
 
         var messageType;
@@ -159,7 +161,8 @@ export function uiSectionValidationStatus(context) {
         }
 
         selection.select('.box .message')
-            .html(t.html('issues.no_issues.message.' + messageType));
+            .html('')
+            .call(t.append('issues.no_issues.message.' + messageType));
 
     }