diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 1911cd492..89aeb6b9d 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -109,7 +109,7 @@ export function uiIntroArea(context, reveal) { function play() { reveal('.intro-nav-wrap .chapter-line', - t('intro.area.play', { next: t('intro.line.title') }), { + t('intro.areas.play', { next: t('intro.lines.title') }), { buttonText: t('intro.ok'), buttonCallback: function() { dispatch.call('done'); diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index ca768ac20..3e7c1fd4f 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -2,11 +2,11 @@ export function pointBox(loc, context) { var rect = context.surfaceRect(); var point = context.curtainProjection(loc); return { - left: point[0] + rect.left - 30, - top: point[1] + rect.top - 50, - width: 60, - height: 70 - }; + left: point[0] + rect.left - 40, + top: point[1] + rect.top - 60, + width: 80, + height: 90 + }; } diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index 224a1c3aa..45b1104ee 100644 --- a/modules/ui/intro/intro.js +++ b/modules/ui/intro/intro.js @@ -90,7 +90,6 @@ export function uiIntro(context) { d3.select('button.chapter-' + next) .classed('next', true); } - // enterChapter(chapters[i + 1]); }); return s; }); diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 7491bc30e..223be7fb1 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -186,7 +186,7 @@ export function uiIntroLine(context, reveal) { function play() { reveal('.intro-nav-wrap .chapter-startEditing', - t('intro.line.play', { next: t('intro.startediting.title') }), { + t('intro.lines.play', { next: t('intro.startediting.title') }), { buttonText: t('intro.ok'), buttonCallback: function() { dispatch.call('done'); diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index a8b5a4cf8..e450f1c44 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -35,7 +35,7 @@ export function uiIntroNavigation(context, reveal) { function dragMap() { var dragged = false, rect = context.surfaceRect(), - map = { + box = { left: rect.left + (textDirection === 'rtl' ? 60 : 10), top: rect.top + 70, width: rect.width - 70, @@ -43,20 +43,20 @@ export function uiIntroNavigation(context, reveal) { }; context.map().centerZoom([-85.63591, 41.94285], 19); - reveal(map, t('intro.navigation.drag')); + reveal(box, t('intro.navigation.drag')); context.map().on('move.intro', function() { dragged = true; }); d3.select(window).on('mouseup.intro', function() { - if (dragged) advance(); + if (dragged) continueTo(clickTownHall); }, true); - function advance() { + function continueTo(nextStep) { context.map().on('move.intro', null); d3.select(window).on('mouseup.intro', null, true); - clickTownHall(); + nextStep(); } } @@ -70,7 +70,7 @@ export function uiIntroNavigation(context, reveal) { context.map().centerEase(hall.loc, 250); context.on('enter.intro', function() { - if (isTownHallSelected()) advance(); + if (isTownHallSelected()) continueTo(selectedTownHall); }); timeout(function() { @@ -83,10 +83,10 @@ export function uiIntroNavigation(context, reveal) { }); }, 260); // after centerEase - function advance() { + function continueTo(nextStep) { context.on('enter.intro', null); context.map().on('move.intro drawn.intro', null); - selectedTownHall(); + nextStep(); } } @@ -96,6 +96,7 @@ export function uiIntroNavigation(context, reveal) { var hall = context.entity('n2140018997'); var box = pointBox(hall.loc, context); + var advance = function() { continueTo(inspectTownHall); }; reveal(box, t('intro.navigation.selected'), { buttonText: t('intro.ok'), buttonCallback: advance } @@ -108,9 +109,9 @@ export function uiIntroNavigation(context, reveal) { ); }); - function advance() { + function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); - inspectTownHall(); + nextStep(); } } @@ -118,7 +119,9 @@ export function uiIntroNavigation(context, reveal) { function inspectTownHall(mode) { if (!isTownHallSelected()) return clickTownHall(); - context.on('exit.intro', advance); + context.on('exit.intro', function() { + continueTo(streetSearch); + }); timeout(function() { reveal('.entity-editor-pane', @@ -126,9 +129,9 @@ export function uiIntroNavigation(context, reveal) { ); }, 700); - function advance() { + function continueTo(nextStep) { context.on('exit.intro', null); - streetSearch(); + nextStep(); } } @@ -152,16 +155,18 @@ export function uiIntroNavigation(context, reveal) { if (!firstName.empty() && firstName.text() === name) { reveal(first.node(), t('intro.navigation.choose', { name: name })); - context.on('exit.intro', advance); + context.on('exit.intro', function() { + continueTo(selectedStreet); + }); d3.select('.search-header input') .on('keydown.intro', eventCancel, true) .on('keyup.intro', null); } - function advance() { + function continueTo(nextStep) { context.on('exit.intro', null); - selectedStreet(); + nextStep(); } } @@ -177,12 +182,14 @@ export function uiIntroNavigation(context, reveal) { button: icon('#icon-close', 'pre-text') }) ); - context.on('exit.intro', advance); + context.on('exit.intro', function() { + continueTo(play); + }); }, 400); - function advance() { + function continueTo(nextStep) { context.on('exit.intro', null); - play(); + nextStep(); } } diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index c751daab2..46c7d4475 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -2,13 +2,14 @@ import * as d3 from 'd3'; import { t } from '../../util/locale'; import { utilBindOnce } from '../../util/bind_once'; import { utilRebind } from '../../util/rebind'; -import { icon, pad } from './helper'; +import { icon, pointBox, pad } from './helper'; export function uiIntroPoint(context, reveal) { var dispatch = d3.dispatch('done'), timeouts = [], - corner = [-85.632481, 41.944094]; + corner = [-85.632481, 41.944094], + pointId = null; var chapter = { @@ -31,159 +32,271 @@ export function uiIntroPoint(context, reveal) { var tooltip = reveal('button.add-point', t('intro.points.add', { button: icon('#icon-point', 'pre-text') })); + pointId = null; + tooltip.selectAll('.tooltip-inner') .insert('svg', 'span') .attr('class', 'tooltip-illustration') .append('use') .attr('xlink:href', '#poi-images'); - context.on('enter.intro', placePoint); + context.on('enter.intro', function(mode) { + if (mode.id !== 'add-point') return; + continueTo(placePoint); + }); + + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } } - function placePoint(mode) { - if (mode.id !== 'add-point') return; - context.on('enter.intro', enterSelect); + function placePoint() { + if (context.mode().id !== 'add-point') { + return chapter.restart(); + } var pointBox = pad(corner, 150, context); reveal(pointBox, t('intro.points.place')); context.map().on('move.intro drawn.intro', function() { pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.place'), {duration: 0}); + reveal(pointBox, t('intro.points.place'), { duration: 0 }); }); + + context.on('enter.intro', function(mode) { + if (mode.id !== 'select') return chapter.restart(); + continueTo(enterSelect); + }); + + 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(); + } + + pointId = context.mode().selectedIDs()[0]; + + 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.points.search', {name: context.presets().item('amenity/cafe').name()})); - d3.select('.preset-search-input').on('keyup.intro', keySearch); + t('intro.points.search', { name: context.presets().item('amenity/cafe').name() }) + ); }, 500); } - function keySearch() { + function checkPresetSearch() { var first = d3.select('.preset-list-item:first-child'); + if (first.classed('preset-amenity-cafe')) { - reveal(first.select('.preset-list-button').node(), t('intro.points.choose')); - utilBindOnce(context.history(), 'change.intro', selectedPreset); + reveal(first.select('.preset-list-button').node(), + t('intro.points.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() { + context.on('exit.intro', function(mode) { + return chapter.restart(); + }); + + context.history().on('change.intro', function() { + continueTo(closeEditor); + }); + timeout(function() { - reveal('.entity-editor-pane', t('intro.points.describe'), {tooltipClass: 'intro-points-describe'}); - context.history().on('change.intro', closeEditor); - context.on('exit.intro', selectPoint); + reveal('.entity-editor-pane', + t('intro.points.describe'), + { tooltipClass: 'intro-points-describe' } + ); }, 400); + + function continueTo(nextStep) { + context.on('exit.intro', null); + context.history().on('change.intro', null); + nextStep(); + } } function closeEditor() { - d3.select('.preset-search-input').on('keydown.intro', null); - context.history().on('change.intro', null); + context.on('exit.intro', function() { + continueTo(selectPoint); + }); + reveal('.entity-editor-pane', - t('intro.points.close', { button: icon('#icon-apply', 'pre-text') })); + t('intro.points.close', { button: icon('#icon-apply', 'pre-text') }) + ); + + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } } function selectPoint() { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', enterReselect); + if (!pointId) return chapter.restart(); + var entity = context.hasEntity(pointId); + if (!entity) return chapter.restart(); - var pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.reselect')); + context.map().centerEase(entity.loc, 250); - context.map().on('move.intro drawn.intro', function() { - pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.reselect'), {duration: 0}); + context.on('enter.intro', function(mode) { + if (mode.id !== 'select') return; + continueTo(updatePoint); }); + + timeout(function() { + var box = pointBox(entity.loc, context); + reveal(box, t('intro.points.reselect')); + + context.map().on('move.intro drawn.intro', function() { + var entity = context.hasEntity(pointId); + if (!entity) return chapter.restart(); + var box = pointBox(entity.loc, context); + reveal(box, t('intro.points.reselect'), { duration: 0 }); + }); + }, 260); // after centerEase + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } } - function enterReselect(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); + function updatePoint() { + if (context.mode().id !== 'select') return continueTo(selectPoint); + + context.on('exit.intro', function(mode) { + continueTo(rightClickPoint); + }); timeout(function() { reveal('.entity-editor-pane', - t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') })); - context.on('exit.intro', deletePoint); + t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') }) + ); }, 500); + + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } } - function deletePoint() { - context.on('exit.intro', null); - context.on('enter.intro', function(mode) { - if (mode.id !== 'select') return; + function rightClickPoint() { + if (!pointId) return chapter.restart(); + var entity = context.hasEntity(pointId); + if (!entity) return chapter.restart(); - var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); - if (!node) return; - - advance(); - }); - - var pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.rightclick')); + var box = pointBox(entity.loc, context); + reveal(box, t('intro.points.rightclick')); context.map().on('move.intro drawn.intro', function() { - pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.rightclick'), { duration: 0 }); + var entity = context.hasEntity(pointId); + if (!entity) return chapter.restart(); + var box = pointBox(entity.loc, context); + reveal(box, t('intro.points.rightclick'), { duration: 0 }); }); - function advance() { + context.on('enter.intro', function(mode) { + if (mode.id !== 'select') return; + var ids = context.selectedIDs(); + if (ids.length !== 1 || ids[0] !== pointId) return; + + timeout(function() { + var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); + if (!node) return; + continueTo(enterDelete); + }, 300); // after menu visible + }); + + function continueTo(nextStep) { context.on('enter.intro', null); context.map().on('move.intro drawn.intro', null); - enterDelete() + nextStep() } } function enterDelete() { - context.on('exit.intro', deletePoint); - context.history().on('change.intro', function(changed) { - if (changed.deleted().length) - advance(); + if (!pointId) return chapter.restart(); + var entity = context.hasEntity(pointId); + if (!entity) return chapter.restart(); + + var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); + if (!node) { + return continueTo(rightClickPoint); + } else { + var rect = context.surfaceRect(); + var point = context.curtainProjection(entity.loc); + var box = { + left: point[0] + rect.left - 40, + top: point[1] + rect.top - 60, + width: 150, + height: 150 + }; + reveal(box, + t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') }) + ); + } + + context.on('exit.intro', function() { + if (!pointId) return chapter.restart(); + var entity = context.hasEntity(pointId); + if (entity) return continueTo(rightClickPoint); // point still exists }); - timeout(function() { - // deprecation warning - Radial Menu to be removed in iD v3 - var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node(); - if (!node) { - context.history().on('change.intro', null); - context.on('exit.intro', null); - deletePoint(); - } else { - var pointBox = pad(node.getBoundingClientRect(), 50, context); - reveal(pointBox, - t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })); - } - }, 300); + context.history().on('change.intro', function(changed) { + if (changed.deleted().length) + continueTo(play); + }); - function advance() { + function continueTo(nextStep) { context.history().on('change.intro', null); context.on('exit.intro', null); - play() + nextStep() } } function play() { reveal('.intro-nav-wrap .chapter-area', - t('intro.point.play', { next: t('intro.area.title') }), { + t('intro.points.play', { next: t('intro.areas.title') }), { buttonText: t('intro.ok'), buttonCallback: function() { dispatch.call('done');