serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

GDPS list is getting big so here's pagination

Browse source
This commit is contained in:
GDColon 2021-08-09 00:38:05 -04:00
parent 512b556f9c
commit 9d9853dec3
2 changed files with 52 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
html/gdps.html
View file

@ -30,9 +30,7 @@
</div>
</div>
<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh">
<div style="height: 4.5%"></div>
</div>
<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh"></div>
<div class="epicbox supercenter gs" style="width: 126vh; height: 80%; pointer-events: none"></div>
@ -48,6 +46,14 @@
<img class="spin noSelect" src="../assets/loading.png" height="105%">
</div>
<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" style="display: none"; height="90%">
</div>
<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" style="display: none"; height="90%">
</div>
<div style="position:absolute; top: 3%; right: 2%; text-align: right; width: 20%;">
<img id="plusButton" class="inline gdButton" src="../assets/plus.png" width="25%" onclick="$('#infoDiv').show()">
</div>
@ -60,29 +66,55 @@
<script type="text/javascript" src="../dragscroll.js"></script>
<script>
let pageSize = 20
let page = 1
let localhost = window.location.hostname == "localhost"
let host = window.location.host.split(".").slice(-2).join(".")
Fetch('../api/gdps').then(servers => {
servers.forEach(x => {
let currentServer = servers.find(x => x.id == gdps)
servers = [currentServer].concat(servers.filter(x => x.id != gdps)).filter(x => x)
let pageCount = Math.floor((servers.length-1)/pageSize) + 1
function listServers() {
if (page >= pageCount) $('#pageUp').hide()
else $('#pageUp').show()
if (page <= 1) $('#pageDown').hide()
else $('#pageDown').show()
let serverPage = servers.slice((page-1)*pageSize, (page-1)*pageSize + pageSize)
$('#searchBox').html('<div style="height: 4.5%"></div>').scrollTop(0)
serverPage.forEach(x => {
$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
<h1 class="lessspaced blue" style="color: ${(gdps || "") == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
if (!x.id) x.id = null
$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
<h1 class="lessspaced blue" style="color: ${gdps == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
</div>
<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
<a href="http://${x.id || ""}${x.id && localhost ? ".x" : ""}${x.id ? "." : ""}${host}"><img style="margin-bottom: 4.5%" class="valign gdButton" src="../assets/view.png" height="105%"></a>
</div>
</div>`)
})
$('#searchBox').append('<div style="height: 4.5%"></div>')
}
<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
</div>
<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
<a href="http://${x.id || ""}${x.id && localhost ? ".x" : ""}${x.id ? "." : ""}${host}"><img style="margin-bottom: 4.5%" class="valign gdButton" src="../assets/view.png" height="105%"></a>
</div>
</div>`)
})
listServers()
$('#searchBox').append('<div style="height: 4%"></div>')
$('#pageUp').click(function() {page++; listServers()})
$('#pageDown').click(function() {page--; listServers()})
$('#loading').hide();
$(document).keydown(function(k) {
if (k.which == 37 && $('#pageDown').is(":visible")) $('#pageDown').trigger('click') // left
if (k.which == 39 && $('#pageUp').is(":visible")) $('#pageUp').trigger('click') // right
});
})
</script>

4
html/search.html
View file

@ -92,11 +92,11 @@
</div>
<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" height="90%">
<img class="gdButton" id="pageDown" style="display: none"; src="../assets/arrow-left.png" height="90%">
</div>
<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" height="90%">
<img class="gdButton" id="pageUp" style="display: none"; src="../assets/arrow-right.png" height="90%">
</div>
<div class="supercenter" id="loading" style="height: 10%; top: 47%; display: none;">