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