From 86330ef3f07edd1738edb7f9fb43979c32d2b977 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 26 Mar 2017 15:27:30 -0400 Subject: [PATCH] Move welcome to its own chapter --- data/core.yaml | 2 ++ dist/locales/en.json | 3 +++ modules/ui/intro/intro.js | 22 ++++++++-------- modules/ui/intro/navigation.js | 16 +++--------- modules/ui/intro/welcome.js | 47 ++++++++++++++++++++++++++++++++++ 5 files changed, 68 insertions(+), 22 deletions(-) create mode 100644 modules/ui/intro/welcome.js diff --git a/data/core.yaml b/data/core.yaml index b9517b90b..7e19e72a6 100644 --- a/data/core.yaml +++ b/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!**" diff --git a/dist/locales/en.json b/dist/locales/en.json index 8afd6b340..645803768 100644 --- a/dist/locales/en.json +++ b/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!**", diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index 1fd66b087..b7b5b2750 100644 --- a/modules/ui/intro/intro.js +++ b/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; }); } diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 043b91224..92bcec9eb 100644 --- a/modules/ui/intro/navigation.js +++ b/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(); }; diff --git a/modules/ui/intro/welcome.js b/modules/ui/intro/welcome.js new file mode 100644 index 000000000..f23acfcf1 --- /dev/null +++ b/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'); +}