CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 05:30:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

create submodule iD.ui.intro

Browse Source
This commit is contained in:
Kushan Joshi
2016-06-17 14:29:50 +05:30
parent fc277cc605
commit 6a4adb476c
9 changed files with 603 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Makefile
+5 -5
View File
@@ -52,6 +52,7 @@ MODULE_TARGETS = \
js/lib/id/presets.js \
js/lib/id/renderer.js \
js/lib/id/services.js \
js/lib/id/ui/intro.js \
js/lib/id/svg.js \
js/lib/id/util.js \
js/lib/id/validations.js
@@ -96,6 +97,10 @@ js/lib/id/svg.js: $(shell find modules/svg -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.svg modules/svg/index.js --no-strict -o $@
js/lib/id/ui/intro.js: $(shell find modules/ui/intro -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.ui.intro modules/ui/intro/index.js --no-strict -o $@
js/lib/id/util.js: $(shell find modules/util -type f)
@rm -f $@
node_modules/.bin/rollup -f umd -n iD.util modules/util/index.js --no-strict -o $@
@@ -188,11 +193,6 @@ dist/iD.js: \
js/id/ui/preset/restrictions.js \
js/id/ui/preset/textarea.js \
js/id/ui/preset/wikipedia.js \
js/id/ui/intro/area.js \
js/id/ui/intro/line.js \
js/id/ui/intro/navigation.js \
js/id/ui/intro/point.js \
js/id/ui/intro/start_editing.js \
js/id/end.js \
js/lib/locale.js \
data/introGraph.js
index.html
+1 -5
View File
@@ -112,11 +112,7 @@
<script src='js/id/ui/preset/textarea.js'></script>
<script src='js/id/ui/preset/wikipedia.js'></script>
<script src='js/id/ui/intro/navigation.js'></script>
<script src='js/id/ui/intro/point.js'></script>
<script src='js/id/ui/intro/area.js'></script>
<script src='js/id/ui/intro/line.js'></script>
<script src='js/id/ui/intro/start_editing.js'></script>
<script src='js/lib/id/ui/intro.js'></script>
<script src='js/lib/locale.js'></script>
<script src='data/introGraph.js'></script>
js/lib/id/ui/intro.js
+582
View File
@@ -0,0 +1,582 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.iD = global.iD || {}, global.iD.ui = global.iD.ui || {}, global.iD.ui.intro = global.iD.ui.intro || {})));
}(this, function (exports) { 'use strict';
function area(context, reveal) {
var event = d3.dispatch('done'),
timeout;
var step = {
title: 'intro.areas.title'
};
step.enter = function() {
var playground = [-85.63552, 41.94159],
corner = [-85.63565411045074, 41.9417715536927];
context.map().centerZoom(playground, 19);
reveal('button.add-area',
t('intro.areas.add', { button: iD.ui.intro.icon('#icon-area', 'pre-text') }),
{ tooltipClass: 'intro-areas-add' });
context.on('enter.intro', addArea);
function addArea(mode) {
if (mode.id !== 'add-area') return;
context.on('enter.intro', drawArea);
var padding = 120 * Math.pow(2, context.map().zoom() - 19);
var pointBox = iD.ui.intro.pad(corner, padding, context);
reveal(pointBox, t('intro.areas.corner'));
context.map().on('move.intro', function() {
padding = 120 * Math.pow(2, context.map().zoom() - 19);
pointBox = iD.ui.intro.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 = iD.ui.intro.pad(playground, padding, context);
reveal(pointBox, t('intro.areas.place'));
context.map().on('move.intro', function() {
padding = 150 * Math.pow(2, context.map().zoom() - 19);
pointBox = iD.ui.intro.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', 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'));
d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
d3.select('.preset-search-input').on('keyup.intro', null);
}
}
function selectedPreset() {
reveal('.pane',
t('intro.areas.describe', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
context.on('exit.intro', event.done);
}
};
step.exit = function() {
window.clearTimeout(timeout);
context.on('enter.intro', null);
context.on('exit.intro', null);
context.history().on('change.intro', null);
context.map().on('move.intro', null);
d3.select('.preset-search-input').on('keyup.intro', null);
};
return d3.rebind(step, event, 'on');
}
function line(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
var step = {
title: 'intro.lines.title'
};
function timeout(f, t) {
timeouts.push(window.setTimeout(f, t));
}
function eventCancel() {
d3.event.stopPropagation();
d3.event.preventDefault();
}
step.enter = function() {
var centroid = [-85.62830, 41.95699];
var midpoint = [-85.62975395449628, 41.95787501510204];
var start = [-85.6297754121684, 41.95805253325314];
var intersection = [-85.62974496187628, 41.95742515554585];
context.map().centerZoom(start, 18);
reveal('button.add-line',
t('intro.lines.add', { button: iD.ui.intro.icon('#icon-line', 'pre-text') }),
{ tooltipClass: 'intro-lines-add' });
context.on('enter.intro', addLine);
function addLine(mode) {
if (mode.id !== 'add-line') return;
context.on('enter.intro', drawLine);
var padding = 150 * Math.pow(2, context.map().zoom() - 18);
var pointBox = iD.ui.intro.pad(start, padding, context);
reveal(pointBox, t('intro.lines.start'));
context.map().on('move.intro', function() {
padding = 150 * Math.pow(2, context.map().zoom() - 18);
pointBox = iD.ui.intro.pad(start, padding, context);
reveal(pointBox, t('intro.lines.start'), {duration: 0});
});
}
function drawLine(mode) {
if (mode.id !== 'draw-line') return;
context.history().on('change.intro', addIntersection);
context.on('enter.intro', retry);
var padding = 300 * Math.pow(2, context.map().zoom() - 19);
var pointBox = iD.ui.intro.pad(midpoint, padding, context);
reveal(pointBox, t('intro.lines.intersect', {name: t('intro.graph.flower_st')}));
context.map().on('move.intro', function() {
padding = 300 * Math.pow(2, context.map().zoom() - 19);
pointBox = iD.ui.intro.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;
var pointBox = iD.ui.intro.pad(intersection, 30, context),
ids = mode.selectedIDs();
reveal(pointBox, t('intro.lines.restart', {name: t('intro.graph.flower_st')}));
d3.select(window).on('mousedown.intro', eventCancel, true);
timeout(function() {
context.replace(iD.actions.DeleteMultiple(ids));
step.exit();
step.enter();
}, 3000);
}
function addIntersection(changes) {
if ( _.some(changes.created(), function(d) {
return d.type === 'node' && context.graph().parentWays(d).length > 1;
})) {
context.history().on('change.intro', null);
context.on('enter.intro', enterSelect);
var padding = 900 * Math.pow(2, context.map().zoom() - 19);
var pointBox = iD.ui.intro.pad(centroid, padding, context);
reveal(pointBox, t('intro.lines.finish'));
context.map().on('move.intro', function() {
padding = 900 * Math.pow(2, context.map().zoom() - 19);
pointBox = iD.ui.intro.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', 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'));
road.one('click.intro', roadCategory);
}, 500);
}
function roadCategory() {
timeout(function() {
var grid = d3.select('.subgrid');
reveal(grid.node(), t('intro.lines.residential'));
grid.selectAll(':not(.preset-highway-residential) .preset-list-button')
.one('click.intro', retryPreset);
grid.selectAll('.preset-highway-residential .preset-list-button')
.one('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'));
preset.one('click.intro', presetCategory);
}, 500);
}
function roadDetails() {
reveal('.pane',
t('intro.lines.describe', { button: iD.ui.intro.icon('#icon-apply', 'pre-text') }));
context.on('exit.intro', event.done);
}
};
step.exit = function() {
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', null);
context.history().on('change.intro', null);
};
return d3.rebind(step, event, 'on');
}
function navigation(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
var step = {
title: 'intro.navigation.title'
};
function set(f, t) {
timeouts.push(window.setTimeout(f, t));
}
function eventCancel() {
d3.event.stopPropagation();
d3.event.preventDefault();
}
step.enter = function() {
var 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', _.debounce(function() {
context.map().on('move.intro', null);
townhall();
context.on('enter.intro', inspectTownHall);
}, 400));
function townhall() {
var hall = [-85.63645945147184, 41.942986488012565];
var point = context.projection(hall);
if (point[0] < 0 || point[0] > rect.width ||
point[1] < 0 || point[1] > rect.height) {
context.map().center(hall);
}
var box = iD.ui.intro.pointBox(hall, context);
reveal(box, t('intro.navigation.select'));
context.map().on('move.intro', function() {
var box = iD.ui.intro.pointBox(hall, context);
reveal(box, t('intro.navigation.select'), {duration: 0});
});
}
function inspectTownHall(mode) {
if (mode.id !== 'select') return;
context.on('enter.intro', null);
context.map().on('move.intro', null);
set(function() {
reveal('.entity-editor-pane',
t('intro.navigation.pane', { button: iD.ui.intro.icon('#icon-close', 'pre-text') }));
context.on('exit.intro', streetSearch);
}, 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().center(springSt);
context.on('exit.intro', event.done);
set(function() {
reveal('.entity-editor-pane',
t('intro.navigation.chosen', {
name: t('intro.graph.spring_st'),
button: iD.ui.intro.icon('#icon-close', 'pre-text')
}));
}, 400);
}
};
step.exit = function() {
timeouts.forEach(window.clearTimeout);
context.map().on('move.intro', null);
context.on('enter.intro', null);
context.on('exit.intro', null);
d3.select('.search-header input')
.on('keydown.intro', null)
.on('keyup.intro', null);
};
return d3.rebind(step, event, 'on');
}
function point(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
var step = {
title: 'intro.points.title'
};
function setTimeout(f, t) {
timeouts.push(window.setTimeout(f, t));
}
function eventCancel() {
d3.event.stopPropagation();
d3.event.preventDefault();
}
step.enter = function() {
context.map().centerZoom([-85.63279, 41.94394], 19);
reveal('button.add-point',
t('intro.points.add', { button: iD.ui.intro.icon('#icon-point', 'pre-text') }),
{ tooltipClass: 'intro-points-add' });
var corner = [-85.632481,41.944094];
context.on('enter.intro', addPoint);
function addPoint(mode) {
if (mode.id !== 'add-point') return;
context.on('enter.intro', enterSelect);
var pointBox = iD.ui.intro.pad(corner, 150, context);
reveal(pointBox, t('intro.points.place'));
context.map().on('move.intro', function() {
pointBox = iD.ui.intro.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', 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 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'));
d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
d3.select('.preset-search-input')
.on('keydown.intro', eventCancel, true)
.on('keyup.intro', null);
}
}
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 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: iD.ui.intro.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 = iD.ui.intro.pad(corner, 150, context);
reveal(pointBox, t('intro.points.reselect'));
context.map().on('move.intro', function() {
pointBox = iD.ui.intro.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', null);
context.on('enter.intro', null);
setTimeout(function() {
reveal('.entity-editor-pane',
t('intro.points.fixname', { button: iD.ui.intro.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 = iD.ui.intro.pad(corner, 150, context);
reveal(pointBox, t('intro.points.reselect_delete'));
context.map().on('move.intro', function() {
pointBox = iD.ui.intro.pad(corner, 150, context);
reveal(pointBox, t('intro.points.reselect_delete'), {duration: 0});
});
}
function enterDelete(mode) {
if (mode.id !== 'select') return;
context.map().on('move.intro', null);
context.on('enter.intro', null);
context.on('exit.intro', deletePoint);
context.map().on('move.intro', deletePoint);
context.history().on('change.intro', deleted);
setTimeout(function() {
var node = d3.select('.radial-menu-item-delete').node();
var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50, context);
reveal(pointBox,
t('intro.points.delete', { button: iD.ui.intro.icon('#operation-delete', 'pre-text') }));
}, 300);
}
function deleted(changed) {
if (changed.deleted().length) event.done();
}
};
step.exit = function() {
timeouts.forEach(window.clearTimeout);
context.on('exit.intro', null);
context.on('enter.intro', null);
context.map().on('move.intro', null);
context.history().on('change.intro', null);
d3.select('.preset-search-input')
.on('keyup.intro', null)
.on('keydown.intro', null);
};
return d3.rebind(step, event, 'on');
}
function startEditing(context, reveal) {
var event = d3.dispatch('done', 'startEditing'),
modal,
timeouts = [];
var step = {
title: 'intro.startediting.title'
};
function timeout(f, t) {
timeouts.push(window.setTimeout(f, t));
}
step.enter = function() {
reveal('.map-control.help-control',
t('intro.startediting.help', { button: iD.ui.intro.icon('#icon-help', 'pre-text') }));
timeout(function() {
reveal('#bar button.save', t('intro.startediting.save'));
}, 5000);
timeout(function() {
reveal('#surface');
}, 10000);
timeout(function() {
modal = iD.ui.modal(context.container());
modal.select('.modal')
.attr('class', 'modal-splash modal col6');
modal.selectAll('.close').remove();
var startbutton = modal.select('.content')
.attr('class', 'fillL')
.append('button')
.attr('class', 'modal-section huge-modal-button')
.on('click', function() {
modal.remove();
});
startbutton.append('div')
.attr('class','illustration');
startbutton.append('h2')
.text(t('intro.startediting.start'));
event.startEditing();
}, 10500);
};
step.exit = function() {
if (modal) modal.remove();
timeouts.forEach(window.clearTimeout);
};
return d3.rebind(step, event, 'on');
}
exports.area = area;
exports.line = line;
exports.navigation = navigation;
exports.point = point;
exports.startEditing = startEditing;
Object.defineProperty(exports, '__esModule', { value: true });
}));
js/id/ui/intro/area.js → modules/ui/intro/area.js
+2 -2
View File
@@ -1,4 +1,4 @@
iD.ui.intro.area = function(context, reveal) {
export function area(context, reveal) {
var event = d3.dispatch('done'),
timeout;
@@ -85,4 +85,4 @@ iD.ui.intro.area = function(context, reveal) {
};
return d3.rebind(step, event, 'on');
};
}
modules/ui/intro/index.js
+5
View File
@@ -0,0 +1,5 @@
export { area } from './area';
export { line } from './line';
export { navigation } from './navigation';
export { point } from './point';
export { startEditing } from './start_editing';
js/id/ui/intro/line.js → modules/ui/intro/line.js
+2 -2
View File
@@ -1,4 +1,4 @@
iD.ui.intro.line = function(context, reveal) {
export function line(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
@@ -150,4 +150,4 @@ iD.ui.intro.line = function(context, reveal) {
};
return d3.rebind(step, event, 'on');
};
}
js/id/ui/intro/navigation.js → modules/ui/intro/navigation.js
+2 -2
View File
@@ -1,4 +1,4 @@
iD.ui.intro.navigation = function(context, reveal) {
export function navigation(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
@@ -109,4 +109,4 @@ iD.ui.intro.navigation = function(context, reveal) {
};
return d3.rebind(step, event, 'on');
};
}
js/id/ui/intro/point.js → modules/ui/intro/point.js
+2 -2
View File
@@ -1,4 +1,4 @@
iD.ui.intro.point = function(context, reveal) {
export function point(context, reveal) {
var event = d3.dispatch('done'),
timeouts = [];
@@ -149,4 +149,4 @@ iD.ui.intro.point = function(context, reveal) {
};
return d3.rebind(step, event, 'on');
};
}
js/id/ui/intro/start_editing.js → modules/ui/intro/start_editing.js
+2 -2
View File
@@ -1,4 +1,4 @@
iD.ui.intro.startEditing = function(context, reveal) {
export function startEditing(context, reveal) {
var event = d3.dispatch('done', 'startEditing'),
modal,
timeouts = [];
@@ -54,4 +54,4 @@ iD.ui.intro.startEditing = function(context, reveal) {
};
return d3.rebind(step, event, 'on');
};
}