jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch searcher to use keys instead of keyCodes

Browse source 
According to
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
the keyCode is deprecated (and removed). It is causing me some
difficulty with the GUI tests because it can't differentiate between a
slash and question mark correctly. Using keys seems to work.
This commit is contained in:
Eric Huss 2025-05-14 18:16:20 -07:00
parent c9ad6dbf10
commit 91e94024cd
1 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/front-end/searcher/searcher.js
View file

@ -33,13 +33,7 @@ window.search = window.search || {};
mark_exclude = ['text'], mark_exclude = ['text'],
marker = new Mark(content), marker = new Mark(content),
URL_SEARCH_PARAM = 'search', URL_SEARCH_PARAM = 'search',
URL_MARK_PARAM = 'highlight', URL_MARK_PARAM = 'highlight';
SEARCH_HOTKEY_KEYCODES = [83, 191], // `s` or `/`.
ESCAPE_KEYCODE = 27,
DOWN_KEYCODE = 40,
UP_KEYCODE = 38,
SELECT_KEYCODE = 13;
let current_searchterm = '', let current_searchterm = '',
doc_urls = [], doc_urls = [],
@ -352,7 +346,7 @@ window.search = window.search || {};
return; return;
} }
if (e.keyCode === ESCAPE_KEYCODE) { if (e.key === 'Escape') {
e.preventDefault(); e.preventDefault();
searchbar.classList.remove('active'); searchbar.classList.remove('active');
setSearchUrlParameters('', setSearchUrlParameters('',
@ -362,38 +356,38 @@ window.search = window.search || {};
} }
showSearch(false); showSearch(false);
marker.unmark(); marker.unmark();
} else if (!hasFocus() && SEARCH_HOTKEY_KEYCODES.includes(e.keyCode)) { } else if (!hasFocus() && (e.key === 'S' || e.key === '/')) {
e.preventDefault(); e.preventDefault();
showSearch(true); showSearch(true);
window.scrollTo(0, 0); window.scrollTo(0, 0);
searchbar.select(); searchbar.select();
} else if (hasFocus() && (e.keyCode === DOWN_KEYCODE } else if (hasFocus() && (e.key === 'ArrowDown'
|| e.keyCode === SELECT_KEYCODE)) { || e.key === 'Enter')) {
e.preventDefault(); e.preventDefault();
const first = searchresults.firstElementChild; const first = searchresults.firstElementChild;
if (first !== null) { if (first !== null) {
unfocusSearchbar(); unfocusSearchbar();
first.classList.add('focus'); first.classList.add('focus');
if (e.keyCode === SELECT_KEYCODE) { if (e.key === 'Enter') {
window.location.assign(first.querySelector('a')); window.location.assign(first.querySelector('a'));
} }
} }
} else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE } else if (!hasFocus() && (e.key === 'ArrowDown'
|| e.keyCode === UP_KEYCODE || e.key === 'ArrowUp'
|| e.keyCode === SELECT_KEYCODE)) { || e.key === 'Enter')) {
// not `:focus` because browser does annoying scrolling // not `:focus` because browser does annoying scrolling
const focused = searchresults.querySelector('li.focus'); const focused = searchresults.querySelector('li.focus');
if (!focused) { if (!focused) {
return; return;
} }
e.preventDefault(); e.preventDefault();
if (e.keyCode === DOWN_KEYCODE) { if (e.key === 'ArrowDown') {
const next = focused.nextElementSibling; const next = focused.nextElementSibling;
if (next) { if (next) {
focused.classList.remove('focus'); focused.classList.remove('focus');
next.classList.add('focus'); next.classList.add('focus');
} }
} else if (e.keyCode === UP_KEYCODE) { } else if (e.key === 'ArrowUp') {
focused.classList.remove('focus'); focused.classList.remove('focus');
const prev = focused.previousElementSibling; const prev = focused.previousElementSibling;
if (prev) { if (prev) {
@ -401,7 +395,7 @@ window.search = window.search || {};
} else { } else {
searchbar.select(); searchbar.select();
} }
} else { // SELECT_KEYCODE } else { // Enter
window.location.assign(focused.querySelector('a')); window.location.assign(focused.querySelector('a'));
} }
} }