"step" -> "chapter" - each chapter contains many steps

css/80_app.css

@@ -3609,20 +3609,20 @@ img.tile-removing {
     z-index: 1001;
 }
 
-.intro-nav-wrap button.step {
+.intro-nav-wrap button.chapter {
     width: 20%;
 }
 
-.intro-nav-wrap button.step.finished {
+.intro-nav-wrap button.chapter.finished {
     background: #8cd05f;
 }
 
-.intro-nav-wrap button.step .status {
+.intro-nav-wrap button.chapter .status {
     margin-left: 3px;
     display: none;
 }
 
-.intro-nav-wrap button.step.finished .status {
+.intro-nav-wrap button.chapter.finished .status {
     display: inline-block;
 }
 

modules/ui/intro/area.js

@@ -9,12 +9,12 @@ export function uiIntroArea(context, reveal) {
     var dispatch = d3.dispatch('done'),
         timeout;
 
-    var step = {
+    var chapter = {
         title: 'intro.areas.title'
     };
 
 
-    step.enter = function() {
+    chapter.enter = function() {
         var playground = [-85.63552, 41.94159],
             corner = [-85.63565411045074, 41.9417715536927];
         context.map().centerZoom(playground, 19);
@@ -91,7 +91,7 @@ export function uiIntroArea(context, reveal) {
     };
 
 
-    step.exit = function() {
+    chapter.exit = function() {
         window.clearTimeout(timeout);
         context.on('enter.intro', null);
         context.on('exit.intro', null);
@@ -101,5 +101,5 @@ export function uiIntroArea(context, reveal) {
     };
 
 
-    return utilRebind(step, dispatch, 'on');
+    return utilRebind(chapter, dispatch, 'on');
 }

modules/ui/intro/intro.js

@@ -23,7 +23,7 @@ var sampleIntros = {
 
 
 export function uiIntro(context) {
-    var step;
+    var chapter;
 
     function localizedName(id) {
         var features = {
@@ -112,18 +112,18 @@ export function uiIntro(context) {
         var curtain = uiCurtain();
         selection.call(curtain);
 
-        var steps = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(step, i) {
-            var s = sampleIntros[step](context, reveal)
+        var chapters = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(chapter, i) {
+            var s = sampleIntros[chapter](context, reveal)
                 .on('done', function() {
                     entered.filter(function(d) {
                         return d.title === s.title;
                     }).classed('finished', true);
-                    enter(steps[i + 1]);
+                    enter(chapters[i + 1]);
                 });
             return s;
         });
 
-        steps[steps.length - 1].on('startEditing', function() {
+        chapters[chapters.length - 1].on('startEditing', function() {
             curtain.remove();
             navwrap.remove();
             d3.selectAll('#map .layer-background').style('opacity', opacity);
@@ -143,13 +143,13 @@ export function uiIntro(context) {
         var buttonwrap = navwrap
             .append('div')
             .attr('class', 'joined')
-            .selectAll('button.step');
+            .selectAll('button.chapter');
 
         var entered = buttonwrap
-            .data(steps)
+            .data(chapters)
             .enter()
             .append('button')
-            .attr('class', 'step')
+            .attr('class', 'chapter')
             .on('click', enter);
 
         entered
@@ -161,7 +161,7 @@ export function uiIntro(context) {
             .attr('class', 'status')
             .text(' - ' + t('intro.done'));
 
-        enter(steps[0]);
+        enter(chapters[0]);
 
 
         function reveal(box, text, options) {
@@ -174,16 +174,16 @@ export function uiIntro(context) {
         }
 
 
-        function enter(newStep) {
-            if (step) { step.exit(); }
+        function enter(newChapter) {
+            if (chapter) { chapter.exit(); }
 
             context.enter(modeBrowse(context));
 
-            step = newStep;
-            step.enter();
+            chapter = newChapter;
+            chapter.enter();
 
             entered.classed('active', function(d) {
-                return d.title === step.title;
+                return d.title === chapter.title;
             });
         }
 

modules/ui/intro/line.js

@@ -18,7 +18,7 @@ export function uiIntroLine(context, reveal) {
         drawId = null;
 
 
-    var step = {
+    var chapter = {
         title: 'intro.lines.title'
     };
 
@@ -34,7 +34,7 @@ export function uiIntroLine(context, reveal) {
     }
 
 
-    step.enter = function() {
+    chapter.enter = function() {
         context.map().centerZoom(start, 18);
         reveal('button.add-line',
             t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }),
@@ -86,7 +86,7 @@ export function uiIntroLine(context, reveal) {
             reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')}));
             d3.select(window).on('mousedown.intro', eventCancel, true);
 
-            timeout(step.restart, 3000);
+            timeout(chapter.restart, 3000);
         }
 
 
@@ -95,7 +95,7 @@ export function uiIntroLine(context, reveal) {
             function joinedTargetWay() {
                 var drawEntity = drawId && context.hasEntity(drawId);
                 if (!drawEntity) {
-                    step.restart();
+                    chapter.restart();
                     return false;
                 }
 
@@ -175,13 +175,13 @@ export function uiIntroLine(context, reveal) {
     };
 
 
-    step.restart = function() {
-        step.exit();
-        step.enter();
+    chapter.restart = function() {
+        chapter.exit();
+        chapter.enter();
     };
 
 
-    step.exit = function() {
+    chapter.exit = function() {
         d3.select(window).on('mousedown.intro', null, true);
         d3.select('#curtain').style('pointer-events', 'none');
         timeouts.forEach(window.clearTimeout);
@@ -195,5 +195,5 @@ export function uiIntroLine(context, reveal) {
         }
     };
 
-    return utilRebind(step, dispatch, 'on');
+    return utilRebind(chapter, dispatch, 'on');
 }

modules/ui/intro/navigation.js

@@ -9,7 +9,7 @@ export function uiIntroNavigation(context, reveal) {
     var dispatch = d3.dispatch('done'),
         timeouts = [];
 
-    var step = {
+    var chapter = {
         title: 'intro.navigation.title'
     };
 
@@ -25,7 +25,7 @@ export function uiIntroNavigation(context, reveal) {
     }
 
 
-    step.enter = function() {
+    chapter.enter = function() {
         var rect = context.surfaceRect(),
             map = {
                 left: rect.left + 10,
@@ -118,7 +118,7 @@ export function uiIntroNavigation(context, reveal) {
     };
 
 
-    step.exit = function() {
+    chapter.exit = function() {
         timeouts.forEach(window.clearTimeout);
         context.map().on('move.intro', null);
         context.on('enter.intro', null);
@@ -129,5 +129,5 @@ export function uiIntroNavigation(context, reveal) {
     };
 
 
-    return utilRebind(step, dispatch, 'on');
+    return utilRebind(chapter, dispatch, 'on');
 }

modules/ui/intro/point.js

@@ -9,7 +9,7 @@ export function uiIntroPoint(context, reveal) {
     var dispatch = d3.dispatch('done'),
         timeouts = [];
 
-    var step = {
+    var chapter = {
         title: 'intro.points.title'
     };
 
@@ -25,7 +25,7 @@ export function uiIntroPoint(context, reveal) {
     }
 
 
-    step.enter = function() {
+    chapter.enter = function() {
         context.map().centerZoom([-85.63279, 41.94394], 19);
         reveal('button.add-point',
             t('intro.points.add', { button: icon('#icon-point', 'pre-text') }),
@@ -165,7 +165,7 @@ export function uiIntroPoint(context, reveal) {
     };
 
 
-    step.exit = function() {
+    chapter.exit = function() {
         timeouts.forEach(window.clearTimeout);
         context.on('exit.intro', null);
         context.on('enter.intro', null);
@@ -176,5 +176,5 @@ export function uiIntroPoint(context, reveal) {
             .on('keydown.intro', null);
     };
 
-    return utilRebind(step, dispatch, 'on');
+    return utilRebind(chapter, dispatch, 'on');
 }

modules/ui/intro/start_editing.js

@@ -10,7 +10,7 @@ export function uiIntroStartEditing(context, reveal) {
         modalSelection,
         timeouts = [];
 
-    var step = {
+    var chapter = {
         title: 'intro.startediting.title'
     };
 
@@ -20,7 +20,7 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
 
-    step.enter = function() {
+    chapter.enter = function() {
         reveal('.map-control.help-control',
             t('intro.startediting.help', { button: icon('#icon-help', 'pre-text') }));
 
@@ -61,11 +61,11 @@ export function uiIntroStartEditing(context, reveal) {
     };
 
 
-    step.exit = function() {
+    chapter.exit = function() {
         if (modalSelection) { modalSelection.remove(); }
         timeouts.forEach(window.clearTimeout);
     };
 
 
-    return utilRebind(step, dispatch, 'on');
+    return utilRebind(chapter, dispatch, 'on');
 }