mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Buttons top and bottom for filtering pagination
This commit is contained in:
@@ -386,11 +386,18 @@ li.disabled span {
|
|||||||
.filter-pagination-container {
|
.filter-pagination-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
padding-top: 15px;
|
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-filter-container {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-filter-container {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.extra-button{
|
.extra-button{
|
||||||
margin: 0 4px !important;
|
margin: 0 4px !important;
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
|
|||||||
@@ -37,22 +37,11 @@ function filterPlaylistElements(page) {
|
|||||||
var json = JSON.parse(data);
|
var json = JSON.parse(data);
|
||||||
document.querySelector(".filter-results").innerHTML = "";
|
document.querySelector(".filter-results").innerHTML = "";
|
||||||
if(json.results.search_results.length > 0) {
|
if(json.results.search_results.length > 0) {
|
||||||
|
addFilterButtons("top", json);
|
||||||
for(var i = 0; i < json.results.search_results.length; i++) {
|
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);;
|
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) {
|
addFilterButtons("bottom", json);
|
||||||
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>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
toast("Couldn't find any items with those tags..", "red");
|
toast("Couldn't find any items with those tags..", "red");
|
||||||
document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
|
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() {
|
function say_updated() {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
before_toast();
|
before_toast();
|
||||||
|
|||||||
@@ -710,6 +710,9 @@ function addDynamicListeners() {
|
|||||||
var page = e.getAttribute("data-page");
|
var page = e.getAttribute("data-page");
|
||||||
page = parseInt(page);
|
page = parseInt(page);
|
||||||
if(page == undefined || isNaN(page)) return;
|
if(page == undefined || isNaN(page)) return;
|
||||||
|
e.classList.remove("next-filter");
|
||||||
|
e.classList.remove("orange");
|
||||||
|
e.className += " disabled";
|
||||||
filterPlaylistElements(page);
|
filterPlaylistElements(page);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -718,6 +721,9 @@ function addDynamicListeners() {
|
|||||||
var page = e.getAttribute("data-page");
|
var page = e.getAttribute("data-page");
|
||||||
page = parseInt(page);
|
page = parseInt(page);
|
||||||
if(page == undefined || isNaN(page)) return;
|
if(page == undefined || isNaN(page)) return;
|
||||||
|
e.classList.remove("prev-filter");
|
||||||
|
e.classList.remove("orange");
|
||||||
|
e.className += " disabled";
|
||||||
filterPlaylistElements(page);
|
filterPlaylistElements(page);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user