diff --git a/data/core.yaml b/data/core.yaml index 7953cd0e3..8f40b5ac7 100644 --- a/data/core.yaml +++ b/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 diff --git a/data/locales.js b/data/locales.js index 66020fedc..57e88fb46 100644 --- a/data/locales.js +++ b/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", diff --git a/js/id/id.js b/js/id/id.js index 196a29fad..d6696ca02 100644 --- a/js/id/id.js +++ b/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) { diff --git a/js/id/ui.js b/js/id/ui.js index 20c3bc4fd..158cfa0f4 100644 --- a/js/id/ui.js +++ b/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)); }; }; diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js index 419b13270..843f06812 100644 --- a/js/id/ui/intro.js +++ b/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; }; diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js index 271278940..add6a394e 100644 --- a/js/id/ui/splash.js +++ b/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, diff --git a/js/lib/d3.curtain.js b/js/lib/d3.curtain.js index 5c4b60880..6b7383a9e 100644 --- a/js/lib/d3.curtain.js +++ b/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'); };