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

More adjustments to walkthrough language, timing

Browse Source
This commit is contained in:
Bryan Housel
2017-04-05 22:01:15 -04:00
parent be73f1cddb
commit 36b90fa653
8 changed files with 166 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/curtain.js
-3
View File
@@ -78,14 +78,11 @@ export function uiCurtain() {
if (options.buttonText && options.buttonCallback) {
var button = tooltip.selectAll('.button-section .button.action');
button
.on('click', function() {
d3.event.preventDefault();
options.buttonCallback();
});
button.node().focus();
}
// var dimensions = utilGetDimensions(selection, true),
modules/ui/intro/area.js
+24 -17
View File
@@ -7,6 +7,8 @@ import { icon, pad } from './helper';
export function uiIntroArea(context, reveal) {
var dispatch = d3.dispatch('done'),
playground = [-85.63552, 41.94159],
playgroundPreset = context.presets().item('leisure/playground'),
descriptionField = context.presets().field('description'),
timeouts = [];
@@ -28,7 +30,7 @@ export function uiIntroArea(context, reveal) {
function addArea() {
var tooltip = reveal('button.add-area',
t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }));
t('intro.areas.add_playground', { button: icon('#icon-area', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
@@ -38,7 +40,7 @@ export function uiIntroArea(context, reveal) {
context.on('enter.intro', function(mode) {
if (mode.id !== 'add-area') return;
continueTo(startArea);
continueTo(startPlayground);
});
function continueTo(nextStep) {
@@ -48,24 +50,24 @@ export function uiIntroArea(context, reveal) {
}
function startArea() {
function startPlayground() {
if (context.mode().id !== 'add-area') {
return chapter.restart();
}
var padding = 120 * Math.pow(2, context.map().zoom() - 19);
var box = pad(playground, padding, context);
reveal(box, t('intro.areas.corner'));
reveal(box, t('intro.areas.start_playground'));
context.map().on('move.intro drawn.intro', function() {
padding = 120 * Math.pow(2, context.map().zoom() - 19);
box = pad(playground, padding, context);
reveal(box, t('intro.areas.corner'), { duration: 0 });
reveal(box, t('intro.areas.start_playground'), { duration: 0 });
});
context.on('enter.intro', function(mode) {
if (mode.id !== 'draw-area') return chapter.restart();
continueTo(drawArea);
continueTo(continuePlayground);
});
function continueTo(nextStep) {
@@ -76,19 +78,19 @@ export function uiIntroArea(context, reveal) {
}
function drawArea() {
function continuePlayground() {
if (context.mode().id !== 'draw-area') {
return chapter.restart();
}
var padding = 150 * Math.pow(2, context.map().zoom() - 19);
var box = pad(playground, padding, context);
reveal(box, t('intro.areas.place'));
reveal(box, t('intro.areas.continue_playground'));
context.map().on('move.intro drawn.intro', function() {
padding = 150 * Math.pow(2, context.map().zoom() - 19);
box = pad(playground, padding, context);
reveal(box, t('intro.areas.place'), {duration: 0});
reveal(box, t('intro.areas.continue_playground'), {duration: 0});
});
context.on('enter.intro', function(mode) {
@@ -122,8 +124,7 @@ export function uiIntroArea(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.areas.search',
{ name: context.presets().item('leisure/playground').name() })
t('intro.areas.search_playground', { name: playgroundPreset.name() })
);
}, 500);
}
@@ -134,7 +135,8 @@ export function uiIntroArea(context, reveal) {
if (first.classed('preset-leisure-playground')) {
reveal(first.select('.preset-list-button').node(),
t('intro.areas.choose')
t('intro.areas.choose_playground', { name: playgroundPreset.name() }),
{ duration: 300 }
);
d3.select('.preset-search-input')
@@ -182,7 +184,10 @@ export function uiIntroArea(context, reveal) {
return chapter.restart();
});
reveal('div.combobox', t('intro.areas.choose_field'));
reveal('div.combobox',
t('intro.areas.choose_field', { name: descriptionField.label() }),
{ duration: 300 }
);
d3.select('div.combobox')
.on('click.intro', function() {
@@ -190,7 +195,7 @@ export function uiIntroArea(context, reveal) {
if (d3.select('.form-field-description').empty())
continueTo(retryChooseDescription);
else
continueTo(addDescription);
continueTo(describePlayground);
}, 100);
});
@@ -202,13 +207,13 @@ export function uiIntroArea(context, reveal) {
}
function addDescription() {
function describePlayground() {
context.on('exit.intro', function() {
continueTo(play);
});
reveal('.entity-editor-pane',
t('intro.areas.describe', { button: icon('#icon-apply', 'pre-text') })
t('intro.areas.describe_playground', { button: icon('#icon-apply', 'pre-text') })
);
function continueTo(nextStep) {
@@ -223,12 +228,14 @@ export function uiIntroArea(context, reveal) {
return chapter.restart();
});
reveal('.entity-editor-pane', t('intro.areas.retry_add_field'), {
reveal('.entity-editor-pane',
t('intro.areas.retry_add_field', { name: descriptionField.label() }), {
buttonText: t('intro.ok'),
buttonCallback: function() { continueTo(clickAddField); }
});
function continueTo(nextStep) {
context.on('exit.intro', null);
nextStep();
}
}
modules/ui/intro/building.js
+16 -7
View File
@@ -9,6 +9,9 @@ export function uiIntroBuilding(context, reveal) {
var dispatch = d3.dispatch('done'),
house = [-85.62815, 41.95638],
tank = [-85.62732, 41.95347],
buildingCatetory = context.presets().item('category-building'),
housePreset = context.presets().item('building/house'),
tankPreset = context.presets().item('man_made/storage_tank'),
timeouts = [],
houseId = null,
tankId = null;
@@ -140,7 +143,9 @@ export function uiIntroBuilding(context, reveal) {
if (button.empty()) return chapter.restart();
timeout(function() {
reveal(button.node(), t('intro.buildings.choose_building'));
reveal(button.node(),
t('intro.buildings.choose_category_building', { name: buildingCatetory.name() })
);
button.on('click.intro', function() { continueTo(choosePresetHouse); });
}, 500);
@@ -165,9 +170,12 @@ export function uiIntroBuilding(context, reveal) {
if (button.empty()) return chapter.restart();
timeout(function() {
reveal(button.node(), t('intro.buildings.choose_house'));
reveal(button.node(),
t('intro.buildings.choose_preset_house', { name: housePreset.name() }),
{ duration: 300 }
);
button.on('click.intro', function() { continueTo(closeEditorHouse); });
}, 500);
}, 300);
function continueTo(nextStep) {
d3.select('.preset-list-button').on('click.intro', null);
@@ -392,7 +400,7 @@ export function uiIntroBuilding(context, reveal) {
if (mode.id === 'draw-area')
return;
else if (mode.id === 'select')
return continueTo(searchPreset);
return continueTo(searchPresetTank);
else
return continueTo(addTank);
});
@@ -405,7 +413,7 @@ export function uiIntroBuilding(context, reveal) {
}
function searchPreset() {
function searchPresetTank() {
if (context.mode().id !== 'select') {
return continueTo(addTank);
}
@@ -419,7 +427,7 @@ export function uiIntroBuilding(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.buildings.search_tank', { name: context.presets().item('man_made/storage_tank').name() })
t('intro.buildings.search_tank', { name: tankPreset.name() })
);
}, 500);
@@ -436,7 +444,8 @@ 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')
t('intro.buildings.choose_tank', { name: tankPreset.name() }),
{ duration: 300 }
);
d3.select('.preset-search-input')
modules/ui/intro/line.js
+42 -24
View File
@@ -11,6 +11,8 @@ export function uiIntroLine(context, reveal) {
midpoint = [-85.62975395449628, 41.95787501510204],
start = [-85.6297754121684, 41.95805253325314],
intersection = [-85.62974496187628, 41.95742515554585],
roadCategory = context.presets().item('category-road'),
residentialPreset = context.presets().item('highway/residential'),
targetId = 'w646',
lineId = null;
@@ -33,7 +35,7 @@ export function uiIntroLine(context, reveal) {
function addLine() {
var tooltip = reveal('button.add-line',
t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }));
t('intro.lines.add_line', { button: icon('#icon-line', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
@@ -63,13 +65,13 @@ export function uiIntroLine(context, reveal) {
var padding = 70 * Math.pow(2, context.map().zoom() - 18);
var box = pad(start, padding, context);
box.height = box.height + 100;
reveal(box, t('intro.lines.start'));
reveal(box, t('intro.lines.start_line'));
context.map().on('move.intro drawn.intro', function() {
padding = 70 * Math.pow(2, context.map().zoom() - 18);
box = pad(start, padding, context);
box.height = box.height + 100;
reveal(box, t('intro.lines.start'), { duration: 0 });
reveal(box, t('intro.lines.start_line'), { duration: 0 });
});
context.on('enter.intro', function(mode) {
@@ -117,7 +119,7 @@ export function uiIntroLine(context, reveal) {
if (!entity) return chapter.restart();
if (isLineConnected()) {
continueTo(finishLine);
continueTo(continueLine);
}
});
@@ -125,10 +127,7 @@ export function uiIntroLine(context, reveal) {
if (mode.id === 'draw-line')
return;
else if (mode.id === 'select') {
var box = pad(intersection, 80, context);
reveal(box, t('intro.lines.restart', { name: t('intro.graph.name.flower-street') }));
d3.select(window).on('mousedown.intro', eventCancel, true);
timeout(chapter.restart, 3000);
continueTo(retryIntersect);
return;
}
else
@@ -157,20 +156,32 @@ export function uiIntroLine(context, reveal) {
}
function finishLine() {
function retryIntersect() {
d3.select(window).on('mousedown.intro', eventCancel, true);
var box = pad(intersection, 80, context);
reveal(box,
t('intro.lines.retry_intersect', { name: t('intro.graph.name.flower-street') })
);
timeout(chapter.restart, 3000);
}
function continueLine() {
if (context.mode().id !== 'draw-line') return chapter.restart();
var entity = lineId && context.hasEntity(lineId);
if (!entity) return chapter.restart();
context.map().centerEase(intersection);
reveal('#surface', t('intro.lines.finish'));
reveal('#surface', t('intro.lines.continue_line'));
context.on('enter.intro', function(mode) {
if (mode.id === 'draw-line')
return;
else if (mode.id === 'select')
return continueTo(enterSelect);
return continueTo(chooseCategoryRoad);
else
return chapter.restart();
});
@@ -182,7 +193,7 @@ export function uiIntroLine(context, reveal) {
}
function enterSelect() {
function chooseCategoryRoad() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
@@ -195,8 +206,10 @@ export function uiIntroLine(context, reveal) {
if (button.empty()) return chapter.restart();
timeout(function() {
reveal(button.node(), t('intro.lines.road'));
button.on('click.intro', function() { continueTo(roadCategory); });
reveal(button.node(),
t('intro.lines.choose_category_road', { name: roadCategory.name() })
);
button.on('click.intro', function() { continueTo(choosePresetResidential); });
}, 500);
function continueTo(nextStep) {
@@ -207,7 +220,7 @@ export function uiIntroLine(context, reveal) {
}
function roadCategory() {
function choosePresetResidential() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
@@ -221,17 +234,20 @@ export function uiIntroLine(context, reveal) {
subgrid.selectAll(':not(.preset-highway-residential) .preset-list-button')
.on('click.intro', function() {
continueTo(retryPreset);
continueTo(retryPresetResidential);
});
subgrid.selectAll('.preset-highway-residential .preset-list-button')
.on('click.intro', function() {
continueTo(roadDetails);
continueTo(nameRoad);
});
timeout(function() {
reveal(subgrid.node(), t('intro.lines.residential'));
}, 500);
reveal(subgrid.node(),
t('intro.lines.choose_preset_residential', { name: residentialPreset.name() }),
{ duration: 300 }
);
}, 300);
function continueTo(nextStep) {
d3.select('.preset-list-button').on('click.intro', null);
@@ -242,7 +258,7 @@ export function uiIntroLine(context, reveal) {
// selected wrong road type
function retryPreset() {
function retryPresetResidential() {
if (context.mode().id !== 'select') {
return chapter.restart();
}
@@ -253,9 +269,11 @@ export function uiIntroLine(context, reveal) {
timeout(function() {
var button = d3.select('.entity-editor-pane .preset-list-button');
reveal(button.node(), t('intro.lines.wrong_preset'));
reveal(button.node(),
t('intro.lines.retry_preset_residential', { name: residentialPreset.name() })
);
button.on('click.intro', function() {
continueTo(enterSelect);
continueTo(chooseCategoryRoad);
});
}, 500);
@@ -267,14 +285,14 @@ export function uiIntroLine(context, reveal) {
}
function roadDetails() {
function nameRoad() {
context.on('exit.intro', function() {
continueTo(play);
});
timeout(function() {
reveal('.entity-editor-pane',
t('intro.lines.describe', { button: icon('#icon-apply', 'pre-text') })
t('intro.lines.name_road', { button: icon('#icon-apply', 'pre-text') })
);
}, 500);
modules/ui/intro/navigation.js
+9 -7
View File
@@ -123,11 +123,9 @@ export function uiIntroNavigation(context, reveal) {
continueTo(streetSearch);
});
timeout(function() {
reveal('.entity-editor-pane',
t('intro.navigation.pane', { button: icon('#icon-close', 'pre-text') })
);
}, 700);
reveal('.entity-editor-pane',
t('intro.navigation.pane', { button: icon('#icon-close', 'pre-text') })
);
function continueTo(nextStep) {
context.on('exit.intro', null);
@@ -140,7 +138,8 @@ export function uiIntroNavigation(context, reveal) {
context.history().reset('initial'); // ensure spring street exists
reveal('.search-header input',
t('intro.navigation.search', { name: t('intro.graph.name.spring-street') }));
t('intro.navigation.search', { name: t('intro.graph.name.spring-street') })
);
d3.select('.search-header input')
.on('keyup.intro', checkSearchResult);
@@ -153,7 +152,10 @@ export function uiIntroNavigation(context, reveal) {
name = t('intro.graph.name.spring-street');
if (!firstName.empty() && firstName.text() === name) {
reveal(first.node(), t('intro.navigation.choose', { name: name }));
reveal(first.node(),
t('intro.navigation.choose', { name: name }),
{ duration: 300 }
);
context.on('exit.intro', function() {
continueTo(selectedStreet);
modules/ui/intro/point.js
+13 -11
View File
@@ -9,6 +9,7 @@ export function uiIntroPoint(context, reveal) {
timeouts = [],
intersection = [-85.63279, 41.94394],
building = [-85.632422, 41.944045],
cafePreset = context.presets().item('amenity/cafe'),
pointId = null;
@@ -30,7 +31,7 @@ export function uiIntroPoint(context, reveal) {
function addPoint() {
var tooltip = reveal('button.add-point',
t('intro.points.add', { button: icon('#icon-point', 'pre-text') }));
t('intro.points.add_point', { button: icon('#icon-point', 'pre-text') }));
pointId = null;
@@ -58,11 +59,11 @@ export function uiIntroPoint(context, reveal) {
}
var pointBox = pad(building, 150, context);
reveal(pointBox, t('intro.points.place'));
reveal(pointBox, t('intro.points.place_point'));
context.map().on('move.intro drawn.intro', function() {
pointBox = pad(building, 150, context);
reveal(pointBox, t('intro.points.place'), { duration: 0 });
reveal(pointBox, t('intro.points.place_point'), { duration: 0 });
});
context.on('enter.intro', function(mode) {
@@ -94,7 +95,7 @@ export function uiIntroPoint(context, reveal) {
timeout(function() {
reveal('.preset-search-input',
t('intro.points.search', { name: context.presets().item('amenity/cafe').name() })
t('intro.points.search_cafe', { name: cafePreset.name() })
);
}, 500);
}
@@ -105,7 +106,8 @@ export function uiIntroPoint(context, reveal) {
if (first.classed('preset-amenity-cafe')) {
reveal(first.select('.preset-list-button').node(),
t('intro.points.choose')
t('intro.points.choose_cafe', { name: cafePreset.name() }),
{ duration: 300 }
);
d3.select('.preset-search-input')
@@ -152,7 +154,7 @@ export function uiIntroPoint(context, reveal) {
});
context.history().on('change.intro', function() {
continueTo(closeEditor);
continueTo(addCloseEditor);
});
timeout(function() {
@@ -169,13 +171,13 @@ export function uiIntroPoint(context, reveal) {
}
function closeEditor() {
function addCloseEditor() {
context.on('exit.intro', function() {
continueTo(reselectPoint);
});
reveal('.entity-editor-pane',
t('intro.points.close', { button: icon('#icon-apply', 'pre-text') })
t('intro.points.add_close', { button: icon('#icon-apply', 'pre-text') })
);
function continueTo(nextStep) {
@@ -223,7 +225,7 @@ export function uiIntroPoint(context, reveal) {
});
context.history().on('change.intro', function() {
continueTo(closeEditor2);
continueTo(updateCloseEditor);
});
timeout(function() {
@@ -240,7 +242,7 @@ export function uiIntroPoint(context, reveal) {
}
function closeEditor2() {
function updateCloseEditor() {
if (context.mode().id !== 'select') {
return continueTo(reselectPoint);
}
@@ -251,7 +253,7 @@ export function uiIntroPoint(context, reveal) {
timeout(function() {
reveal('.entity-editor-pane',
t('intro.points.close2', { button: icon('#icon-apply', 'pre-text') })
t('intro.points.update_close', { button: icon('#icon-apply', 'pre-text') })
);
}, 500);