enter walkthrough from splash

data/core.yaml

@@ -163,6 +163,8 @@ en:
   splash:
     welcome: Welcome to the iD OpenStreetMap editor
     text: "This is development version {version}. For more information see {website} and report bugs at {github}."
+    walkthrough: Walkthrough
+    start: Start Editing
   source_switch:
     live: live
     dev: dev

data/locales.js

@@ -202,7 +202,9 @@ locale.en = {
     },
     "splash": {
         "welcome": "Welcome to the iD OpenStreetMap editor",
-        "text": "This is development version {version}. For more information see {website} and report bugs at {github}."
+        "text": "This is development version {version}. For more information see {website} and report bugs at {github}.",
+        "walkthrough": "Walkthrough",
+        "start": "Start Editing"
     },
     "source_switch": {
         "live": "live",

js/id/id.js

@@ -26,7 +26,6 @@ window.iD = function () {
 
     // the connection requires .storage() to be available on calling.
     var connection = iD.Connection(context)
-        .toggle(false)
         .keys(iD.data.keys);
 
     connection.on('load.context', function loadContext(err, result) {

js/id/ui.js

@@ -146,7 +146,6 @@ iD.ui = function(context) {
             .call(iD.ui.Splash(context))
             .call(iD.ui.Restore(context));
 
-        d3.select(document.body).call(iD.ui.intro(context));
     };
 };
 

js/id/ui/intro.js

@@ -4,10 +4,15 @@ iD.ui.intro = function(context) {
 
     function intro(selection) {
 
+        var originalCenter = context.map().center(),
+            originalZoom = context.map().zoom();
+
         // Load semi-real data used in intro
+        context.connection().toggle(false).flush();
         context.history().reset();
         context.history().merge(iD.Graph().load(JSON.parse(iD.introGraph)).entities);
 
+        d3.select('.layer-layer:first-child').style('opacity', 1);
 
         curtain = d3.curtain();
         selection.call(curtain);
@@ -23,20 +28,32 @@ iD.ui.intro = function(context) {
             return s;
         });
 
+        steps.push({
+            name: 'Start Editing',
+            enter: function() {
+                curtain.remove();
+                navwrap.remove();
+                d3.select('.layer-layer:first-child').style('opacity', 0.5);
+                context.connection().toggle(true).flush();
+                context.history().reset();
+                context.map().centerZoom(originalCenter, originalZoom);
+            }
+        });
+
         var navwrap = selection.append('div').attr('class', 'intro-nav-wrap');
 
-        var entered = navwrap.append('div')
+        var buttonwrap = navwrap.append('div')
             .attr('class', 'col12 button-wrap joined')
-            .selectAll('button.step')
-            .data(steps)
+            .selectAll('button.step');
+
+        var entered = buttonwrap.data(steps)
             .enter().append('button')
-                .attr('class', 'step col2')
+                .attr('class', 'step')
                 .on('click', function(d) {
                     enter(d);
                 });
 
         entered.append('h3').text(function(d) { return d.name; });
-
         enter(steps[0]);
 
         function enter (newStep) {
@@ -45,6 +62,8 @@ iD.ui.intro = function(context) {
                 step.exit();
             }
 
+            context.enter(iD.modes.Browse(context));
+
             step = newStep;
             step.enter();
 
@@ -52,6 +71,7 @@ iD.ui.intro = function(context) {
                 return d.name === step.name;
             });
         }
+
     }
     return intro;
 };

js/id/ui/splash.js

@@ -22,6 +22,23 @@ iD.ui.Splash = function(context) {
         div.append("h2")
             .text(t('splash.welcome'));
 
+        var buttons = div.append('div').attr('class', 'col12 button-wrap joined');
+
+        buttons.append('button')
+            .attr('class', 'col6')
+            .text(t('splash.walkthrough'))
+            .on('click', function() {
+                d3.select(document.body).call(iD.ui.intro(context));
+                modal.remove();
+            });
+
+        buttons.append('button')
+            .attr('class', 'col6')
+            .text(t('splash.start'))
+            .on('click', function() {
+                modal.remove();
+            });
+
         div.append("p")
             .html(t('splash.text', {
                 version: iD.version,

js/lib/d3.curtain.js

@@ -2,12 +2,13 @@
 d3.curtain = function() {
 
     var event = d3.dispatch(),
+        surface,
         tooltip,
         mask;
 
     function curtain(selection) {
 
-        var surface = selection.append('svg')
+        surface = selection.append('svg')
             .style({
                 'z-index': 1000,
                 'pointer-events': 'none',
@@ -40,7 +41,7 @@ d3.curtain = function() {
         mask = surface.append('defs')
             .append('mask').attr('id', 'mask');
 
-        mask.append('rect')
+        var maskrect = mask.append('rect')
             .style('fill', 'white')
             .attr({
                 x: 0,
@@ -54,7 +55,8 @@ d3.curtain = function() {
                 width: window.innerWidth,
                 height: window.innerHeight
             };
-            mask.attr(size);
+            surface.attr(size);
+            maskrect.attr(size);
             darkness.attr(size);
         });
 
@@ -149,5 +151,10 @@ d3.curtain = function() {
             .remove();
     };
 
+    curtain.remove = function() {
+        surface.remove();
+        tooltip.remove();
+    };
+
     return d3.rebind(curtain, event, 'on');
 };