From e1e366c5f4c778919c1f41a559488d269b0fd72d Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 31 Mar 2017 12:00:46 -0400
Subject: [PATCH] Add a description to the park instead of a name (closes
 #3121)

---
 data/core.yaml           |  4 ++-
 dist/locales/en.json     |  4 ++-
 modules/ui/intro/area.js | 53 ++++++++++++++++++++++++++++++++++++----
 modules/ui/intro/line.js |  2 +-
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 879e8bcd8..878cd89a9 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -842,7 +842,9 @@ en:
       place: "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**"
       search: "**Search for '{name}'.**"
       choose: "**Choose Playground from the list.**"
-      describe: "**Add a name, then click the {button} button to close the feature editor**"
+      add_field: "This playground doesn't have an official name, so we won't add anything in the Name field.  Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**"
+      choose_field: "**Choose Description from the list.**"
+      describe: "**Add a description, then click the {button} button to close the feature editor.**"
       play: "Good job! Try drawing a few more areas. Explore the presets and see what other kinds of areas you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
     lines:
       title: "Lines"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index bea8fbd06..03861ef55 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -703,7 +703,9 @@
                 "place": "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**",
                 "search": "**Search for '{name}'.**",
                 "choose": "**Choose Playground from the list.**",
-                "describe": "**Add a name, then click the {button} button to close the feature editor**",
+                "add_field": "This playground doesn't have an official name, so we won't add anything in the Name field.  Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**",
+                "choose_field": "**Choose Description from the list.**",
+                "describe": "**Add a description, then click the {button} button to close the feature editor.**",
                 "play": "Good job! Try drawing a few more areas. Explore the presets and see what other kinds of areas you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
             },
             "lines": {
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 9bebb5a7f..300ccf614 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -95,7 +95,7 @@ export function uiIntroArea(context, reveal) {
             if (mode.id === 'draw-area')
                 return;
             else if (mode.id === 'select')
-                return continueTo(enterSelect);
+                return continueTo(searchPresets);
             else
                 return chapter.restart();
         });
@@ -108,7 +108,7 @@ export function uiIntroArea(context, reveal) {
     }
 
 
-    function enterSelect() {
+    function searchPresets() {
         if (context.mode().id !== 'select') {
             return chapter.restart();
         }
@@ -142,7 +142,7 @@ export function uiIntroArea(context, reveal) {
                 .on('keyup.intro', null);
 
             context.history().on('change.intro', function() {
-                continueTo(selectedPreset);
+                continueTo(clickAddField);
             });
         }
 
@@ -155,12 +155,54 @@ export function uiIntroArea(context, reveal) {
     }
 
 
-    function selectedPreset() {
+    function clickAddField() {
+        context.on('exit.intro', function() {
+            return chapter.restart();
+        });
+
+        timeout(function() {
+            reveal('.more-fields .combobox-input', t('intro.areas.add_field'));
+
+            d3.select('.more-fields .combobox-input')
+                .on('click.intro', function() {
+                    continueTo(chooseDescriptionField);
+                });
+        }, 500);
+
+        function continueTo(nextStep) {
+            d3.select('.more-fields .combobox-input').on('click.intro', null);
+            context.on('exit.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function chooseDescriptionField() {
+        context.on('exit.intro', function() {
+            return chapter.restart();
+        });
+
+        reveal('div.combobox', t('intro.areas.choose_field'));
+
+        d3.select('div.combobox')
+            .on('click.intro', function() {
+                continueTo(addDescription);
+            });
+
+        function continueTo(nextStep) {
+            d3.select('div.combobox').on('click.intro', null);
+            context.on('exit.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function addDescription() {
         context.on('exit.intro', function() {
             continueTo(play);
         });
 
-        reveal('.pane',
+        reveal('.entity-editor-pane',
             t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') })
         );
 
@@ -196,6 +238,7 @@ export function uiIntroArea(context, reveal) {
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.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 2f155b6a5..7509f3e3d 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -272,7 +272,7 @@ export function uiIntroLine(context, reveal) {
             continueTo(play);
         });
 
-        reveal('.pane',
+        reveal('.entity-editor-pane',
             t('intro.lines.describe', { button: icon('#icon-apply', 'pre-text') })
         );