[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.

2 files changed, 49 insertions, 24 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 = {
diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index 5ccbb38b5..e4b139fe0 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -31,17 +31,13 @@
       }
     });
 
-    function selectImage(e) {
+    searxng.selectImage = function(resultElement) {
       /*eslint no-unused-vars: 0*/
-      let t = e.target;
-      while (t && t.nodeName != 'ARTICLE') {
-        t = t.parentNode;
-      }
-      if (t) {
+      if (resultElement) {
         // load full size image in background
-        const imgElement = t.querySelector('.result-images-source img');
-        const thumbnailElement = t.querySelector('.image_thumbnail');
-        const detailElement = t.querySelector('.detail');
+        const imgElement = resultElement.querySelector('.result-images-source img');
+        const thumbnailElement = resultElement.querySelector('.image_thumbnail');
+        const detailElement = resultElement.querySelector('.detail');
         if (imgElement) {
           const imgSrc = imgElement.getAttribute('data-src');
           if (imgSrc) {
@@ -74,12 +70,6 @@
       searxng.image_thumbnail_layout.align();
       searxng.scrollPageToSelected();
     }
-
-    searxng.on('.result-images', 'click', e => {
-      e.preventDefault();
-      selectImage(e);
-    });
-    searxng.on('.result-images a', 'focus', selectImage, true);
     searxng.on('.result-detail-close', 'click', e => { 
       e.preventDefault();
       searxng.closeDetail();