diff --git a/data/core.yaml b/data/core.yaml index de203c006..9956df22b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -896,14 +896,14 @@ en: world-fare: World Fare welcome: title: "Welcome" - welcome: "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap." - practice: "All of the data in this walkthrough is just for practice, and any edits that you make in the walkthrough will not be saved." - chapters: "You can use the buttons below to skip chapters at any time, or restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**" + welcome: "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap." + practice: "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved." + chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**" navigation: title: "Navigation" 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." + 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.**" 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.**" @@ -911,51 +911,51 @@ en: 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: "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: "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: "There are many different features that can be represented by points. The point you just added is a Cafe. **Search for '{name}'**" - choose: "**Choose Cafe from the list.**" + 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.**" 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**" - 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**" + 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**" - close2: "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**" + 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 list of operations that can be performed on them. **Right-click to select the point you created.**" 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.**" - undo: "You can undo any changes that you make in the editor, up until you save your edits 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}'.**" + 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: title: "Areas" - add: "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.**" - corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Click or press spacebar to place a starting node on one of the corners of the playground.**" - place: "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**" - search: "**Search for '{name}'.**" - choose: "**Choose Playground 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 Description from the list.**" - retry_add_field: "You didn't select the Description field. Let's try again." - describe: "**Add a description, then click the {button} button to close the feature editor.**" + 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.**" + 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." + 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: title: "Lines" - add: "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**" - start: "Here is a road that is missing. Let's add it! In OpenStreetMap, lines should be drawn down the center of the road. You can drag the map while drawing if necessary. **Start a new line by clicking on the end of the road.**" + add_line: "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**" + start_line: "Here is a road that is missing. Let's add it! In OpenStreetMap, lines should be drawn down the center of the road. You can drag the map while drawing if necessary. **Start a new line by clicking on the end of the road.**" 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.**" - finish: "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.**" - road: "**Select Road from the list**" - residential: "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**" - describe: "**Name the road, then hit escape, return, or click the {button} button to close the feature editor.**" - restart: "The road needs to intersect {name}. Let's try again!" - wrong_preset: "You didn't select the Residential road type. **Click here to choose again**" + 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**" + name_road: "**Give this road a name, then hit escape, return, or click the {button} button to close the feature editor.**" play: "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**" buildings: title: "Buildings" 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_building: "**Select Building from the list**" - choose_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 House building type**" + 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**" rightclick_building: "**Right-click to select the building you created.**" 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.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index f01c5334a..96c443ce9 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -755,15 +755,15 @@ }, "welcome": { "title": "Welcome", - "welcome": "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap.", - "practice": "All of the data in this walkthrough is just for practice, and any edits that you make in the walkthrough will not be saved.", - "chapters": "You can use the buttons below to skip chapters at any time, or restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**" + "welcome": "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap.", + "practice": "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved.", + "chapters": "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**" }, "navigation": { "title": "Navigation", "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.", + "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.**", "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.**", @@ -772,45 +772,45 @@ }, "points": { "title": "Points", - "add": "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": "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": "There are many different features that can be represented by points. The point you just added is a Cafe. **Search for '{name}'**", - "choose": "**Choose Cafe from the list.**", + "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.**", "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**", - "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**", + "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**", - "close2": "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**", + "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 list of operations that can be performed on them. **Right-click to select the point you created.**", "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.**", - "undo": "You can undo any changes that you make in the editor, up until you save your edits 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}'.**" + "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": { "title": "Areas", - "add": "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.**", - "corner": "Areas are drawn by placing nodes that mark the boundary of the area. **Click or press spacebar to place a starting node on one of the corners of the playground.**", - "place": "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**", - "search": "**Search for '{name}'.**", - "choose": "**Choose Playground 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 Description from the list.**", - "retry_add_field": "You didn't select the Description field. Let's try again.", - "describe": "**Add a description, then click the {button} button to close the feature editor.**", + "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.**", + "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.", + "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": { "title": "Lines", - "add": "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**", - "start": "Here is a road that is missing. Let's add it! In OpenStreetMap, lines should be drawn down the center of the road. You can drag the map while drawing if necessary. **Start a new line by clicking on the end of the road.**", + "add_line": "Lines are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**", + "start_line": "Here is a road that is missing. Let's add it! In OpenStreetMap, lines should be drawn down the center of the road. You can drag the map while drawing if necessary. **Start a new line by clicking on the end of the road.**", "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.**", - "finish": "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.**", - "road": "**Select Road from the list**", - "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**", - "describe": "**Name the road, then hit escape, return, or click the {button} button to close the feature editor.**", - "restart": "The road needs to intersect {name}. Let's try again!", - "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**", + "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**", + "name_road": "**Give this road a name, then hit escape, return, or click the {button} button to close the feature editor.**", "play": "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**" }, "buildings": { @@ -818,8 +818,8 @@ "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_building": "**Select Building from the list**", - "choose_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 House building type**", + "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**", "rightclick_building": "**Right-click to select the building you created.**", "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.**", diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js index ec16cc609..89b74de50 100644 --- a/modules/ui/curtain.js +++ b/modules/ui/curtain.js @@ -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), diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 66ecb1539..86ff4477a 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -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(); } } diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index 374f775ee..55aaa0f6f 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -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') diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 8578a3856..bf856d70b 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -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); diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 88468e74a..9f5133f91 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -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); diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 2e1dbce09..7f6677942 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -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);