diff --git a/data/intro.yaml b/data/intro.yaml index 37d218531..eabcbbea2 100644 --- a/data/intro.yaml +++ b/data/intro.yaml @@ -32,4 +32,7 @@ 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!" diff --git a/index.html b/index.html index 9efc5e3cc..9f4128270 100644 --- a/index.html +++ b/index.html @@ -107,6 +107,7 @@ + diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js index ac3bf9892..7d3d23350 100644 --- a/js/id/ui/intro.js +++ b/js/id/ui/intro.js @@ -18,12 +18,17 @@ iD.ui.intro = function(context) { context.history().reset(); context.history().merge(iD.Graph().load(JSON.parse(iD.introGraph)).entities); + // Block saving + var savebutton = d3.select('#bar button.save'), + save = savebutton.on('click'); + savebutton.on('click', null); + d3.select('.layer-layer:first-child').style('opacity', 1); var curtain = d3.curtain(); selection.call(curtain); - var steps = ['navigation', 'point', 'area', 'line'].map(function(step, i) { + var steps = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(step, i) { var s = iD.ui.intro[step](context, curtain) .on('done', function() { entered.filter(function(d) { @@ -34,17 +39,15 @@ 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', opacity); - context.connection().toggle(true).flush().loadedTiles(loadedTiles); - context.history().reset().merge(baseEntities); - if (history) context.history().fromJSON(history); - window.location.replace(hash); - } + steps[steps.length - 1].on('startEditing', function() { + curtain.remove(); + navwrap.remove(); + d3.select('.layer-layer:first-child').style('opacity', opacity); + context.connection().toggle(true).flush().loadedTiles(loadedTiles); + context.history().reset().merge(baseEntities); + if (history) context.history().fromJSON(history); + window.location.replace(hash); + d3.select('#bar button.save').on('click', save); }); var navwrap = selection.append('div').attr('class', 'intro-nav-wrap'); @@ -56,9 +59,7 @@ iD.ui.intro = function(context) { var entered = buttonwrap.data(steps) .enter().append('button') .attr('class', 'step') - .on('click', function(d) { - enter(d); - }); + .on('click', enter); entered.append('label').text(function(d) { return d.name; }); enter(steps[0]); diff --git a/js/id/ui/intro/start_editing.js b/js/id/ui/intro/start_editing.js new file mode 100644 index 000000000..bf5797859 --- /dev/null +++ b/js/id/ui/intro/start_editing.js @@ -0,0 +1,34 @@ +iD.ui.intro.startEditing = function(context, curtain) { + + var event = d3.dispatch('done', 'startEditing'), + timeouts = []; + + var step = { + name: 'Start Editing' + }; + + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } + + step.enter = function() { + + curtain.reveal('.map-control.help-control', t('intro.startediting.help')); + + timeout(function() { + curtain.reveal('#bar button.save', t('intro.startediting.save')); + }, 3500); + + timeout(function() { + curtain.reveal('#surface', t('intro.startediting.save')); + }, 7000); + + timeout(event.startEditing, 7500); + }; + + step.exit = function() { + timeouts.forEach(window.clearTimeout); + }; + + return d3.rebind(step, event, 'on'); +};