[fix] simple theme: image detail: click on the URL to the HTML page works

Before this commit, the default click event on an image result is prevented,
this include clicks inside the detail.

This commit makes sure the click happends outside the detail to prevent the default event.

1 files changed, 44 insertions, 9 deletions

diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js
index 61fa7ba92..788d289ef 100644
--- a/searx/static/themes/simple/src/js/main/keyboard.js
+++ b/searx/static/themes/simple/src/js/main/keyboard.js
@@ -3,21 +3,56 @@
 
 searxng.ready(function() {
 
-  searxng.on('.result', 'click', function() {
-    highlightResult(this)(true);  
-  });
+  function isElementInDetail(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('detail')) {
+        return true;
+      }
+      if (el.classList.contains('result')) {
+        // we found a result, no need to go to the root of the document:
+        // el is not inside a <div class="detail"> element
+        return false;
+      }
+      el = el.parentNode;
+    }
+    return false;
+  }
 
-  searxng.on('.result a', 'focus', function(e) {
-    var el = e.target;
+  function getResultElement(el) {
     while (el !== undefined) {
       if (el.classList.contains('result')) {
-        if (el.getAttribute("data-vim-selected") === null) {
-          highlightResult(el)(true);
-        }
-        break;
+        return el;
       }
       el = el.parentNode;
     }
+    return undefined;
+  }
+
+  function isImageResult(resultElement) {
+    return resultElement && resultElement.classList.contains('result-images');
+  }
+
+  searxng.on('.result', 'click', function(e) {
+    if (!isElementInDetail(e.target)) {
+      highlightResult(this)(true);
+      let resultElement = getResultElement(e.target);
+      if (isImageResult(resultElement)) {
+        e.preventDefault();
+        searxng.selectImage(resultElement);
+      }
+    }
+  });
+
+  searxng.on('.result a', 'focus', function(e) {
+    if (!isElementInDetail(e.target)) {
+      let resultElement = getResultElement(e.target);
+      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
+        highlightResult(resultElement)(true);
+      }
+      if (isImageResult(resultElement)) {
+        searxng.selectImage(resultElement);
+      }
+    }
   }, true);
 
   var vimKeys = {