Refactor hotkeys to use keypress instead of keydown

keydown returns the "raw" key in event.which. Depending on the keyboard
layout, this may not be what is wanted. For example, on a German
keyboard, Shift+7 has to be pressed to get a slash. However, event.which
will be 55, which corresponds to "7". In the keypress event, however,
event.which will be 47, which corresponds to "/".

Sadly, several important keys (such as escape and the arrow keys) do not
trigger a keypress event. Therefore, they have to be handled using a
keydown event.

This change refactors the hotkey support to make use of keypress events
whenever possible. This will make hotkeys work regardless of the user's
keyboard layout. Escape and arrow keys are still handled via keydown
events.

There should be only one change in behavior: I could not make Ctrl+/
work and therefore rebound the help dialog to "?".

4 files changed, 19 insertions, 9 deletions

diff --git a/js/AppBase.js b/js/AppBase.js
index 121b7aa85..a5e20b8f9 100644
--- a/js/AppBase.js
+++ b/js/AppBase.js
@@ -60,14 +60,12 @@ define(["dojo/_base/declare"], function (declare) {
 
 			const hotkeys_map = App.getInitParam("hotkeys");
 			const keycode = event.which;
-			const keychar = String.fromCharCode(keycode).toLowerCase();
+			const keychar = String.fromCharCode(keycode);
 
 			if (keycode == 27) { // escape and drop prefix
 				this.hotkey_prefix = false;
 			}
 
-			if (keycode == 16 || keycode == 17) return; // ignore lone shift / ctrl
-
 			if (!this.hotkey_prefix && hotkeys_map[0].indexOf(keychar) != -1) {
 
 				this.hotkey_prefix = keychar;
@@ -87,13 +85,19 @@ define(["dojo/_base/declare"], function (declare) {
 
 			Element.hide("cmdline");
 
-			let hotkey_name = keychar.search(/[a-zA-Z0-9]/) != -1 ? keychar : "(" + keycode + ")";
+			let hotkey_name = "";
+
+			if (event.type == "keydown") {
+				hotkey_name = "(" + keycode + ")";
 
-			// ensure ^*char notation
-			if (event.shiftKey) hotkey_name = "*" + hotkey_name;
-			if (event.ctrlKey) hotkey_name = "^" + hotkey_name;
-			if (event.altKey) hotkey_name = "+" + hotkey_name;
-			if (event.metaKey) hotkey_name = "%" + hotkey_name;
+				// ensure ^*char notation
+				if (event.shiftKey) hotkey_name = "*" + hotkey_name;
+				if (event.ctrlKey) hotkey_name = "^" + hotkey_name;
+				if (event.altKey) hotkey_name = "+" + hotkey_name;
+				if (event.metaKey) hotkey_name = "%" + hotkey_name;
+			} else {
+				hotkey_name = keychar ? keychar : "(" + keycode + ")";
+			}
 
 			const hotkey_full = this.hotkey_prefix ? this.hotkey_prefix + " " + hotkey_name : hotkey_name;
 			this.hotkey_prefix = false;
diff --git a/js/Feeds.js b/js/Feeds.js
index 401d669a7..ba63aac47 100644
--- a/js/Feeds.js
+++ b/js/Feeds.js
@@ -196,6 +196,7 @@ define(["dojo/_base/declare"], function (declare) {
 			App.setLoadingProgress(50);
 
 			document.onkeydown = (event) => { return App.hotkeyHandler(event) };
+			document.onkeypress = (event) => { return App.hotkeyHandler(event) };
 			window.onresize = () => { Headlines.scrollHandler(); }
 
 			if (!this.getActive()) {
diff --git a/js/prefs.js b/js/prefs.js
index b4ac9976e..ae6286330 100755
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -78,6 +78,7 @@ require(["dojo/_base/kernel",
 					this.enableCsrfSupport();
 
 					document.onkeydown = (event) => { return App.hotkeyHandler(event) };
+					document.onkeypress = (event) => { return App.hotkeyHandler(event) };
 					App.setLoadingProgress(50);
 					Notify.close();
 
diff --git a/js/tt-rss.js b/js/tt-rss.js
index 99b44549b..a46fc17e4 100644
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@@ -206,6 +206,10 @@ require(["dojo/_base/kernel",
 				hotkeyHandler(event) {
 					if (event.target.nodeName == "INPUT" || event.target.nodeName == "TEXTAREA") return;
 
+					// Arrow buttons and escape are not reported via keypress, handle them via keydown.
+					// escape = 27, left = 37, up = 38, right = 39, down = 40
+					if (event.type == "keydown" && event.which != 27 && (event.which < 37 || event.which > 40)) return;
+
 					const action_name = App.keyeventToAction(event);
 
 					if (action_name) {