KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Buttons top and bottom for filtering pagination

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2019-03-02 13:34:18 +01:00
parent 1c05a1c3b2
commit c22a7cf32b
3 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
server/public/assets/css/style.css
View File

@@ -386,11 +386,18 @@ li.disabled span {
.filter-pagination-container {
display: flex;
justify-content: space-evenly;
padding-top: 15px;
width: 50%;
margin: auto;
}
.bottom-filter-container {
padding-top: 15px;
}
.top-filter-container {
padding-bottom: 15px;
}
.extra-button{
margin: 0 4px !important;
padding: 0px !important;

31
server/public/assets/js/functions.js
View File

@@ -37,22 +37,11 @@ function filterPlaylistElements(page) {
var json = JSON.parse(data);
document.querySelector(".filter-results").innerHTML = "";
if(json.results.search_results.length > 0) {
addFilterButtons("top", json);
for(var i = 0; i < json.results.search_results.length; i++) {
document.querySelector(".filter-results").innerHTML += List.generateSong(json.results.search_results[i], false, false, true, false, "block", false, true);;
}
if(json.results.next != undefined || json.results.prev != undefined) {
document.querySelector(".filter-results").innerHTML += "<div class='filter-pagination-container'></div>"
if(json.results.prev != undefined) {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange prev-filter' data-page='" + json.results.prev + "'>Prev</a>";
} else {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange disabled'>Prev</a>";
}
if(json.results.next != undefined) {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange next-filter' data-page='" + json.results.next + "'>Next</a>";
} else {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange disabled'>Next</a>";
}
}
addFilterButtons("bottom", json);
} else {
toast("Couldn't find any items with those tags..", "red");
document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
@@ -66,6 +55,22 @@ function filterPlaylistElements(page) {
});
}
function addFilterButtons(position, json) {
if(json.results.next != undefined || json.results.prev != undefined) {
document.querySelector(".filter-results").innerHTML += "<div class='filter-pagination-container " + position + "-filter-container'></div>"
if(json.results.prev != undefined) {
document.querySelector("." + position + "-filter-container").innerHTML += "<a href='#' class='btn orange prev-filter' data-page='" + json.results.prev + "'>Prev</a>";
} else {
document.querySelector("." + position + "-filter-container").innerHTML += "<a href='#' class='btn orange disabled'>Prev</a>";
}
if(json.results.next != undefined) {
document.querySelector("." + position + "-filter-container").innerHTML += "<a href='#' class='btn orange next-filter' data-page='" + json.results.next + "'>Next</a>";
} else {
document.querySelector("." + position + "-filter-container").innerHTML += "<a href='#' class='btn orange disabled'>Next</a>";
}
}
}
function say_updated() {
setTimeout(function() {
before_toast();

6
server/public/assets/js/listeners.js
View File

@@ -710,6 +710,9 @@ function addDynamicListeners() {
var page = e.getAttribute("data-page");
page = parseInt(page);
if(page == undefined || isNaN(page)) return;
e.classList.remove("next-filter");
e.classList.remove("orange");
e.className += " disabled";
filterPlaylistElements(page);
});
@@ -718,6 +721,9 @@ function addDynamicListeners() {
var page = e.getAttribute("data-page");
page = parseInt(page);
if(page == undefined || isNaN(page)) return;
e.classList.remove("prev-filter");
e.classList.remove("orange");
e.className += " disabled";
filterPlaylistElements(page);
});