Skip to content

Commit 9d9853d

Browse files
GDColonGDColon
committed
GDPS list is getting big so here's pagination
1 parent 512b556 commit 9d9853d

File tree

2 files changed

+54
-22
lines changed

2 files changed

+54
-22
lines changed

‎html/gdps.html

+52-20
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ <h2 class="smaller center" style="font-size: 5.5vh">Add server</h2>
3030
</div>
3131
</div>
3232

33-
<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh">
34-
<div style="height: 4.5%"></div>
35-
</div>
33+
<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh"></div>
3634

3735
<div class="epicbox supercenter gs" style="width: 126vh; height: 80%; pointer-events: none"></div>
3836

@@ -48,6 +46,14 @@ <h1 class="pre" id="header">GD Private Servers</h1>
4846
<img class="spin noSelect" src="../assets/loading.png" height="105%">
4947
</div>
5048

49+
<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
50+
<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" style="display: none"; height="90%">
51+
</div>
52+
53+
<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
54+
<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" style="display: none"; height="90%">
55+
</div>
56+
5157
<div style="position:absolute; top: 3%; right: 2%; text-align: right; width: 20%;">
5258
<img id="plusButton" class="inline gdButton" src="../assets/plus.png" width="25%" onclick="$('#infoDiv').show()">
5359
</div>
@@ -60,29 +66,55 @@ <h1 class="pre" id="header">GD Private Servers</h1>
6066
<script type="text/javascript" src="../dragscroll.js"></script>
6167
<script>
6268

69+
let pageSize = 20
70+
let page = 1
6371
let localhost = window.location.hostname == "localhost"
6472
let host = window.location.host.split(".").slice(-2).join(".")
73+
6574
Fetch('../api/gdps').then(servers => {
6675

67-
servers.forEach(x => {
76+
let currentServer = servers.find(x => x.id == gdps)
77+
servers = [currentServer].concat(servers.filter(x => x.id != gdps)).filter(x => x)
78+
let pageCount = Math.floor((servers.length-1)/pageSize) + 1
79+
80+
function listServers() {
81+
82+
if (page >= pageCount) $('#pageUp').hide()
83+
else $('#pageUp').show()
84+
if (page <= 1) $('#pageDown').hide()
85+
else $('#pageDown').show()
86+
87+
let serverPage = servers.slice((page-1)*pageSize, (page-1)*pageSize + pageSize)
88+
$('#searchBox').html('<div style="height: 4.5%"></div>').scrollTop(0)
89+
90+
serverPage.forEach(x => {
91+
$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
92+
<h1 class="lessspaced blue" style="color: ${(gdps || "") == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
93+
<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
6894
69-
if (!x.id) x.id = null
70-
$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
71-
<h1 class="lessspaced blue" style="color: ${gdps == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
72-
<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
73-
74-
<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
75-
<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
76-
</div>
77-
78-
<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
79-
<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>
80-
</div>
81-
</div>`)
82-
})
83-
84-
$('#searchBox').append('<div style="height: 4%"></div>')
95+
<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
96+
<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
97+
</div>
98+
99+
<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
100+
<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>
101+
</div>
102+
</div>`)
103+
})
104+
$('#searchBox').append('<div style="height: 4.5%"></div>')
105+
}
106+
107+
listServers()
108+
109+
$('#pageUp').click(function() {page++; listServers()})
110+
$('#pageDown').click(function() {page--; listServers()})
85111
$('#loading').hide();
112+
113+
$(document).keydown(function(k) {
114+
if (k.which == 37 && $('#pageDown').is(":visible")) $('#pageDown').trigger('click') // left
115+
if (k.which == 39 && $('#pageUp').is(":visible")) $('#pageUp').trigger('click') // right
116+
});
117+
86118
})
87119

88120
</script>

‎html/search.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@ <h2 class="smaller" style="font-size: 4.5vh" id="pagenum"></h2>
9292
</div>
9393

9494
<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
95-
<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" height="90%">
95+
<img class="gdButton" id="pageDown" style="display: none"; src="../assets/arrow-left.png" height="90%">
9696
</div>
9797

9898
<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
99-
<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" height="90%">
99+
<img class="gdButton" id="pageUp" style="display: none"; src="../assets/arrow-right.png" height="90%">
100100
</div>
101101

102102
<div class="supercenter" id="loading" style="height: 10%; top: 47%; display: none;">

0 commit comments

Comments
 (0)