From 1f4fe57d8bf1c839c7ee7af9d61a8f71b65534b2 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Thu, 20 Feb 2020 13:47:11 -0800 Subject: [PATCH] Use d3-style API for section contents --- modules/ui/panes/background.js | 16 +++---- modules/ui/section.js | 48 ++++++++++++------- .../ui/sections/background_display_options.js | 15 +++--- modules/ui/sections/background_list.js | 11 +++-- modules/ui/sections/background_offset.js | 7 +-- modules/ui/sections/data_layers.js | 11 +++-- modules/ui/sections/map_features.js | 7 +-- modules/ui/sections/map_style_options.js | 7 +-- modules/ui/sections/overlay_list.js | 11 +++-- modules/ui/sections/photo_overlays.js | 9 ++-- modules/ui/sections/privacy.js | 7 +-- modules/ui/sections/validation_issues.js | 9 ++-- modules/ui/sections/validation_options.js | 7 +-- modules/ui/sections/validation_rules.js | 5 +- modules/ui/sections/validation_status.js | 9 ++-- 15 files changed, 101 insertions(+), 78 deletions(-) diff --git a/modules/ui/panes/background.js b/modules/ui/panes/background.js index ddc894c86..5a96dfd4c 100644 --- a/modules/ui/panes/background.js +++ b/modules/ui/panes/background.js @@ -4,10 +4,10 @@ import { t } from '../../util/locale'; import { uiCmd } from '../cmd'; import { uiPane } from '../pane'; -import { uiBackgroundDisplayOptions } from '../sections/background_display_options'; -import { uiBackgroundList } from '../sections/background_list'; -import { uiBackgroundOffset } from '../sections/background_offset'; -import { uiOverlayList } from '../sections/overlay_list'; +import { uiSectionBackgroundDisplayOptions } from '../sections/background_display_options'; +import { uiSectionBackgroundList } from '../sections/background_list'; +import { uiSectionBackgroundOffset } from '../sections/background_offset'; +import { uiSectionOverlayList } from '../sections/overlay_list'; export function uiPaneBackground(context) { @@ -34,10 +34,10 @@ export function uiPaneBackground(context) { .description(t('background.description')) .iconName('iD-icon-layers') .sections([ - uiBackgroundList(context), - uiOverlayList(context), - uiBackgroundDisplayOptions(context), - uiBackgroundOffset(context) + uiSectionBackgroundList(context), + uiSectionOverlayList(context), + uiSectionBackgroundDisplayOptions(context), + uiSectionBackgroundOffset(context) ]); return backgroundPane; diff --git a/modules/ui/section.js b/modules/ui/section.js index c629fe00b..9eb752dc3 100644 --- a/modules/ui/section.js +++ b/modules/ui/section.js @@ -13,6 +13,8 @@ export function uiSection(id, context) { var _title; var _expandedByDefault = utilFunctor(true); var _shouldDisplay; + var _content; + var _disclosureContent; var _containerSelection = d3_select(null); @@ -38,6 +40,18 @@ export function uiSection(id, context) { return section; }; + section.content = function(val) { + if (!arguments.length) return _content; + _content = val; + return section; + }; + + section.disclosureContent = function(val) { + if (!arguments.length) return _disclosureContent; + _disclosureContent = val; + return section; + }; + // may be called multiple times section.render = function(selection) { @@ -57,10 +71,16 @@ export function uiSection(id, context) { .call(renderContent); }; - section.containerSelection = function() { + section.reRender = function() { + _containerSelection + .call(renderContent); + }; + + section.selection = function() { return _containerSelection; }; + // may be called multiple times function renderContent(selection) { if (_shouldDisplay) { var shouldDisplay = _shouldDisplay(); @@ -70,30 +90,24 @@ export function uiSection(id, context) { return; } } - section.renderContent(selection); - } - // may be called multiple times - section.renderContent = function(containerSelection) { - - if (section.renderDisclosureContent) { + if (_disclosureContent) { if (!_disclosure) { _disclosure = uiDisclosure(context, id.replace(/-/g, '_'), _expandedByDefault()) .title(_title || '') - .content(section.renderDisclosureContent); + .content(_disclosureContent); } - containerSelection + selection .call(_disclosure); + + return; } - }; - section.rerenderContent = function() { - _containerSelection - .call(renderContent); - }; - - // override to enable disclosure - section.renderDisclosureContent = undefined; + if (_content) { + selection + .call(_content); + } + } return section; } diff --git a/modules/ui/sections/background_display_options.js b/modules/ui/sections/background_display_options.js index 7113caedc..145b41616 100644 --- a/modules/ui/sections/background_display_options.js +++ b/modules/ui/sections/background_display_options.js @@ -9,10 +9,11 @@ import { uiSection } from '../section'; import { utilDetect } from '../../util/detect'; -export function uiBackgroundDisplayOptions(context) { +export function uiSectionBackgroundDisplayOptions(context) { var section = uiSection('background-display-options', context) - .title(t('background.display_options')); + .title(t('background.display_options')) + .disclosureContent(renderDisclosureContent); var _detected = utilDetect(); var _storedOpacity = context.storage('background-opacity'); @@ -30,12 +31,10 @@ export function uiBackgroundDisplayOptions(context) { sharpness: 1 }; - function clamp(x, min, max) { return Math.max(min, Math.min(x, max)); } - function updateValue(d, val) { if (!val && d3_event && d3_event.target) { val = d3_event.target.value; @@ -50,11 +49,10 @@ export function uiBackgroundDisplayOptions(context) { context.storage('background-opacity', val); } - section.rerenderContent(); + section.reRender(); } - - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.display-options-container') .data([0]); @@ -126,8 +124,7 @@ export function uiBackgroundDisplayOptions(context) { if (containerEnter.size() && _options.brightness !== 1) { context.background().brightness(_options.brightness); } - }; - + } return section; } diff --git a/modules/ui/sections/background_list.js b/modules/ui/sections/background_list.js index 20c9ed340..1d8a946ec 100644 --- a/modules/ui/sections/background_list.js +++ b/modules/ui/sections/background_list.js @@ -14,7 +14,7 @@ import { uiMapInMap } from '../map_in_map'; import { uiSection } from '../section'; import { uiTooltipHtml } from '../tooltipHtml'; -export function uiBackgroundList(context) { +export function uiSectionBackgroundList(context) { var _backgroundList = d3_select(null); @@ -24,13 +24,14 @@ export function uiBackgroundList(context) { .on('change', customChanged); var section = uiSection('background-list', context) - .title(t('background.backgrounds')); + .title(t('background.backgrounds')) + .disclosureContent(renderDisclosureContent); function previousBackgroundID() { return context.storage('background-last-used-toggle'); } - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { // the background list var container = selection.selectAll('.layer-background-list') @@ -111,7 +112,7 @@ export function uiBackgroundList(context) { _backgroundList .call(drawListItems, 'radio', chooseBackground, function(d) { return !d.isHidden() && !d.overlay; }); - }; + } function setTooltips(selection) { selection.each(function(d, i, nodes) { @@ -260,7 +261,7 @@ export function uiBackgroundList(context) { .on('move.background_list', _debounce(function() { // layers in-view may have changed due to map move - window.requestIdleCallback(section.rerenderContent); + window.requestIdleCallback(section.reRender); }, 1000) ); diff --git a/modules/ui/sections/background_offset.js b/modules/ui/sections/background_offset.js index 4bbcac373..53adba172 100644 --- a/modules/ui/sections/background_offset.js +++ b/modules/ui/sections/background_offset.js @@ -10,10 +10,11 @@ import { svgIcon } from '../../svg/icon'; import { uiSection } from '../section'; -export function uiBackgroundOffset(context) { +export function uiSectionBackgroundOffset(context) { var section = uiSection('background-offset', context) .title(t('background.fix_misalignment')) + .disclosureContent(renderDisclosureContent) .expandedByDefault(false); var _directions = [ @@ -134,7 +135,7 @@ export function uiBackgroundOffset(context) { } - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.nudge-container') .data([0]); @@ -182,7 +183,7 @@ export function uiBackgroundOffset(context) { .call(svgIcon('#iD-icon-' + (textDirection === 'rtl' ? 'redo' : 'undo'))); updateValue(); - }; + } context.background() .on('change.backgroundOffset-update', updateValue); diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index db603c4e1..d31a609e0 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -22,9 +22,10 @@ export function uiSectionDataLayers(context) { var layers = context.layers(); var section = uiSection('data-layers', context) - .title(t('map_data.data_layers')); + .title(t('map_data.data_layers')) + .disclosureContent(renderDisclosureContent); - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.data-layer-container') .data([0]); @@ -36,7 +37,7 @@ export function uiSectionDataLayers(context) { .call(drawQAItems) .call(drawCustomDataItems) .call(drawVectorItems); // Beta - Detroit mapping challenge - }; + } function showsLayer(which) { var layer = layers.layer(which); @@ -377,13 +378,13 @@ export function uiSectionDataLayers(context) { } } - context.layers().on('change.uiSectionDataLayers', section.rerenderContent); + context.layers().on('change.uiSectionDataLayers', section.reRender); context.map() .on('move.uiSectionDataLayers', _debounce(function() { // Detroit layers may have moved in or out of view - window.requestIdleCallback(section.rerenderContent); + window.requestIdleCallback(section.reRender); }, 1000) ); diff --git a/modules/ui/sections/map_features.js b/modules/ui/sections/map_features.js index 54e2c27f0..8fd9a0e27 100644 --- a/modules/ui/sections/map_features.js +++ b/modules/ui/sections/map_features.js @@ -9,9 +9,10 @@ export function uiSectionMapFeatures(context) { var section = uiSection('map-features', context) .title(t('map_data.map_features')) + .disclosureContent(renderDisclosureContent) .expandedByDefault(false); - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.layer-feature-list-container') .data([0]); @@ -52,7 +53,7 @@ export function uiSectionMapFeatures(context) { container.selectAll('.layer-feature-list') .call(drawListItems, _features, 'checkbox', 'feature', clickFeature, showsFeature); - }; + } function drawListItems(selection, data, type, name, change, active) { var items = selection.selectAll('li') @@ -121,7 +122,7 @@ export function uiSectionMapFeatures(context) { // add listeners context.features() - .on('change.map_features', section.rerenderContent); + .on('change.map_features', section.reRender); return section; } diff --git a/modules/ui/sections/map_style_options.js b/modules/ui/sections/map_style_options.js index 5dadb75f1..2649f55fb 100644 --- a/modules/ui/sections/map_style_options.js +++ b/modules/ui/sections/map_style_options.js @@ -11,9 +11,10 @@ export function uiSectionMapStyleOptions(context) { var section = uiSection('fill-area', context) .title(t('map_data.style_options')) + .disclosureContent(renderDisclosureContent) .expandedByDefault(false); - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.layer-fill-list') .data([0]); @@ -33,7 +34,7 @@ export function uiSectionMapStyleOptions(context) { .call(drawListItems, ['highlight_edits'], 'checkbox', 'visual_diff', toggleHighlightEdited, function() { return context.surface().classed('highlight-edited'); }); - }; + } function drawListItems(selection, data, type, name, change, active) { var items = selection.selectAll('li') @@ -95,7 +96,7 @@ export function uiSectionMapStyleOptions(context) { } context.map() - .on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.rerenderContent); + .on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.reRender); return section; } diff --git a/modules/ui/sections/overlay_list.js b/modules/ui/sections/overlay_list.js index f8797dce0..2fe0c10bd 100644 --- a/modules/ui/sections/overlay_list.js +++ b/modules/ui/sections/overlay_list.js @@ -9,10 +9,11 @@ import { t } from '../../util/locale'; import { tooltip } from '../../util/tooltip'; import { uiSection } from '../section'; -export function uiOverlayList(context) { +export function uiSectionOverlayList(context) { var section = uiSection('overlay-list', context) - .title(t('background.overlays')); + .title(t('background.overlays')) + .disclosureContent(renderDisclosureContent); var _overlayList = d3_select(null); @@ -97,7 +98,7 @@ export function uiOverlayList(context) { } } - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.layer-overlay-list') .data([0]); @@ -110,13 +111,13 @@ export function uiOverlayList(context) { _overlayList .call(drawListItems, 'checkbox', chooseOverlay, function(d) { return !d.isHidden() && d.overlay; }); - }; + } context.map() .on('move.overlay_list', _debounce(function() { // layers in-view may have changed due to map move - window.requestIdleCallback(section.rerenderContent); + window.requestIdleCallback(section.reRender); }, 1000) ); diff --git a/modules/ui/sections/photo_overlays.js b/modules/ui/sections/photo_overlays.js index e0545ade1..2c3415bb1 100644 --- a/modules/ui/sections/photo_overlays.js +++ b/modules/ui/sections/photo_overlays.js @@ -13,9 +13,10 @@ export function uiSectionPhotoOverlays(context) { var section = uiSection('photo-overlays', context) .title(t('photo_overlays.title')) + .disclosureContent(renderDisclosureContent) .expandedByDefault(false); - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.photo-overlay-container') .data([0]); @@ -25,7 +26,7 @@ export function uiSectionPhotoOverlays(context) { .merge(container) .call(drawPhotoItems) .call(drawPhotoTypeItems); - }; + } function drawPhotoItems(selection) { var photoKeys = context.photos().overlayLayerIDs(); @@ -194,8 +195,8 @@ export function uiSectionPhotoOverlays(context) { } } - context.layers().on('change.uiSectionPhotoOverlays', section.rerenderContent); - context.photos().on('change.uiSectionPhotoOverlays', section.rerenderContent); + context.layers().on('change.uiSectionPhotoOverlays', section.reRender); + context.photos().on('change.uiSectionPhotoOverlays', section.reRender); return section; } diff --git a/modules/ui/sections/privacy.js b/modules/ui/sections/privacy.js index ffb168f50..3b33b693c 100644 --- a/modules/ui/sections/privacy.js +++ b/modules/ui/sections/privacy.js @@ -10,11 +10,12 @@ import { uiSection } from '../section'; export function uiSectionPrivacy(context) { let section = uiSection('preferences-third-party', context) - .title(t('preferences.privacy.title')); + .title(t('preferences.privacy.title')) + .disclosureContent(renderDisclosureContent); let _showThirdPartyIcons = context.storage('preferences.privacy.thirdpartyicons') || 'true'; - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { // enter let privacyOptionsListEnter = selection.selectAll('.privacy-options-list') .data([0]) @@ -68,7 +69,7 @@ export function uiSectionPrivacy(context) { .select('input') .property('checked', (_showThirdPartyIcons === 'true')); } - }; + } return section; } diff --git a/modules/ui/sections/validation_issues.js b/modules/ui/sections/validation_issues.js index 2fd0672a0..7824060bb 100644 --- a/modules/ui/sections/validation_issues.js +++ b/modules/ui/sections/validation_issues.js @@ -20,6 +20,7 @@ export function uiSectionValidationIssues(id, severity, context) { var issueCountText = _issues.length > 1000 ? '1000+' : String(_issues.length); return t('issues.' + severity + 's.list_title', { count: issueCountText }); }) + .disclosureContent(renderDisclosureContent) .shouldDisplay(function() { return _issues && _issues.length; }); @@ -36,7 +37,7 @@ export function uiSectionValidationIssues(id, severity, context) { _issues = context.validator().getIssuesBySeverity(getOptions())[severity]; } - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var center = context.map().center(); var graph = context.graph(); @@ -58,7 +59,7 @@ export function uiSectionValidationIssues(id, severity, context) { selection .call(drawIssuesList, issues); - }; + } function drawIssuesList(selection, issues) { var list = selection.selectAll('.issues-list') @@ -209,7 +210,7 @@ export function uiSectionValidationIssues(id, severity, context) { context.validator().on('validated.uiSectionValidationIssues' + id, function() { window.requestIdleCallback(function() { reloadIssues(); - section.rerenderContent(); + section.reRender(); }); }); @@ -221,7 +222,7 @@ export function uiSectionValidationIssues(id, severity, context) { reloadIssues(); } // always reload list to re-sort-by-distance - section.rerenderContent(); + section.reRender(); }); }, 1000) ); diff --git a/modules/ui/sections/validation_options.js b/modules/ui/sections/validation_options.js index 18158297a..ed4197874 100644 --- a/modules/ui/sections/validation_options.js +++ b/modules/ui/sections/validation_options.js @@ -7,9 +7,10 @@ import { uiSection } from '../section'; export function uiSectionValidationOptions(context) { - var section = uiSection('issues-options', context); + var section = uiSection('issues-options', context) + .content(renderContent); - section.renderContent = function(selection) { + function renderContent(selection) { var container = selection.selectAll('.issues-options-container') .data([0]); @@ -54,7 +55,7 @@ export function uiSectionValidationOptions(context) { valuesEnter .append('span') .text(function(d) { return t('issues.options.' + d.key + '.' + d.value); }); - }; + } function getOptions() { return { diff --git a/modules/ui/sections/validation_rules.js b/modules/ui/sections/validation_rules.js index 28601222a..6004bf13d 100644 --- a/modules/ui/sections/validation_rules.js +++ b/modules/ui/sections/validation_rules.js @@ -15,9 +15,10 @@ export function uiSectionValidationRules(context) { var DEFAULTSQUARE = 5; // see also unsquare_way.js var section = uiSection('issues-rules', context) + .disclosureContent(renderDisclosureContent) .title(t('issues.rules.title')); - section.renderDisclosureContent = function(selection) { + function renderDisclosureContent(selection) { var container = selection.selectAll('.issues-rulelist-container') .data([0]); @@ -61,7 +62,7 @@ export function uiSectionValidationRules(context) { container.selectAll('.issue-rules-list') .call(drawListItems, ruleKeys, 'checkbox', 'rule', toggleRule, isRuleEnabled); - }; + } function drawListItems(selection, data, type, name, change, active) { var items = selection.selectAll('li') diff --git a/modules/ui/sections/validation_status.js b/modules/ui/sections/validation_status.js index 6b90e5d66..ae3bbd151 100644 --- a/modules/ui/sections/validation_status.js +++ b/modules/ui/sections/validation_status.js @@ -7,6 +7,7 @@ import { uiSection } from '../section'; export function uiSectionValidationStatus(context) { var section = uiSection('issues-status', context) + .content(renderContent) .shouldDisplay(function() { var issues = context.validator().getIssues(getOptions()); return issues.length === 0; @@ -19,7 +20,7 @@ export function uiSectionValidationStatus(context) { }; } - section.renderContent = function(selection) { + function renderContent(selection) { var box = selection.selectAll('.box') .data([0]); @@ -48,7 +49,7 @@ export function uiSectionValidationStatus(context) { renderIgnoredIssuesReset(selection); setNoIssuesText(selection); - }; + } function renderIgnoredIssuesReset(selection) { @@ -161,12 +162,12 @@ export function uiSectionValidationStatus(context) { } context.validator().on('validated.uiSectionValidationStatus', function() { - window.requestIdleCallback(section.rerenderContent); + window.requestIdleCallback(section.reRender); }); context.map().on('move.uiSectionValidationStatus', _debounce(function() { - window.requestIdleCallback(section.rerenderContent); + window.requestIdleCallback(section.reRender); }, 1000) );