From 0931459dba30d47e8d270e5bbe8e5f6fd009114f Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Tue, 24 Mar 2020 13:02:06 -0700 Subject: [PATCH] Reduce use of global selection (re: #7445) --- modules/core/context.js | 4 +-- modules/modes/select.js | 4 +-- modules/modes/select_data.js | 2 +- modules/modes/select_error.js | 2 +- modules/modes/select_note.js | 2 +- modules/svg/data.js | 2 +- modules/svg/debug.js | 3 +-- modules/svg/openstreetcam_images.js | 2 +- modules/svg/streetside.js | 2 +- modules/ui/combobox.js | 8 +++--- modules/ui/edit_menu.js | 2 +- modules/ui/feature_info.js | 4 +-- modules/ui/field_help.js | 2 +- modules/ui/fields/check.js | 2 +- modules/ui/fields/lanes.js | 3 +-- modules/ui/fields/restrictions.js | 6 ++--- modules/ui/fields/wikidata.js | 28 +++++++++++--------- modules/ui/init.js | 2 +- modules/ui/note_editor.js | 2 +- modules/ui/sections/preset_fields.js | 5 ++-- modules/ui/sections/raw_member_editor.js | 2 +- modules/ui/sections/raw_membership_editor.js | 2 +- modules/ui/sections/raw_tag_editor.js | 4 +-- 23 files changed, 48 insertions(+), 47 deletions(-) diff --git a/modules/core/context.js b/modules/core/context.js index e8d85eddd..5c5dded2e 100644 --- a/modules/core/context.js +++ b/modules/core/context.js @@ -204,7 +204,7 @@ export function coreContext() { // This is called someteimes, but also on the `window.onbeforeunload` handler context.save = () => { // no history save, no message onbeforeunload - if (_inIntro || d3_select('.modal').size()) return; + if (_inIntro || context.container().select('.modal').size()) return; let canSave; if (_mode && _mode.id === 'save') { @@ -450,7 +450,7 @@ export function coreContext() { _uploader.reset(); // don't leave stale state in the inspector - d3_select('.inspector-wrap *').remove(); + context.container().select('.inspector-wrap *').remove(); return context; }; diff --git a/modules/modes/select.js b/modules/modes/select.js index edefddd23..7197905f3 100644 --- a/modules/modes/select.js +++ b/modules/modes/select.js @@ -184,7 +184,7 @@ export function modeSelect(context, selectedIDs) { function toggleMenu() { - if (d3_select('.edit-menu').empty()) { + if (context.surface().select('.edit-menu').empty()) { positionMenu(); showMenu(); } else { @@ -411,7 +411,7 @@ export function modeSelect(context, selectedIDs) { function esc() { - if (d3_select('.combobox').size()) return; + if (context.container().select('.combobox').size()) return; context.enter(modeBrowse(context)); } diff --git a/modules/modes/select_data.js b/modules/modes/select_data.js index 0a6e3c5da..d7cb9ff10 100644 --- a/modules/modes/select_data.js +++ b/modules/modes/select_data.js @@ -57,7 +57,7 @@ export function modeSelectData(context, selectedDatum) { function esc() { - if (d3_select('.combobox').size()) return; + if (context.container().select('.combobox').size()) return; context.enter(modeBrowse(context)); } diff --git a/modules/modes/select_error.js b/modules/modes/select_error.js index 751d972b2..b1f554568 100644 --- a/modules/modes/select_error.js +++ b/modules/modes/select_error.js @@ -137,7 +137,7 @@ export function modeSelectError(context, selectedErrorID, selectedErrorService) } function esc() { - if (d3_select('.combobox').size()) return; + if (context.container().select('.combobox').size()) return; context.enter(modeBrowse(context)); } }; diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js index 3381f4daf..cf1f1398b 100644 --- a/modules/modes/select_note.js +++ b/modules/modes/select_note.js @@ -81,7 +81,7 @@ export function modeSelectNote(context, selectedNoteID) { function esc() { - if (d3_select('.combobox').size()) return; + if (context.container().select('.combobox').size()) return; context.enter(modeBrowse(context)); } diff --git a/modules/svg/data.js b/modules/svg/data.js index 859e604cf..c18f9215f 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -42,7 +42,7 @@ export function svgData(projection, context, dispatch) { d3_event.dataTransfer.dropEffect = 'copy'; } - d3_select('body') + context.container() .attr('dropzone', 'copy') .on('drop.svgData', function() { d3_event.stopPropagation(); diff --git a/modules/svg/debug.js b/modules/svg/debug.js index 9ae528bda..496aabe28 100644 --- a/modules/svg/debug.js +++ b/modules/svg/debug.js @@ -1,4 +1,3 @@ -import { select as d3_select } from 'd3-selection'; import { svgPath } from './helpers'; @@ -30,7 +29,7 @@ export function svgDebug(projection, context) { } - let legend = d3_select('.main-content') + let legend = context.container().select('.main-content') .selectAll('.debug-legend') .data(debugData.length ? [0] : []); diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index 2ce63e4c4..40df2e7b4 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -106,7 +106,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { context.photos().on('change.openstreetcam_images', update); function update() { - var viewer = d3_select('.photoviewer'); + var viewer = context.container().select('.photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 1101f32e1..81a0b9cff 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -163,7 +163,7 @@ export function svgStreetside(projection, context, dispatch) { * update(). */ function update() { - var viewer = d3_select('.photoviewer'); + var viewer = context.container().select('.photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); var showMarkers = (z >= minMarkerZoom); diff --git a/modules/ui/combobox.js b/modules/ui/combobox.js index ba957ecbb..2a042f524 100644 --- a/modules/ui/combobox.js +++ b/modules/ui/combobox.js @@ -142,7 +142,7 @@ export function uiCombobox(context, klass) { d3_event.preventDefault(); }); - d3_select('body') + container .on('scroll.combo-scroll', render, true); } @@ -156,7 +156,7 @@ export function uiCombobox(context, klass) { container.selectAll('.combobox') .remove(); - d3_select('body') + container .on('scroll.combo-scroll', null); } @@ -486,7 +486,7 @@ export function uiCombobox(context, klass) { } -uiCombobox.off = function(input) { +uiCombobox.off = function(input, context) { input .on('focus.combo-input', null) .on('blur.combo-input', null) @@ -497,6 +497,6 @@ uiCombobox.off = function(input) { .on('mouseup.combo-input', null); - d3_select('body') + context.container() .on('scroll.combo-scroll', null); }; diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js index f39966acd..1795a5cd2 100644 --- a/modules/ui/edit_menu.js +++ b/modules/ui/edit_menu.js @@ -106,7 +106,7 @@ export function uiEditMenu(context, operations) { .classed('disabled', function(d) { return d.disabled(); }); - tooltip = d3_select('.ideditor') + tooltip = context.container() .append('div') .attr('class', 'popover tooltip edit-menu-tooltip'); diff --git a/modules/ui/feature_info.js b/modules/ui/feature_info.js index f4504caa6..c8f2e8be8 100644 --- a/modules/ui/feature_info.js +++ b/modules/ui/feature_info.js @@ -1,4 +1,4 @@ -import { event as d3_event, select as d3_select } from 'd3-selection'; +import { event as d3_event } from 'd3-selection'; import { t } from '../util/locale'; import { uiTooltipHtml } from './tooltipHtml'; @@ -37,7 +37,7 @@ export function uiFeatureInfo(context) { tooltipBehavior.hide(); d3_event.preventDefault(); // open the Map Data pane - context.ui().togglePanes(d3_select('.map-panes .map-data-pane')); + context.ui().togglePanes(context.container().select('.map-panes .map-data-pane')); }); } diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js index 78eeb1158..d86280553 100644 --- a/modules/ui/field_help.js +++ b/modules/ui/field_help.js @@ -181,7 +181,7 @@ export function uiFieldHelp(context, fieldName) { if (_wrap.empty()) return; // absolute position relative to the inspector, so it "floats" above the fields - _inspector = d3_select('.sidebar .entity-editor-pane .inspector-body'); + _inspector = context.container().select('.sidebar .entity-editor-pane .inspector-body'); if (_inspector.empty()) return; _body = _inspector.selectAll('.field-help-body') diff --git a/modules/ui/fields/check.js b/modules/ui/fields/check.js index 156967469..111220820 100644 --- a/modules/ui/fields/check.js +++ b/modules/ui/fields/check.js @@ -68,7 +68,7 @@ export function uiFieldCheck(field, context) { function reverserHidden() { - if (!d3_select('div.inspector-hover').empty()) return true; + if (!context.container().select('div.inspector-hover').empty()) return true; return !(_value === 'yes' || (_impliedYes && !_value)); } diff --git a/modules/ui/fields/lanes.js b/modules/ui/fields/lanes.js index db0462b72..61297df9c 100644 --- a/modules/ui/fields/lanes.js +++ b/modules/ui/fields/lanes.js @@ -1,5 +1,4 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; -import { select as d3_select } from 'd3-selection'; import { utilRebind } from '../../util/rebind'; import { utilGetDimensions } from '../../util/dimensions'; @@ -14,7 +13,7 @@ export function uiFieldLanes(field, context) { function lanes(selection) { var lanesData = context.entity(_entityIDs[0]).lanes(); - if (!d3_select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode) { + if (!context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode) { selection.call(lanes.off); return; } diff --git a/modules/ui/fields/restrictions.js b/modules/ui/fields/restrictions.js index ea1fca845..389f4f9cb 100644 --- a/modules/ui/fields/restrictions.js +++ b/modules/ui/fields/restrictions.js @@ -62,7 +62,7 @@ export function uiFieldRestrictions(field, context) { // if form field is hidden or has detached from dom, clean up. if (!isOK || - !d3_select('.inspector-wrap.inspector-hidden').empty() || + !context.container().select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode || !selection.node().parentNode.parentNode) { selection.call(restrictions.off); @@ -209,7 +209,7 @@ export function uiFieldRestrictions(field, context) { // width: calc as sidebar - padding // height: hardcoded (from `80_app.css`) // var d = utilGetDimensions(selection); - var sdims = utilGetDimensions(d3_select('.sidebar')); + var sdims = utilGetDimensions(context.container().select('.sidebar')); var d = [ sdims[0] - 50, 370 ]; var c = geoVecScale(d, 0.5); var z = 22; @@ -407,7 +407,7 @@ export function uiFieldRestrictions(field, context) { var xPos = -1; if (minChange) { - xPos = utilGetDimensions(d3_select('.sidebar'))[0]; + xPos = utilGetDimensions(context.container().select('.sidebar'))[0]; } if (!minChange || (minChange && Math.abs(xPos - _lastXPos) >= minChange)) { diff --git a/modules/ui/fields/wikidata.js b/modules/ui/fields/wikidata.js index 011e41293..88d8c2780 100644 --- a/modules/ui/fields/wikidata.js +++ b/modules/ui/fields/wikidata.js @@ -23,7 +23,9 @@ import { t } from '../../util/locale'; export function uiFieldWikidata(field, context) { var wikidata = services.wikidata; var dispatch = d3_dispatch('change'); - var searchInput = d3_select(null); + + var _selection = d3_select(null); + var _searchInput = d3_select(null); var _qid = null; var _wikidataEntity = null; var _wikiURL = ''; @@ -40,6 +42,8 @@ export function uiFieldWikidata(field, context) { function wiki(selection) { + _selection = selection; + var wrap = selection.selectAll('.form-field-input-wrap') .data([0]); @@ -64,14 +68,14 @@ export function uiFieldWikidata(field, context) { .append('li') .attr('class', 'wikidata-search'); - searchInput = searchRowEnter + _searchInput = searchRowEnter .append('input') .attr('type', 'text') .attr('id', field.domId) .style('flex', '1') .call(utilNoAuto); - searchInput + _searchInput .on('focus', function() { var node = d3_select(this).node(); node.setSelectionRange(0, node.value.length); @@ -277,14 +281,14 @@ export function uiFieldWikidata(field, context) { label = _wikidataEntity.id.toString(); } } - utilGetSetValue(d3_select('li.wikidata-search input'), label); + utilGetSetValue(_searchInput, label); } wiki.tags = function(tags) { var isMixed = Array.isArray(tags[field.key]); - d3_select('li.wikidata-search input') + _searchInput .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : null) .attr('placeholder', isMixed ? t('inspector.multiple_values') : '') .classed('mixed', isMixed); @@ -309,17 +313,17 @@ export function uiFieldWikidata(field, context) { var description = entityPropertyForDisplay(entity, 'descriptions'); - d3_select('.form-field-wikidata button.wiki-link') + _selection.select('button.wiki-link') .classed('disabled', false); - d3_select('.preset-wikidata-description') + _selection.select('.preset-wikidata-description') .style('display', function(){ return description.length > 0 ? 'flex' : 'none'; }) .select('input') .attr('value', description); - d3_select('.preset-wikidata-identifier') + _selection.select('.preset-wikidata-identifier') .style('display', function(){ return entity.id ? 'flex' : 'none'; }) @@ -333,12 +337,12 @@ export function uiFieldWikidata(field, context) { _wikidataEntity = null; setLabelForEntity(); - d3_select('.preset-wikidata-description') + _selection.select('.preset-wikidata-description') .style('display', 'none'); - d3_select('.preset-wikidata-identifier') + _selection.select('.preset-wikidata-identifier') .style('display', 'none'); - d3_select('.form-field-wikidata button.wiki-link') + _selection.select('button.wiki-link') .classed('disabled', true); if (_qid && _qid !== '') { @@ -374,7 +378,7 @@ export function uiFieldWikidata(field, context) { wiki.focus = function() { - searchInput.node().focus(); + _searchInput.node().focus(); }; diff --git a/modules/ui/init.js b/modules/ui/init.js index 9ce33fb99..513c4c4f4 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -351,7 +351,7 @@ export function uiInit(context) { function pan(d) { return function() { - if (d3_select('.combobox').size()) return; + if (context.container().select('.combobox').size()) return; d3_event.preventDefault(); context.map().pan(d, 100); }; diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index c661810fe..1390ea48c 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -133,7 +133,7 @@ export function uiNoteEditor(context) { // function changeCategory() { // // NOTE: perhaps there is a better way to get value - // var val = d3_select('input[name=\'category\']:checked').property('__data__') || undefined; + // var val = context.container().select('input[name=\'category\']:checked').property('__data__') || undefined; // // store the unsaved category with the note itself // _note = _note.update({ newCategory: val }); diff --git a/modules/ui/sections/preset_fields.js b/modules/ui/sections/preset_fields.js index 5db0f17dc..293297d88 100644 --- a/modules/ui/sections/preset_fields.js +++ b/modules/ui/sections/preset_fields.js @@ -1,7 +1,6 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; import { - event as d3_event, - select as d3_select + event as d3_event } from 'd3-selection'; import { utilArrayIdentical } from '../../util/array'; @@ -126,7 +125,7 @@ export function uiSectionPresetFields(context) { selection.selectAll('.wrap-form-field input') .on('keydown', function() { // if user presses enter, and combobox is not active, accept edits.. - if (d3_event.keyCode === 13 && d3_select('.combobox').empty()) { + if (d3_event.keyCode === 13 && context.container().select('.combobox').empty()) { context.enter(modeBrowse(context)); } }); diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index 934bdaf42..6c14e901a 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/modules/ui/sections/raw_member_editor.js @@ -376,7 +376,7 @@ export function uiSectionRawMemberEditor(context) { var row = d3_select(this); row.selectAll('input.member-role') - .call(uiCombobox.off); + .call(uiCombobox.off, context); } } diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 8633d13f0..b38ebb099 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -431,7 +431,7 @@ export function uiSectionRawMembershipEditor(context) { var row = d3_select(this); row.selectAll('input.member-role') - .call(uiCombobox.off); + .call(uiCombobox.off, context); } } diff --git a/modules/ui/sections/raw_tag_editor.js b/modules/ui/sections/raw_tag_editor.js index 8cfb72c4e..b11d8b176 100644 --- a/modules/ui/sections/raw_tag_editor.js +++ b/modules/ui/sections/raw_tag_editor.js @@ -450,10 +450,10 @@ export function uiSectionRawTagEditor(id, context) { var row = d3_select(this); row.selectAll('input.key') - .call(uiCombobox.off); + .call(uiCombobox.off, context); row.selectAll('input.value') - .call(uiCombobox.off); + .call(uiCombobox.off, context); } function keyChange(d) {