Review up/down arrow behavior and scroll into view in search result list

This commit is contained in:
Claude Brisson
2024-05-06 06:09:21 +02:00
parent f7b56b2975
commit 29f8f89a08
5 changed files with 86 additions and 17 deletions

View File

@@ -120,7 +120,7 @@ function addPlayers() {
$('#player').removeClass('edit').addClass('create');
$('#register').removeClass('disabled');
modal('player');
$('#needle').focus();
setTimeout(() => $('#needle').focus(), 100);
store('addingPlayers', true);
}
@@ -129,6 +129,32 @@ function bulkUpdate(players) {
.then((values) => window.location.reload());
}
function navigateResults(ev) {
let lines = $('.result-line');
lines.removeClass('highlighted');
searchHighlight = Math.max(searchHighlight, 0);
searchHighlight = Math.min(searchHighlight, lines.length - 1);
let targeted = lines[searchHighlight];
if (targeted) {
targeted.addClass('highlighted');
// let's scroll into view manually, since DOM API scrollIntoView() is fooled by the sticky header.
let scrollContainer = targeted.closest('.popup-body');
// TODO - the "24" is the search-result padding. Avoid hardcoding it.
let scrollTop = scrollContainer.scrollTop + 24;
let scrollBottom = scrollContainer.scrollTop + scrollContainer.clientHeight - 24 - $('#search-form')[0].offsetHeight;
let top = targeted.offsetTop;
let bottom = top + targeted.offsetHeight;
if (top < scrollTop) {
scrollContainer.scrollTop -= (scrollTop - top);
} else if (bottom > scrollBottom) {
scrollContainer.scrollTop += (bottom - scrollBottom);
}
}
ev.preventDefault();
ev.cancelBubble = true;
ev.stopPropagation();
}
let tableSort;
onLoad(() => {