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

Adjust timings, language, transitions in walkthrough

Browse Source
This commit is contained in:
Bryan Housel
2017-04-10 16:59:41 -04:00
parent ec1e5cb50d
commit 8a2e1633c9
10 changed files with 358 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/intro/area.js
+35 -23
View File
@@ -1,7 +1,7 @@
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { utilRebind } from '../../util/rebind';
import { icon, pad } from './helper';
import { icon, pad, transitionTime } from './helper';
export function uiIntroArea(context, reveal) {
@@ -29,19 +29,27 @@ export function uiIntroArea(context, reveal) {
function addArea() {
var tooltip = reveal('button.add-area',
t('intro.areas.add_playground', { button: icon('#icon-area', 'pre-text') }));
context.history().reset('initial');
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#landuse-images');
var msec = transitionTime(playground, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(playground, msec);
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startPlayground);
});
timeout(function() {
var tooltip = reveal('button.add-area',
t('intro.areas.add_playground', { button: icon('#icon-area', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#landuse-images');
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startPlayground);
});
}, msec + 100);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -124,7 +132,7 @@ export function uiIntroArea(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.areas.search_playground', { name: playgroundPreset.name() })
t('intro.areas.search_playground', { preset: playgroundPreset.name() })
);
}, 500);
}
@@ -135,7 +143,7 @@ export function uiIntroArea(context, reveal) {
if (first.classed('preset-leisure-playground')) {
reveal(first.select('.preset-list-button').node(),
t('intro.areas.choose_playground', { name: playgroundPreset.name() }),
t('intro.areas.choose_playground', { preset: playgroundPreset.name() }),
{ duration: 300 }
);
@@ -163,13 +171,16 @@ export function uiIntroArea(context, reveal) {
});
timeout(function() {
reveal('.more-fields .combobox-input', t('intro.areas.add_field'));
reveal('.more-fields .combobox-input',
t('intro.areas.add_field'),
{ duration: 300 }
);
d3.select('.more-fields .combobox-input')
.on('click.intro', function() {
continueTo(chooseDescriptionField);
});
}, 500);
}, 300); // after editor pane visible
function continueTo(nextStep) {
d3.select('.more-fields .combobox-input').on('click.intro', null);
@@ -185,7 +196,7 @@ export function uiIntroArea(context, reveal) {
});
reveal('div.combobox',
t('intro.areas.choose_field', { name: descriptionField.label() }),
t('intro.areas.choose_field', { field: descriptionField.label() }),
{ duration: 300 }
);
@@ -213,7 +224,8 @@ export function uiIntroArea(context, reveal) {
});
reveal('.entity-editor-pane',
t('intro.areas.describe_playground', { button: icon('#icon-apply', 'pre-text') })
t('intro.areas.describe_playground', { button: icon('#icon-apply', 'pre-text') }),
{ duration: 300 }
);
function continueTo(nextStep) {
@@ -229,7 +241,7 @@ export function uiIntroArea(context, reveal) {
});
reveal('.entity-editor-pane',
t('intro.areas.retry_add_field', { name: descriptionField.label() }), {
t('intro.areas.retry_add_field', { field: descriptionField.label() }), {
buttonText: t('intro.ok'),
buttonCallback: function() { continueTo(clickAddField); }
});
@@ -242,19 +254,19 @@ export function uiIntroArea(context, reveal) {
function play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-line',
t('intro.areas.play', { next: t('intro.lines.title') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { reveal('#id-container'); }
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
}
);
}
chapter.enter = function() {
context.history().reset('initial');
context.map().zoom(19).centerEase(playground);
addArea();
};
modules/ui/intro/building.js
+66 -54
View File
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
import { t } from '../../util/locale';
import { modeBrowse } from '../../modes/browse';
import { utilRebind } from '../../util/rebind';
import { icon, pad, selectMenuItem } from './helper';
import { icon, pad, selectMenuItem, transitionTime } from './helper';
export function uiIntroBuilding(context, reveal) {
@@ -39,6 +39,7 @@ export function uiIntroBuilding(context, reveal) {
reveal(box, text, options);
}
function revealTank(center, text, options) {
var padding = 190 * Math.pow(2, context.map().zoom() - 19.5);
var box = pad(center, padding, context);
@@ -47,22 +48,32 @@ export function uiIntroBuilding(context, reveal) {
function addHouse() {
var tooltip = reveal('button.add-area',
t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#building-images');
houseId = null;
tankId = null;
context.history().reset('initial');
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startHouse);
});
var msec = transitionTime(house, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(house, msec);
timeout(function() {
var tooltip = reveal('button.add-area',
t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#building-images');
houseId = null;
context.history().reset('initial');
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startHouse);
});
}, msec + 100);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -144,7 +155,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal(button.node(),
t('intro.buildings.choose_category_building', { name: buildingCatetory.name() })
t('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
);
button.on('click.intro', function() { continueTo(choosePresetHouse); });
}, 500);
@@ -171,7 +182,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal(button.node(),
t('intro.buildings.choose_preset_house', { name: housePreset.name() }),
t('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
{ duration: 300 }
);
button.on('click.intro', function() { continueTo(closeEditorHouse); });
@@ -336,18 +347,23 @@ export function uiIntroBuilding(context, reveal) {
function addTank() {
reveal('button.add-area',
t('intro.buildings.add_tank', { button: icon('#icon-area', 'pre-text') })
);
tankId = null;
context.history().reset('doneSquare');
context.map().zoom(19.5).centerEase(tank, 500);
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startTank);
});
var msec = transitionTime(tank, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19.5).centerEase(tank, msec);
timeout(function() {
reveal('button.add-area',
t('intro.buildings.add_tank', { button: icon('#icon-area', 'pre-text') })
);
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startTank);
});
}, msec + 100);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -427,7 +443,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.buildings.search_tank', { name: tankPreset.name() })
t('intro.buildings.search_tank', { preset: tankPreset.name() })
);
}, 500);
@@ -444,7 +460,7 @@ export function uiIntroBuilding(context, reveal) {
if (first.classed('preset-man_made-storage_tank')) {
reveal(first.select('.preset-list-button').node(),
t('intro.buildings.choose_tank', { name: tankPreset.name() }),
t('intro.buildings.choose_tank', { preset: tankPreset.name() }),
{ duration: 300 }
);
@@ -499,30 +515,28 @@ export function uiIntroBuilding(context, reveal) {
context.map().centerEase(tank, 500);
timeout(function() {
if (context.map().zoom() < 19.5) {
context.map().zoomEase(19.5, 500);
}
}, 520);
context.on('enter.intro', function(mode) {
if (mode.id !== 'select') return;
var ids = context.selectedIDs();
if (ids.length !== 1 || ids[0] !== tankId) return;
context.on('enter.intro', function(mode) {
if (mode.id !== 'select') return;
var ids = context.selectedIDs();
if (ids.length !== 1 || ids[0] !== tankId) return;
timeout(function() {
var node = selectMenuItem('circularize').node();
if (!node) return;
continueTo(clickCircle);
}, 300); // after menu visible
});
timeout(function() {
var node = selectMenuItem('circularize').node();
if (!node) return;
continueTo(clickCircle);
}, 300); // after menu visible
});
revealTank(tank, t('intro.buildings.rightclick_tank'));
context.map().on('move.intro drawn.intro', function() {
revealTank(tank, t('intro.buildings.rightclick_tank'), { duration: 0 });
});
context.map().on('move.intro drawn.intro', function() {
revealTank(tank, t('intro.buildings.rightclick_tank'), { duration: 0 });
});
context.history().on('change.intro', function() {
continueTo(rightClickTank);
});
context.history().on('change.intro', function() {
continueTo(rightClickTank);
});
}, 600);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -603,22 +617,20 @@ export function uiIntroBuilding(context, reveal) {
function play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-startEditing',
t('intro.buildings.play', { next: t('intro.startediting.title') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { reveal('#id-container'); }
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
}
);
}
chapter.enter = function() {
houseId = null;
tankId = null;
context.history().reset('initial');
context.map().zoom(19).centerEase(house, 500);
timeout(addHouse, 520);
addHouse();
};
modules/ui/intro/helper.js
+15
View File
@@ -1,5 +1,7 @@
import * as d3 from 'd3';
import { t } from '../../util/locale';
import { geoSphericalDistance } from '../../geo';
export function pointBox(loc, context) {
var rect = context.surfaceRect();
@@ -99,3 +101,16 @@ export function selectMenuItem(operation) {
', .radial-menu .radial-menu-item-' + operation;
return d3.select(selector);
}
export function transitionTime(point1, point2) {
var distance = geoSphericalDistance(point1, point2);
if (distance === 0)
return 0;
else if (distance < 80)
return 500;
else if (distance < 160)
return 1000;
else
return 3000;
}
modules/ui/intro/line.js
+72 -40
View File
@@ -4,7 +4,7 @@ import { t } from '../../util/locale';
import { geoSphericalDistance } from '../../geo';
import { modeBrowse, modeSelect } from '../../modes';
import { utilRebind } from '../../util/rebind';
import { icon, pad, selectMenuItem } from './helper';
import { icon, pad, selectMenuItem, transitionTime } from './helper';
export function uiIntroLine(context, reveal) {
@@ -50,19 +50,27 @@ export function uiIntroLine(context, reveal) {
function addLine() {
var tooltip = reveal('button.add-line',
t('intro.lines.add_line', { button: icon('#icon-line', 'pre-text') }));
context.history().reset('initial');
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#feature-images');
var msec = transitionTime(tulipRoadStart, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(18.5).centerEase(tulipRoadStart, msec);
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-line') return;
continueTo(startLine);
});
timeout(function() {
var tooltip = reveal('button.add-line',
t('intro.lines.add_line', { button: icon('#icon-line', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#feature-images');
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-line') return;
continueTo(startLine);
});
}, msec + 100);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -223,7 +231,7 @@ export function uiIntroLine(context, reveal) {
timeout(function() {
reveal(button.node(),
t('intro.lines.choose_category_road', { name: roadCategory.name() })
t('intro.lines.choose_category_road', { category: roadCategory.name() })
);
button.on('click.intro', function() { continueTo(choosePresetResidential); });
}, 500);
@@ -260,7 +268,7 @@ export function uiIntroLine(context, reveal) {
timeout(function() {
reveal(subgrid.node(),
t('intro.lines.choose_preset_residential', { name: residentialPreset.name() }),
t('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
{ duration: 300 }
);
}, 300);
@@ -286,7 +294,7 @@ export function uiIntroLine(context, reveal) {
timeout(function() {
var button = d3.select('.entity-editor-pane .preset-list-button');
reveal(button.node(),
t('intro.lines.retry_preset_residential', { name: residentialPreset.name() })
t('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
);
button.on('click.intro', function() {
continueTo(chooseCategoryRoad);
@@ -303,8 +311,7 @@ export function uiIntroLine(context, reveal) {
function nameRoad() {
context.on('exit.intro', function() {
context.history().checkpoint('doneAddLine');
continueTo(updateLine);
continueTo(didNameRoad);
});
timeout(function() {
@@ -320,13 +327,31 @@ export function uiIntroLine(context, reveal) {
}
function didNameRoad() {
context.history().checkpoint('doneAddLine');
timeout(function() {
reveal('#surface', t('intro.lines.did_name_road'), {
buttonText: t('intro.ok'),
buttonCallback: function() { continueTo(updateLine); }
});
}, 500);
function continueTo(nextStep) {
nextStep();
}
}
function updateLine() {
context.history().reset('doneAddLine');
if (!context.hasEntity(woodRoadId) || !context.hasEntity(woodRoadEndId)) {
return chapter.restart();
}
context.map().zoom(19).centerEase(woodRoadDragMidpoint, 500);
var msec = transitionTime(woodRoadDragMidpoint, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(woodRoadDragMidpoint, msec);
timeout(function() {
var padding = 250 * Math.pow(2, context.map().zoom() - 19);
@@ -344,7 +369,7 @@ export function uiIntroLine(context, reveal) {
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
);
});
}, 550);
}, msec + 100);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -559,7 +584,9 @@ export function uiIntroLine(context, reveal) {
return chapter.restart();
}
context.map().zoom(18).centerEase(deleteLinesLoc, 500);
var msec = transitionTime(deleteLinesLoc, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(18).centerEase(deleteLinesLoc, msec);
timeout(function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
@@ -588,7 +615,7 @@ export function uiIntroLine(context, reveal) {
}, 500); // after any transition (e.g. if user deleted intersection)
});
}, 550);
}, msec + 100);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -601,6 +628,7 @@ export function uiIntroLine(context, reveal) {
function rightClickIntersection() {
context.history().reset('doneUpdateLine');
context.enter(modeBrowse(context));
context.map().zoom(18).centerEase(eleventhAvenueEnd, 500);
timeout(function() {
@@ -637,7 +665,7 @@ export function uiIntroLine(context, reveal) {
}, 300); // after any transition (e.g. if user deleted intersection)
});
}, 550);
}, 600);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -740,25 +768,29 @@ export function uiIntroLine(context, reveal) {
return continueTo(rightClickIntersection);
}
context.map().zoom(18).centerEase(twelfthAvenue, 400);
var ids = context.selectedIDs();
var string = 'intro.lines.did_split_' + (ids.length > 1 ? 'multi' : 'single');
var street = t('intro.graph.name.washington-street');
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }));
reveal(box, t(string, { street1: street, street2: street }),
{ duration: 500 }
);
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }),
{ duration: 0 }
);
});
timeout(function() {
context.map().zoom(18).centerEase(twelfthAvenue, 500);
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }),
{ duration: 0 }
);
});
}, 600); // after initial reveal and curtain cut
context.on('enter.intro', function() {
var ids = context.selectedIDs();
@@ -805,7 +837,7 @@ export function uiIntroLine(context, reveal) {
return continueTo(didSplit);
}
context.map().zoom(18).centerEase(twelfthAvenue, 400);
context.map().zoom(18).centerEase(twelfthAvenue, 500);
timeout(function() {
var selected, other, padding, box;
@@ -861,7 +893,7 @@ export function uiIntroLine(context, reveal) {
return continueTo(rightClickIntersection);
}
});
}, 450);
}, 600);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -995,19 +1027,19 @@ export function uiIntroLine(context, reveal) {
function play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-building',
t('intro.lines.play', { next: t('intro.buildings.title') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { reveal('#id-container'); }
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
}
);
}
chapter.enter = function() {
context.history().reset('initial');
context.map().zoom(18.5).centerEase(tulipRoadStart);
addLine();
};
modules/ui/intro/navigation.js
+33 -22
View File
@@ -1,13 +1,14 @@
import * as d3 from 'd3';
import { t, textDirection } from '../../util/locale';
import { utilRebind } from '../../util/rebind';
import { icon, pointBox } from './helper';
import { icon, pointBox, transitionTime } from './helper';
export function uiIntroNavigation(context, reveal) {
var dispatch = d3.dispatch('done'),
timeouts = [],
hallId = 'n2061',
townHall = [-85.63591, 41.94285],
springStreet = [-85.63585099140167, 41.942506848938926];
@@ -34,25 +35,34 @@ export function uiIntroNavigation(context, reveal) {
function dragMap() {
var dragged = false,
rect = context.surfaceRect(),
box = {
left: rect.left + (textDirection === 'rtl' ? 60 : 10),
top: rect.top + 70,
width: rect.width - 70,
height: rect.height - 170
};
context.history().reset('initial');
context.map().centerZoom([-85.63591, 41.94285], 19);
reveal(box, t('intro.navigation.drag'));
var msec = transitionTime(townHall, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(townHall, msec);
context.map().on('move.intro', function() {
dragged = true;
});
timeout(function() {
var dragged = false,
rect = context.surfaceRect(),
box = {
left: rect.left + (textDirection === 'rtl' ? 60 : 10),
top: rect.top + 70,
width: rect.width - 70,
height: rect.height - 170
};
d3.select(window).on('mouseup.intro', function() {
if (dragged) continueTo(clickTownHall);
}, true);
context.map().centerZoom([-85.63591, 41.94285], 19);
reveal(box, t('intro.navigation.drag'));
context.map().on('move.intro', function() {
dragged = true;
});
d3.select(window).on('mouseup.intro', function() {
if (dragged) continueTo(clickTownHall);
}, true);
}, msec + 100);
function continueTo(nextStep) {
context.map().on('move.intro', null);
@@ -68,7 +78,7 @@ export function uiIntroNavigation(context, reveal) {
}
var hall = context.entity(hallId);
context.map().centerEase(hall.loc, 250);
context.map().centerEase(hall.loc, 600);
context.on('enter.intro', function() {
if (isTownHallSelected()) continueTo(selectedTownHall);
@@ -82,7 +92,7 @@ export function uiIntroNavigation(context, reveal) {
var box = pointBox(hall.loc, context);
reveal(box, t('intro.navigation.select'), { duration: 0 });
});
}, 260); // after centerEase
}, 700); // after centerEase
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -197,18 +207,19 @@ export function uiIntroNavigation(context, reveal) {
function play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-point',
t('intro.navigation.play', { next: t('intro.points.title') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { reveal('#id-container'); }
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
}
);
}
chapter.enter = function() {
context.history().reset('initial');
dragMap();
};
modules/ui/intro/point.js
+37 -26
View File
@@ -1,7 +1,7 @@
import * as d3 from 'd3';
import { t, textDirection } from '../../util/locale';
import { utilRebind } from '../../util/rebind';
import { icon, pointBox, pad, selectMenuItem } from './helper';
import { icon, pointBox, pad, selectMenuItem, transitionTime } from './helper';
export function uiIntroPoint(context, reveal) {
@@ -30,21 +30,29 @@ export function uiIntroPoint(context, reveal) {
function addPoint() {
var tooltip = reveal('button.add-point',
t('intro.points.add_point', { button: icon('#icon-point', 'pre-text') }));
context.history().reset('initial');
pointId = null;
var msec = transitionTime(intersection, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().zoom(19).centerEase(intersection, msec);
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#poi-images');
timeout(function() {
var tooltip = reveal('button.add-point',
t('intro.points.add_point', { button: icon('#icon-point', 'pre-text') }));
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-point') return;
continueTo(placePoint);
});
pointId = null;
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#poi-images');
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-point') return;
continueTo(placePoint);
});
}, msec + 100);
function continueTo(nextStep) {
context.on('enter.intro', null);
@@ -95,7 +103,7 @@ export function uiIntroPoint(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.points.search_cafe', { name: cafePreset.name() })
t('intro.points.search_cafe', { preset: cafePreset.name() })
);
}, 500);
}
@@ -106,7 +114,7 @@ export function uiIntroPoint(context, reveal) {
if (first.classed('preset-amenity-cafe')) {
reveal(first.select('.preset-list-button').node(),
t('intro.points.choose_cafe', { name: cafePreset.name() }),
t('intro.points.choose_cafe', { preset: cafePreset.name() }),
{ duration: 300 }
);
@@ -192,12 +200,9 @@ export function uiIntroPoint(context, reveal) {
var entity = context.hasEntity(pointId);
if (!entity) return chapter.restart();
context.map().centerEase(entity.loc, 250);
context.on('enter.intro', function(mode) {
if (mode.id !== 'select') return;
continueTo(updatePoint);
});
var msec = transitionTime(entity.loc, context.map().center());
if (msec) { reveal(null, null, { duration: 0 }); }
context.map().centerEase(entity.loc, msec);
timeout(function() {
var box = pointBox(entity.loc, context);
@@ -209,7 +214,13 @@ export function uiIntroPoint(context, reveal) {
var box = pointBox(entity.loc, context);
reveal(box, t('intro.points.reselect'), { duration: 0 });
});
}, 260); // after centerEase
context.on('enter.intro', function(mode) {
if (mode.id !== 'select') return;
continueTo(updatePoint);
});
}, msec + 100);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -358,19 +369,19 @@ export function uiIntroPoint(context, reveal) {
function play() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-area',
t('intro.points.play', { next: t('intro.areas.title') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { reveal('#id-container'); }
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
}
);
}
chapter.enter = function() {
context.history().reset('initial');
context.map().zoom(19).centerEase(intersection);
addPoint();
};
modules/ui/intro/start_editing.js
+48 -45
View File
@@ -7,8 +7,7 @@ import { utilRebind } from '../../util/rebind';
export function uiIntroStartEditing(context, reveal) {
var dispatch = d3.dispatch('done', 'startEditing'),
modalSelection,
timeouts = [];
modalSelection = d3.select(null);
var chapter = {
@@ -16,57 +15,61 @@ export function uiIntroStartEditing(context, reveal) {
};
function timeout(f, t) {
timeouts.push(window.setTimeout(f, t));
function showHelp() {
reveal('.map-control.help-control',
t('intro.startediting.help', { button: icon('#icon-help', 'pre-text') }), {
buttonText: t('intro.ok'),
buttonCallback: function() { showSave(); }
}
);
}
function showSave() {
reveal('#bar button.save',
t('intro.startediting.save'), {
buttonText: t('intro.ok'),
buttonCallback: function() { showStart(); }
}
);
}
function showStart() {
modalSelection = uiModal(context.container());
modalSelection.select('.modal')
.attr('class', 'modal-splash modal col6');
modalSelection.selectAll('.close').remove();
var startbutton = modalSelection.select('.content')
.attr('class', 'fillL')
.append('button')
.attr('class', 'modal-section huge-modal-button')
.on('click', function() {
modalSelection.remove();
});
startbutton
.append('svg')
.attr('class', 'illustration')
.append('use')
.attr('xlink:href', '#logo-walkthrough');
startbutton
.append('h2')
.text(t('intro.startediting.start'));
dispatch.call('startEditing');
}
chapter.enter = function() {
reveal('.map-control.help-control',
t('intro.startediting.help', { button: icon('#icon-help', 'pre-text') }));
timeout(function() {
reveal('#bar button.save', t('intro.startediting.save'));
}, 5000);
timeout(function() {
reveal('#surface');
}, 10000);
timeout(function() {
modalSelection = uiModal(context.container());
modalSelection.select('.modal')
.attr('class', 'modal-splash modal col6');
modalSelection.selectAll('.close').remove();
var startbutton = modalSelection.select('.content')
.attr('class', 'fillL')
.append('button')
.attr('class', 'modal-section huge-modal-button')
.on('click', function() {
modalSelection.remove();
});
startbutton
.append('svg')
.attr('class', 'illustration')
.append('use')
.attr('xlink:href', '#logo-walkthrough');
startbutton
.append('h2')
.text(t('intro.startediting.start'));
dispatch.call('startEditing');
}, 10500);
showHelp();
};
chapter.exit = function() {
if (modalSelection) { modalSelection.remove(); }
timeouts.forEach(window.clearTimeout);
modalSelection.remove();
};