nikola/pairgoth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Make A-Z browsing a toggle button, review results highlighting

Browse Source
This commit is contained in:
Claude Brisson
2024-05-24 10:35:53 +02:00
parent bed49a2be9
commit 48d22d5178
3 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
view-webapp/src/main/sass/tour.scss
View File

@@ -194,7 +194,10 @@
&:hover { &:hover {
background-color: rgba(100, 200, 255, 0.44); 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); background-color: rgba(100,200,255,1);
} }
} }

2
view-webapp/src/main/webapp/js/domhelper.js
View File

@@ -159,7 +159,7 @@ NodeList.prototype.clear = function() {
return this; return this;
} }
Element.prototype.clear = function() { Element.prototype.clear = function() {
this.innerHTML = ''; while (this.firstChild) this.removeChild(this.lastChild);
return this; return this;
} }

37
view-webapp/src/main/webapp/js/tour-registration.inc.js
View File

@@ -11,15 +11,24 @@ function searchResultShown() {
} }
function browseScroll() { function browseScroll() {
let scrollTo = $('#needle')[0].value.trim(); spinner(true);
while (scrollTo.length > 0) { setTimeout(() => {
let target = $(`#search-result .result-line[data-name^="${scrollTo}"i]`); $('#search-result .result-line').removeClass('spotted');
if (target.length > 0) { let scrollTo = $('#needle')[0].value.trim();
target[0].scrollIntoView({behavior: "smooth", block: "center"}); while (scrollTo.length > 0) {
break; 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() { function clearSearch() {
@@ -50,6 +59,7 @@ function search(needle) {
if (needle === '*') { if (needle === '*') {
setTimeout(() => browseScroll(), 0); setTimeout(() => browseScroll(), 0);
} else { } else {
$('#search-result').removeClass('hidden');
let scrollable = $('#player .popup-body'); let scrollable = $('#player .popup-body');
scrollable[0].scrollTop = 0; scrollable[0].scrollTop = 0;
} }
@@ -70,6 +80,7 @@ function initSearch() {
let form = $('#search-form')[0]; let form = $('#search-form')[0];
let browsing = !!form.val('browse'); let browsing = !!form.val('browse');
if (!browsing || !searchResult) { if (!browsing || !searchResult) {
$('#search-result .result-line').removeClass('spotted');
search(browsing ? '*' : needle); search(browsing ? '*' : needle);
} else if (browsing) { } else if (browsing) {
if (needle.length) { if (needle.length) {
@@ -138,6 +149,7 @@ function bulkUpdate(players) {
} }
function navigateResults(ev) { function navigateResults(ev) {
console.log(`searchHighlight = ${searchHighlight}`);
let lines = $('.result-line'); let lines = $('.result-line');
lines.removeClass('highlighted'); lines.removeClass('highlighted');
searchHighlight = Math.max(searchHighlight, 0); searchHighlight = Math.max(searchHighlight, 0);
@@ -158,9 +170,11 @@ function navigateResults(ev) {
scrollContainer.scrollTop += (bottom - scrollBottom); scrollContainer.scrollTop += (bottom - scrollBottom);
} }
} }
ev.preventDefault(); if (ev) {
ev.cancelBubble = true; ev.preventDefault();
ev.stopPropagation(); ev.cancelBubble = true;
ev.stopPropagation();
}
} }
let tableSort; let tableSort;
@@ -362,6 +376,7 @@ onLoad(() => {
if (resultLine) { if (resultLine) {
let index = e.target.closest('.result-line').data('index'); let index = e.target.closest('.result-line').data('index');
fillPlayer(searchResult[index]); fillPlayer(searchResult[index]);
return;
} }
let tab = document.location.hash; let tab = document.location.hash;
if (store('addingPlayers') && tab === '#registration') { if (store('addingPlayers') && tab === '#registration') {