Review search scroll behavior

view-webapp/src/main/sass/tour.scss

@@ -118,17 +118,35 @@
     }
   }
 
-  #player-form {
+  #player {
-    &:not(.add) {
+    &.edit {
       #search-form, #search-result {
         display: none;
       }
     }
+    &.create {
+      .popup-body {
+        padding-top: 0;
+        .needle {
+          padding-top: 0.25em;
+        }
+      }
+    }
   }
   #search-form {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+  #search-header {
+    position: relative;
+    background-color: white;
+  }
+  #search-wrapper {
     position: relative;
   }
   #search-result {
+    text-align: left;
     position: absolute;
     background-color: gray;
     z-index: 2;

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

@@ -22,7 +22,7 @@ function searchResultShown() {
 function search(needle) {
   needle = needle.trim();
   if (needle && (needle === '*' || needle.length > 2)) {
-    let form = $('#player-form')[0];
+    let form = $('#search-form')[0];
     let search = {
       needle: needle,
       // aga: form.val('aga'),
@@ -44,6 +44,22 @@ function search(needle) {
           searchResult = result
           let html = resultTemplate.render(result);
           $('#search-result')[0].innerHTML = html;
+          if (needle === '*') {
+            setTimeout(() => {
+              let scrollTo = $('#needle')[0].value.trim();
+              while (scrollTo.length > 0) {
+                let target = $(`#search-result .result-line[data-name^="${scrollTo}"i]`);
+                if (target.length > 0) {
+                  target[0].scrollIntoView({ behavior: "smooth", block: "center" });
+                  break;
+                }
+                scrollTo = scrollTo.substring(0, scrollTo.length - 1);
+              }
+            }, 0);
+          } else {
+            let scrollable = $('#player .popup-body');
+            scrollable[0].scrollTop = 0;
+          }
         } else console.log(result);
       });
   } else {
@@ -88,7 +104,6 @@ function fillPlayer(player) {
 
 function addPlayers() {
   let form = $('#player-form')[0];
-  form.addClass('add');
   // keep preliminary/final status
   let status = form.val('final') || false;
   form.reset();
@@ -202,7 +217,7 @@ onLoad(() => {
         player[origin] = value;
       }
     }
-    if (form.hasClass('add')) {
+    if ($('#player').hasClass('create')) {
       api.postJson(`tour/${tour_id}/part`, player)
         .then(player => {
           if (player !== 'error') {
@@ -245,7 +260,6 @@ onLoad(() => {
           for (r = 1; r <= tour_rounds; ++r) {
             form.val(`r${r}`, !(player.skip && player.skip.includes(r)));
           }
-          form.removeClass('add');
           $('#player').removeClass('create').addClass('edit');
           $('#register').addClass('disabled');
           modal('player');

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

@@ -88,66 +88,71 @@
 </div>
 <div id="player" class="popup">
   <div class="popup-body">
+
+    <form id="search-form" class="ui edit form">
+      <div id="search-header" class="five stackable fields">
+#if($tour.country)
+        <div class="two wide field">
+          <div class="toggle">
+            <input id="countryFilter" name="countryFilter" type="checkbox" value="$tour.country"/>
+            <div class="search-param checkbox">
+              <div class="circle"></div>
+            </div>
+            <label>$tour.country.toUpperCase()</label>
+          </div>
+        </div>
+#end
+        <div class="needle eight wide field">
+          <div class="ui icon input">
+            <input id="needle" name="needle" type="text" placeholder="Search...">
+            <i id="clear-search" class="clickable close icon"></i>
+          </div>
+        </div>
+#* Disabled
+        <div class="two wide field">
+          <div class="toggle">
+            <input id="aga" name="aga" type="checkbox" value="true"/>
+            <div class="search-param checkbox">
+              <div class="circle"></div>
+            </div>
+            <label>AGA</label>
+          </div>
+        </div>
+*#
+        <div class="two wide field">
+          <div class="toggle" title="${utils.ratingsDates.egf|'no egf ratings'}">
+            <input id="egf" name="egf" type="checkbox" checked value="true"/>
+            <div class="search-param checkbox">
+              <div class="circle"></div>
+            </div>
+            <label>EGF</label>
+          </div>
+        </div>
+        <div class="two wide field">
+          <div class="toggle" title="${utils.ratingsDates.ffg|'no ffg ratings'}">
+            <input id="ffg" name="ffg" type="checkbox" checked value="true"/>
+            <div class="search-param checkbox">
+              <div class="circle"></div>
+            </div>
+            <label>FFG</label>
+          </div>
+        </div>
+        <div class="two wide field">
+          <button id="browse-players" type="button" class="ui basic icon button">
+            <i class="sort alphabet down icon"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+    <div id="search-wrapper">
+      <div id="search-result"></div>
+    </div>
     <form id="player-form" class="ui form edit">
       <input type="hidden" name="id"/>
       <input type="hidden" name="egf_id"/>
       <input type="hidden" name="ffg_id"/>
       <!-- input type="hidden" name="aga"/> -->
       <div class="popup-content">
-        <div id="search-form" class="five stackable fields">
-#if($tour.country)
-          <div class="two wide field">
-            <div class="toggle">
-              <input id="countryFilter" name="countryFilter" type="checkbox" value="$tour.country"/>
-              <div class="search-param checkbox">
-                <div class="circle"></div>
-              </div>
-              <label>$tour.country.toUpperCase()</label>
-            </div>
-          </div>
-#end
-          <div class="eight wide field">
-            <div class="ui icon input">
-              <input id="needle" name="needle" type="text" placeholder="Search...">
-              <i id="clear-search" class="clickable close icon"></i>
-            </div>
-          </div>
-#* Disabled
-          <div class="two wide field">
-            <div class="toggle">
-              <input id="aga" name="aga" type="checkbox" value="true"/>
-              <div class="search-param checkbox">
-                <div class="circle"></div>
-              </div>
-              <label>AGA</label>
-            </div>
-          </div>
-*#
-          <div class="two wide field">
-            <div class="toggle" title="${utils.ratingsDates.egf|'no egf ratings'}">
-              <input id="egf" name="egf" type="checkbox" checked value="true"/>
-              <div class="search-param checkbox">
-                <div class="circle"></div>
-              </div>
-              <label>EGF</label>
-            </div>
-          </div>
-          <div class="two wide field">
-            <div class="toggle" title="${utils.ratingsDates.ffg|'no ffg ratings'}">
-              <input id="ffg" name="ffg" type="checkbox" checked value="true"/>
-              <div class="search-param checkbox">
-                <div class="circle"></div>
-              </div>
-              <label>FFG</label>
-            </div>
-          </div>
-          <div class="two wide field">
-            <button id="browse-players" type="button" class="ui basic icon button">
-              <i class="sort alphabet down icon"></i>
-            </button>
-          </div>
-          <div id="search-result"></div>
-        </div>
         <div class="player-fields">
           <div class="two stackable fields">
             <div class="eight wide field">
@@ -297,7 +302,7 @@
 #[[
 <script id="result" type="text/template">
   {{for #data}}
-    <div class="result-line" data-index="{{:#getIndex()}}">[{{:origin}}] {{:country}} - {{:name}} {{:firstname}} {{:rank}} ({{:club}}) {{if country === 'FR' && license !== 'L'}}<span class="darkred">non licencié</span>{{/if}}</div>
+    <div class="result-line" data-index="{{:#getIndex()}}" data-name="{{:name}}">[{{:origin}}] {{:country}} - {{:name}} {{:firstname}} {{:rank}} ({{:club}}) {{if country === 'FR' && license !== 'L'}}<span class="darkred">non licencié</span>{{/if}}</div>
   {{/for}}
 </script>
 <script type="text/javascript" src="/lib/jsrender-1.0.13/jsrender.min.js"></script>