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

Review search scroll behavior

Browse Source
This commit is contained in:
Claude Brisson
2024-04-10 20:56:03 +02:00
parent f155c5340e
commit af8de00a49
3 changed files with 98 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,17 +118,35 @@
}
}
#player-form {
&:not(.add) {
#player {
&.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;

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

@@ -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');

115
view-webapp/src/main/webapp/tour-registration.inc.html
View File

@@ -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>