Add "Start mapping" button to walkthrough

css/app.css

@@ -2374,3 +2374,8 @@ div.typeahead a:first-child {
 .intro-lines-add .tooltip-inner::before {
     background-position: 0px -480px;
 }
+
+.huge-modal-button {
+    height: 180px;
+    width: 100%;
+}

data/intro.yaml

@@ -35,4 +35,5 @@ en:
     startediting:
       help: "More documentation and this walkthrough are available here."
       save: "Don't forget to regularly save your changes!"
+      start: "Start mapping!"
 

data/locales.js

@@ -1468,8 +1468,8 @@ locale.en = {
             "place": "The point can be placed by clicking on the map. **Place the point on top of the building.**",
             "search": "There many different features that can be represented by points. The point you just added is a Cafe. **Search for 'Cafe' **",
             "choose": "**Choose Cafe from the grid.**",
-            "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**",
-            "close": "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**",
+            "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name**",
+            "close": "The feature editor can be closed by clicking on the close button. **Close the feature editor**",
             "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**",
             "fixname": "**Change the name and close the feature editor.**",
             "reselect_delete": "All features on the map can be deleted. **Reselect the point you created.**",
@@ -1491,6 +1491,11 @@ locale.en = {
             "road": "**Select Road from the grid**",
             "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**",
             "describe": "**Name the road and close the feature editor.**"
+        },
+        "startediting": {
+            "help": "More documentation and this walkthrough are available here.",
+            "save": "Don't forget to regularly save your changes!",
+            "start": "Start mapping!"
         }
     }
 };

js/id/ui/intro.js

@@ -29,7 +29,8 @@ iD.ui.intro = function(context) {
         selection.call(curtain);
 
         function reveal(box, textid, duration) {
-            curtain.reveal(box, t(textid), textid.replace(/\./g, '-'), duration);
+            if (textid) curtain.reveal(box, t(textid), textid.replace(/\./g, '-'), duration);
+            else curtain.reveal(box, '', '', duration);
         }
 
         var steps = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(step, i) {

js/id/ui/intro/start_editing.js

@@ -1,6 +1,7 @@
 iD.ui.intro.startEditing = function(context, reveal) {
 
     var event = d3.dispatch('done', 'startEditing'),
+        modal,
         timeouts = [];
 
     var step = {
@@ -20,13 +21,35 @@ iD.ui.intro.startEditing = function(context, reveal) {
         }, 3500);
 
         timeout(function() {
-            reveal('#surface', 'intro.startediting.save');
+            reveal('#surface');
         }, 7000);
 
-        timeout(event.startEditing, 7500);
+        timeout(function() {
+            modal = iD.ui.modal(context.container());
+
+            modal.select('.modal')
+                .attr('class', 'modal-splash modal col6');
+
+            modal.selectAll('.close').remove();
+
+            modal.select('.content')
+                .append('div')
+                    .attr('class', 'fillL')
+                    .append('div')
+                        .attr('class','modal-section')
+                        .append('button')
+                            .attr('class', 'huge-modal-button')
+                            .on('click', function() {
+                                event.startEditing();
+                                modal.remove();
+                            })
+                            .append('h2')
+                                .text(t('intro.startediting.start'));
+        }, 7500);
     };
 
     step.exit = function() {
+        if (modal) modal.remove();
         timeouts.forEach(window.clearTimeout);
     };
 

js/lib/d3.curtain.js

@@ -81,18 +81,22 @@ d3.curtain = function() {
         ];
 
         // pseudo markdown bold text hack
-        var parts = text.split('**');
-        var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
-        if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';
+        if (text) {
+            var parts = text.split('**');
+            var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
+            if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';
 
-        tooltip
-            .style('top', pos[1] + 'px')
-            .style('left', pos[0] + 'px')
-            .attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + tooltipclass)
-            .select('.tooltip-inner')
-                .html(html);
+            tooltip
+                .style('top', pos[1] + 'px')
+                .style('left', pos[0] + 'px')
+                .attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + tooltipclass)
+                .select('.tooltip-inner')
+                    .html(html);
 
-        if (duration !== 0) tooltip.call(iD.ui.Toggle(true));
+            if (duration !== 0) tooltip.call(iD.ui.Toggle(true));
+        } else {
+            tooltip.call(iD.ui.Toggle(false));
+        }
     };
 
     curtain.cut = function(datum, duration) {