Add a description to the park instead of a name

(closes #3121)

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"

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": {

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

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