Move welcome to its own chapter

data/core.yaml

@@ -808,6 +808,8 @@ en:
       morris_ave: Morris Avenue
       east_st: East Street
       portage_ave: Portage Avenue
+    welcome:
+      title: "Welcome"
     navigation:
       title: "Navigation"
       drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"

dist/locales/en.json

@@ -666,6 +666,9 @@
                 "east_st": "East Street",
                 "portage_ave": "Portage Avenue"
             },
+            "welcome": {
+                "title": "Welcome"
+            },
             "navigation": {
                 "title": "Navigation",
                 "drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**",

modules/ui/intro/intro.js

@@ -9,6 +9,7 @@ import { osmEntity } from '../../osm/entity';
 import { svgIcon } from '../../svg/icon';
 import { uiCurtain } from '../curtain';
 
+import { uiIntroWelcome } from './welcome';
 import { uiIntroNavigation } from './navigation';
 import { uiIntroPoint } from './point';
 import { uiIntroArea } from './area';
@@ -17,6 +18,7 @@ import { uiIntroStartEditing } from './start_editing';
 
 
 var chapterUi = {
+    welcome: uiIntroWelcome,
     navigation: uiIntroNavigation,
     point: uiIntroPoint,
     area: uiIntroArea,
@@ -25,6 +27,7 @@ var chapterUi = {
 };
 
 var chapterFlow = [
+    'welcome',
     'navigation',
     'point',
     'area',
@@ -78,10 +81,10 @@ export function uiIntro(context) {
         var chapters = chapterFlow.map(function(chapter, i) {
             var s = chapterUi[chapter](context, curtain.reveal)
                 .on('done', function() {
-                    entered.filter(function(d) {
+                    buttons.filter(function(d) {
                         return d.title === s.title;
                     }).classed('finished', true);
-                    enter(chapters[i + 1]);
+                    enterChapter(chapters[i + 1]);
                 });
             return s;
         });
@@ -114,34 +117,33 @@ export function uiIntro(context) {
             .attr('class', 'joined')
             .selectAll('button.chapter');
 
-        var entered = buttonwrap
+        var buttons = buttonwrap
             .data(chapters)
             .enter()
             .append('button')
             .attr('class', 'chapter')
-            .on('click', enter);
+            .on('click', enterChapter);
 
-        entered
+        buttons
             .append('label')
             .text(function(d) { return t(d.title); });
 
-        entered
+        buttons
             .append('span')
             .attr('class', 'status')
             .call(svgIcon((textDirection === 'rtl' ? '#icon-backward' : '#icon-forward'), 'inline'));
 
-        enter(chapters[0]);
+        enterChapter(chapters[0]);
 
 
-        function enter(newChapter) {
+        function enterChapter(newChapter) {
             if (currChapter) { currChapter.exit(); }
-
             context.enter(modeBrowse(context));
 
             currChapter = newChapter;
             currChapter.enter();
 
-            entered.classed('active', function(d) {
+            buttons.classed('active', function(d) {
                 return d.title === currChapter.title;
             });
         }

modules/ui/intro/navigation.js

@@ -25,14 +25,6 @@ export function uiIntroNavigation(context, reveal) {
     }
 
 
-    function welcome() {
-        reveal('.intro-nav-wrap',
-            'Welcome!  This walkthrough will teach you the basics of editing on OpenStreetMap.',
-            { buttonText: t('intro.ok'), buttonCallback: dragMap }
-        );
-    }
-
-
     function dragMap() {
         var dragged = false,
             rect = context.surfaceRect(),
@@ -120,9 +112,6 @@ export function uiIntroNavigation(context, reveal) {
     function selectedStreet() {
         var springSt = [-85.63585099140167, 41.942506848938926];
         context.map().centerEase(springSt);
-        context.on('exit.intro', function() {
-            dispatch.call('done');
-        });
 
         timeout(function() {
             reveal('.entity-editor-pane',
@@ -131,13 +120,16 @@ export function uiIntroNavigation(context, reveal) {
                     button: icon('#icon-close', 'pre-text')
                 })
             );
+            context.on('exit.intro', function() {
+                dispatch.call('done');
+            });
         }, 400);
     }
 
 
     chapter.enter = function() {
         context.history().reset('initial');
-        welcome();
+        dragMap();
     };
 
 

modules/ui/intro/welcome.js

@@ -0,0 +1,47 @@
+import * as d3 from 'd3';
+import { t } from '../../util/locale';
+import { utilRebind } from '../../util/rebind';
+
+
+export function uiIntroWelcome(context, reveal) {
+    var dispatch = d3.dispatch('done');
+
+
+    var chapter = {
+        title: 'intro.welcome.title'
+    };
+
+
+    function welcome() {
+        context.map().centerZoom([-85.63591, 41.94285], 19);
+        reveal('.intro-nav-wrap',
+            'Welcome!  This walkthrough will teach you the basics of editing on OpenStreetMap.',
+            { buttonText: t('intro.ok'), buttonCallback: buttons }
+        );
+    }
+
+    function buttons() {
+        reveal('.intro-nav-wrap',
+            'You can use the buttons along bottom to skip sections or restart a section if you get stuck.',
+            { buttonText: t('intro.ok'), buttonCallback: function() { dispatch.call('done'); } }
+        );
+    }
+
+
+    chapter.enter = function() {
+        welcome();
+    };
+
+
+    chapter.exit = function() {
+    };
+
+
+    chapter.restart = function() {
+        chapter.exit();
+        chapter.enter();
+    };
+
+
+    return utilRebind(chapter, dispatch, 'on');
+}