CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-27 16:03:52 +00: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

6
css/80_app.css
View File

@@ -3674,6 +3674,12 @@ img.tile-removing {
margin: 0;
}
.curtain-tooltip .tooltip-inner .icon.pre-text {
vertical-align: text-top;
margin-right: 0;
display: inline-block;
}
.curtain-tooltip.intro-points-describe {
top: 133px !important;
}

45
data/core.yaml
View File

@@ -901,25 +901,25 @@ en:
drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"
select: "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**"
selected: "Great! The point is now selected. Selected items are drawn with a pulsing glow."
pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by pressing the {button} button in the top right.**"
pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**"
search: "You can also search for features in the current view, or worldwide. **Search for '{name}'**"
choose: "**Choose {name} from the list to select it.**"
chosen: "Great! {name} is now selected. See how the fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by pressing the {button} button.**"
chosen: "Great! {name} is now selected. See how the fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by hitting escape or pressing the {button} button.**"
play: "Try moving the map and clicking on some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
points:
title: "Points"
add_point: "Points can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**"
place_point: "The point can be placed by clicking on the map or pressing the spacebar. **Click the map or press spacebar to place the new point on top of the building.**"
search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{name}'**"
choose_cafe: "**Choose {name} from the list.**"
search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'**"
choose_cafe: "**Choose {preset} from the list.**"
feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
add_name: "In OpenStreetMap, all of the fields are optional, and it's ok to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**"
add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, return, or click the {button} button to close the feature editor**"
reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**"
update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details**"
update_close: "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**"
rightclick: "You can right-click on features to see the edit menu, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**"
delete: "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**"
rightclick: "You can right-click on any feature to see the edit menu, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**"
delete: "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**"
undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**"
play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
areas:
@@ -927,11 +927,11 @@ en:
add_playground: "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**"
start_playground: "Areas are drawn by placing nodes along the outer edge of the area. **Click or press spacebar to place a starting node on one of the corners of the playground.**"
continue_playground: "Continue drawing the area by placing more nodes around the playground. Finish the area by clicking on the starting node. **Draw an area for the playground.**"
search_playground: "**Search for '{name}'.**"
choose_playground: "**Choose {name} from the list.**"
search_playground: "**Search for '{preset}'.**"
choose_playground: "**Choose {preset} from the list.**"
add_field: "This playground doesn't have an official name, so we won't add anything in the Name field. Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**"
choose_field: "**Choose {name} from the list.**"
retry_add_field: "You didn't select the {name} field. Let's try again."
choose_field: "**Choose {field} from the list.**"
retry_add_field: "You didn't select the {field} field. Let's try again."
describe_playground: "**Add a description, then click the {button} button to close the feature editor.**"
play: "Good job! Try drawing a few more areas. Explore the presets and see what other kinds of areas you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
lines:
@@ -941,17 +941,18 @@ en:
intersect: "Click or press spacebar to add more nodes to the line. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**"
retry_intersect: "The road needs to intersect {name}. Let's try again!"
continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed. When you are finished drawing, click on the last node again. **Finish drawing the road.**"
choose_category_road: "**Select {name} from the list**"
choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {name} type**"
retry_preset_residential: "You didn't select the {name} type. **Click here to choose again**"
choose_category_road: "**Select {category} from the list**"
choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type**"
retry_preset_residential: "You didn't select the {preset} type. **Click here to choose again**"
name_road: "**Give this road a name, then hit escape, return, or click the {button} button to close the feature editor.**"
did_name_road: "Looks good! Next we will learn how to update the shape of a line."
update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
start_drag_endpoint: "When a line is selected, you can drag any of its nodes by clicking and holding down the left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**"
finish_drag_endpoint: "This spot looks good. **Finish dragging by releasing the left mouse button**"
finish_drag_endpoint: "This spot looks good. **Release the left mouse button to finish dragging.**"
start_drag_midpoint: "Small triangles are drawn at the midpoints between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**"
continue_drag_midpoint: "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**"
delete_lines: "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this map by deleting the extra lines."
delete_lines: "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
rightclick_intersection: "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**"
split_intersection: "**Click on the {button} button to split {street}.**"
retry_split: "You didn't click the Split button. Try again."
@@ -967,9 +968,9 @@ en:
add_building: "OpenStreetMap is the world's largest database of buildings. You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**"
start_building: "Let's add this house to the map by tracing its outline. Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**"
continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building shape by clicking on the starting node. **Continue tracing the building.**"
choose_category_building: "**Choose {name} from the list**"
choose_preset_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the {name} building type**"
close: "**Hit escape, or click the {button} button to close the feature editor**"
choose_category_building: "**Choose {category} from the list**"
choose_preset_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the {preset} building type**"
close: "**Hit escape or click the {button} button to close the feature editor**"
rightclick_building: "**Right-click to select the building you created and show the edit menu.**"
square_building: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**"
retry_square: "You didn't click the Square button. Try again."
@@ -977,14 +978,14 @@ en:
add_tank: "Next we'll trace this circular storage tank. **Click the {button} Area button to add a new area.**"
start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**"
continue_tank: "Add a few more points around the edge. The circle will be created outside the points that you draw. Finish the area by clicking on the starting node. **Continue tracing the tank.**"
search_tank: "**Search for '{name}'**"
choose_tank: "**Choose {name} from the list.**"
search_tank: "**Search for '{preset}'**"
choose_tank: "**Choose {preset} from the list.**"
rightclick_tank: "**Right-click to select the storage tank you created and show the edit menu.**"
circle_tank: "**Click on the {button} button to make the tank a circle.**"
retry_circle: "You didn't click the Circularize button. Try again."
play: "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**"
play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, click '{next}'.**"
startediting:
title: "Start Editing"
help: "You can replay this walkthrough or view more documentation by clicking the {button} Help button."
help: "You're now ready to edit OpenStreetMap! You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button."
save: "Don't forget to regularly save your changes!"
start: "Start mapping!"

45
dist/locales/en.json vendored
View File

@@ -761,26 +761,26 @@
"drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**",
"select": "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**",
"selected": "Great! The point is now selected. Selected items are drawn with a pulsing glow.",
"pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by pressing the {button} button in the top right.**",
"pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**",
"search": "You can also search for features in the current view, or worldwide. **Search for '{name}'**",
"choose": "**Choose {name} from the list to select it.**",
"chosen": "Great! {name} is now selected. See how the fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by pressing the {button} button.**",
"chosen": "Great! {name} is now selected. See how the fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by hitting escape or pressing the {button} button.**",
"play": "Try moving the map and clicking on some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
},
"points": {
"title": "Points",
"add_point": "Points can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**",
"place_point": "The point can be placed by clicking on the map or pressing the spacebar. **Click the map or press spacebar to place the new point on top of the building.**",
"search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{name}'**",
"choose_cafe": "**Choose {name} from the list.**",
"search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'**",
"choose_cafe": "**Choose {preset} from the list.**",
"feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
"add_name": "In OpenStreetMap, all of the fields are optional, and it's ok to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**",
"add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, return, or click the {button} button to close the feature editor**",
"reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**",
"update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details**",
"update_close": "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**",
"rightclick": "You can right-click on features to see the edit menu, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**",
"delete": "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**",
"rightclick": "You can right-click on any feature to see the edit menu, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**",
"delete": "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**",
"undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**",
"play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
},
@@ -789,11 +789,11 @@
"add_playground": "Areas are used to show the boundaries of features like lakes, buildings, and residential areas. They can be also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**",
"start_playground": "Areas are drawn by placing nodes along the outer edge of the area. **Click or press spacebar to place a starting node on one of the corners of the playground.**",
"continue_playground": "Continue drawing the area by placing more nodes around the playground. Finish the area by clicking on the starting node. **Draw an area for the playground.**",
"search_playground": "**Search for '{name}'.**",
"choose_playground": "**Choose {name} from the list.**",
"search_playground": "**Search for '{preset}'.**",
"choose_playground": "**Choose {preset} from the list.**",
"add_field": "This playground doesn't have an official name, so we won't add anything in the Name field. Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**",
"choose_field": "**Choose {name} from the list.**",
"retry_add_field": "You didn't select the {name} field. Let's try again.",
"choose_field": "**Choose {field} from the list.**",
"retry_add_field": "You didn't select the {field} field. Let's try again.",
"describe_playground": "**Add a description, then click the {button} button to close the feature editor.**",
"play": "Good job! Try drawing a few more areas. Explore the presets and see what other kinds of areas you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
},
@@ -804,17 +804,18 @@
"intersect": "Click or press spacebar to add more nodes to the line. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**",
"retry_intersect": "The road needs to intersect {name}. Let's try again!",
"continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed. When you are finished drawing, click on the last node again. **Finish drawing the road.**",
"choose_category_road": "**Select {name} from the list**",
"choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {name} type**",
"retry_preset_residential": "You didn't select the {name} type. **Click here to choose again**",
"choose_category_road": "**Select {category} from the list**",
"choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type**",
"retry_preset_residential": "You didn't select the {preset} type. **Click here to choose again**",
"name_road": "**Give this road a name, then hit escape, return, or click the {button} button to close the feature editor.**",
"did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
"update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
"add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",
"start_drag_endpoint": "When a line is selected, you can drag any of its nodes by clicking and holding down the left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**",
"finish_drag_endpoint": "This spot looks good. **Finish dragging by releasing the left mouse button**",
"finish_drag_endpoint": "This spot looks good. **Release the left mouse button to finish dragging.**",
"start_drag_midpoint": "Small triangles are drawn at the midpoints between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**",
"continue_drag_midpoint": "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**",
"delete_lines": "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this map by deleting the extra lines.",
"delete_lines": "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
"rightclick_intersection": "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**",
"split_intersection": "**Click on the {button} button to split {street}.**",
"retry_split": "You didn't click the Split button. Try again.",
@@ -831,9 +832,9 @@
"add_building": "OpenStreetMap is the world's largest database of buildings. You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**",
"start_building": "Let's add this house to the map by tracing its outline. Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**",
"continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building shape by clicking on the starting node. **Continue tracing the building.**",
"choose_category_building": "**Choose {name} from the list**",
"choose_preset_house": "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the {name} building type**",
"close": "**Hit escape, or click the {button} button to close the feature editor**",
"choose_category_building": "**Choose {category} from the list**",
"choose_preset_house": "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the {preset} building type**",
"close": "**Hit escape or click the {button} button to close the feature editor**",
"rightclick_building": "**Right-click to select the building you created and show the edit menu.**",
"square_building": "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**",
"retry_square": "You didn't click the Square button. Try again.",
@@ -841,16 +842,16 @@
"add_tank": "Next we'll trace this circular storage tank. **Click the {button} Area button to add a new area.**",
"start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**",
"continue_tank": "Add a few more points around the edge. The circle will be created outside the points that you draw. Finish the area by clicking on the starting node. **Continue tracing the tank.**",
"search_tank": "**Search for '{name}'**",
"choose_tank": "**Choose {name} from the list.**",
"search_tank": "**Search for '{preset}'**",
"choose_tank": "**Choose {preset} from the list.**",
"rightclick_tank": "**Right-click to select the storage tank you created and show the edit menu.**",
"circle_tank": "**Click on the {button} button to make the tank a circle.**",
"retry_circle": "You didn't click the Circularize button. Try again.",
"play": "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**"
"play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, click '{next}'.**"
},
"startediting": {
"title": "Start Editing",
"help": "You can replay this walkthrough or view more documentation by clicking the {button} Help button.",
"help": "You're now ready to edit OpenStreetMap! You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button.",
"save": "Don't forget to regularly save your changes!",
"start": "Start mapping!"
}

58
modules/ui/intro/area.js
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();
};

120
modules/ui/intro/building.js
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();
};

15
modules/ui/intro/helper.js
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;
}

112
modules/ui/intro/line.js
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();
};

55
modules/ui/intro/navigation.js
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();
};

63
modules/ui/intro/point.js
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();
};

93
modules/ui/intro/start_editing.js
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();
};