From a987672340304b88973c8504e644d9a1ae98f4e6 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Mon, 11 Sep 2023 20:18:56 +0200 Subject: [PATCH] [mod] improve handling of the hotkeys - KeyboardEvent: keyCode property is depricated, replaced by key property [2] - the check for ifDetailOpened is not necessary, because the hotkeys are not only applicable to image-results, by example: `!goi !go !scc hello` - Key bindings like h for help are to be used in general (not only in vim-mode) [1] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode [2] https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key Signed-off-by: Markus Heiser --- .../themes/simple/src/js/main/keyboard.js | 190 +++++++++--------- .../themes/simple/src/js/main/results.js | 4 - 2 files changed, 92 insertions(+), 102 deletions(-) diff --git a/searx/static/themes/simple/src/js/main/keyboard.js b/searx/static/themes/simple/src/js/main/keyboard.js index f59d81620..4a6f9d384 100644 --- a/searx/static/themes/simple/src/js/main/keyboard.js +++ b/searx/static/themes/simple/src/js/main/keyboard.js @@ -57,118 +57,118 @@ searxng.ready(function () { // these bindings are always on var keyBindings = { - 27: { - key: 'Escape', + 'Escape': { + key: 'ESC', fun: removeFocus, des: 'remove focus from the focused input', cat: 'Control' }, - 37: { - key: 'Left', - fun: ifDetailOpened(highlightResult('up')), - des: 'select previous search result', + 'ArrowLeft': { + key: '⬅', + fun: highlightResult('up'), + des: 'Use left arrow to select previous search result', cat: 'Results' }, - 39: { - key: 'Right', - fun: ifDetailOpened(highlightResult('down')), - des: 'select next search result', + 'ArrowRight': { + key: '➡', + fun: highlightResult('down'), + des: 'Use right arrow to select next search result', cat: 'Results' - } - } - - // these bindings are enabled by user preferences - var vimKeys = { - 73: { + }, + 'h': { + key: 'h', + fun: toggleHelp, + des: 'toggle help window', + cat: 'Other' + }, + 'i': { key: 'i', fun: searchInputFocus, des: 'focus on the search input', cat: 'Control' }, - 66: { - key: 'b', - fun: scrollPage(-window.innerHeight), - des: 'scroll one page up', - cat: 'Navigation' - }, - 70: { - key: 'f', - fun: scrollPage(window.innerHeight), - des: 'scroll one page down', - cat: 'Navigation' - }, - 85: { - key: 'u', - fun: scrollPage(-window.innerHeight / 2), - des: 'scroll half a page up', - cat: 'Navigation' - }, - 68: { - key: 'd', - fun: scrollPage(window.innerHeight / 2), - des: 'scroll half a page down', - cat: 'Navigation' - }, - 71: { - key: 'g', - fun: scrollPageTo(-document.body.scrollHeight, 'top'), - des: 'scroll to the top of the page', - cat: 'Navigation' - }, - 86: { - key: 'v', - fun: scrollPageTo(document.body.scrollHeight, 'bottom'), - des: 'scroll to the bottom of the page', - cat: 'Navigation' - }, - 75: { - key: 'k', - fun: highlightResult('up'), - des: 'select previous search result', - cat: 'Results' - }, - 74: { - key: 'j', - fun: highlightResult('down'), - des: 'select next search result', - cat: 'Results' - }, - 80: { - key: 'p', - fun: GoToPreviousPage(), - des: 'go to previous page', - cat: 'Results' - }, - 78: { + 'n': { key: 'n', fun: GoToNextPage(), des: 'go to next page', cat: 'Results' }, - 79: { + 'o': { key: 'o', fun: openResult(false), des: 'open search result', cat: 'Results' }, - 84: { - key: 't', - fun: openResult(true), - des: 'open the result in a new tab', + 'p': { + key: 'p', + fun: GoToPreviousPage(), + des: 'go to previous page', cat: 'Results' }, - 82: { + 'r': { key: 'r', fun: reloadPage, des: 'reload page from the server', cat: 'Control' }, - 72: { - key: 'h', - fun: toggleHelp, - des: 'toggle help window', - cat: 'Other' - } + 't': { + key: 't', + fun: openResult(true), + des: 'open the result in a new tab', + cat: 'Results' + }, + } + + // these bindings are enabled by user preferences + var vimKeys = { + 'b': { + key: 'b', + fun: scrollPage(-window.innerHeight), + des: 'scroll one page up', + cat: 'Navigation' + }, + 'f': { + key: 'f', + fun: scrollPage(window.innerHeight), + des: 'scroll one page down', + cat: 'Navigation' + }, + 'u': { + key: 'u', + fun: scrollPage(-window.innerHeight / 2), + des: 'scroll half a page up', + cat: 'Navigation' + }, + 'd': { + key: 'd', + fun: scrollPage(window.innerHeight / 2), + des: 'scroll half a page down', + cat: 'Navigation' + }, + 'g': { + key: 'g', + fun: scrollPageTo(-document.body.scrollHeight, 'top'), + des: 'scroll to the top of the page', + cat: 'Navigation' + }, + 'v': { + key: 'v', + fun: scrollPageTo(document.body.scrollHeight, 'bottom'), + des: 'scroll to the bottom of the page', + cat: 'Navigation' + }, + 'k': { + key: 'k', + fun: highlightResult('up'), + des: 'select previous search result', + cat: 'Results' + }, + 'j': { + key: 'j', + fun: highlightResult('down'), + des: 'select next search result', + cat: 'Results' + }, }; if (searxng.settings.hotkeys) { @@ -178,27 +178,23 @@ 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(keyBindings, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { + if ( + Object.prototype.hasOwnProperty.call(keyBindings, e.key) + && !e.ctrlKey && !e.altKey + && !e.shiftKey && !e.metaKey + ) { var tagName = e.target.tagName.toLowerCase(); - if (e.keyCode === 27) { - keyBindings[e.keyCode].fun(e); + if (e.key === 'Escape') { + keyBindings[e.key].fun(e); } else { if (e.target === document.body || tagName === 'a' || tagName === 'button') { e.preventDefault(); - keyBindings[e.keyCode].fun(); + keyBindings[e.key].fun(); } } } }); - function ifDetailOpened (f) { - return function () { - if (searxng.isDetailOpened()) { - f(); - } - } - } - function highlightResult (which) { return function (noScroll, keepFocus) { var current = document.querySelector('.result[data-vim-selected]'), @@ -390,7 +386,7 @@ searxng.ready(function () { } var html = '×'; - html += '

How to navigate searx with Vim-like hotkeys

'; + html += '

How to navigate SearXNG with hotkeys

'; html += ''; for (var i = 0; i < sorted.length; i++) { @@ -432,8 +428,6 @@ searxng.ready(function () { helpPanel.id = 'vim-hotkeys-help'; helpPanel.className = 'dialog-modal'; initHelpContent(helpPanel); - initHelpContent(helpPanel); - initHelpContent(helpPanel); var body = document.getElementsByTagName('body')[0]; body.appendChild(helpPanel); } else { diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js index c5775fedd..4eae58435 100644 --- a/searx/static/themes/simple/src/js/main/results.js +++ b/searx/static/themes/simple/src/js/main/results.js @@ -74,10 +74,6 @@ searxng.scrollPageToSelected(); } - searxng.isDetailOpened = function () { - return d.getElementById('results').classList.contains('image-detail-open'); - } - searxng.closeDetail = function (e) { d.getElementById('results').classList.remove('image-detail-open'); searxng.scrollPageToSelected();