mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-16 13:59:27 +02:00
Make chapters code more consistent
This commit is contained in:
Bryan Housel
+73
-64
@@ -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);
|
||||
|
||||
+129
-125
@@ -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);
|
||||
|
||||
+104
-102
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
+121
-118
@@ -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();
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ export function uiIntroStartEditing(context, reveal) {
|
||||
modalSelection,
|
||||
timeouts = [];
|
||||
|
||||
|
||||
var chapter = {
|
||||
title: 'intro.startediting.title'
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user