From f4c9f7487a884724c73579b327877fabd131d4f4 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 19 Dec 2015 23:21:14 -0500 Subject: [PATCH] Add search to walkthrough (closes #2363) --- data/core.yaml | 4 ++- dist/locales/en.json | 6 +++-- js/id/ui/intro/navigation.js | 49 ++++++++++++++++++++++++++++-------- js/id/ui/intro/point.js | 21 ++++++++++------ 4 files changed, 58 insertions(+), 22 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 2f6a87cbe..1b92a18ae 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -691,8 +691,10 @@ en: 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!**" 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.**" - header: "The header shows us the feature type." 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 pressing the {button} button in the top right.**" + search: "You can also search for features in the current view, or worldwide. **Search for Spring Street**" + choose: "**Choose Spring Street from the list to select it.**" + chosen: "Spring Street is now selected. **Close the feature editor by pressing the {button} button.**" points: title: "Points" add: "Points can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index 76c721d5a..7d1d83591 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -515,8 +515,10 @@ "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!**", "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.**", - "header": "The header shows us the feature type.", - "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 pressing the {button} button in the top right.**" + "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 pressing the {button} button in the top right.**", + "search": "You can also search for features in the current view, or worldwide. **Search for Spring Street**", + "choose": "**Choose Spring Street from the list to select it.**", + "chosen": "Spring Street is now selected. **Close the feature editor by pressing the {button} button.**" }, "points": { "title": "Points", diff --git a/js/id/ui/intro/navigation.js b/js/id/ui/intro/navigation.js index 3f7e690c8..a7c12c38f 100644 --- a/js/id/ui/intro/navigation.js +++ b/js/id/ui/intro/navigation.js @@ -10,15 +10,10 @@ iD.ui.intro.navigation = function(context, reveal) { timeouts.push(window.setTimeout(f, t)); } - /* - * Steps: - * Drag map - * Select poi - * Show editor header - * Show editor pane - * Select road - * Show header - */ + function eventCancel() { + d3.event.stopPropagation(); + d3.event.preventDefault(); + } step.enter = function() { var rect = context.surfaceRect(), @@ -64,16 +59,48 @@ iD.ui.intro.navigation = function(context, reveal) { set(function() { reveal('.entity-editor-pane', t('intro.navigation.pane', { button: iD.ui.intro.icon('#icon-close', 'pre-text') })); - context.on('exit.intro', event.done); + context.on('exit.intro', streetSearch); }, 700); } + + function streetSearch() { + context.on('exit.intro', null); + reveal('.search-header input', t('intro.navigation.search')); + d3.select('.search-header input').on('keyup.intro', searchResult); + } + + function searchResult() { + var first = d3.select('.feature-list-item:nth-child(0n+2)'), // skip No Results item + firstName = first.select('.entity-name'); + + if (!firstName.empty() && firstName.text() === 'Spring Street') { + reveal(first.node(), t('intro.navigation.choose')); + context.on('exit.intro', selectedStreet); + d3.select('.search-header input') + .on('keydown.intro', eventCancel, true) + .on('keyup.intro', null); + } + } + + function selectedStreet() { + var springSt = [-85.63585099140167, 41.942506848938926]; + context.map().center(springSt); + context.on('exit.intro', event.done); + set(function() { + reveal('.entity-editor-pane', + t('intro.navigation.chosen', { button: iD.ui.intro.icon('#icon-close', 'pre-text') })); + }, 400); + } }; step.exit = function() { + timeouts.forEach(window.clearTimeout); context.map().on('move.intro', null); context.on('enter.intro', null); context.on('exit.intro', null); - timeouts.forEach(window.clearTimeout); + d3.select('.search-header input') + .on('keydown.intro', null) + .on('keyup.intro', null); }; return d3.rebind(step, event, 'on'); diff --git a/js/id/ui/intro/point.js b/js/id/ui/intro/point.js index ea5658da4..56eee2bb6 100644 --- a/js/id/ui/intro/point.js +++ b/js/id/ui/intro/point.js @@ -10,6 +10,11 @@ iD.ui.intro.point = function(context, reveal) { timeouts.push(window.setTimeout(f, t)); } + function eventCancel() { + d3.event.stopPropagation(); + d3.event.preventDefault(); + } + step.enter = function() { context.map().centerZoom([-85.63279, 41.94394], 19); reveal('button.add-point', @@ -39,7 +44,8 @@ iD.ui.intro.point = function(context, reveal) { context.on('enter.intro', null); setTimeout(function() { - reveal('.preset-search-input', t('intro.points.search', {name: context.presets().item('amenity/cafe').name()})); + reveal('.preset-search-input', + t('intro.points.search', {name: context.presets().item('amenity/cafe').name()})); d3.select('.preset-search-input').on('keyup.intro', keySearch); }, 500); } @@ -49,12 +55,9 @@ iD.ui.intro.point = function(context, reveal) { if (first.classed('preset-amenity-cafe')) { reveal(first.select('.preset-list-button').node(), t('intro.points.choose')); d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset); - - d3.select('.preset-search-input').on('keydown.intro', function() { - // Prevent search from updating and changing the grid - d3.event.stopPropagation(); - d3.event.preventDefault(); - }, true).on('keyup.intro', null); + d3.select('.preset-search-input') + .on('keydown.intro', eventCancel, true) + .on('keyup.intro', null); } } @@ -140,7 +143,9 @@ iD.ui.intro.point = function(context, reveal) { context.on('enter.intro', null); context.map().on('move.intro', null); context.history().on('change.intro', null); - d3.select('.preset-search-input').on('keyup.intro', null).on('keydown.intro', null); + d3.select('.preset-search-input') + .on('keyup.intro', null) + .on('keydown.intro', null); }; return d3.rebind(step, event, 'on');