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

searx/static/themes/simple/src/js/main/keyboard.js

@@ -3,20 +3,55 @@
 
 searxng.ready(function() {
 
-  searxng.on('.result', 'click', function() {
+  function isElementInDetail(el) {
-    highlightResult(this)(true);  
+    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;
+  }
+
+  function getResultElement(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('result')) {
+        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) {
-    var el = e.target;
+    if (!isElementInDetail(e.target)) {
-    while (el !== undefined) {
+      let resultElement = getResultElement(e.target);
-      if (el.classList.contains('result')) {
+      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
-        if (el.getAttribute("data-vim-selected") === null) {
+        highlightResult(resultElement)(true);
-          highlightResult(el)(true);
+      }
-        }
+      if (isImageResult(resultElement)) {
-        break;
+        searxng.selectImage(resultElement);
       }
-      el = el.parentNode;
     }
   }, true);
 

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;
+      if (resultElement) {
-      while (t && t.nodeName != 'ARTICLE') {
-        t = t.parentNode;
-      }
-      if (t) {
         // load full size image in background
-        const imgElement = t.querySelector('.result-images-source img');
+        const imgElement = resultElement.querySelector('.result-images-source img');
-        const thumbnailElement = t.querySelector('.image_thumbnail');
+        const thumbnailElement = resultElement.querySelector('.image_thumbnail');
-        const detailElement = t.querySelector('.detail');
+        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();