Add shortcuts to toggle sidebar and switch tabs

The 'T' key will show/hide the most recent sidebar tab.

Pressing 'Shift+T' will switch to the next sidebar tab, possibly
wrapping around to the first tab.

If the Itinerary tab is hidden, it will be skipped.

index.html

@@ -543,7 +543,12 @@
             <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
@@ -567,7 +572,11 @@
                         </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>
@@ -575,18 +584,26 @@
                         <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>

js/plugin/Sidebar.js

@@ -8,6 +8,10 @@ BR.Sidebar = L.Control.Sidebar.extend({
         autopan: false,
         defaultTabId: '',
 
+        shortcut: {
+            toggleTabs: 84 // char code for 't'
+        },
+
         // Tabs to be notified when shown or hidden
         // (tab div id -> object implementing show/hide methods)
         listeningTabs: {}
@@ -17,6 +21,8 @@ BR.Sidebar = L.Control.Sidebar.extend({
         L.Control.Sidebar.prototype.initialize.call(this, id, options);
 
         this.oldTab = null;
+
+        L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
     },
 
     addTo: function(map) {
@@ -34,6 +40,15 @@ BR.Sidebar = L.Control.Sidebar.extend({
             this
         );
 
+        this.recentTab = this.options.defaultTabId;
+        this.on(
+            'content',
+            function(tab) {
+                this.recentTab = tab.id;
+            },
+            this
+        );
+
         this._rememberTabState();
 
         if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
@@ -103,6 +118,30 @@ BR.Sidebar = L.Control.Sidebar.extend({
 
     _storeActiveTab: function(e) {
         localStorage.setItem(this.storageId, e.id || '');
+    },
+
+    _keydownListener: function(e) {
+        if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.toggleTabs) {
+            if ($('#sidebarTabs > ul > li[class=active]').length) {
+                // sidebar is currently open
+                if (e.shiftKey) {
+                    // try to find next tab
+                    var nextTab = $('#sidebarTabs > ul > li[class=active] ~ li:not([hidden]) > a');
+                    if (!nextTab.length) {
+                        // wrap around to first tab
+                        nextTab = $('#sidebarTabs > ul > li:not([hidden]) > a');
+                    }
+                    // switch to next or first tab
+                    this.open(nextTab.attr('href').slice(1));
+                } else {
+                    // close current tab
+                    this.close();
+                }
+            } else {
+                // sidebar is currently closed, open recent or default tab
+                this.open(this.recentTab);
+            }
+        }
     }
 });
 

locales/en.json

@@ -190,17 +190,21 @@
         "total_known": "Total Known:",
         "unknown": "Unknown"
       },
-      "title": "Analysis"
+      "title": "Analysis",
+      "tooltip": "Analyse route\n(T key to toggle, Shift+T to switch to next tab)"
     },
     "customize-profile": {
-      "title": "Customize profile"
+      "title": "Customize profile",
+      "tooltip": "Customize profile\n(T key to toggle, Shift+T to switch to next tab)"
     },
     "data": {
       "sync-map": "Synchronize map",
-      "title": "Data"
+      "title": "Data",
+      "tooltip": "Show detailed route data table\n(T key to toggle, Shift+T to switch to next tab)"
     },
     "itinerary": {
-      "title": "Itinerary"
+      "title": "Itinerary",
+      "tooltip": "Show itinerary\n(T key to toggle, Shift+T to switch to next tab)"
     },
     "layers": {
       "category": {
@@ -226,7 +230,8 @@
         "name": "Name",
         "type": "Type"
       },
-      "title": "Layers"
+      "title": "Layers",
+      "tooltip": "Select layers\n(T key to toggle, Shift+T to switch to next tab)"
     },
     "profile": {
       "apply": "Apply",