Add search to walkthrough (closes #2363)

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.**"

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",

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');

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');