From 3892600814658ca59b1ed67106db8273efb6cf92 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 10 Jul 2020 15:24:01 -0400 Subject: [PATCH] Reduce redundant strings in the walkthrough Update the lines walkthrough chapter for touchscreens Add toggled dispatch event to the edit menu --- data/core.yaml | 67 +++++++++++++++++++++----------- dist/locales/en.json | 67 +++++++++++++++++++++----------- modules/ui/edit_menu.js | 10 ++++- modules/ui/init.js | 9 +++-- modules/ui/intro/area.js | 14 ++++--- modules/ui/intro/line.js | 70 ++++++++++++++++++++++++---------- modules/ui/intro/navigation.js | 26 ++++++------- modules/ui/intro/point.js | 8 ++-- 8 files changed, 177 insertions(+), 94 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 962a05932..ae2d7432b 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1931,8 +1931,9 @@ en: 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! **Press '{next}' to continue.**" navigation: title: "Navigation" - drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" - drag_touch: "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" + map_info: "The main map area shows OpenStreetMap data on top of a background." + drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" + drag_touch: "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**" zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**" zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**" features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap." @@ -1948,17 +1949,20 @@ en: search_street: "You can also search for features in the current view, or worldwide. **Search for '{name}'.**" choose_street: "**Choose {name} from the list to select it.**" selected_street: "Great! {name} is now selected." - editor_street: "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**" + street_different_fields: "The fields shown for a street are different than the fields that were shown for the town hall." + editor_street: "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**" play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**" points: title: "Points" - add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**" + points_info: "*Points* can be used to represent features such as shops, restaurants, and monuments." + add_point: "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**" place_point: "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**" place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**" 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.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**" + fields_info: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure." + add_name: "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, press `{esc}`, `{return}`, or 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. **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.**" @@ -1971,11 +1975,13 @@ en: areas: title: "Areas" add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**" - start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**" - start_playground_touch: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**" + start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature." + starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**" + starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**" continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**" - finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**" - finish_playground_touch: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**" + finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node." + finish_playground_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard." + finish_drawing: "**Finish drawing an area for the playground.**" 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.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**" @@ -1985,30 +1991,47 @@ en: play: "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**" lines: title: "Lines" - add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**" - start_line: "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**" - intersect: "Click or press `{space}` to add more nodes to the line.{br}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.**" + add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Press the {line_icon} {line} button to add a new line.**" + missing_road: "Here is a road that is missing. Let's add it!" + line_draw_info: "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary." + start_line: "**Start a new line by clicking at the top end of this missing road.**" + start_line_tap: "**Start a new line by tapping at the top end of this missing road.**" + intersect: "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect 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.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**" + continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed." + finish_line_click: "When you're finished, click the last node again or press `{return}`." + finish_line_tap: "When you're finished, tap the last node again or press `{return}` on a keyboard." + finish_road: "**Finish drawing the road.**" 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.**" + retry_preset_residential: "You didn't select the {preset} type. **Press this button to choose again.**" name_road: "**Give this road a name, then press `{esc}`, `{return}`, or 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 {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**" - finish_drag_endpoint: "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**" + add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**" + start_drag_endpoint: "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag." + start_drag_endpoint_touch: "When a line is selected, you can tap-and-drag any of its nodes to adjust them." + drag_to_intersection: "**Drag the endpoint to the place where these roads should intersect.**" + spot_looks_good: "This spot looks good." + finish_drag_endpoint: "**Release the mouse button to finish dragging.**" + finish_drag_endpoint_touch: "**Let go of the node 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}.**" + continue_drag_midpoint: "This line is looking much better! Continue to adjust this line until the curve matches the road shape. **When you're happy with how the line looks, press {ok}.**" delete_lines: "It's OK to delete lines for roads that don't exist in the real world.{br}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. **{rightclick} Right-click on the intersection node.**" + split_street: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it." + rightclick_intersection: "**{rightclick} Right-click on the intersection node.**" + edit_menu_intersection_touch: "**Long-press on the intersection node.**" split_intersection: "**Press the {split_icon} {split} button to divide {street}.**" retry_split: "You didn't press the {split_icon} {split} button. Try again." - did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**" - did_split_single: "**Click the top part of {street2} to select it.**" - multi_select: "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**" - multi_rightclick: "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**" + did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**" + did_split_single: "**Select the top part of {street2}.**" + multi_select: "{selected} is now selected. Let's also select {other1}." + add_to_selection_click: "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**" + add_to_selection_touch: "**Tap-and-hold {selected} and then tap {other2} to select both.**" + multi_select_success: "Good! Both lines to delete are now selected." + multi_rightclick: "**{rightclick} Right-click on one of the lines to show the edit menu.**" + multi_edit_menu_touch: "**Long-press on one of the lines to show the edit menu.**" multi_delete: "**Press the {delete_icon} {delete} button to remove the extra lines.**" retry_delete: "You didn't press the {delete_icon} {delete} button. Try again." play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index 020fa655f..a0ad89adf 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -2406,8 +2406,9 @@ }, "navigation": { "title": "Navigation", - "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", - "drag_touch": "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", + "map_info": "The main map area shows OpenStreetMap data on top of a background.", + "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", + "drag_touch": "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**", "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**", "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**", "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.", @@ -2423,18 +2424,21 @@ "search_street": "You can also search for features in the current view, or worldwide. **Search for '{name}'.**", "choose_street": "**Choose {name} from the list to select it.**", "selected_street": "Great! {name} is now selected.", - "editor_street": "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**", + "street_different_fields": "The fields shown for a street are different than the fields that were shown for the town hall.", + "editor_street": "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**", "play": "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**" }, "points": { "title": "Points", - "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**", + "points_info": "*Points* can be used to represent features such as shops, restaurants, and monuments.", + "add_point": "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**", "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**", "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**", "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.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**", + "fields_info": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.", + "add_name": "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, press `{esc}`, `{return}`, or 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. **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.**", @@ -2448,11 +2452,13 @@ "areas": { "title": "Areas", "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**", - "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**", - "start_playground_touch": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**", + "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature.", + "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**", + "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**", "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**", - "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**", - "finish_playground_touch": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**", + "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.", + "finish_playground_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.", + "finish_drawing": "**Finish drawing an area for the playground.**", "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.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**", @@ -2463,30 +2469,47 @@ }, "lines": { "title": "Lines", - "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**", - "start_line": "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**", - "intersect": "Click or press `{space}` to add more nodes to the line.{br}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.**", + "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Press the {line_icon} {line} button to add a new line.**", + "missing_road": "Here is a road that is missing. Let's add it!", + "line_draw_info": "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary.", + "start_line": "**Start a new line by clicking at the top end of this missing road.**", + "start_line_tap": "**Start a new line by tapping at the top end of this missing road.**", + "intersect": "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect 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.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**", + "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.", + "finish_line_click": "When you're finished, click the last node again or press `{return}`.", + "finish_line_tap": "When you're finished, tap the last node again or press `{return}` on a keyboard.", + "finish_road": "**Finish drawing the road.**", "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.**", + "retry_preset_residential": "You didn't select the {preset} type. **Press this button to choose again.**", "name_road": "**Give this road a name, then press `{esc}`, `{return}`, or 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 {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**", - "finish_drag_endpoint": "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**", + "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**", + "start_drag_endpoint": "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag.", + "start_drag_endpoint_touch": "When a line is selected, you can tap-and-drag any of its nodes to adjust them.", + "drag_to_intersection": "**Drag the endpoint to the place where these roads should intersect.**", + "spot_looks_good": "This spot looks good.", + "finish_drag_endpoint": "**Release the mouse button to finish dragging.**", + "finish_drag_endpoint_touch": "**Let go of the node 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}.**", + "continue_drag_midpoint": "This line is looking much better! Continue to adjust this line until the curve matches the road shape. **When you're happy with how the line looks, press {ok}.**", "delete_lines": "It's OK to delete lines for roads that don't exist in the real world.{br}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. **{rightclick} Right-click on the intersection node.**", + "split_street": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it.", + "rightclick_intersection": "**{rightclick} Right-click on the intersection node.**", + "edit_menu_intersection_touch": "**Long-press on the intersection node.**", "split_intersection": "**Press the {split_icon} {split} button to divide {street}.**", "retry_split": "You didn't press the {split_icon} {split} button. Try again.", - "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**", - "did_split_single": "**Click the top part of {street2} to select it.**", - "multi_select": "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**", - "multi_rightclick": "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**", + "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**", + "did_split_single": "**Select the top part of {street2}.**", + "multi_select": "{selected} is now selected. Let's also select {other1}.", + "add_to_selection_click": "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**", + "add_to_selection_touch": "**Tap-and-hold {selected} and then tap {other2} to select both.**", + "multi_select_success": "Good! Both lines to delete are now selected.", + "multi_rightclick": "**{rightclick} Right-click on one of the lines to show the edit menu.**", + "multi_edit_menu_touch": "**Long-press on one of the lines to show the edit menu.**", "multi_delete": "**Press the {delete_icon} {delete} button to remove the extra lines.**", "retry_delete": "You didn't press the {delete_icon} {delete} button. Try again.", "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**" diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js index 55242ced6..b149ba7c5 100644 --- a/modules/ui/edit_menu.js +++ b/modules/ui/edit_menu.js @@ -1,12 +1,16 @@ import { event as d3_event, select as d3_select } from 'd3-selection'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; import { geoVecAdd } from '../geo'; import { localizer } from '../core/localizer'; import { uiTooltip } from './tooltip'; +import { utilRebind } from '../util/rebind'; import { svgIcon } from '../svg/icon'; export function uiEditMenu(context) { + var dispatch = d3_dispatch('toggled'); + var _menu = d3_select(null); var _operations = []; // the position the menu should be displayed relative to @@ -161,6 +165,8 @@ export function uiEditMenu(context) { } lastPointerUpType = null; } + + dispatch.call('toggled', this, true); }; function updatePosition() { @@ -269,6 +275,8 @@ export function uiEditMenu(context) { _menu.remove(); _tooltips = []; + + dispatch.call('toggled', this, false); }; editMenu.anchorLoc = function(val) { @@ -290,5 +298,5 @@ export function uiEditMenu(context) { return editMenu; }; - return editMenu; + return utilRebind(editMenu, dispatch, 'on'); } diff --git a/modules/ui/init.js b/modules/ui/init.js index 2c01c273d..f2a8980c6 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -595,7 +595,11 @@ export function uiInit(context) { }; - var _editMenu; // uiEditMenu + var _editMenu = uiEditMenu(context); + + ui.editMenu = function() { + return _editMenu; + }; ui.showEditMenu = function(anchorPoint, triggerType, operations) { @@ -614,9 +618,6 @@ export function uiInit(context) { surfaceNode.focus(); } - // don't load the menu until it's needed - if (!_editMenu) _editMenu = uiEditMenu(context); - operations.forEach(function(operation) { if (operation.point) operation.point(anchorPoint); }); diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 27fa81204..0812d3931 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -90,15 +90,16 @@ export function uiIntroArea(context, reveal) { context.map().zoomEase(19.5, 500); timeout(function() { - var textId = context.lastPointerType() === 'mouse' ? 'start_playground' : 'start_playground_touch'; + var textId = context.lastPointerType() === 'mouse' ? 'starting_node_click' : 'starting_node_tap'; + var startDrawString = helpString('intro.areas.start_playground') + helpString('intro.areas.' + textId); revealPlayground(playground, - helpString('intro.areas.' + textId), { duration: 250 } + startDrawString, { duration: 250 } ); timeout(function() { context.map().on('move.intro drawn.intro', function() { revealPlayground(playground, - helpString('intro.areas.' + textId), { duration: 0 } + startDrawString, { duration: 0 } ); }); context.on('enter.intro', function(mode) { @@ -167,15 +168,16 @@ export function uiIntroArea(context, reveal) { } _areaID = null; - var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_touch'; + var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_tap'; + var finishString = helpString('intro.areas.' + textId) + helpString('intro.areas.finish_drawing'); revealPlayground(playground, - helpString('intro.areas.' + textId), { duration: 250 } + finishString, { duration: 250 } ); timeout(function() { context.map().on('move.intro drawn.intro', function() { revealPlayground(playground, - helpString('intro.areas.' + textId), { duration: 0 } + finishString, { duration: 0 } ); }); }, 250); // after reveal diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index a7a522cb9..821118ccc 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -95,13 +95,18 @@ export function uiIntroLine(context, reveal) { var padding = 70 * Math.pow(2, context.map().zoom() - 18); var box = pad(tulipRoadStart, padding, context); box.height = box.height + 100; - reveal(box, helpString('intro.lines.start_line')); + + var textId = context.lastPointerType() === 'mouse' ? 'start_line' : 'start_line_tap'; + var startLineString = helpString('intro.lines.missing_road') + '{br}' + + helpString('intro.lines.line_draw_info') + + helpString('intro.lines.' + textId); + reveal(box, startLineString); context.map().on('move.intro drawn.intro', function() { padding = 70 * Math.pow(2, context.map().zoom() - 18); box = pad(tulipRoadStart, padding, context); box.height = box.height + 100; - reveal(box, helpString('intro.lines.start_line'), { duration: 0 }); + reveal(box, startLineString, { duration: 0 }); }); context.on('enter.intro', function(mode) { @@ -200,7 +205,11 @@ export function uiIntroLine(context, reveal) { context.map().centerEase(tulipRoadIntersection, 500); - reveal('.surface', helpString('intro.lines.continue_line')); + var continueLineText = helpString('intro.lines.continue_line') + '{br}' + + helpString('intro.lines.finish_line_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + + helpString('intro.lines.finish_road'); + + reveal('.surface', continueLineText); context.on('enter.intro', function(mode) { if (mode.id === 'draw-line') @@ -400,12 +409,13 @@ export function uiIntroLine(context, reveal) { var padding = 40 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadAddNode, padding, context); - reveal(box, helpString('intro.lines.add_node')); + var addNodeString = helpString('intro.lines.add_node' + (context.lastPointerType() === 'mouse' ? '' : '_touch')); + reveal(box, addNodeString); context.map().on('move.intro drawn.intro', function() { var padding = 40 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadAddNode, padding, context); - reveal(box, helpString('intro.lines.add_node'), { duration: 0 }); + reveal(box, addNodeString, { duration: 0 }); }); context.history().on('change.intro', function(changed) { @@ -438,7 +448,9 @@ export function uiIntroLine(context, reveal) { } var padding = 100 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, helpString('intro.lines.start_drag_endpoint')); + var startDragString = helpString('intro.lines.start_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')) + + helpString('intro.lines.drag_to_intersection'); + reveal(box, startDragString); context.map().on('move.intro drawn.intro', function() { if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { @@ -446,7 +458,7 @@ export function uiIntroLine(context, reveal) { } var padding = 100 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, helpString('intro.lines.start_drag_endpoint'), { duration: 0 }); + reveal(box, startDragString, { duration: 0 }); var entity = context.entity(woodRoadEndID); if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) { @@ -468,7 +480,9 @@ export function uiIntroLine(context, reveal) { var padding = 100 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, helpString('intro.lines.finish_drag_endpoint')); + var finishDragString = helpString('intro.lines.spot_looks_good') + + helpString('intro.lines.finish_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')); + reveal(box, finishDragString); context.map().on('move.intro drawn.intro', function() { if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) { @@ -476,7 +490,7 @@ export function uiIntroLine(context, reveal) { } var padding = 100 * Math.pow(2, context.map().zoom() - 19); var box = pad(woodRoadDragEndpoint, padding, context); - reveal(box, helpString('intro.lines.finish_drag_endpoint'), { duration: 0 }); + reveal(box, finishDragString, { duration: 0 }); var entity = context.entity(woodRoadEndID); if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) { @@ -633,18 +647,21 @@ export function uiIntroLine(context, reveal) { context.map().centerZoomEase(eleventhAvenueEnd, 18, 500); + var rightClickString = helpString('intro.lines.split_street', { + street1: t('intro.graph.name.11th-avenue'), + street2: t('intro.graph.name.washington-street') + }) + + helpString('intro.lines.' + (context.lastPointerType() === 'mouse' ? 'rightclick_intersection' : 'edit_menu_intersection_touch')); + timeout(function() { var padding = 60 * Math.pow(2, context.map().zoom() - 18); var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, helpString('intro.lines.rightclick_intersection', - { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') }) - ); + reveal(box, rightClickString); context.map().on('move.intro drawn.intro', function() { var padding = 60 * Math.pow(2, context.map().zoom() - 18); var box = pad(eleventhAvenueEnd, padding, context); - reveal(box, helpString('intro.lines.rightclick_intersection', - { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') }), + reveal(box, rightClickString, { duration: 0 } ); }); @@ -850,7 +867,10 @@ export function uiIntroLine(context, reveal) { } reveal(box, - helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other }) + helpString('intro.lines.multi_select', + { selected: selected, other1: other }) + ' ' + + helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'), + { selected: selected, other2: other }) ); context.map().on('move.intro drawn.intro', function() { @@ -869,7 +889,10 @@ export function uiIntroLine(context, reveal) { } reveal(box, - helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other }), + helpString('intro.lines.multi_select', + { selected: selected, other1: other }) + ' ' + + helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'), + { selected: selected, other2: other }), { duration: 0 } ); }); @@ -909,15 +932,20 @@ export function uiIntroLine(context, reveal) { var padding = 200 * Math.pow(2, context.map().zoom() - 18); var box = pad(twelfthAvenue, padding, context); - reveal(box, helpString('intro.lines.multi_rightclick')); + + var rightClickString = helpString('intro.lines.multi_select_success') + + helpString('intro.lines.multi_' + (context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch')); + reveal(box, rightClickString); context.map().on('move.intro drawn.intro', function() { var padding = 200 * Math.pow(2, context.map().zoom() - 18); var box = pad(twelfthAvenue, padding, context); - reveal(box, helpString('intro.lines.multi_rightclick'), { duration: 0 }); + reveal(box, rightClickString, { duration: 0 }); }); - d3_select(window).on('click.intro contextmenu.intro', function() { + context.ui().editMenu().on('toggled.intro', function(open) { + if (!open) return; + timeout(function() { var ids = context.selectedIDs(); if (ids.length === 2 && @@ -933,7 +961,7 @@ export function uiIntroLine(context, reveal) { return continueTo(didSplit); } }, 300); // after edit menu visible - }, true); + }); context.history().on('change.intro', function() { if (!_washingtonSegmentID || @@ -947,7 +975,7 @@ export function uiIntroLine(context, reveal) { function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); - d3_select(window).on('click.intro contextmenu.intro', null, true); + context.ui().editMenu().on('toggled.intro', null); context.history().on('change.intro', null); nextStep(); } diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index e0dbb807b..87ee5828e 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -59,10 +59,10 @@ export function uiIntroNavigation(context, reveal) { var centerStart = context.map().center(); var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch'; - - reveal('.surface', helpString('intro.navigation.' + textId)); + var dragString = helpString('intro.navigation.map_info') + '{br}' + helpString('intro.navigation.' + textId); + reveal('.surface', dragString); context.map().on('drawn.intro', function() { - reveal('.surface', helpString('intro.navigation.' + textId), { duration: 0 }); + reveal('.surface', dragString, { duration: 0 }); }); context.map().on('move.intro', function() { @@ -86,15 +86,12 @@ export function uiIntroNavigation(context, reveal) { var zoomStart = context.map().zoom(); var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch'; + var zoomString = helpString('intro.navigation.' + textId); - reveal('.surface', - helpString('intro.navigation.' + textId) - ); + reveal('.surface', zoomString); context.map().on('drawn.intro', function() { - reveal('.surface', - helpString('intro.navigation.' + textId), { duration: 0 } - ); + reveal('.surface', zoomString, { duration: 0 }); }); context.map().on('move.intro', function() { @@ -494,13 +491,12 @@ export function uiIntroNavigation(context, reveal) { var selector = '.entity-editor-pane button.close svg use'; var href = d3_select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', + reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' + helpString('intro.navigation.editor_street', { button: icon(href, 'pre-text'), field1: onewayField.label(), field2: maxspeedField.label() - }) - ); + })); context.on('exit.intro', function() { continueTo(play); @@ -511,11 +507,11 @@ export function uiIntroNavigation(context, reveal) { var selector = '.entity-editor-pane button.close svg use'; var href = d3_select(selector).attr('href') || '#iD-icon-close'; - reveal('.entity-editor-pane', + reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' + helpString('intro.navigation.editor_street', { button: icon(href, 'pre-text'), - field1: onewayField.label().toLowerCase(), - field2: maxspeedField.label().toLowerCase() + field1: onewayField.label(), + field2: maxspeedField.label() }), { duration: 0 } ); }); diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index e69e9aab0..d0655777d 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -48,7 +48,7 @@ export function uiIntroPoint(context, reveal) { timeout(function() { var tooltip = reveal('button.add-point', - helpString('intro.points.add_point')); + helpString('intro.points.points_info') + '{br}' + helpString('intro.points.add_point')); _pointID = null; @@ -203,13 +203,15 @@ export function uiIntroPoint(context, reveal) { // reset pane, in case user happened to change it.. context.container().select('.inspector-wrap .panewrap').style('right', '0%'); + var addNameString = helpString('intro.points.fields_info') + '{br}' + helpString('intro.points.add_name'); + timeout(function() { // It's possible for the user to add a name in a previous step.. // If so, don't tell them to add the name in this step. // Give them an OK button instead. var entity = context.entity(_pointID); if (entity.tags.name) { - var tooltip = reveal('.entity-editor-pane', helpString('intro.points.add_name'), { + var tooltip = reveal('.entity-editor-pane', addNameString, { tooltipClass: 'intro-points-describe', buttonText: t('intro.ok'), buttonCallback: function() { continueTo(addCloseEditor); } @@ -217,7 +219,7 @@ export function uiIntroPoint(context, reveal) { tooltip.select('.instruction').style('display', 'none'); } else { - reveal('.entity-editor-pane', helpString('intro.points.add_name'), + reveal('.entity-editor-pane', addNameString, { tooltipClass: 'intro-points-describe' } ); }