Review up/down arrow behavior and scroll into view in search result list
This commit is contained in:
@@ -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(() => {
|
||||
|
Reference in New Issue
Block a user