Rename several title properties to label and pass in attributed HTML instead of string

2026-02-13 01:02:58 +00:00 · 2020-09-22 13:15:19 -04:00
parent 6eed721579
commit f2c150e83e
33 changed files with 53 additions and 55 deletions
--- a/modules/ui/disclosure.js
+++ b/modules/ui/disclosure.js
@@ -12,7 +12,7 @@ import { localizer } from '../core/localizer';
 export function uiDisclosure(context, key, expandedDefault) {
    var dispatch = d3_dispatch('toggled');
    var _expanded;
-    var _title = utilFunctor('');
+    var _label = utilFunctor('');
    var _updatePreference = true;
    var _content = function () {};

@@ -49,7 +49,7 @@ export function uiDisclosure(context, key, expandedDefault) {
            .classed('expanded', _expanded);

        hideToggle.selectAll('.hide-toggle-text')
-            .html(_title());
+            .html(_label());

        hideToggle.selectAll('.hide-toggle-icon')
            .attr('xlink:href', _expanded ? '#iD-icon-down'
@@ -103,9 +103,9 @@ export function uiDisclosure(context, key, expandedDefault) {
    };


-    disclosure.title = function(val) {
-        if (!arguments.length) return _title;
-        _title = utilFunctor(val);
+    disclosure.label = function(val) {
+        if (!arguments.length) return _label;
+        _label = utilFunctor(val);
        return disclosure;
    };

--- a/modules/ui/pane.js
+++ b/modules/ui/pane.js
@@ -11,7 +11,7 @@ import { uiTooltip } from './tooltip';
 export function uiPane(id, context) {

    var _key;
-    var _title = '';
+    var _label = '';
    var _description = '';
    var _iconName = '';
    var _sections; // array of uiSection objects
@@ -24,9 +24,9 @@ export function uiPane(id, context) {
        id: id
    };

-    pane.title = function(val) {
-        if (!arguments.length) return _title;
-        _title = val;
+    pane.label = function(val) {
+        if (!arguments.length) return _label;
+        _label = val;
        return pane;
    };

@@ -107,7 +107,7 @@ export function uiPane(id, context) {

        heading
            .append('h2')
-            .html(_title);
+            .html(_label);

        heading
            .append('button')
--- a/modules/ui/panes/background.js
+++ b/modules/ui/panes/background.js
@@ -11,7 +11,7 @@ export function uiPaneBackground(context) {

    var backgroundPane = uiPane('background', context)
        .key(t('background.key'))
-        .title(t('background.title'))
+        .label(t.html('background.title'))
        .description(t('background.description'))
        .iconName('iD-icon-layers')
        .sections([
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -258,7 +258,7 @@ export function uiPaneHelp(context) {

    var helpPane = uiPane('help', context)
        .key(t('help.key'))
-        .title(t('help.title'))
+        .label(t.html('help.title'))
        .description(t('help.title'))
        .iconName('iD-icon-help');

--- a/modules/ui/panes/issues.js
+++ b/modules/ui/panes/issues.js
@@ -11,7 +11,7 @@ export function uiPaneIssues(context) {

    var issuesPane = uiPane('issues', context)
        .key(t('issues.key'))
-        .title(t('issues.title'))
+        .label(t.html('issues.title'))
        .description(t('issues.title'))
        .iconName('iD-icon-alert')
        .sections([
--- a/modules/ui/panes/map_data.js
+++ b/modules/ui/panes/map_data.js
@@ -11,7 +11,7 @@ export function uiPaneMapData(context) {

    var mapDataPane = uiPane('map-data', context)
        .key(t('map_data.key'))
-        .title(t('map_data.title'))
+        .label(t.html('map_data.title'))
        .description(t('map_data.description'))
        .iconName('iD-icon-data')
        .sections([
--- a/modules/ui/panes/preferences.js
+++ b/modules/ui/panes/preferences.js
@@ -7,7 +7,7 @@ export function uiPanePreferences(context) {

  let preferencesPane = uiPane('preferences', context)
    .key(t('preferences.key'))
-    .title(t('preferences.title'))
+    .label(t.html('preferences.title'))
    .description(t('preferences.description'))
    .iconName('fas-user-cog')
    .sections([
--- a/modules/ui/section.js
+++ b/modules/ui/section.js
@@ -14,7 +14,7 @@ export function uiSection(id, context) {
    var _content;

    var _disclosure;
-    var _title;
+    var _label;
    var _expandedByDefault = utilFunctor(true);
    var _disclosureContent;
    var _disclosureExpanded;
@@ -31,9 +31,9 @@ export function uiSection(id, context) {
        return section;
    };

-    section.title = function(val) {
-        if (!arguments.length) return _title;
-        _title = utilFunctor(val);
+    section.label = function(val) {
+        if (!arguments.length) return _label;
+        _label = utilFunctor(val);
        return section;
    };

@@ -113,7 +113,7 @@ export function uiSection(id, context) {
        if (_disclosureContent) {
            if (!_disclosure) {
                _disclosure = uiDisclosure(context, id.replace(/-/g, '_'), _expandedByDefault())
-                    .title(_title || '')
+                    .label(_label || '')
                    /*.on('toggled', function(expanded) {
                        if (expanded) { selection.node().parentNode.scrollTop += 200; }
                    })*/
--- a/modules/ui/sections/background_display_options.js
+++ b/modules/ui/sections/background_display_options.js
@@ -13,7 +13,7 @@ import { utilDetect } from '../../util/detect';
 export function uiSectionBackgroundDisplayOptions(context) {

    var section = uiSection('background-display-options', context)
-        .title(t('background.display_options'))
+        .label(t.html('background.display_options'))
        .disclosureContent(renderDisclosureContent);

    var _detected = utilDetect();
--- a/modules/ui/sections/background_list.js
+++ b/modules/ui/sections/background_list.js
@@ -24,7 +24,7 @@ export function uiSectionBackgroundList(context) {
        .on('change', customChanged);

    var section = uiSection('background-list', context)
-        .title(t('background.backgrounds'))
+        .label(t.html('background.backgrounds'))
        .disclosureContent(renderDisclosureContent);

    function previousBackgroundID() {
--- a/modules/ui/sections/background_offset.js
+++ b/modules/ui/sections/background_offset.js
@@ -12,7 +12,7 @@ import { uiSection } from '../section';
 export function uiSectionBackgroundOffset(context) {

    var section = uiSection('background-offset', context)
-        .title(t('background.fix_misalignment'))
+        .label(t.html('background.fix_misalignment'))
        .disclosureContent(renderDisclosureContent)
        .expandedByDefault(false);

--- a/modules/ui/sections/changes.js
+++ b/modules/ui/sections/changes.js
@@ -26,10 +26,10 @@ export function uiSectionChanges(context) {
        .catch(function() { /* ignore */ });

    var section = uiSection('changes-list', context)
-        .title(function() {
+        .label(function() {
            var history = context.history();
            var summary = history.difference().summary();
-            return t('inspector.title_count', { title: t('commit.changes'), count: summary.length });
+            return t('inspector.title_count', { title: t.html('commit.changes'), count: summary.length });
        })
        .disclosureContent(renderDisclosureContent);

--- a/modules/ui/sections/data_layers.js
+++ b/modules/ui/sections/data_layers.js
@@ -22,7 +22,7 @@ export function uiSectionDataLayers(context) {
    var layers = context.layers();

    var section = uiSection('data-layers', context)
-        .title(t('map_data.data_layers'))
+        .label(t.html('map_data.data_layers'))
        .disclosureContent(renderDisclosureContent);

    function renderDisclosureContent(selection) {
--- a/modules/ui/sections/entity_issues.js
+++ b/modules/ui/sections/entity_issues.js
@@ -16,8 +16,8 @@ export function uiSectionEntityIssues(context) {
        .shouldDisplay(function() {
            return _issues.length > 0;
        })
-        .title(function() {
-            return t('inspector.title_count', { title: t('issues.list_title'), count: _issues.length });
+        .label(function() {
+            return t('inspector.title_count', { title: t.html('issues.list_title'), count: _issues.length });
        })
        .disclosureContent(renderDisclosureContent);

--- a/modules/ui/sections/feature_type.js
+++ b/modules/ui/sections/feature_type.js
@@ -23,7 +23,7 @@ export function uiSectionFeatureType(context) {
    var _tagReference;

    var section = uiSection('feature-type', context)
-        .title(t('inspector.feature_type'))
+        .label(t.html('inspector.feature_type'))
        .disclosureContent(renderDisclosureContent);

    function renderDisclosureContent(selection) {
--- a/modules/ui/sections/map_features.js
+++ b/modules/ui/sections/map_features.js
@@ -7,7 +7,7 @@ export function uiSectionMapFeatures(context) {
    var _features = context.features().keys();

    var section = uiSection('map-features', context)
-        .title(t('map_data.map_features'))
+        .label(t.html('map_data.map_features'))
        .disclosureContent(renderDisclosureContent)
        .expandedByDefault(false);

--- a/modules/ui/sections/map_style_options.js
+++ b/modules/ui/sections/map_style_options.js
@@ -9,7 +9,7 @@ import { uiSection } from '../section';
 export function uiSectionMapStyleOptions(context) {

    var section = uiSection('fill-area', context)
-        .title(t('map_data.style_options'))
+        .label(t.html('map_data.style_options'))
        .disclosureContent(renderDisclosureContent)
        .expandedByDefault(false);

--- a/modules/ui/sections/overlay_list.js
+++ b/modules/ui/sections/overlay_list.js
@@ -12,7 +12,7 @@ import { uiSection } from '../section';
 export function uiSectionOverlayList(context) {

    var section = uiSection('overlay-list', context)
-        .title(t('background.overlays'))
+        .label(t.html('background.overlays'))
        .disclosureContent(renderDisclosureContent);

    var _overlayList = d3_select(null);
--- a/modules/ui/sections/photo_overlays.js
+++ b/modules/ui/sections/photo_overlays.js
@@ -11,7 +11,7 @@ export function uiSectionPhotoOverlays(context) {
    var layers = context.layers();

    var section = uiSection('photo-overlays', context)
-        .title(t('photo_overlays.title'))
+        .label(t.html('photo_overlays.title'))
        .disclosureContent(renderDisclosureContent)
        .expandedByDefault(false);

--- a/modules/ui/sections/preset_fields.js
+++ b/modules/ui/sections/preset_fields.js
@@ -15,9 +15,7 @@ import { uiSection } from '../section';
 export function uiSectionPresetFields(context) {

    var section = uiSection('preset-fields', context)
-        .title(function() {
-            return t('inspector.fields');
-        })
+        .label(t.html('inspector.fields'))
        .disclosureContent(renderDisclosureContent);

    var dispatch = d3_dispatch('change', 'revert');
--- a/modules/ui/sections/privacy.js
+++ b/modules/ui/sections/privacy.js
@@ -11,7 +11,7 @@ import { uiSection } from '../section';
 export function uiSectionPrivacy(context) {

    let section = uiSection('preferences-third-party', context)
-      .title(t('preferences.privacy.title'))
+      .label(t.html('preferences.privacy.title'))
      .disclosureContent(renderDisclosureContent);

    let _showThirdPartyIcons = prefs('preferences.privacy.thirdpartyicons') || 'true';
--- a/modules/ui/sections/raw_member_editor.js
+++ b/modules/ui/sections/raw_member_editor.js
@@ -28,13 +28,13 @@ export function uiSectionRawMemberEditor(context) {
            var entity = context.hasEntity(_entityIDs[0]);
            return entity && entity.type === 'relation';
        })
-        .title(function() {
+        .label(function() {
            var entity = context.hasEntity(_entityIDs[0]);
            if (!entity) return '';

            var gt = entity.members.length > _maxMembers ? '>' : '';
            var count = gt + entity.members.slice(0, _maxMembers).length;
-            return t('inspector.title_count', { title: t('inspector.members'), count: count });
+            return t('inspector.title_count', { title: t.html('inspector.members'), count: count });
        })
        .disclosureContent(renderDisclosureContent);

--- a/modules/ui/sections/raw_membership_editor.js
+++ b/modules/ui/sections/raw_membership_editor.js
@@ -27,14 +27,14 @@ export function uiSectionRawMembershipEditor(context) {
        .shouldDisplay(function() {
            return _entityIDs && _entityIDs.length === 1;
        })
-        .title(function() {
+        .label(function() {
            var entity = context.hasEntity(_entityIDs[0]);
            if (!entity) return '';

            var parents = context.graph().parentRelations(entity);
            var gt = parents.length > _maxMemberships ? '>' : '';
            var count = gt + parents.slice(0, _maxMemberships).length;
-            return t('inspector.title_count', { title: t('inspector.relations'), count: count });
+            return t('inspector.title_count', { title: t.html('inspector.relations'), count: count });
        })
        .disclosureContent(renderDisclosureContent);

--- a/modules/ui/sections/raw_tag_editor.js
+++ b/modules/ui/sections/raw_tag_editor.js
@@ -15,9 +15,9 @@ export function uiSectionRawTagEditor(id, context) {

    var section = uiSection(id, context)
        .classes('raw-tag-editor')
-        .title(function() {
+        .label(function() {
            var count = Object.keys(_tags).filter(function(d) { return d; }).length;
-            return t('inspector.title_count', { title: t('inspector.tags'), count: count });
+            return t('inspector.title_count', { title: t.html('inspector.tags'), count: count });
        })
        .expandedByDefault(false)
        .disclosureContent(renderDisclosureContent);
--- a/modules/ui/sections/selection_list.js
+++ b/modules/ui/sections/selection_list.js
@@ -16,8 +16,8 @@ export function uiSectionSelectionList(context) {
        .shouldDisplay(function() {
            return _selectedIDs.length > 1;
        })
-        .title(function() {
-            return t('inspector.title_count', { title: t('inspector.features'), count: _selectedIDs.length });
+        .label(function() {
+            return t('inspector.title_count', { title: t.html('inspector.features'), count: _selectedIDs.length });
        })
        .disclosureContent(renderDisclosureContent);

--- a/modules/ui/sections/validation_issues.js
+++ b/modules/ui/sections/validation_issues.js
@@ -16,10 +16,10 @@ export function uiSectionValidationIssues(id, severity, context) {
    var _issues = [];

    var section = uiSection(id, context)
-        .title(function() {
+        .label(function() {
            if (!_issues) return '';
            var issueCountText = _issues.length > 1000 ? '1000+' : String(_issues.length);
-            return t('inspector.title_count', { title: t('issues.' + severity + 's.list_title'), count: issueCountText });
+            return t('inspector.title_count', { title: t.html('issues.' + severity + 's.list_title'), count: issueCountText });
        })
        .disclosureContent(renderDisclosureContent)
        .shouldDisplay(function() {
--- a/modules/ui/sections/validation_rules.js
+++ b/modules/ui/sections/validation_rules.js
@@ -17,7 +17,7 @@ export function uiSectionValidationRules(context) {

    var section = uiSection('issues-rules', context)
        .disclosureContent(renderDisclosureContent)
-        .title(t('issues.rules.title'));
+        .label(t.html('issues.rules.title'));

    var _ruleKeys = context.validator().getRuleKeys()
        .filter(function(key) { return key !== 'maprules'; })
--- a/modules/ui/success.js
+++ b/modules/ui/success.js
@@ -261,7 +261,7 @@ export function uiSuccess(context) {
        .call(uiDisclosure(context, `community-more-${d.id}`, false)
          .expanded(false)
          .updatePreference(false)
-          .title(t('success.more'))
+          .label(t.html('success.more'))
          .content(showMore)
        );
    }
@@ -287,7 +287,7 @@ export function uiSuccess(context) {
        .call(uiDisclosure(context, `community-events-${d.id}`, false)
          .expanded(false)
          .updatePreference(false)
-          .title(t('success.events'))
+          .label(t.html('success.events'))
          .content(showNextEvents)
        )
        .select('.hide-toggle')
--- a/modules/ui/tools/modes.js
+++ b/modules/ui/tools/modes.js
@@ -18,7 +18,7 @@ export function uiToolOldDrawModes(context) {

    var tool = {
        id: 'old_modes',
-        label: t('toolbar.add_feature')
+        label: t.html('toolbar.add_feature')
    };

    var modes = [
--- a/modules/ui/tools/notes.js
+++ b/modules/ui/tools/notes.js
@@ -15,7 +15,7 @@ export function uiToolNotes(context) {

    var tool = {
        id: 'notes',
-        label: t('modes.add_note.label')
+        label: t.html('modes.add_note.label')
    };

    var mode = modeAddNote(context);
--- a/modules/ui/tools/save.js
+++ b/modules/ui/tools/save.js
@@ -12,7 +12,7 @@ export function uiToolSave(context) {

    var tool = {
        id: 'save',
-        label: t('save.title')
+        label: t.html('save.title')
    };

    var button = null;
--- a/modules/ui/tools/sidebar_toggle.js
+++ b/modules/ui/tools/sidebar_toggle.js
@@ -6,7 +6,7 @@ export function uiToolSidebarToggle(context) {

    var tool = {
        id: 'sidebar_toggle',
-        label: t('toolbar.inspect')
+        label: t.html('toolbar.inspect')
    };

    tool.render = function(selection) {
--- a/modules/ui/tools/undo_redo.js
+++ b/modules/ui/tools/undo_redo.js
@@ -15,7 +15,7 @@ export function uiToolUndoRedo(context) {

    var tool = {
        id: 'undo_redo',
-        label: t('toolbar.undo_redo')
+        label: t.html('toolbar.undo_redo')
    };

    var commands = [{