diff --git a/view-webapp/src/main/sass/tour.scss b/view-webapp/src/main/sass/tour.scss index 785e7fb..8c191d9 100644 --- a/view-webapp/src/main/sass/tour.scss +++ b/view-webapp/src/main/sass/tour.scss @@ -191,8 +191,11 @@ } .result-line { cursor: pointer; - &:hover, &.highlighted { - background-color: rgba(100,200,255,200); + &:hover { + background-color: rgba(100, 200, 255, 0.44); + } + &.highlighted, &.highlighted:hover { + background-color: rgba(100,200,255,1); } } } diff --git a/view-webapp/src/main/webapp/js/main.js b/view-webapp/src/main/webapp/js/main.js index c0512fd..e88a589 100644 --- a/view-webapp/src/main/webapp/js/main.js +++ b/view-webapp/src/main/webapp/js/main.js @@ -210,8 +210,25 @@ onLoad(() => { $('#dimmer').on('click', e => $('.popup').removeClass('shown'); */ - // keyboard handling - document.on('keyup', e => { + /* Inhibate default behavior of page down and page up when search result is shown */ + document.addEventListener('keydown', e => { + switch (e.key) { + case 'PageDown': + case 'PageUp': { + if (document.location.hash === '#registration') { + if (typeof (searchResultShown) === 'function' && searchResultShown()) { + e.preventDefault(); + e.cancelBubble = true; + e.stopPropagation(); + return false; + } + } + } + } + }, true); + + // keyboard handling + document.addEventListener('keyup', e => { let tab = document.location.hash; switch (e.key) { case 'Escape': { @@ -230,12 +247,9 @@ onLoad(() => { case 'ArrowDown': { if (tab === '#registration') { if (typeof(searchResultShown) === 'function' && searchResultShown()) { - let lines = $('.result-line'); if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; else ++searchHighlight; - searchHighlight = Math.min(searchHighlight, lines.length - 1); - lines.removeClass('highlighted'); - lines[searchHighlight].addClass('highlighted'); + navigateResults(e); } } break; @@ -243,12 +257,30 @@ onLoad(() => { case 'ArrowUp': { if (tab === '#registration') { if (typeof(searchResultShown) === 'function' && searchResultShown()) { - let lines = $('.result-line'); if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; else --searchHighlight; - searchHighlight = Math.max(searchHighlight, 0); - lines.removeClass('highlighted'); - lines[searchHighlight].addClass('highlighted'); + navigateResults(e); + } + } + break; + } + case 'PageDown': { + if (tab === '#registration') { + if (typeof(searchResultShown) === 'function' && searchResultShown()) { + console.log(searchHighlight) + if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; + else searchHighlight += 12; + navigateResults(e); + } + } + break; + } + case 'PageUp': { + if (tab === '#registration') { + if (typeof(searchResultShown) === 'function' && searchResultShown()) { + if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; + else searchHighlight -= 12; + navigateResults(e); } } break; @@ -265,8 +297,16 @@ onLoad(() => { } break; } + case '+': { + if (tab === '#registration') { + if (!$('#player').hasClass('shown')) { + addPlayers(); + } + } + break; + } } - }); + }, true); // disable hash scrolling if (window.location.hash) { diff --git a/view-webapp/src/main/webapp/js/tour-registration.inc.js b/view-webapp/src/main/webapp/js/tour-registration.inc.js index cc005a6..4599274 100644 --- a/view-webapp/src/main/webapp/js/tour-registration.inc.js +++ b/view-webapp/src/main/webapp/js/tour-registration.inc.js @@ -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(() => { diff --git a/view-webapp/src/main/webapp/tour-information.inc.html b/view-webapp/src/main/webapp/tour-information.inc.html index 7b2da03..2aa07df 100644 --- a/view-webapp/src/main/webapp/tour-information.inc.html +++ b/view-webapp/src/main/webapp/tour-information.inc.html @@ -1,5 +1,5 @@