From 28eae9ed878ae2a8ebd806708acb8ce120924f74 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Fri, 24 Jun 2022 11:45:54 +0200 Subject: [PATCH] refactor uiSections to not inject html --- modules/ui/disclosure.js | 9 +++++++-- modules/ui/sections/background_display_options.js | 2 +- modules/ui/sections/background_list.js | 2 +- modules/ui/sections/background_offset.js | 2 +- modules/ui/sections/changes.js | 2 +- modules/ui/sections/data_layers.js | 2 +- modules/ui/sections/entity_issues.js | 2 +- modules/ui/sections/feature_type.js | 2 +- modules/ui/sections/map_features.js | 2 +- modules/ui/sections/map_style_options.js | 2 +- modules/ui/sections/overlay_list.js | 2 +- modules/ui/sections/photo_overlays.js | 2 +- modules/ui/sections/preset_fields.js | 2 +- modules/ui/sections/privacy.js | 2 +- modules/ui/sections/raw_member_editor.js | 2 +- modules/ui/sections/raw_membership_editor.js | 2 +- modules/ui/sections/raw_tag_editor.js | 2 +- modules/ui/sections/selection_list.js | 2 +- modules/ui/sections/validation_issues.js | 2 +- modules/ui/sections/validation_rules.js | 2 +- modules/ui/splash.js | 2 +- 21 files changed, 27 insertions(+), 22 deletions(-) diff --git a/modules/ui/disclosure.js b/modules/ui/disclosure.js index 474155a3b..d12c19bf9 100644 --- a/modules/ui/disclosure.js +++ b/modules/ui/disclosure.js @@ -51,8 +51,13 @@ export function uiDisclosure(context, key, expandedDefault) { .attr('aria-expanded', _expanded) .classed('expanded', _expanded); - hideToggle.selectAll('.hide-toggle-text') - .html(_label()); + const label = _label(); + const labelSelection = hideToggle.selectAll('.hide-toggle-text'); + if (typeof label !== 'function') { + labelSelection.text(_label()); + } else { + labelSelection.text('').call(label); + } hideToggle.selectAll('.hide-toggle-icon') .attr('xlink:href', _expanded ? '#iD-icon-down' diff --git a/modules/ui/sections/background_display_options.js b/modules/ui/sections/background_display_options.js index 1d4a49f5f..f852c853d 100644 --- a/modules/ui/sections/background_display_options.js +++ b/modules/ui/sections/background_display_options.js @@ -11,7 +11,7 @@ import { uiSection } from '../section'; export function uiSectionBackgroundDisplayOptions(context) { var section = uiSection('background-display-options', context) - .label(t.html('background.display_options')) + .label(() => t.append('background.display_options')) .disclosureContent(renderDisclosureContent); var _storedOpacity = prefs('background-opacity'); diff --git a/modules/ui/sections/background_list.js b/modules/ui/sections/background_list.js index 6d51f2d0b..39c6c7a71 100644 --- a/modules/ui/sections/background_list.js +++ b/modules/ui/sections/background_list.js @@ -21,7 +21,7 @@ export function uiSectionBackgroundList(context) { .on('change', customChanged); var section = uiSection('background-list', context) - .label(t.html('background.backgrounds')) + .label(() => t.append('background.backgrounds')) .disclosureContent(renderDisclosureContent); function previousBackgroundID() { diff --git a/modules/ui/sections/background_offset.js b/modules/ui/sections/background_offset.js index 13cef389c..d7db05862 100644 --- a/modules/ui/sections/background_offset.js +++ b/modules/ui/sections/background_offset.js @@ -11,7 +11,7 @@ import { uiSection } from '../section'; export function uiSectionBackgroundOffset(context) { var section = uiSection('background-offset', context) - .label(t.html('background.fix_misalignment')) + .label(() => t.append('background.fix_misalignment')) .disclosureContent(renderDisclosureContent) .expandedByDefault(false); diff --git a/modules/ui/sections/changes.js b/modules/ui/sections/changes.js index 77d3b37ed..32abc0211 100644 --- a/modules/ui/sections/changes.js +++ b/modules/ui/sections/changes.js @@ -26,7 +26,7 @@ export function uiSectionChanges(context) { .label(function() { var history = context.history(); var summary = history.difference().summary(); - return t.html('inspector.title_count', { title: { html: t.html('commit.changes') }, count: summary.length }); + return t.append('inspector.title_count', { title: t('commit.changes'), count: summary.length }); }) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index 9580aae5a..c8f469d29 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -21,7 +21,7 @@ export function uiSectionDataLayers(context) { var layers = context.layers(); var section = uiSection('data-layers', context) - .label(t.html('map_data.data_layers')) + .label(() => t.append('map_data.data_layers')) .disclosureContent(renderDisclosureContent); function renderDisclosureContent(selection) { diff --git a/modules/ui/sections/entity_issues.js b/modules/ui/sections/entity_issues.js index f0ae094f7..be528ae80 100644 --- a/modules/ui/sections/entity_issues.js +++ b/modules/ui/sections/entity_issues.js @@ -24,7 +24,7 @@ export function uiSectionEntityIssues(context) { return _issues.length > 0; }) .label(function() { - return t.html('inspector.title_count', { title: { html: t.html('issues.list_title') }, count: _issues.length }); + return t.append('inspector.title_count', { title: t('issues.list_title'), count: _issues.length }); }) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/feature_type.js b/modules/ui/sections/feature_type.js index e4877484c..403591cdd 100644 --- a/modules/ui/sections/feature_type.js +++ b/modules/ui/sections/feature_type.js @@ -20,7 +20,7 @@ export function uiSectionFeatureType(context) { var _tagReference; var section = uiSection('feature-type', context) - .label(t.html('inspector.feature_type')) + .label(() => t.append('inspector.feature_type')) .disclosureContent(renderDisclosureContent); function renderDisclosureContent(selection) { diff --git a/modules/ui/sections/map_features.js b/modules/ui/sections/map_features.js index ad12ec4f5..040a729c4 100644 --- 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) - .label(t.html('map_data.map_features')) + .label(() => t.append('map_data.map_features')) .disclosureContent(renderDisclosureContent) .expandedByDefault(false); diff --git a/modules/ui/sections/map_style_options.js b/modules/ui/sections/map_style_options.js index eac759aa9..ed6a620e1 100644 --- a/modules/ui/sections/map_style_options.js +++ b/modules/ui/sections/map_style_options.js @@ -5,7 +5,7 @@ import { uiSection } from '../section'; export function uiSectionMapStyleOptions(context) { var section = uiSection('fill-area', context) - .label(t.html('map_data.style_options')) + .label(() => t.append('map_data.style_options')) .disclosureContent(renderDisclosureContent) .expandedByDefault(false); diff --git a/modules/ui/sections/overlay_list.js b/modules/ui/sections/overlay_list.js index 14640ebdc..6252be198 100644 --- a/modules/ui/sections/overlay_list.js +++ b/modules/ui/sections/overlay_list.js @@ -11,7 +11,7 @@ import { uiSection } from '../section'; export function uiSectionOverlayList(context) { var section = uiSection('overlay-list', context) - .label(t.html('background.overlays')) + .label(() => t.append('background.overlays')) .disclosureContent(renderDisclosureContent); var _overlayList = d3_select(null); diff --git a/modules/ui/sections/photo_overlays.js b/modules/ui/sections/photo_overlays.js index 79930ea5a..7d5c76fe6 100644 --- a/modules/ui/sections/photo_overlays.js +++ b/modules/ui/sections/photo_overlays.js @@ -12,7 +12,7 @@ export function uiSectionPhotoOverlays(context) { var layers = context.layers(); var section = uiSection('photo-overlays', context) - .label(t.html('photo_overlays.title')) + .label(() => t.append('photo_overlays.title')) .disclosureContent(renderDisclosureContent) .expandedByDefault(false); diff --git a/modules/ui/sections/preset_fields.js b/modules/ui/sections/preset_fields.js index 6cafc4e6a..34a1b9b1a 100644 --- a/modules/ui/sections/preset_fields.js +++ b/modules/ui/sections/preset_fields.js @@ -12,7 +12,7 @@ import { uiSection } from '../section'; export function uiSectionPresetFields(context) { var section = uiSection('preset-fields', context) - .label(t.html('inspector.fields')) + .label(() => t.append('inspector.fields')) .disclosureContent(renderDisclosureContent); var dispatch = d3_dispatch('change', 'revert'); diff --git a/modules/ui/sections/privacy.js b/modules/ui/sections/privacy.js index 12547555d..bd11c0259 100644 --- a/modules/ui/sections/privacy.js +++ b/modules/ui/sections/privacy.js @@ -6,7 +6,7 @@ import { uiSection } from '../section'; export function uiSectionPrivacy(context) { let section = uiSection('preferences-third-party', context) - .label(t.html('preferences.privacy.title')) + .label(() => t.append('preferences.privacy.title')) .disclosureContent(renderDisclosureContent); function renderDisclosureContent(selection) { diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index f33f28907..ab5942785 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/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.html('inspector.title_count', { title: { html: t.html('inspector.members') }, count: count }); + return t.append('inspector.title_count', { title: t('inspector.members'), count: count }); }) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 9f44d8d99..093df5d4b 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/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.html('inspector.title_count', { title: { html: t.html('inspector.relations') }, count: count }); + return t.append('inspector.title_count', { title: t('inspector.relations'), count: count }); }) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/raw_tag_editor.js b/modules/ui/sections/raw_tag_editor.js index 6a7caba6a..7d669ed62 100644 --- a/modules/ui/sections/raw_tag_editor.js +++ b/modules/ui/sections/raw_tag_editor.js @@ -19,7 +19,7 @@ export function uiSectionRawTagEditor(id, context) { .classes('raw-tag-editor') .label(function() { var count = Object.keys(_tags).filter(function(d) { return d; }).length; - return t.html('inspector.title_count', { title: { html: t.html('inspector.tags') }, count: count }); + return t.append('inspector.title_count', { title: t('inspector.tags'), count: count }); }) .expandedByDefault(false) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/selection_list.js b/modules/ui/sections/selection_list.js index ad6830863..bb0ba46c9 100644 --- a/modules/ui/sections/selection_list.js +++ b/modules/ui/sections/selection_list.js @@ -17,7 +17,7 @@ export function uiSectionSelectionList(context) { return _selectedIDs.length > 1; }) .label(function() { - return t.html('inspector.title_count', { title: { html: t.html('inspector.features') }, count: _selectedIDs.length }); + return t.append('inspector.title_count', { title: t('inspector.features'), count: _selectedIDs.length }); }) .disclosureContent(renderDisclosureContent); diff --git a/modules/ui/sections/validation_issues.js b/modules/ui/sections/validation_issues.js index 540ef8f55..321379264 100644 --- a/modules/ui/sections/validation_issues.js +++ b/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.html('inspector.title_count', { title: { html: t.html('issues.' + severity + 's.list_title') }, count: issueCountText }); + return t.append('inspector.title_count', { title: t('issues.' + severity + 's.list_title'), count: issueCountText }); }) .disclosureContent(renderDisclosureContent) .shouldDisplay(function() { diff --git a/modules/ui/sections/validation_rules.js b/modules/ui/sections/validation_rules.js index 6fe7f5931..de2b895ef 100644 --- a/modules/ui/sections/validation_rules.js +++ b/modules/ui/sections/validation_rules.js @@ -16,7 +16,7 @@ export function uiSectionValidationRules(context) { var section = uiSection('issues-rules', context) .disclosureContent(renderDisclosureContent) - .label(t.html('issues.rules.title')); + .label(() => t.append('issues.rules.title')); var _ruleKeys = context.validator().getRuleKeys() .filter(function(key) { return key !== 'maprules'; }) diff --git a/modules/ui/splash.js b/modules/ui/splash.js index 992585e69..e0d8f7989 100644 --- a/modules/ui/splash.js +++ b/modules/ui/splash.js @@ -66,7 +66,7 @@ export function uiSplash(context) { })); uiSectionPrivacy(context) - .label(t.html('splash.privacy_settings')) + .label(() => t.append('splash.privacy_settings')) .render(modalSection); let buttonWrap = introModal