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

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);
       }
     }
   }

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) {

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(() => {

view-webapp/src/main/webapp/tour-information.inc.html

@@ -1,5 +1,5 @@
 <div id="information-tab" #if($tour)class="tab-content"#end>
-  <form id="tournament-infos" class="ui form #if(!$tour)edit#end">
+  <form id="tournament-infos" autocomplete="off" class="ui form #if(!$tour)edit#end">
     <div class="roundbox">
       <div class="two stackable fields">
         <div class="eight wide field">

view-webapp/src/main/webapp/tour-registration.inc.html

@@ -95,7 +95,7 @@
 <div id="player" class="popup">
   <div class="popup-body">
 
-    <form id="search-form" class="ui edit form">
+    <form id="search-form" autocomplete="off" class="ui edit form">
       <div id="search-header" class="five stackable fields">
 #if($tour.country)
         <div class="two wide centered field">
@@ -153,7 +153,7 @@
     <div id="search-wrapper">
       <div id="search-result"></div>
     </div>
-    <form id="player-form" class="ui form edit">
+    <form id="player-form" autocomplete="off" class="ui form edit">
       <input type="hidden" name="id"/>
       <input type="hidden" name="egf_id"/>
       <input type="hidden" name="ffg_id"/>