Add more keyboard shortcuts and fix various shortcut related issues

index.html

@@ -29,7 +29,7 @@
             >
             <div class="collapse navbar-collapse" id="collapsingNavbar">
                 <div class="navbar-nav">
-                    <form class="form-inline">
+                    <form class="form-inline" id="profile-alternative-form">
                         <div class="form-group">
                             <select class="selectpicker show-tick" data-width="250px" id="profile-alternative" multiple>
                                 <optgroup label="Profile" data-max-options="1" data-icon="fa-bicycle" id="profile">
@@ -61,6 +61,8 @@
                             role="button"
                             aria-haspopup="true"
                             aria-expanded="false"
+                            data-i18n="[title]navbar.export-tooltip"
+                            title="Export route"
                         >
                             <span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span>
                             <span data-i18n="navbar.export">Export</span>
@@ -76,6 +78,8 @@
                             id="navbarLoadDropdown"
                             aria-haspopup="true"
                             aria-expanded="false"
+                            data-i18n="[title]navbar.load.tooltip"
+                            title="Load route"
                         >
                             <span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span>
                             <span data-i18n="navbar.load.title">Load</span>
@@ -96,7 +100,11 @@
                             >
                         </div>
                     </div>
-                    <div class="nav-item">
+                    <div
+                        class="nav-item"
+                        data-i18n="[title]about.tooltip"
+                        title="Show more information about BRouter-Web"
+                    >
                         <a class="nav-link" href="#" data-toggle="modal" data-target="#about"
                             ><span class="fa fa-lg fa-info-circle" aria-hidden="true"></span
                             ><span data-i18n="navbar.about">About</span></a
@@ -535,7 +543,12 @@ <h4 class="modal-title" data-i18n="export.title">
             <div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
                 <ul role="tablist">
                     <li>
-                        <a href="#tab_layers_control" role="tab" data-i18n="[title]sidebar.layers.title" title="Layers">
+                        <a
+                            href="#tab_layers_control"
+                            role="tab"
+                            data-i18n="[title]sidebar.layers.tooltip"
+                            title="Select layers"
+                        >
                             <!--
                 https://github.com/feathericons/feather/blob/0dc2bf5c9d01759e47485d9498aefc02cac1d845/icons/layers.svg
                 MIT License: https://github.com/feathericons/feather/blob/master/LICENSE
@@ -559,26 +572,38 @@ <h4 class="modal-title" data-i18n="export.title">
                         </a>
                     </li>
                     <li hidden>
-                        <a href="#tab_itinerary" role="tab" data-i18n="[title]sidebar.itinerary.title" title="Itinerary"
+                        <a
+                            href="#tab_itinerary"
+                            role="tab"
+                            data-i18n="[title]sidebar.itinerary.tooltip"
+                            title="Show Itinerary"
                             ><i class="fa fa-map-signs"></i
                         ></a>
                     </li>
                     <li>
                         <a
                             href="#tab_profile"
                             role="tab"
-                            data-i18n="[title]sidebar.customize-profile.title"
+                            data-i18n="[title]sidebar.customize-profile.tooltip"
                             title="Customize profile"
                             ><i class="fa fa-wrench"></i
                         ></a>
                     </li>
                     <li>
-                        <a href="#tab_data" role="tab" data-i18n="[title]sidebar.data.title" title="Data"
+                        <a
+                            href="#tab_data"
+                            role="tab"
+                            data-i18n="[title]sidebar.data.tooltip"
+                            title="Show detailed route data table"
                             ><i class="fa fa-table"></i
                         ></a>
                     </li>
                     <li>
-                        <a href="#tab_statistics" role="tab" data-i18n="[title]sidebar.analysis.title" title="Analysis"
+                        <a
+                            href="#tab_statistics"
+                            role="tab"
+                            data-i18n="[title]sidebar.analysis.tooltip"
+                            title="Analyse route"
                             ><i class="fa fa-pie-chart"></i
                         ></a>
                     </li>
@@ -885,6 +910,8 @@ <h1 class="leaflet-sidebar-header">
                     id="elevation-btn"
                     aria-expanded="false"
                     aria-label="Toggle elevation chart"
+                    data-i18n="[title]footer.elevation-chart"
+                    title="Toggle elevation chart"
                 >
                     <span class="fa fa-area-chart"></span>
                 </button>

js/Map.js

@@ -2,6 +2,12 @@ BR.Map = {
     initMap: function() {
         var map, layersControl;
 
+        L.setOptions(this, {
+            shortcut: {
+                locate: 76 // char code for 'l'
+            }
+        });
+
         BR.keys = BR.keys || {};
 
         var maxZoom = 19;
@@ -96,7 +102,7 @@ BR.Map = {
 
         var secureContext = 'isSecureContext' in window ? isSecureContext : location.protocol === 'https:';
         if (secureContext) {
-            L.control
+            var locationControl = L.control
                 .locate({
                     strings: {
                         title: i18next.t('map.locate-me')
@@ -105,6 +111,16 @@ BR.Map = {
                     iconLoading: 'fa fa-spinner fa-pulse'
                 })
                 .addTo(map);
+            L.DomEvent.addListener(
+                document,
+                'keydown',
+                function(e) {
+                    if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.locate) {
+                        locationControl.start();
+                    }
+                },
+                this
+            );
         }
 
         L.control.scale().addTo(map);

js/Util.js

@@ -67,5 +67,35 @@ BR.Util = {
         }
         $el.remove();
         return env;
+    },
+
+    keyboardShortcutsAllowed: function(keyEvent) {
+        // Skip auto-repeating key events
+        if (keyEvent.repeat) {
+            return false;
+        }
+
+        // Suppress shortcut handling when a text or number input field is focussed
+        if (
+            document.activeElement.type == 'number' ||
+            document.activeElement.type == 'text' ||
+            document.activeElement.type == 'textarea'
+        ) {
+            return false;
+        }
+
+        // Only allow shortcuts without modifiers for now, to prevent triggering map functions
+        // when browser shortcuts are triggered (e.g. Ctrl+P for print should not add a POI)
+        if (keyEvent.ctrlKey || keyEvent.metaKey || keyEvent.altKey) {
+            return false;
+        }
+
+        // Do not allow shortcuts triggering actions behind Bootstrap's
+        // modal dialogs or when dropdown menus are opened
+        if ($('.modal.show').length || $('.dropdown.show').length) {
+            return false;
+        }
+
+        return true;
     }
 };

js/control/Export.js

@@ -1,6 +1,12 @@
 BR.Export = L.Class.extend({
     latLngs: [],
 
+    options: {
+        shortcut: {
+            export: 88 // char code for 'x'
+        }
+    },
+
     initialize: function(router, pois) {
         this.router = router;
         this.pois = pois;
@@ -20,6 +26,8 @@ BR.Export = L.Class.extend({
         this.exportButton.on('click', L.bind(this._generateTrackname, this));
         L.DomUtil.get('submitExport').onclick = L.bind(this._export, this);
 
+        L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
+
         this.update([]);
     },
 
@@ -116,6 +124,17 @@ BR.Export = L.Class.extend({
                 }
             })
         );
+    },
+
+    _keydownListener: function(e) {
+        if (
+            BR.Util.keyboardShortcutsAllowed(e) &&
+            e.keyCode === this.options.shortcut.export &&
+            !this.exportButton.hasClass('disabled')
+        ) {
+            this._generateTrackname();
+            $('#export').modal('show');
+        }
     }
 });
 

js/control/OpacitySlider.js

@@ -52,23 +52,13 @@ BR.OpacitySlider = L.Class.extend({
     },
 
     _keydownListener: function(e) {
-        // Suppress shortcut handling when a text input field is focussed
-        if (document.activeElement.type == 'text' || document.activeElement.type == 'textarea') {
-            return;
-        }
-
-        if (e.keyCode === this.options.muteKeyCode && !e.repeat) {
+        if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.muteKeyCode) {
             this.options.callback(0);
         }
     },
 
     _keyupListener: function(e) {
-        // Suppress shortcut handling when a text input field is focussed
-        if (document.activeElement.type == 'text' || document.activeElement.type == 'textarea') {
-            return;
-        }
-
-        if (e.keyCode === this.options.muteKeyCode && !e.repeat) {
+        if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.muteKeyCode) {
             this.options.callback(this.input.val() / 100);
         }
     },

js/control/RoutingOptions.js

@@ -1,4 +1,10 @@
 BR.RoutingOptions = L.Evented.extend({
+    options: {
+        shortcut: {
+            switch: 71 // char code for 'g'
+        }
+    },
+
     initialize: function() {
         $('#profile-alternative').on('changed.bs.select', this._getChangeHandler());
 
@@ -15,6 +21,8 @@ BR.RoutingOptions = L.Evented.extend({
         profiles_list.children[0].value = 'Custom';
         // <custom> profile is empty at start, select next one
         profiles_list.children[1].selected = true;
+
+        L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
     },
 
     refreshUI: function() {
@@ -37,6 +45,10 @@ BR.RoutingOptions = L.Evented.extend({
             custom.disabled = true;
         }
         $('.selectpicker').selectpicker('refresh');
+
+        // append shortcut text to tooltip
+        var button = $('#profile-alternative-form button')[0];
+        button.title = button.title + i18next.t('navbar.profile-tooltip');
     },
 
     getOptions: function() {
@@ -105,5 +117,13 @@ BR.RoutingOptions = L.Evented.extend({
         return L.bind(function(evt) {
             this.fire('update', { options: this.getOptions() });
         }, this);
+    },
+
+    _keydownListener: function(e) {
+        if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.switch) {
+            if (!$('#profile-alternative-form .dropdown').hasClass('show')) {
+                $('#profile-alternative-form button').click();
+            }
+        }
     }
 });