From 6da520ed4d23befc8372209f822fa4b66a7640f4 Mon Sep 17 00:00:00 2001
From: Henrik Fehlauer <rkflx@lab12.net>
Date: Tue, 9 Jun 2020 18:00:00 +0000
Subject: [PATCH] Add shortcut to toggle profile switcher

Press 'G' to open the profile switcher, select a profile with the arrow
keys, apply with 'Enter' and close the switcher with 'Escape'.

While 'T' and 'P' will be / were already taken, 'G' is at least easily
reachable with the left hand for users using a mouse with their right
hand at the same time.

Since Bootstrap keeps updating the tooltip when changing options in the
dropdown (which is useful in case the text is longer than the width of
the control), the shortcut text needs to be applied dynamically too.
---
 index.html                   |  2 +-
 js/control/RoutingOptions.js | 20 ++++++++++++++++++++
 locales/en.json              |  3 ++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 2f871e3..30133be 100644
--- a/index.html
+++ b/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">
diff --git a/js/control/RoutingOptions.js b/js/control/RoutingOptions.js
index 69770e3..148655d 100644
--- a/js/control/RoutingOptions.js
+++ b/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();
+            }
+        }
     }
 });
diff --git a/locales/en.json b/locales/en.json
index 6766c76..766b771 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -171,7 +171,8 @@
       "trekking-steep": "Trekking bike (steep)",
       "vm-forum-liegerad-schnell": "Recumbent bike (fast)",
       "vm-forum-velomobil-schnell": "Velomobile (fast)"
-    }
+    },
+    "profile-tooltip": "\n(G key to switch)"
   },
   "sidebar": {
     "analysis": {