From 48d22d51784a896afc7e94e53e641e0c43b7699c Mon Sep 17 00:00:00 2001
From: Claude Brisson <claude@renegat.net>
Date: Fri, 24 May 2024 10:35:53 +0200
Subject: [PATCH] Make A-Z browsing a toggle button, review results
 highlighting

---
 view-webapp/src/main/sass/tour.scss           |  5 ++-
 view-webapp/src/main/webapp/js/domhelper.js   |  2 +-
 .../main/webapp/js/tour-registration.inc.js   | 37 +++++++++++++------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/view-webapp/src/main/sass/tour.scss b/view-webapp/src/main/sass/tour.scss
index a2f42a0..0b288bd 100644
--- a/view-webapp/src/main/sass/tour.scss
+++ b/view-webapp/src/main/sass/tour.scss
@@ -194,7 +194,10 @@
       &:hover {
         background-color: rgba(100, 200, 255, 0.44);
       }
-      &.highlighted, &.highlighted:hover {
+      &.spotted {
+        background-color: rgba(100, 200, 255, 0.44);
+      }
+      &.highlighted, &.highlighted:hover, &.spotted:hover {
         background-color: rgba(100,200,255,1);
       }
     }
diff --git a/view-webapp/src/main/webapp/js/domhelper.js b/view-webapp/src/main/webapp/js/domhelper.js
index d19eb3d..3752c22 100644
--- a/view-webapp/src/main/webapp/js/domhelper.js
+++ b/view-webapp/src/main/webapp/js/domhelper.js
@@ -159,7 +159,7 @@ NodeList.prototype.clear = function() {
   return this;
 }
 Element.prototype.clear = function() {
-  this.innerHTML = '';
+  while (this.firstChild) this.removeChild(this.lastChild);
   return this;
 }
 
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 67e79af..c83d0e5 100644
--- a/view-webapp/src/main/webapp/js/tour-registration.inc.js
+++ b/view-webapp/src/main/webapp/js/tour-registration.inc.js
@@ -11,15 +11,24 @@ function searchResultShown() {
 }
 
 function browseScroll() {
-  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;
+  spinner(true);
+  setTimeout(() => {
+    $('#search-result .result-line').removeClass('spotted');
+    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.addClass('spotted');
+        let first = target[0];
+        first.scrollIntoView({behavior: "smooth", block: "center"});
+        searchHighlight = Array.prototype.indexOf.call(first.parentNode.children, first);
+        first.addClass('highlighted');
+        break;
+      } else searchHighlight = -1;
+      scrollTo = scrollTo.substring(0, scrollTo.length - 1);
     }
-    scrollTo = scrollTo.substring(0, scrollTo.length - 1);
-  }
+    spinner(false);
+  }, 0);
 }
 
 function clearSearch() {
@@ -50,6 +59,7 @@ function search(needle) {
           if (needle === '*') {
             setTimeout(() => browseScroll(), 0);
           } else {
+            $('#search-result').removeClass('hidden');
             let scrollable = $('#player .popup-body');
             scrollable[0].scrollTop = 0;
           }
@@ -70,6 +80,7 @@ function initSearch() {
     let form = $('#search-form')[0];
     let browsing = !!form.val('browse');
     if (!browsing || !searchResult) {
+      $('#search-result .result-line').removeClass('spotted');
       search(browsing ? '*' : needle);
     } else if (browsing) {
       if (needle.length) {
@@ -138,6 +149,7 @@ function bulkUpdate(players) {
 }
 
 function navigateResults(ev) {
+  console.log(`searchHighlight = ${searchHighlight}`);
   let lines = $('.result-line');
   lines.removeClass('highlighted');
   searchHighlight = Math.max(searchHighlight, 0);
@@ -158,9 +170,11 @@ function navigateResults(ev) {
       scrollContainer.scrollTop += (bottom - scrollBottom);
     }
   }
-  ev.preventDefault();
-  ev.cancelBubble = true;
-  ev.stopPropagation();
+  if (ev) {
+    ev.preventDefault();
+    ev.cancelBubble = true;
+    ev.stopPropagation();
+  }
 }
 
 let tableSort;
@@ -362,6 +376,7 @@ onLoad(() => {
     if (resultLine) {
       let index = e.target.closest('.result-line').data('index');
       fillPlayer(searchResult[index]);
+      return;
     }
     let tab = document.location.hash;
     if (store('addingPlayers') && tab === '#registration') {