mirror of
https://github.com/searxng/searxng.git
synced 2024-11-22 12:10:11 +01:00
[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.
This commit is contained in:
parent
4d051c43f3
commit
c00e54d61b
@ -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 <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;
|
||||
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);
|
||||
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user