Don't use global selection in intro (re: #7445)

This commit is contained in:
Quincy Morgan
2020-03-24 11:36:34 -07:00
parent 21f8404deb
commit ece8b90be2
6 changed files with 98 additions and 101 deletions

View File

@@ -1,8 +1,7 @@
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 {
@@ -207,13 +206,13 @@ export function uiIntroArea(context, reveal) {
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -233,11 +232,11 @@ export function uiIntroArea(context, reveal) {
context.enter(modeSelect(context, [_areaID]));
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -250,7 +249,7 @@ export function uiIntroArea(context, reveal) {
});
function checkPresetSearch() {
var first = d3_select('.preset-list-item:first-child');
var first = context.container().select('.preset-list-item:first-child');
if (first.classed('preset-leisure-playground')) {
reveal(first.select('.preset-list-button').node(),
@@ -258,7 +257,7 @@ export function uiIntroArea(context, reveal) {
{ duration: 300 }
);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', eventCancel, true)
.on('keyup.intro', null);
@@ -269,10 +268,10 @@ export function uiIntroArea(context, reveal) {
}
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.on('enter.intro', null);
context.history().on('change.intro', null);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
nextStep();
}
}
@@ -287,16 +286,16 @@ export function uiIntroArea(context, reveal) {
return searchPresets();
}
if (!d3_select('.form-field-description').empty()) {
if (!context.container().select('.form-field-description').empty()) {
return continueTo(describePlayground);
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
// It's possible for the user to add a description in a previous step..
// If they did this already, just continue to next step.
@@ -306,9 +305,9 @@ export function uiIntroArea(context, reveal) {
}
// scroll "Add field" into view
var box = d3_select('.more-fields').node().getBoundingClientRect();
var box = context.container().select('.more-fields').node().getBoundingClientRect();
if (box.top > 300) {
var pane = d3_select('.entity-editor-pane .inspector-body');
var pane = context.container().select('.entity-editor-pane .inspector-body');
var start = pane.node().scrollTop;
var end = start + (box.top - 300);
@@ -330,12 +329,12 @@ export function uiIntroArea(context, reveal) {
{ duration: 300 }
);
d3_select('.more-fields .combobox-input')
context.container().select('.more-fields .combobox-input')
.on('click.intro', function() {
// Watch for the combobox to appear...
var watcher;
watcher = window.setInterval(function() {
if (!d3_select('div.combobox').empty()) {
if (!context.container().select('div.combobox').empty()) {
window.clearInterval(watcher);
continueTo(chooseDescriptionField);
}
@@ -350,8 +349,8 @@ export function uiIntroArea(context, reveal) {
});
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.more-fields .combobox-input').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.more-fields .combobox-input').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
@@ -367,21 +366,21 @@ export function uiIntroArea(context, reveal) {
return searchPresets();
}
if (!d3_select('.form-field-description').empty()) {
if (!context.container().select('.form-field-description').empty()) {
return continueTo(describePlayground);
}
// Make sure combobox is ready..
if (d3_select('div.combobox').empty()) {
if (context.container().select('div.combobox').empty()) {
return continueTo(clickAddField);
}
// Watch for the combobox to go away..
var watcher;
watcher = window.setInterval(function() {
if (d3_select('div.combobox').empty()) {
if (context.container().select('div.combobox').empty()) {
window.clearInterval(watcher);
timeout(function() {
if (d3_select('.form-field-description').empty()) {
if (context.container().select('.form-field-description').empty()) {
continueTo(retryChooseDescription);
} else {
continueTo(describePlayground);
@@ -417,9 +416,9 @@ export function uiIntroArea(context, reveal) {
}
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
if (d3_select('.form-field-description').empty()) {
if (context.container().select('.form-field-description').empty()) {
return continueTo(retryChooseDescription);
}
@@ -449,7 +448,7 @@ export function uiIntroArea(context, reveal) {
}
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
reveal('.entity-editor-pane',
t('intro.areas.retry_add_field', { field: descriptionField.label() }), {
@@ -490,9 +489,9 @@ export function uiIntroArea(context, reveal) {
context.on('enter.intro exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
d3_select('.more-fields .combobox-input').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.more-fields .combobox-input').on('click.intro', null);
};

View File

@@ -1,8 +1,7 @@
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 { t, textDirection } from '../../util/locale';
@@ -207,13 +206,13 @@ export function uiIntroBuilding(context, reveal) {
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
var button = d3_select('.preset-category-building .preset-list-button');
var button = context.container().select('.preset-category-building .preset-list-button');
reveal(button.node(),
t('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
@@ -238,8 +237,8 @@ export function uiIntroBuilding(context, reveal) {
});
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
context.on('enter.intro', null);
nextStep();
}
@@ -256,13 +255,13 @@ export function uiIntroBuilding(context, reveal) {
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
var button = d3_select('.preset-building-house .preset-list-button');
var button = context.container().select('.preset-building-house .preset-list-button');
reveal(button.node(),
t('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
@@ -287,8 +286,8 @@ export function uiIntroBuilding(context, reveal) {
});
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
context.on('enter.intro', null);
nextStep();
}
@@ -545,13 +544,13 @@ export function uiIntroBuilding(context, reveal) {
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -571,11 +570,11 @@ export function uiIntroBuilding(context, reveal) {
context.enter(modeSelect(context, [_tankID]));
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -588,7 +587,7 @@ export function uiIntroBuilding(context, reveal) {
});
function checkPresetSearch() {
var first = d3_select('.preset-list-item:first-child');
var first = context.container().select('.preset-list-item:first-child');
if (first.classed('preset-man_made-storage_tank')) {
reveal(first.select('.preset-list-button').node(),
@@ -596,7 +595,7 @@ export function uiIntroBuilding(context, reveal) {
{ duration: 300 }
);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', eventCancel, true)
.on('keyup.intro', null);
@@ -607,10 +606,10 @@ export function uiIntroBuilding(context, reveal) {
}
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.on('enter.intro', null);
context.history().on('change.intro', null);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
nextStep();
}
}
@@ -777,9 +776,9 @@ export function uiIntroBuilding(context, reveal) {
context.on('enter.intro exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
d3_select('.more-fields .combobox-input').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.more-fields .combobox-input').on('click.intro', null);
};

View File

@@ -242,15 +242,15 @@ export function uiIntroLine(context, reveal) {
return chapter.restart();
});
var button = d3_select('.preset-category-road_minor .preset-list-button');
var button = context.container().select('.preset-category-road_minor .preset-list-button');
if (button.empty()) return chapter.restart();
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
// reset pane, in case user somehow happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '-100%');
context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
reveal(button.node(),
t('intro.lines.choose_category_road', { category: roadCategory.name() })
@@ -263,8 +263,8 @@ export function uiIntroLine(context, reveal) {
}, 400); // after editor pane visible
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
@@ -278,7 +278,7 @@ export function uiIntroLine(context, reveal) {
return chapter.restart();
});
var subgrid = d3_select('.preset-category-road_minor .subgrid');
var subgrid = context.container().select('.preset-category-road_minor .subgrid');
if (subgrid.empty()) return chapter.restart();
subgrid.selectAll(':not(.preset-highway-residential) .preset-list-button')
@@ -299,7 +299,7 @@ export function uiIntroLine(context, reveal) {
}, 300);
function continueTo(nextStep) {
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
@@ -315,10 +315,10 @@ export function uiIntroLine(context, reveal) {
});
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
timeout(function() {
var button = d3_select('.entity-editor-pane .preset-list-button');
var button = context.container().select('.entity-editor-pane .preset-list-button');
reveal(button.node(),
t('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
@@ -331,8 +331,8 @@ export function uiIntroLine(context, reveal) {
}, 500);
function continueTo(nextStep) {
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
context.on('exit.intro', null);
nextStep();
}
@@ -1057,8 +1057,8 @@ export function uiIntroLine(context, reveal) {
context.on('enter.intro exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-list-button').on('click.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-list-button').on('click.intro', null);
};

View File

@@ -252,7 +252,7 @@ export function uiIntroNavigation(context, reveal) {
if (!isTownHallSelected()) return clickTownHall();
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
var onClick = function() { continueTo(presetTownHall); };
@@ -274,7 +274,7 @@ export function uiIntroNavigation(context, reveal) {
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
nextStep();
}
}
@@ -284,9 +284,9 @@ export function uiIntroNavigation(context, reveal) {
if (!isTownHallSelected()) return clickTownHall();
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
// preset match, in case the user happened to change it.
var entity = context.entity(context.selectedIDs()[0]);
@@ -312,7 +312,7 @@ export function uiIntroNavigation(context, reveal) {
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
nextStep();
}
}
@@ -322,9 +322,9 @@ export function uiIntroNavigation(context, reveal) {
if (!isTownHallSelected()) return clickTownHall();
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
var onClick = function() { continueTo(closeTownHall); };
@@ -346,7 +346,7 @@ export function uiIntroNavigation(context, reveal) {
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
nextStep();
}
}
@@ -398,14 +398,14 @@ export function uiIntroNavigation(context, reveal) {
t('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
);
d3_select('.search-header input')
context.container().select('.search-header input')
.on('keyup.intro', checkSearchResult);
}, msec + 100);
}
function checkSearchResult() {
var first = d3_select('.feature-list-item:nth-child(0n+2)'); // skip "No Results" item
var first = context.container().select('.feature-list-item:nth-child(0n+2)'); // skip "No Results" item
var firstName = first.select('.entity-name');
var name = t('intro.graph.name.spring-street');
@@ -419,14 +419,14 @@ export function uiIntroNavigation(context, reveal) {
continueTo(selectedStreet);
});
d3_select('.search-header input')
context.container().select('.search-header input')
.on('keydown.intro', eventCancel, true)
.on('keyup.intro', null);
}
function continueTo(nextStep) {
context.on('exit.intro', null);
d3_select('.search-header input')
context.container().select('.search-header input')
.on('keydown.intro', null)
.on('keyup.intro', null);
nextStep();
@@ -550,8 +550,8 @@ export function uiIntroNavigation(context, reveal) {
context.on('enter.intro exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.search-header input').on('keydown.intro keyup.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.search-header input').on('keydown.intro keyup.intro', null);
};

View File

@@ -121,9 +121,9 @@ export function uiIntroPoint(context, reveal) {
}
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -142,9 +142,9 @@ export function uiIntroPoint(context, reveal) {
context.enter(modeSelect(context, [_pointID]));
// disallow scrolling
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', null)
.on('keyup.intro', checkPresetSearch);
@@ -158,10 +158,10 @@ export function uiIntroPoint(context, reveal) {
function checkPresetSearch() {
var first = d3_select('.preset-list-item:first-child');
var first = context.container().select('.preset-list-item:first-child');
if (first.classed('preset-amenity-cafe')) {
d3_select('.preset-search-input')
context.container().select('.preset-search-input')
.on('keydown.intro', eventCancel, true)
.on('keyup.intro', null);
@@ -179,8 +179,8 @@ export function uiIntroPoint(context, reveal) {
function continueTo(nextStep) {
context.on('enter.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', null);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', null);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
nextStep();
}
}
@@ -217,7 +217,7 @@ export function uiIntroPoint(context, reveal) {
}
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
timeout(function() {
// It's possible for the user to add a name in a previous step..
@@ -258,7 +258,7 @@ export function uiIntroPoint(context, reveal) {
function addCloseEditor() {
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
var selector = '.entity-editor-pane button.preset-close svg use';
var href = d3_select(selector).attr('href') || '#iD-icon-close';
@@ -327,7 +327,7 @@ export function uiIntroPoint(context, reveal) {
}
// reset pane, in case user happened to untag the point..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
context.on('exit.intro', function() {
continueTo(reselectPoint);
@@ -357,7 +357,7 @@ export function uiIntroPoint(context, reveal) {
}
// reset pane, in case user happened to change it..
d3_select('.inspector-wrap .panewrap').style('right', '0%');
context.container().select('.inspector-wrap .panewrap').style('right', '0%');
context.on('exit.intro', function() {
continueTo(rightClickPoint);
@@ -496,8 +496,8 @@ export function uiIntroPoint(context, reveal) {
context.on('enter.intro exit.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
context.container().select('.inspector-wrap').on('wheel.intro', eventCancel);
context.container().select('.preset-search-input').on('keydown.intro keyup.intro', null);
};

View File

@@ -71,7 +71,7 @@ export function uiIntroWelcome(context, reveal) {
listener.on('click', function(which) {
if (which === 'left') {
d3_select('.curtain-tooltip.intro-mouse .counter')
context.container().select('.curtain-tooltip.intro-mouse .counter')
.text(String(++counter));
if (counter === times) {
@@ -112,7 +112,7 @@ export function uiIntroWelcome(context, reveal) {
listener.on('click', function(which) {
if (which === 'right') {
d3_select('.curtain-tooltip.intro-mouse .counter')
context.container().select('.curtain-tooltip.intro-mouse .counter')
.text(String(++counter));
if (counter === times) {
@@ -145,7 +145,7 @@ export function uiIntroWelcome(context, reveal) {
chapter.exit = function() {
listener.off();
d3_select('.curtain-tooltip.intro-mouse')
context.container().select('.curtain-tooltip.intro-mouse')
.selectAll('.counter')
.remove();
};
@@ -283,4 +283,3 @@ function clickListener() {
return utilRebind(behavior, dispatch, 'on');
}