diff --git a/searx/static/themes/oscar/css/logicodev.min.css.map b/searx/static/themes/oscar/css/logicodev.min.css.map index 362a6c573..52840b8ad 100644 Binary files a/searx/static/themes/oscar/css/logicodev.min.css.map and b/searx/static/themes/oscar/css/logicodev.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng-rtl.css b/searx/static/themes/simple/css/searxng-rtl.css index 3213ea97e..9be11558d 100644 --- a/searx/static/themes/simple/css/searxng-rtl.css +++ b/searx/static/themes/simple/css/searxng-rtl.css @@ -965,7 +965,7 @@ template { --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; @@ -1544,10 +1544,9 @@ div.selectable_url pre { 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; } .dialog-modal::before { position: absolute; diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css b/searx/static/themes/simple/css/searxng-rtl.min.css index e1f6e86e0..f52442985 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css and b/searx/static/themes/simple/css/searxng-rtl.min.css differ diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css.map b/searx/static/themes/simple/css/searxng-rtl.min.css.map index e18724981..f290df566 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css.map and b/searx/static/themes/simple/css/searxng-rtl.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng.css b/searx/static/themes/simple/css/searxng.css index 1c9b37423..1e9ab7f1d 100644 --- a/searx/static/themes/simple/css/searxng.css +++ b/searx/static/themes/simple/css/searxng.css @@ -965,7 +965,7 @@ template { --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; @@ -1544,10 +1544,9 @@ div.selectable_url pre { 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; } .dialog-modal::before { position: absolute; diff --git a/searx/static/themes/simple/css/searxng.min.css b/searx/static/themes/simple/css/searxng.min.css index 1ca9dafa6..9a8e98477 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css and b/searx/static/themes/simple/css/searxng.min.css differ diff --git a/searx/static/themes/simple/css/searxng.min.css.map b/searx/static/themes/simple/css/searxng.min.css.map index babcff399..bea87859b 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css.map and b/searx/static/themes/simple/css/searxng.min.css.map differ diff --git a/searx/static/themes/simple/js/searxng.head.js b/searx/static/themes/simple/js/searxng.head.js index 4406b764e..d359a9174 100644 --- a/searx/static/themes/simple/js/searxng.head.js +++ b/searx/static/themes/simple/js/searxng.head.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/js/searxng.head.min.js b/searx/static/themes/simple/js/searxng.head.min.js index a914a2be2..af2f861e8 100644 Binary files a/searx/static/themes/simple/js/searxng.head.min.js and b/searx/static/themes/simple/js/searxng.head.min.js differ diff --git a/searx/static/themes/simple/js/searxng.head.min.js.map b/searx/static/themes/simple/js/searxng.head.min.js.map index adb1fd0ab..a7533ce8b 100644 Binary files a/searx/static/themes/simple/js/searxng.head.min.js.map and b/searx/static/themes/simple/js/searxng.head.min.js.map differ diff --git a/searx/static/themes/simple/js/searxng.js b/searx/static/themes/simple/js/searxng.js index 02a5b87ab..a65165bae 100644 --- a/searx/static/themes/simple/js/searxng.js +++ b/searx/static/themes/simple/js/searxng.js @@ -155,20 +155,55 @@ window.searxng = (function(w, d) { 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); @@ -271,20 +306,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) { @@ -505,14 +542,12 @@ 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'); helpPanel.id = 'vim-hotkeys-help'; helpPanel.className='dialog-modal'; - helpPanel.style='width: 40%'; initHelpContent(helpPanel); initHelpContent(helpPanel); initHelpContent(helpPanel); @@ -664,17 +699,13 @@ searxng.ready(function() { } }); - 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) { @@ -707,12 +738,6 @@ searxng.ready(function() { 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(); diff --git a/searx/static/themes/simple/js/searxng.min.js b/searx/static/themes/simple/js/searxng.min.js index a6d8e9b0a..a739d75e0 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js and b/searx/static/themes/simple/js/searxng.min.js differ diff --git a/searx/static/themes/simple/js/searxng.min.js.map b/searx/static/themes/simple/js/searxng.min.js.map index 41238c58d..3f941fbce 100644 Binary files a/searx/static/themes/simple/js/searxng.min.js.map and b/searx/static/themes/simple/js/searxng.min.js.map differ 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..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); @@ -119,20 +154,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,14 +390,12 @@ 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'); 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/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(); 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 diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html index 108d2fcf5..f6594041d 100644 --- a/searx/templates/simple/base.html +++ b/searx/templates/simple/base.html @@ -24,6 +24,7 @@ data-autocompleter="{% if autocomplete %}true{% else %}false{% endif %}" data-search-on-category-select="{{ 'true' if 'plugins/js/search_on_category_select.js' in scripts else 'false'}}" data-infinite-scroll="{{ 'true' if 'plugins/js/infinite_scroll.js' in scripts else 'false' }}" + data-hotkeys="{{ 'true' if 'plugins/js/vim_hotkeys.js' in scripts else 'false' }}" data-static-path="{{ url_for('static', filename='themes/simple') }}/" data-translations="{{ translations }}">