[mod] improve handling of the hotkeys

- KeyboardEvent: keyCode property is depricated, replaced by key property [2]

- the check for ifDetailOpened is not necessary, because the hotkeys are not
  only applicable to image-results, by example:

   `!goi !go !scc hello`

- Key bindings like h for help are to be used in general (not only in vim-mode)

[1] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
[2] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

2 files changed, 69 insertions, 79 deletions

diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js
index f59d81620..4a6f9d384 100644
--- a/searx/static/themes/simple/src/js/main/keyboard.js
+++ b/searx/static/themes/simple/src/js/main/keyboard.js
@@ -57,118 +57,118 @@ searxng.ready(function () {
 
   // these bindings are always on
   var keyBindings = {
-    27: {
-      key: 'Escape',
+    'Escape': {
+      key: 'ESC',
       fun: removeFocus,
       des: 'remove focus from the focused input',
       cat: 'Control'
     },
-    37: {
-      key: 'Left',
-      fun: ifDetailOpened(highlightResult('up')),
-      des: 'select previous search result',
+    'ArrowLeft': {
+      key: '⬅',
+      fun: highlightResult('up'),
+      des: 'Use left arrow to select previous search result',
       cat: 'Results'
     },
-    39: {
-      key: 'Right',
-      fun: ifDetailOpened(highlightResult('down')),
-      des: 'select next search result',
+    'ArrowRight': {
+      key: '➡',
+      fun: highlightResult('down'),
+      des: 'Use right arrow to select next search result',
       cat: 'Results'
-    }
-  }
-
-  // these bindings are enabled by user preferences
-  var vimKeys = {
-    73: {
+    },
+    'h': {
+      key: 'h',
+      fun: toggleHelp,
+      des: 'toggle help window',
+      cat: 'Other'
+    },
+    'i': {
       key: 'i',
       fun: searchInputFocus,
       des: 'focus on the search input',
       cat: 'Control'
     },
-    66: {
+    'n': {
+      key: 'n',
+      fun: GoToNextPage(),
+      des: 'go to next page',
+      cat: 'Results'
+    },
+    'o': {
+      key: 'o',
+      fun: openResult(false),
+      des: 'open search result',
+      cat: 'Results'
+    },
+    'p': {
+      key: 'p',
+      fun: GoToPreviousPage(),
+      des: 'go to previous page',
+      cat: 'Results'
+    },
+    'r': {
+      key: 'r',
+      fun: reloadPage,
+      des: 'reload page from the server',
+      cat: 'Control'
+    },
+    't': {
+      key: 't',
+      fun: openResult(true),
+      des: 'open the result in a new tab',
+      cat: 'Results'
+    },
+  }
+
+  // these bindings are enabled by user preferences
+  var vimKeys = {
+    'b': {
       key: 'b',
       fun: scrollPage(-window.innerHeight),
       des: 'scroll one page up',
       cat: 'Navigation'
     },
-    70: {
+    'f': {
       key: 'f',
       fun: scrollPage(window.innerHeight),
       des: 'scroll one page down',
       cat: 'Navigation'
     },
-    85: {
+    'u': {
       key: 'u',
       fun: scrollPage(-window.innerHeight / 2),
       des: 'scroll half a page up',
       cat: 'Navigation'
     },
-    68: {
+    'd': {
       key: 'd',
       fun: scrollPage(window.innerHeight / 2),
       des: 'scroll half a page down',
       cat: 'Navigation'
     },
-    71: {
+    'g': {
       key: 'g',
       fun: scrollPageTo(-document.body.scrollHeight, 'top'),
       des: 'scroll to the top of the page',
       cat: 'Navigation'
     },
-    86: {
+    'v': {
       key: 'v',
       fun: scrollPageTo(document.body.scrollHeight, 'bottom'),
       des: 'scroll to the bottom of the page',
       cat: 'Navigation'
     },
-    75: {
+    'k': {
       key: 'k',
       fun: highlightResult('up'),
       des: 'select previous search result',
       cat: 'Results'
     },
-    74: {
+    'j': {
       key: 'j',
       fun: highlightResult('down'),
       des: 'select next search result',
       cat: 'Results'
     },
-    80: {
-      key: 'p',
-      fun: GoToPreviousPage(),
-      des: 'go to previous page',
-      cat: 'Results'
-    },
-    78: {
-      key: 'n',
-      fun: GoToNextPage(),
-      des: 'go to next page',
-      cat: 'Results'
-    },
-    79: {
-      key: 'o',
-      fun: openResult(false),
-      des: 'open search result',
-      cat: 'Results'
-    },
-    84: {
-      key: 't',
-      fun: openResult(true),
-      des: 'open the result in a new tab',
-      cat: 'Results'
-    },
-    82: {
-      key: 'r',
-      fun: reloadPage,
-      des: 'reload page from the server',
-      cat: 'Control'
-    },
-    72: {
-      key: 'h',
-      fun: toggleHelp,
-      des: 'toggle help window',
-      cat: 'Other'
-    }
   };
 
   if (searxng.settings.hotkeys) {
@@ -178,27 +178,23 @@ searxng.ready(function () {
 
   searxng.on(document, "keydown", function (e) {
     // check for modifiers so we don't break browser's hotkeys
-    if (Object.prototype.hasOwnProperty.call(keyBindings, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+    if (
+      Object.prototype.hasOwnProperty.call(keyBindings, e.key)
+        && !e.ctrlKey && !e.altKey
+        && !e.shiftKey && !e.metaKey
+    ) {
       var tagName = e.target.tagName.toLowerCase();
-      if (e.keyCode === 27) {
-        keyBindings[e.keyCode].fun(e);
+      if (e.key === 'Escape') {
+        keyBindings[e.key].fun(e);
       } else {
         if (e.target === document.body || tagName === 'a' || tagName === 'button') {
           e.preventDefault();
-          keyBindings[e.keyCode].fun();
+          keyBindings[e.key].fun();
         }
       }
     }
   });
 
-  function ifDetailOpened (f) {
-    return function () {
-      if (searxng.isDetailOpened()) {
-        f();
-      }
-    }
-  }
-
   function highlightResult (which) {
     return function (noScroll, keepFocus) {
       var current = document.querySelector('.result[data-vim-selected]'),
@@ -390,7 +386,7 @@ searxng.ready(function () {
     }
 
     var html = '<a href="#" class="close" aria-label="close" title="close">×</a>';
-    html += '<h3>How to navigate searx with Vim-like hotkeys</h3>';
+    html += '<h3>How to navigate SearXNG with hotkeys</h3>';
     html += '<table>';
 
     for (var i = 0; i < sorted.length; i++) {
@@ -432,8 +428,6 @@ searxng.ready(function () {
       helpPanel.id = 'vim-hotkeys-help';
       helpPanel.className = 'dialog-modal';
       initHelpContent(helpPanel);
-      initHelpContent(helpPanel);
-      initHelpContent(helpPanel);
       var body = document.getElementsByTagName('body')[0];
       body.appendChild(helpPanel);
     } else {
diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index c5775fedd..4eae58435 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -74,10 +74,6 @@
       searxng.scrollPageToSelected();
     }
 
-    searxng.isDetailOpened = function () {
-      return d.getElementById('results').classList.contains('image-detail-open');
-    }
-
     searxng.closeDetail = function (e) {
       d.getElementById('results').classList.remove('image-detail-open');
       searxng.scrollPageToSelected();