diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index f3f0636a4..857c8824d 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -7,95 +7,104 @@ import { icon, pad } from './helper'; export function uiIntroArea(context, reveal) { var dispatch = d3.dispatch('done'), - timeout; + playground = [-85.63552, 41.94159], + corner = [-85.63565411045074, 41.9417715536927], + timeouts = []; + var chapter = { title: 'intro.areas.title' }; - chapter.enter = function() { - var playground = [-85.63552, 41.94159], - corner = [-85.63565411045074, 41.9417715536927]; + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } - context.history().reset('initial'); - context.map().zoom(19).centerEase(playground); + function addArea() { reveal('button.add-area', t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }), { tooltipClass: 'intro-areas-add' }); - context.on('enter.intro', addArea); + context.on('enter.intro', startArea); + } - function addArea(mode) { - if (mode.id !== 'add-area') return; - context.on('enter.intro', drawArea); + function startArea(mode) { + if (mode.id !== 'add-area') return; + context.on('enter.intro', drawArea); - var padding = 120 * Math.pow(2, context.map().zoom() - 19); - var pointBox = pad(corner, padding, context); - reveal(pointBox, t('intro.areas.corner')); + var padding = 120 * Math.pow(2, context.map().zoom() - 19); + var pointBox = pad(corner, padding, context); + reveal(pointBox, 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}); - }); + 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}); + }); + } + + + function drawArea(mode) { + if (mode.id !== 'draw-area') return; + context.on('enter.intro', enterSelect); + + var padding = 150 * Math.pow(2, context.map().zoom() - 19); + var pointBox = pad(playground, padding, context); + reveal(pointBox, 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}); + }); + } + + + function enterSelect(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + + 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); + }, 500); + } + + + function keySearch() { + 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); } + } - function drawArea(mode) { - if (mode.id !== 'draw-area') return; - context.on('enter.intro', enterSelect); - - var padding = 150 * Math.pow(2, context.map().zoom() - 19); - var pointBox = pad(playground, padding, context); - reveal(pointBox, 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}); - }); - } + function selectedPreset() { + reveal('.pane', + t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') })); + context.on('exit.intro', function() { + dispatch.call('done'); + }); + } - function enterSelect(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - - timeout = setTimeout(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); - }, 500); - } - - - function keySearch() { - 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); - } - } - - - function selectedPreset() { - reveal('.pane', - t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') })); - context.on('exit.intro', function() { - dispatch.call('done'); - }); - } + chapter.enter = function() { + context.history().reset('initial'); + context.map().zoom(19).centerEase(playground); + addArea(); }; chapter.exit = function() { - window.clearTimeout(timeout); + timeouts.forEach(window.clearTimeout); context.on('enter.intro', null); context.on('exit.intro', null); context.history().on('change.intro', null); diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index f865d7dc7..bc62ee39c 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -34,153 +34,157 @@ export function uiIntroLine(context, reveal) { } - chapter.enter = function() { - context.history().reset('initial'); - context.map().zoom(18).centerEase(start); - + function addLine() { reveal('button.add-line', t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }), { tooltipClass: 'intro-lines-add' }); - context.on('enter.intro', addLine); + context.on('enter.intro', startLine); + } - function addLine(mode) { - if (mode.id !== 'add-line') return; - drawId = null; - context.on('enter.intro', drawLine); + function startLine(mode) { + if (mode.id !== 'add-line') return; + drawId = null; + context.on('enter.intro', drawLine); - var padding = 150 * Math.pow(2, context.map().zoom() - 18); - var pointBox = pad(start, padding, context); - reveal(pointBox, t('intro.lines.start')); + var padding = 150 * Math.pow(2, context.map().zoom() - 18); + var pointBox = pad(start, padding, context); + reveal(pointBox, t('intro.lines.start')); - context.map().on('move.intro drawn.intro', function() { - padding = 150 * Math.pow(2, context.map().zoom() - 18); - pointBox = pad(start, padding, context); - reveal(pointBox, t('intro.lines.start'), {duration: 0}); + context.map().on('move.intro drawn.intro', function() { + padding = 150 * Math.pow(2, context.map().zoom() - 18); + pointBox = pad(start, padding, context); + reveal(pointBox, t('intro.lines.start'), {duration: 0}); + }); + } + + + function drawLine(mode) { + if (mode.id !== 'draw-line') return; + drawId = mode.selectedIDs()[0]; + context.history().on('change.intro', checkIntersection); + context.on('enter.intro', retry); + + var padding = 300 * Math.pow(2, context.map().zoom() - 19); + var pointBox = pad(midpoint, padding, context); + reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')})); + + context.map().on('move.intro drawn.intro', function() { + padding = 300 * Math.pow(2, context.map().zoom() - 19); + pointBox = pad(midpoint, padding, context); + reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')}), {duration: 0}); + }); + } + + + // ended line before creating intersection + function retry(mode) { + if (mode.id !== 'select') return; + context.history().on('change.intro', null); + var pointBox = pad(intersection, 30, context); + reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')})); + d3.select(window).on('mousedown.intro', eventCancel, true); + + timeout(chapter.restart, 3000); + } + + + function checkIntersection() { + + function joinedTargetWay() { + var drawEntity = drawId && context.hasEntity(drawId); + if (!drawEntity) { + chapter.restart(); + return false; + } + + var drawNodes = context.graph().childNodes(drawEntity); + return _.some(drawNodes, function(node) { + return _.some(context.graph().parentWays(node), function(parent) { + return parent.id === targetId; + }); }); } - - function drawLine(mode) { - if (mode.id !== 'draw-line') return; - drawId = mode.selectedIDs()[0]; - context.history().on('change.intro', checkIntersection); - context.on('enter.intro', retry); - - var padding = 300 * Math.pow(2, context.map().zoom() - 19); - var pointBox = pad(midpoint, padding, context); - reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')})); - - context.map().on('move.intro drawn.intro', function() { - padding = 300 * Math.pow(2, context.map().zoom() - 19); - pointBox = pad(midpoint, padding, context); - reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')}), {duration: 0}); - }); - } - - - // ended line before creating intersection - function retry(mode) { - if (mode.id !== 'select') return; + if (joinedTargetWay()) { context.history().on('change.intro', null); - var pointBox = pad(intersection, 30, context); - reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')})); - d3.select(window).on('mousedown.intro', eventCancel, true); + context.on('enter.intro', enterSelect); - timeout(chapter.restart, 3000); - } + var padding = 900 * Math.pow(2, context.map().zoom() - 19); + var pointBox = pad(centroid, padding, context); + reveal(pointBox, t('intro.lines.finish')); - - function checkIntersection() { - - function joinedTargetWay() { - var drawEntity = drawId && context.hasEntity(drawId); - if (!drawEntity) { - chapter.restart(); - return false; - } - - var drawNodes = context.graph().childNodes(drawEntity); - return _.some(drawNodes, function(node) { - return _.some(context.graph().parentWays(node), function(parent) { - return parent.id === targetId; - }); - }); - } - - if (joinedTargetWay()) { - context.history().on('change.intro', null); - context.on('enter.intro', enterSelect); - - var padding = 900 * Math.pow(2, context.map().zoom() - 19); - var pointBox = pad(centroid, padding, context); - reveal(pointBox, t('intro.lines.finish')); - - context.map().on('move.intro drawn.intro', function() { - padding = 900 * Math.pow(2, context.map().zoom() - 19); - pointBox = pad(centroid, padding, context); - reveal(pointBox, t('intro.lines.finish'), {duration: 0}); - }); - } - } - - - function enterSelect(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - d3.select('#curtain').style('pointer-events', 'all'); - presetCategory(); - } - - - function presetCategory() { - timeout(function() { - d3.select('#curtain').style('pointer-events', 'none'); - var road = d3.select('.preset-category-road .preset-list-button'); - reveal(road.node(), t('intro.lines.road')); - utilBindOnce(road, 'click.intro', roadCategory); - }, 500); - } - - - function roadCategory() { - timeout(function() { - var grid = d3.select('.subgrid'); - reveal(grid.node(), t('intro.lines.residential')); - utilBindOnce(grid.selectAll(':not(.preset-highway-residential) .preset-list-button'), - 'click.intro', retryPreset); - utilBindOnce(grid.selectAll('.preset-highway-residential .preset-list-button'), - 'click.intro', roadDetails); - }, 500); - } - - - // selected wrong road type - function retryPreset() { - timeout(function() { - var preset = d3.select('.entity-editor-pane .preset-list-button'); - reveal(preset.node(), t('intro.lines.wrong_preset')); - utilBindOnce(preset, 'click.intro', presetCategory); - }, 500); - } - - - function roadDetails() { - reveal('.pane', - t('intro.lines.describe', { button: icon('#icon-apply', 'pre-text') })); - context.on('exit.intro', function() { - dispatch.call('done'); + context.map().on('move.intro drawn.intro', function() { + padding = 900 * Math.pow(2, context.map().zoom() - 19); + pointBox = pad(centroid, padding, context); + reveal(pointBox, t('intro.lines.finish'), {duration: 0}); }); } + } + + + function enterSelect(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + d3.select('#curtain').style('pointer-events', 'all'); + presetCategory(); + } + + + function presetCategory() { + timeout(function() { + d3.select('#curtain').style('pointer-events', 'none'); + var road = d3.select('.preset-category-road .preset-list-button'); + reveal(road.node(), t('intro.lines.road')); + utilBindOnce(road, 'click.intro', roadCategory); + }, 500); + } + + + function roadCategory() { + timeout(function() { + var grid = d3.select('.subgrid'); + reveal(grid.node(), t('intro.lines.residential')); + utilBindOnce(grid.selectAll(':not(.preset-highway-residential) .preset-list-button'), + 'click.intro', retryPreset); + utilBindOnce(grid.selectAll('.preset-highway-residential .preset-list-button'), + 'click.intro', roadDetails); + }, 500); + } + + + // selected wrong road type + function retryPreset() { + timeout(function() { + var preset = d3.select('.entity-editor-pane .preset-list-button'); + reveal(preset.node(), t('intro.lines.wrong_preset')); + utilBindOnce(preset, 'click.intro', presetCategory); + }, 500); + } + + + function roadDetails() { + reveal('.pane', + t('intro.lines.describe', { button: icon('#icon-apply', 'pre-text') })); + context.on('exit.intro', function() { + dispatch.call('done'); + }); + } + + + chapter.enter = function() { + context.history().reset('initial'); + context.map().zoom(18).centerEase(start); + addLine(); }; chapter.exit = function() { + timeouts.forEach(window.clearTimeout); d3.select(window).on('mousedown.intro', null, true); d3.select('#curtain').style('pointer-events', 'none'); - timeouts.forEach(window.clearTimeout); context.on('enter.intro', null); context.on('exit.intro', null); context.map().on('move.intro drawn.intro', null); diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index c80a9c98c..7ca405881 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -8,12 +8,13 @@ export function uiIntroNavigation(context, reveal) { var dispatch = d3.dispatch('done'), timeouts = []; + var chapter = { title: 'intro.navigation.title' }; - function set(f, t) { + function timeout(f, t) { timeouts.push(window.setTimeout(f, t)); } @@ -24,110 +25,111 @@ export function uiIntroNavigation(context, reveal) { } + function dragMap() { + var dragged = false, + rect = context.surfaceRect(), + map = { + left: rect.left + 10, + top: rect.top + 70, + width: rect.width - 70, + height: rect.height - 170 + }; + + context.map().centerZoom([-85.63591, 41.94285], 19); + reveal(map, t('intro.navigation.drag')); + + context.map().on('move.intro', function() { + dragged = true; + }); + + d3.select(window).on('mouseup.intro', function() { + if (!dragged) return; + d3.select(window).on('mouseup.intro', null, true); + context.map().on('move.intro', null); + clickTownHall(); + }, true); + } + + + function clickTownHall() { + context.history().reset('initial'); // ensure townhall exists + var hall = context.entity('n2140018997'); + + context.on('enter.intro', inspectTownHall); + context.map().centerEase(hall.loc, 250); + + timeout(function() { + var box = pointBox(hall.loc, context); + reveal(box, t('intro.navigation.select')); + context.map().on('move.intro drawn.intro', function() { + var box = pointBox(hall.loc, context); + reveal(box, t('intro.navigation.select'), { duration: 0 }); + }); + }, 260); + } + + + function inspectTownHall(mode) { + if (mode.id !== 'select') return; + + context.on('enter.intro', null); + context.map().on('move.intro drawn.intro', null); + context.on('exit.intro', streetSearch); + + timeout(function() { + reveal('.entity-editor-pane', + t('intro.navigation.pane', { button: icon('#icon-close', 'pre-text') }) + ); + }, 700); + } + + + function streetSearch() { + context.history().reset('initial'); // ensure spring street exists + context.on('exit.intro', null); + reveal('.search-header input', + t('intro.navigation.search', { name: t('intro.graph.spring_st') })); + d3.select('.search-header input') + .on('keyup.intro', searchResult); + } + + + function searchResult() { + var first = d3.select('.feature-list-item:nth-child(0n+2)'), // skip No Results item + firstName = first.select('.entity-name'), + name = t('intro.graph.spring_st'); + + if (!firstName.empty() && firstName.text() === name) { + reveal(first.node(), t('intro.navigation.choose', { name: name })); + context.on('exit.intro', selectedStreet); + d3.select('.search-header input') + .on('keydown.intro', eventCancel, true) + .on('keyup.intro', null); + } + } + + + 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', + t('intro.navigation.chosen', { + name: t('intro.graph.spring_st'), + button: icon('#icon-close', 'pre-text') + }) + ); + }, 400); + } + + chapter.enter = function() { context.history().reset('initial'); dragMap(); - - function dragMap() { - var dragged = false, - rect = context.surfaceRect(), - map = { - left: rect.left + 10, - top: rect.top + 70, - width: rect.width - 70, - height: rect.height - 170 - }; - - context.map().centerZoom([-85.63591, 41.94285], 19); - reveal(map, t('intro.navigation.drag')); - - context.map().on('move.intro', function() { - dragged = true; - }); - - d3.select(window).on('mouseup.intro', function() { - if (!dragged) return; - d3.select(window).on('mouseup.intro', null, true); - context.map().on('move.intro', null); - clickTownHall(); - }, true); - } - - - function clickTownHall() { - var hall = context.hasEntity('n2140018997'); - if (!hall) chapter.restart(); - - context.on('enter.intro', inspectTownHall); - context.map().centerEase(hall.loc, 250); - - set(function() { - var box = pointBox(hall.loc, context); - reveal(box, t('intro.navigation.select')); - context.map().on('move.intro drawn.intro', function() { - var box = pointBox(hall.loc, context); - reveal(box, t('intro.navigation.select'), { duration: 0 }); - }); - }, 260); - } - - - function inspectTownHall(mode) { - if (mode.id !== 'select') return; - - context.on('enter.intro', null); - context.map().on('move.intro drawn.intro', null); - context.on('exit.intro', streetSearch); - - set(function() { - reveal('.entity-editor-pane', - t('intro.navigation.pane', { button: icon('#icon-close', 'pre-text') }) - ); - }, 700); - } - - - function streetSearch() { - context.on('exit.intro', null); - reveal('.search-header input', - t('intro.navigation.search', { name: t('intro.graph.spring_st') })); - d3.select('.search-header input') - .on('keyup.intro', searchResult); - } - - - function searchResult() { - var first = d3.select('.feature-list-item:nth-child(0n+2)'), // skip No Results item - firstName = first.select('.entity-name'), - name = t('intro.graph.spring_st'); - - if (!firstName.empty() && firstName.text() === name) { - reveal(first.node(), t('intro.navigation.choose', { name: name })); - context.on('exit.intro', selectedStreet); - d3.select('.search-header input') - .on('keydown.intro', eventCancel, true) - .on('keyup.intro', null); - } - } - - - function selectedStreet() { - var springSt = [-85.63585099140167, 41.942506848938926]; - - context.map().centerEase(springSt); - context.on('exit.intro', function() { - dispatch.call('done'); - }); - - set(function() { - reveal('.entity-editor-pane', - t('intro.navigation.chosen', { - name: t('intro.graph.spring_st'), - button: icon('#icon-close', 'pre-text') - }) - ); - }, 400); - } }; diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 5a15816db..2aa0e9c56 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -7,14 +7,16 @@ import { icon, pad } from './helper'; export function uiIntroPoint(context, reveal) { var dispatch = d3.dispatch('done'), - timeouts = []; + timeouts = [], + corner = [-85.632481, 41.944094]; + var chapter = { title: 'intro.points.title' }; - function setTimeout(f, t) { + function timeout(f, t) { timeouts.push(window.setTimeout(f, t)); } @@ -25,145 +27,146 @@ export function uiIntroPoint(context, reveal) { } - chapter.enter = function() { - context.history().reset('initial'); - context.map().zoom(19).centerEase([-85.63279, 41.94394]); - + function addPoint() { reveal('button.add-point', t('intro.points.add', { button: icon('#icon-point', 'pre-text') }), { tooltipClass: 'intro-points-add' }); - var corner = [-85.632481, 41.944094]; - - context.on('enter.intro', addPoint); + context.on('enter.intro', placePoint); + } - function addPoint(mode) { - if (mode.id !== 'add-point') return; - context.on('enter.intro', enterSelect); + function placePoint(mode) { + if (mode.id !== 'add-point') return; + context.on('enter.intro', enterSelect); - var pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.place')); + 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}); - }); + context.map().on('move.intro drawn.intro', function() { + pointBox = pad(corner, 150, context); + reveal(pointBox, t('intro.points.place'), {duration: 0}); + }); + } + + + function enterSelect(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + + 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); + }, 500); + } + + + function keySearch() { + 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); + d3.select('.preset-search-input') + .on('keydown.intro', eventCancel, true) + .on('keyup.intro', null); } + } - function enterSelect(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - - setTimeout(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); - }, 500); - } + function selectedPreset() { + 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); + }, 400); + } - function keySearch() { - 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); - d3.select('.preset-search-input') - .on('keydown.intro', eventCancel, true) - .on('keyup.intro', null); - } - } + function closeEditor() { + d3.select('.preset-search-input').on('keydown.intro', null); + context.history().on('change.intro', null); + reveal('.entity-editor-pane', + t('intro.points.close', { button: icon('#icon-apply', 'pre-text') })); + } - function selectedPreset() { - setTimeout(function() { - reveal('.entity-editor-pane', t('intro.points.describe'), {tooltipClass: 'intro-points-describe'}); - context.history().on('change.intro', closeEditor); - context.on('exit.intro', selectPoint); - }, 400); - } + function selectPoint() { + context.on('exit.intro', null); + context.history().on('change.intro', null); + context.on('enter.intro', enterReselect); + + var pointBox = pad(corner, 150, context); + reveal(pointBox, t('intro.points.reselect')); + + context.map().on('move.intro drawn.intro', function() { + pointBox = pad(corner, 150, context); + reveal(pointBox, t('intro.points.reselect'), {duration: 0}); + }); + } - function closeEditor() { - d3.select('.preset-search-input').on('keydown.intro', null); - context.history().on('change.intro', null); + function enterReselect(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + + timeout(function() { reveal('.entity-editor-pane', - t('intro.points.close', { button: icon('#icon-apply', 'pre-text') })); - } - - - function selectPoint() { - context.on('exit.intro', null); - context.history().on('change.intro', null); - context.on('enter.intro', enterReselect); - - var pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.reselect')); - - context.map().on('move.intro drawn.intro', function() { - pointBox = pad(corner, 150, context); - reveal(pointBox, t('intro.points.reselect'), {duration: 0}); - }); - } - - - function enterReselect(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); - - setTimeout(function() { - reveal('.entity-editor-pane', - t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') })); - context.on('exit.intro', deletePoint); - }, 500); - } - - - function deletePoint() { - context.on('exit.intro', null); - context.on('enter.intro', enterDelete); - - var pointBox = pad(corner, 150, context); - reveal(pointBox, 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}); - }); - } - - - function enterDelete(mode) { - if (mode.id !== 'select') return; - context.map().on('move.intro drawn.intro', null); - context.on('enter.intro', null); + t('intro.points.fixname', { button: icon('#icon-apply', 'pre-text') })); context.on('exit.intro', deletePoint); - context.map().on('move.intro drawn.intro', deletePoint); - context.history().on('change.intro', deleted); - - setTimeout(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) { - deletePoint(); - } else { - var pointBox = pad(node.getBoundingClientRect(), 50, context); - reveal(pointBox, - t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })); - } - }, 300); - } + }, 500); + } - function deleted(changed) { - if (changed.deleted().length) { - dispatch.call('done'); + function deletePoint() { + context.on('exit.intro', null); + context.on('enter.intro', enterDelete); + + var pointBox = pad(corner, 150, context); + reveal(pointBox, 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}); + }); + } + + + function enterDelete(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + context.on('exit.intro', deletePoint); + context.map().on('move.intro drawn.intro', deletePoint); + context.history().on('change.intro', deleted); + + 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) { + deletePoint(); + } else { + var pointBox = pad(node.getBoundingClientRect(), 50, context); + reveal(pointBox, + t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })); } - } + }, 300); + } + + function deleted(changed) { + if (changed.deleted().length) { + dispatch.call('done'); + } + } + + + chapter.enter = function() { + context.history().reset('initial'); + context.map().zoom(19).centerEase([-85.63279, 41.94394]); + addPoint(); }; diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js index c684036ca..4c98e6d8d 100644 --- a/modules/ui/intro/start_editing.js +++ b/modules/ui/intro/start_editing.js @@ -10,6 +10,7 @@ export function uiIntroStartEditing(context, reveal) { modalSelection, timeouts = []; + var chapter = { title: 'intro.startediting.title' };