From c00e54d61b71bf03e47e3c1c5b58f6b520d18d9b Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 5 Nov 2021 12:33:38 +0100 Subject: [PATCH] [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. --- .../themes/simple/src/js/main/keyboard.js | 55 +++++++++++++++---- .../themes/simple/src/js/main/results.js | 20 ++----- 2 files changed, 50 insertions(+), 25 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,20 +3,55 @@ 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
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; - while (el !== undefined) { - if (el.classList.contains('result')) { - if (el.getAttribute("data-vim-selected") === null) { - highlightResult(el)(true); - } - break; + 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); } - el = el.parentNode; } }, true); 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();