[feature] key bindings: left & right arrow are always on

2 files changed, 47 insertions, 15 deletions

diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js
index 0c52673d9..f59d81620 100644
--- a/searx/static/themes/simple/src/js/main/keyboard.js
+++ b/searx/static/themes/simple/src/js/main/keyboard.js
@@ -55,13 +55,30 @@ searxng.ready(function () {
     }
   }, true);
 
-  var vimKeys = {
+  // these bindings are always on
+  var keyBindings = {
     27: {
       key: 'Escape',
       fun: removeFocus,
       des: 'remove focus from the focused input',
       cat: 'Control'
     },
+    37: {
+      key: 'Left',
+      fun: ifDetailOpened(highlightResult('up')),
+      des: 'select previous search result',
+      cat: 'Results'
+    },
+    39: {
+      key: 'Right',
+      fun: ifDetailOpened(highlightResult('down')),
+      des: 'select next search result',
+      cat: 'Results'
+    }
+  }
+
+  // these bindings are enabled by user preferences
+  var vimKeys = {
     73: {
       key: 'i',
       fun: searchInputFocus,
@@ -155,20 +172,31 @@ searxng.ready(function () {
   };
 
   if (searxng.settings.hotkeys) {
-    searxng.on(document, "keydown", function (e) {
-      // check for modifiers so we don't break browser's hotkeys
-      if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-        var tagName = e.target.tagName.toLowerCase();
-        if (e.keyCode === 27) {
-          vimKeys[e.keyCode].fun(e);
-        } else {
-          if (e.target === document.body || tagName === 'a' || tagName === 'button') {
-            e.preventDefault();
-            vimKeys[e.keyCode].fun();
-          }
+    // To add Vim-like key bindings, merge the 'vimKeys' into 'keyBindings'.
+    Object.assign(keyBindings, vimKeys);
+  }
+
+  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) {
+      var tagName = e.target.tagName.toLowerCase();
+      if (e.keyCode === 27) {
+        keyBindings[e.keyCode].fun(e);
+      } else {
+        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+          e.preventDefault();
+          keyBindings[e.keyCode].fun();
         }
       }
-    });
+    }
+  });
+
+  function ifDetailOpened (f) {
+    return function () {
+      if (searxng.isDetailOpened()) {
+        f();
+      }
+    }
   }
 
   function highlightResult (which) {
@@ -347,8 +375,8 @@ searxng.ready(function () {
   function initHelpContent (divElement) {
     var categories = {};
 
-    for (var k in vimKeys) {
-      var key = vimKeys[k];
+    for (var k in keyBindings) {
+      var key = keyBindings[k];
       categories[key.cat] = categories[key.cat] || [];
       categories[key.cat].push(key);
     }
diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index 4eae58435..c5775fedd 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -74,6 +74,10 @@
       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();