Mention keyboard shortcuts in intro, localize Alt key

data/core.yaml

@@ -957,7 +957,7 @@ en:
       title: "Areas"
       add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}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: "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 spacebar 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.**"
+      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 enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
@@ -1019,7 +1019,8 @@ en:
       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're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button."
+      help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key."
+      shortcuts: "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:

dist/locales/en.json

@@ -819,7 +819,7 @@
                 "title": "Areas",
                 "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}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": "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 spacebar 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.**",
+                "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 enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
@@ -884,7 +884,8 @@
             },
             "startediting": {
                 "title": "Start Editing",
-                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button.",
+                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key.",
+                "shortcuts": "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key.",
                 "save": "Don't forget to regularly save your changes!",
                 "start": "Start mapping!"
             }

modules/ui/intro/area.js

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import { t } from '../../util/locale';
 import { modeBrowse, modeSelect } from '../../modes';
 import { utilRebind } from '../../util/rebind';
+import { uiCmd } from '../cmd';
 import { icon, pad, transitionTime } from './helper';
 
 
@@ -111,13 +112,15 @@ export function uiIntroArea(context, reveal) {
 
         areaId = null;
         revealPlayground(playground,
-            t('intro.areas.continue_playground'), { duration: 250 }
+            t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+            { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    t('intro.areas.continue_playground'), { duration: 0 }
+                    t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+                    { duration: 0 }
                 );
             });
         }, 250);  // after reveal

modules/ui/intro/start_editing.js

@@ -14,10 +14,18 @@ export function uiIntroStartEditing(context, reveal) {
         title: 'intro.startediting.title'
     };
 
-
     function showHelp() {
         reveal('.map-control.help-control',
-            t('intro.startediting.help', { button: icon('#icon-help', 'pre-text') }), {
+            t('intro.startediting.help', { button: icon('#icon-help', 'pre-text'), key: t('help.key') }), {
+                buttonText: t('intro.ok'),
+                buttonCallback: function() { shortcuts(); }
+            }
+        );
+    }
+
+    function shortcuts() {
+        reveal('.map-control.help-control',
+            t('intro.startediting.shortcuts', { key: t('shortcuts.toggle.key') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { showSave(); }
             }
@@ -25,6 +33,7 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showSave() {
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
         reveal('#bar button.save',
             t('intro.startediting.save'), {
                 buttonText: t('intro.ok'),
@@ -34,6 +43,8 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showStart() {
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
+
         modalSelection = uiModal(context.container());
 
         modalSelection.select('.modal')
@@ -70,6 +81,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     chapter.exit = function() {
         modalSelection.remove();
+        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
     };