Add continue/cleanups/restarts for each step of areas chapter

modules/ui/intro/area.js

@@ -1,14 +1,12 @@
 import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { utilRebind } from '../../util/rebind';
-import { utilBindOnce } from '../../util/bind_once';
 import { icon, pad } from './helper';
 
 
 export function uiIntroArea(context, reveal) {
     var dispatch = d3.dispatch('done'),
         playground = [-85.63552, 41.94159],
-        corner = [-85.63565411045074, 41.9417715536927],
         timeouts = [];
 
 
@@ -22,6 +20,12 @@ export function uiIntroArea(context, reveal) {
     }
 
 
+    function eventCancel() {
+        d3.event.stopPropagation();
+        d3.event.preventDefault();
+    }
+
+
     function addArea() {
         var tooltip = reveal('button.add-area',
             t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }));
@@ -32,77 +36,137 @@ export function uiIntroArea(context, reveal) {
             .append('use')
             .attr('xlink:href', '#landuse-images');
 
-        context.on('enter.intro', startArea);
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'add-area') return;
+            continueTo(startArea);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function startArea(mode) {
-        if (mode.id !== 'add-area') return;
-        context.on('enter.intro', drawArea);
+    function startArea() {
+        if (context.mode().id !== 'add-area') {
+            return chapter.restart();
+        }
 
         var padding = 120 * Math.pow(2, context.map().zoom() - 19);
-        var pointBox = pad(corner, padding, context);
-        reveal(pointBox, t('intro.areas.corner'));
+        var box = pad(playground, padding, context);
+        reveal(box, t('intro.areas.corner'));
 
         context.map().on('move.intro drawn.intro', function() {
             padding = 120 * Math.pow(2, context.map().zoom() - 19);
-            pointBox = pad(corner, padding, context);
-            reveal(pointBox, t('intro.areas.corner'), {duration: 0});
+            box = pad(playground, padding, context);
+            reveal(box, t('intro.areas.corner'), { duration: 0 });
         });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'draw-area') return chapter.restart();
+            continueTo(drawArea);
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function drawArea(mode) {
-        if (mode.id !== 'draw-area') return;
-        context.on('enter.intro', enterSelect);
+    function drawArea() {
+        if (context.mode().id !== 'draw-area') {
+            return chapter.restart();
+        }
 
         var padding = 150 * Math.pow(2, context.map().zoom() - 19);
-        var pointBox = pad(playground, padding, context);
-        reveal(pointBox, t('intro.areas.place'));
+        var box = pad(playground, padding, context);
+        reveal(box, t('intro.areas.place'));
 
         context.map().on('move.intro drawn.intro', function() {
             padding = 150 * Math.pow(2, context.map().zoom() - 19);
-            pointBox = pad(playground, padding, context);
-            reveal(pointBox, t('intro.areas.place'), {duration: 0});
+            box = pad(playground, padding, context);
+            reveal(box, t('intro.areas.place'), {duration: 0});
         });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id === 'draw-area')
+                return;
+            else if (mode.id === 'select')
+                return continueTo(enterSelect);
+            else
+                return chapter.restart();
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
     }
 
 
-    function enterSelect(mode) {
-        if (mode.id !== 'select') return;
-        context.map().on('move.intro drawn.intro', null);
-        context.on('enter.intro', null);
+    function enterSelect() {
+        if (context.mode().id !== 'select') {
+            return chapter.restart();
+        }
+
+        context.on('exit.intro', function() {
+            return chapter.restart();
+        });
+
+        d3.select('.preset-search-input')
+            .on('keyup.intro', checkPresetSearch);
 
         timeout(function() {
             reveal('.preset-search-input',
                 t('intro.areas.search',
-                { name: context.presets().item('leisure/playground').name() }));
-            d3.select('.preset-search-input').on('keyup.intro', keySearch);
+                { name: context.presets().item('leisure/playground').name() })
+            );
         }, 500);
     }
 
 
-    function keySearch() {
+    function checkPresetSearch() {
         var first = d3.select('.preset-list-item:first-child');
+
         if (first.classed('preset-leisure-playground')) {
-            reveal(first.select('.preset-list-button').node(), t('intro.areas.choose'));
-            utilBindOnce(context.history(), 'change.intro', selectedPreset);
-            d3.select('.preset-search-input').on('keyup.intro', null);
+            reveal(first.select('.preset-list-button').node(),
+                t('intro.areas.choose')
+            );
+
+            d3.select('.preset-search-input')
+                .on('keydown.intro', eventCancel, true)
+                .on('keyup.intro', null);
+
+            context.history().on('change.intro', function() {
+                continueTo(selectedPreset);
+            });
+        }
+
+        function continueTo(nextStep) {
+            context.on('exit.intro', null);
+            context.history().on('change.intro', null);
+            d3.select('.preset-search-input').on('keydown.intro', null);
+            nextStep();
         }
     }
 
 
     function selectedPreset() {
-        reveal('.pane',
-            t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') }));
-
         context.on('exit.intro', function() {
-            advance();
+            continueTo(play);
         });
 
-        function advance() {
+        reveal('.pane',
+            t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') })
+        );
+
+        function continueTo(nextStep) {
             context.on('exit.intro', null);
-            play();
+            nextStep();
         }
     }
 
@@ -129,9 +193,9 @@ export function uiIntroArea(context, reveal) {
         timeouts.forEach(window.clearTimeout);
         context.on('enter.intro', null);
         context.on('exit.intro', null);
-        context.history().on('change.intro', null);
         context.map().on('move.intro drawn.intro', null);
-        d3.select('.preset-search-input').on('keyup.intro', null);
+        context.history().on('change.intro', null);
+        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
     };
 
 

modules/ui/intro/point.js

@@ -317,9 +317,7 @@ export function uiIntroPoint(context, reveal) {
         context.on('enter.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.preset-search-input')
-            .on('keyup.intro', null)
-            .on('keydown.intro', null);
+        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
     };