From 5a6a194ddf0746381c5c5cdfd534221c60161eb6 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 11 May 2017 11:56:47 -0400 Subject: [PATCH] Prevent scrolling where user can get stuck in walkthrough (closes #4033) --- modules/ui/intro/area.js | 19 +++++++++++++++++++ modules/ui/intro/building.js | 17 +++++++++++++++++ modules/ui/intro/line.js | 23 +++++++++++++++++++++-- modules/ui/intro/navigation.js | 11 +++++++++++ modules/ui/intro/point.js | 8 ++++++++ 5 files changed, 76 insertions(+), 2 deletions(-) diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 236d52120..8b605fd03 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -192,6 +192,9 @@ export function uiIntroArea(context, reveal) { context.enter(modeSelect(context, [areaId])); } + // disallow scrolling + d3.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%'); @@ -217,6 +220,8 @@ export function uiIntroArea(context, reveal) { // reset pane, in case user somehow happened to change it.. d3.select('.inspector-wrap .panewrap').style('right', '-100%'); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); d3.select('.preset-search-input') .on('keydown.intro', null) @@ -250,6 +255,7 @@ export function uiIntroArea(context, reveal) { } function continueTo(nextStep) { + d3.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); @@ -267,6 +273,13 @@ export function uiIntroArea(context, reveal) { return searchPresets(); } + if (!d3.select('.form-field-description').empty()) { + return continueTo(describePlayground); + } + + // disallow scrolling + d3.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%'); @@ -294,6 +307,7 @@ 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.on('exit.intro', null); nextStep(); @@ -310,6 +324,10 @@ export function uiIntroArea(context, reveal) { return searchPresets(); } + if (!d3.select('.form-field-description').empty()) { + return continueTo(describePlayground); + } + // Make sure combobox is ready.. if (d3.select('div.combobox').empty()) { return continueTo(clickAddField); @@ -429,6 +447,7 @@ 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); }; diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index b0e5e2c56..6348d42fe 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -199,6 +199,9 @@ export function uiIntroBuilding(context, reveal) { context.enter(modeSelect(context, [houseId])); } + // disallow scrolling + d3.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%'); @@ -228,6 +231,7 @@ 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.on('enter.intro', null); nextStep(); @@ -244,6 +248,9 @@ export function uiIntroBuilding(context, reveal) { context.enter(modeSelect(context, [houseId])); } + // disallow scrolling + d3.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%'); @@ -259,6 +266,8 @@ export function uiIntroBuilding(context, reveal) { button.on('click.intro', null); continueTo(closeEditorHouse); }); + + }, 400); // after preset list pane visible.. context.on('enter.intro', function(mode) { @@ -272,6 +281,7 @@ 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.on('enter.intro', null); nextStep(); @@ -530,6 +540,9 @@ export function uiIntroBuilding(context, reveal) { context.enter(modeSelect(context, [tankId])); } + // disallow scrolling + d3.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%'); @@ -555,6 +568,8 @@ export function uiIntroBuilding(context, reveal) { // reset pane, in case user somehow happened to change it.. d3.select('.inspector-wrap .panewrap').style('right', '-100%'); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); d3.select('.preset-search-input') .on('keydown.intro', null) @@ -588,6 +603,7 @@ export function uiIntroBuilding(context, reveal) { } function continueTo(nextStep) { + d3.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); @@ -757,6 +773,7 @@ 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); }; diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 01b284c65..754404c63 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -248,14 +248,25 @@ export function uiIntroLine(context, reveal) { var button = d3.select('.preset-category-road .preset-list-button'); if (button.empty()) return chapter.restart(); + // disallow scrolling + d3.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%'); + reveal(button.node(), t('intro.lines.choose_category_road', { category: roadCategory.name() }) ); - button.on('click.intro', function() { continueTo(choosePresetResidential); }); - }, 500); + + button.on('click.intro', function() { + continueTo(choosePresetResidential); + }); + + }, 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.on('exit.intro', null); nextStep(); @@ -310,17 +321,24 @@ export function uiIntroLine(context, reveal) { return chapter.restart(); }); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); + timeout(function() { var button = d3.select('.entity-editor-pane .preset-list-button'); + reveal(button.node(), t('intro.lines.retry_preset_residential', { preset: residentialPreset.name() }) ); + button.on('click.intro', function() { continueTo(chooseCategoryRoad); }); + }, 500); function continueTo(nextStep) { + d3.select('.inspector-wrap').on('wheel.intro', null); d3.select('.preset-list-button').on('click.intro', null); context.on('exit.intro', null); nextStep(); @@ -1058,6 +1076,7 @@ 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); }; diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index ad36e2670..003aa3c15 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -249,6 +249,9 @@ export function uiIntroNavigation(context, reveal) { function editorTownHall() { if (!isTownHallSelected()) return clickTownHall(); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); + var onClick = function() { continueTo(presetTownHall); }; reveal('.entity-editor-pane', @@ -269,6 +272,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); nextStep(); } } @@ -279,6 +283,8 @@ export function uiIntroNavigation(context, reveal) { // reset pane, in case user happened to change it.. d3.select('.inspector-wrap .panewrap').style('right', '0%'); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); // preset match, in case the user happened to change it. var entity = context.entity(context.selectedIDs()[0]); @@ -304,6 +310,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); nextStep(); } } @@ -314,6 +321,8 @@ export function uiIntroNavigation(context, reveal) { // reset pane, in case user happened to change it.. d3.select('.inspector-wrap .panewrap').style('right', '0%'); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); var onClick = function() { continueTo(closeTownHall); }; @@ -335,6 +344,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); nextStep(); } } @@ -538,6 +548,7 @@ 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); }; diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 32883893f..b52fb9085 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -114,6 +114,9 @@ export function uiIntroPoint(context, reveal) { return addPoint(); } + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); + d3.select('.preset-search-input') .on('keydown.intro', null) .on('keyup.intro', checkPresetSearch); @@ -132,6 +135,9 @@ export function uiIntroPoint(context, reveal) { // keep the user's point selected.. context.enter(modeSelect(context, [pointId])); + // disallow scrolling + d3.select('.inspector-wrap').on('wheel.intro', eventCancel); + d3.select('.preset-search-input') .on('keydown.intro', null) .on('keyup.intro', checkPresetSearch); @@ -167,6 +173,7 @@ 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); nextStep(); } @@ -483,6 +490,7 @@ 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); };