From d1c09c84e21ac66d2701e74dd25dbbf33895c0f9 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 5 Nov 2021 10:26:01 +0100 Subject: [fix] simple theme: disable hotkeys when they are not enabled in the preferences --- searx/static/themes/simple/src/js/head/00_init.js | 1 + searx/static/themes/simple/src/js/main/keyboard.js | 29 +++++++++++----------- 2 files changed, 16 insertions(+), 14 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/js/head/00_init.js b/searx/static/themes/simple/src/js/head/00_init.js index 4406b764e..d359a9174 100644 --- a/searx/static/themes/simple/src/js/head/00_init.js +++ b/searx/static/themes/simple/src/js/head/00_init.js @@ -21,6 +21,7 @@ autocompleter: script.getAttribute('data-autocompleter') === 'true', search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true', infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true', + hotkeys: script.getAttribute('data-hotkeys') === 'true', static_path: script.getAttribute('data-static-path'), translations: JSON.parse(script.getAttribute('data-translations')), }; diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js index 394f97730..26cc6f7d0 100644 --- a/searx/static/themes/simple/src/js/main/keyboard.js +++ b/searx/static/themes/simple/src/js/main/keyboard.js @@ -119,20 +119,22 @@ searxng.ready(function() { } }; - searxng.on(document, "keydown", function(e) { - // check for modifiers so we don't break browser's hotkeys - if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { - var tagName = e.target.tagName.toLowerCase(); - if (e.keyCode === 27) { - vimKeys[e.keyCode].fun(e); - } else { - if (e.target === document.body || tagName === 'a' || tagName === 'button') { - e.preventDefault(); - vimKeys[e.keyCode].fun(); + if (searxng.hotkeys) { + searxng.on(document, "keydown", function(e) { + // check for modifiers so we don't break browser's hotkeys + if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { + var tagName = e.target.tagName.toLowerCase(); + if (e.keyCode === 27) { + vimKeys[e.keyCode].fun(e); + } else { + if (e.target === document.body || tagName === 'a' || tagName === 'button') { + e.preventDefault(); + vimKeys[e.keyCode].fun(); + } } } - } - }); + }); + } function highlightResult(which) { return function(noScroll) { @@ -353,8 +355,7 @@ searxng.ready(function() { } function toggleHelp() { - var helpPanel = document.querySelector('#vim-hotkeys-help'); - console.log(helpPanel); + var helpPanel = document.querySelector('#vim-hotkeys-help'); if (helpPanel === undefined || helpPanel === null) { // first call helpPanel = document.createElement('div'); -- cgit v1.2.3 From 4d051c43f3f91357a6db8147e5cfb2d9f9a79286 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 5 Nov 2021 11:33:43 +0100 Subject: [fix] simple theme: various about the hotkeys help * dark mode: #555 border (same as infoboxes and other borders) * remove a call to console.log * center the dialog without using the style attribute. --- searx/static/themes/simple/src/js/main/keyboard.js | 1 - searx/static/themes/simple/src/less/definitions.less | 2 +- searx/static/themes/simple/src/less/toolkit.less | 6 ++---- 3 files changed, 3 insertions(+), 6 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js index 26cc6f7d0..61fa7ba92 100644 --- a/searx/static/themes/simple/src/js/main/keyboard.js +++ b/searx/static/themes/simple/src/js/main/keyboard.js @@ -361,7 +361,6 @@ searxng.ready(function() { helpPanel = document.createElement('div'); helpPanel.id = 'vim-hotkeys-help'; helpPanel.className='dialog-modal'; - helpPanel.style='width: 40%'; initHelpContent(helpPanel); initHelpContent(helpPanel); initHelpContent(helpPanel); diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index a09735c5e..33b65a682 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -185,7 +185,7 @@ --color-toolkit-badge-background: #777; --color-toolkit-kbd-font: #000; --color-toolkit-kbd-background: #fff; - --color-toolkit-dialog-border: #333; + --color-toolkit-dialog-border: #555; --color-toolkit-dialog-background: #222; --color-toolkit-tabs-label-border: #222; --color-toolkit-tabs-section-border: #555; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 4f1c3f338..faed6ea9f 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -196,11 +196,9 @@ div.selectable_url { position: fixed; top: 50%; left: 50%; - - /* bring your own prefixes */ + margin: 0 auto; transform: translate(-50%, -50%); - z-index: 100000; - margin: 0 50% 0 0; + z-index: 10000000; } // btn-collapse -- cgit v1.2.3 From c00e54d61b71bf03e47e3c1c5b58f6b520d18d9b Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 5 Nov 2021 12:33:38 +0100 Subject: [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 | 53 ++++++++++++++++++---- searx/static/themes/simple/src/js/main/results.js | 20 ++------ 2 files changed, 49 insertions(+), 24 deletions(-) (limited to 'searx/static/themes/simple/src') 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
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(); -- cgit v1.2.3