From 7b23d264e38345cb8710b2a11dca70a477234fde Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 12 Apr 2017 15:21:42 -0400 Subject: [PATCH] Teach zoom, and make sure Spring Street is visible --- data/core.yaml | 1 + dist/locales/en.json | 1 + modules/ui/intro/navigation.js | 86 +++++++++++++++++++++++----------- 3 files changed, 60 insertions(+), 28 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 638dc5f14..350627d51 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -899,6 +899,7 @@ en: navigation: title: "Navigation" drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**" + zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad. **Zoom the map!**" select: "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**" selected: "Great! The point is now selected. Selected items are drawn with a pulsing glow." pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index 9eeed0da4..b6381ccba 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -759,6 +759,7 @@ "navigation": { "title": "Navigation", "drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**", + "zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad. **Zoom the map!**", "select": "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**", "selected": "Great! The point is now selected. Selected items are drawn with a pulsing glow.", "pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**", diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 06a82b90b..edcb0d6ea 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -53,53 +53,77 @@ export function uiIntroNavigation(context, reveal) { context.map().zoom(19).centerEase(townHall, msec); timeout(function() { - var dragged = false; + var centerStart = context.map().center(); reveal(trimmedMap(), t('intro.navigation.drag')); - context.map().on('drawn.intro', function() { reveal(trimmedMap(), t('intro.navigation.drag'), { duration: 0 }); }); context.map().on('move.intro', function() { - dragged = true; + var centerNow = context.map().center(); + if (centerStart[0] !== centerNow[0] || centerStart[1] !== centerNow[1]) { + context.map().on('move.intro', null); + timeout(function() { continueTo(zoomMap); }, 1500); + } }); - d3.select(window).on('mouseup.intro', function() { - if (dragged) continueTo(clickTownHall); - }, true); - - }, msec + 100 ); + }, msec + 100); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + nextStep(); + } + } + + + function zoomMap() { + var zoomStart = context.map().zoom(); + + reveal(trimmedMap(), t('intro.navigation.zoom')); + context.map().on('drawn.intro', function() { + reveal(trimmedMap(), t('intro.navigation.zoom'), { duration: 0 }); + }); + + context.map().on('move.intro', function() { + if (context.map().zoom() !== zoomStart) { + context.map().on('move.intro', null); + timeout(function() { continueTo(clickTownHall); }, 1500); + } + }); function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); - d3.select(window).on('mouseup.intro', null, true); nextStep(); } } function clickTownHall() { - if (!context.hasEntity(hallId)) { - context.history().reset('initial'); - } - + context.history().reset('initial'); var hall = context.entity(hallId); - context.map().centerEase(hall.loc, 600); - context.on('enter.intro', function() { - if (isTownHallSelected()) continueTo(selectedTownHall); - }); + reveal(null, null, { duration: 0 }); + context.map().zoomEase(19, 250); timeout(function() { - var box = pointBox(hall.loc, context); - reveal(box, t('intro.navigation.select')); + context.map().centerEase(hall.loc, 250); - context.map().on('move.intro drawn.intro', function() { + timeout(function() { var box = pointBox(hall.loc, context); - reveal(box, t('intro.navigation.select'), { duration: 0 }); - }); - }, 700); // after centerEase + reveal(box, t('intro.navigation.select')); + + context.map().on('move.intro drawn.intro', function() { + var box = pointBox(hall.loc, context); + reveal(box, t('intro.navigation.select'), { duration: 0 }); + }); + + context.on('enter.intro', function() { + if (isTownHallSelected()) continueTo(selectedTownHall); + }); + }, 300); // after centerEase + + }, 300); // after zoomEase function continueTo(nextStep) { context.on('enter.intro', null); @@ -155,12 +179,18 @@ export function uiIntroNavigation(context, reveal) { function streetSearch() { context.history().reset('initial'); // ensure spring street exists - reveal('.search-header input', - t('intro.navigation.search', { name: t('intro.graph.name.spring-street') }) - ); + var msec = transitionTime(townHall, context.map().center()); + if (msec) { reveal(null, null, { duration: 0 }); } + context.map().zoom(19).centerEase(townHall, msec); // ..and user can see it - d3.select('.search-header input') - .on('keyup.intro', checkSearchResult); + timeout(function() { + reveal('.search-header input', + t('intro.navigation.search', { name: t('intro.graph.name.spring-street') }) + ); + + d3.select('.search-header input') + .on('keyup.intro', checkSearchResult); + }, msec + 100); }