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

Added first/last page buttons

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-11-21 09:41:41 +01:00
parent 3efc7109f5
commit 5536fbda96
5 changed files with 78 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/css/style.css
View File

@@ -38,11 +38,12 @@
padding:0; padding:0;
} }
.prev_page, .next_page{ .prev_page, .next_page, .last_page, .first_page{
cursor: pointer; cursor: pointer;
} }
.prev_page_hide, .next_page_hide{
.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
visibility: visible !important; visibility: visible !important;
color:gray; color:gray;
cursor:default; cursor:default;
@@ -63,11 +64,13 @@
margin: 0; margin: 0;
} }
.prev_page_hide, .prev_page{ .prev_page_hide, .prev_page, .first_page, .first_page_hide{
padding:0 10px;
float:left; float:left;
} }
.next_page_hide, .next_page{ .next_page_hide, .next_page, .last_page, .last_page_hide{
padding:0 10px;
float:right; float:right;
} }

3
static/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
static/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

59
static/js/list.js
View File

@@ -101,13 +101,17 @@ var List = {
} }
}); });
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){ if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){
$('<div id="pageButtons"><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper");
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
$(".first_page").toggleClass("hide");
$(".next_page_hide").css("display","none"); $(".next_page_hide").css("display","none");
$(".last_page_hide").css("display","none");
} else if(!$("#pageButtons").length){ } else if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper");
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
$(".next_page").toggleClass("hide"); $(".next_page").toggleClass("hide");
$(".last_page").toggleClass("hide");
$(".first_page").toggleClass("hide");
$(".next_page_hide").css("display","inline-block"); $(".next_page_hide").css("display","inline-block");
$(".prev_page_hide").css("display","inline-block"); $(".prev_page_hide").css("display","inline-block");
} }
@@ -125,9 +129,11 @@ var List = {
List.empty = true; List.empty = true;
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
if(!$("#pageButtons").length){ if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat">|<</span><a class="first_page waves-effect waves-light btn-flat">|<</a><span class="prev_page_hide btn-flat">< prev</span><a class="prev_page waves-effect waves-light btn-flat">< prev</a> <span id="pageNumber" class="btn-flat">1</span> <a class="last_page waves-effect waves-light btn-flat">>|</a><span class="last_page_hide btn-flat">>|</span><a class="next_page waves-effect waves-light btn-flat">next ></a><span class="next_page_hide btn-flat">next ></span></div>').insertAfter("#wrapper");
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
$(".next_page").toggleClass("hide"); $(".next_page").toggleClass("hide");
$(".last_page").toggleClass("hide");
$(".first_page").toggleClass("hide");
$(".next_page_hide").css("display","inline-block"); $(".next_page_hide").css("display","inline-block");
$(".prev_page_hide").css("display","inline-block"); $(".prev_page_hide").css("display","inline-block");
} }
@@ -145,13 +151,58 @@ var List = {
if(List.page > 0 && $(".prev_page").hasClass("hide")){ if(List.page > 0 && $(".prev_page").hasClass("hide")){
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
$(".first_page").toggleClass("hide");
$(".first_page_hide").css("display", "none");
} }
if(List.page + List.can_fit >= $("#wrapper").children().length){ if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block"); $(".next_page_hide").css("display", "inline-block");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block");
$(".last_page").css("display", "none");
} }
//$("#wrapper").scrollTop(0); //$("#wrapper").scrollTop(0);
} else if(way == 10){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = (Math.floor(($("#wrapper").children().length - 1)/ List.can_fit) * List.can_fit);
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page > 0 && $(".prev_page").hasClass("hide")){
$(".prev_page").toggleClass("hide");
$(".prev_page_hide").css("display", "none");
$(".first_page").toggleClass("hide");
$(".first_page_hide").css("display", "none");
}
if(List.page + List.can_fit >= $("#wrapper").children().length){
$(".next_page_hide").css("display", "inline-block");
$(".next_page").css("display", "none");
$(".last_page_hide").css("display", "inline-block");
$(".last_page").css("display", "none");
}
} else if(way==-10){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = 0;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
if(List.page == 0 && !$(".prev_page").hasClass("hide")){
$(".prev_page").toggleClass("hide");
$(".prev_page_hide").css("display", "inline-block");
$(".first_page").toggleClass("hide");
$(".first_page_hide").css("display", "inline-block");
} else if($(".prev_page").hasClass("hide")){
$(".prev_page_hide").css("display", "inline-block");
$(".first_page_hide").css("display", "inline-block");
} else {
$(".prev_page_hide").css("display", "none");
$(".first_page_hide").css("display", "none");
}
if(List.page + List.can_fit < $("#wrapper").children().length){
$(".next_page_hide").css("display", "none");
$(".next_page").css("display", "inline-block");
$(".last_page_hide").css("display", "none");
$(".last_page").css("display", "inline-block");
}
} else { } else {
$("#wrapper").children().slice(List.page - List.can_fit, List.page).show(); $("#wrapper").children().slice(List.page - List.can_fit, List.page).show();
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
@@ -169,6 +220,8 @@ var List = {
if(List.page + List.can_fit < $("#wrapper").children().length){ if(List.page + List.can_fit < $("#wrapper").children().length){
$(".next_page_hide").css("display", "none"); $(".next_page_hide").css("display", "none");
$(".next_page").css("display", "inline-block"); $(".next_page").css("display", "inline-block");
$(".last_page_hide").css("display", "none");
$(".last_page").css("display", "inline-block");
} }
} }
$("#pageNumber").html((List.page / List.can_fit) + 1); $("#pageNumber").html((List.page / List.can_fit) + 1);

10
static/js/listeners.js
View File

@@ -537,6 +537,16 @@ $(document).on("click", ".next_page", function(e){
List.dynamicContentPage(1); List.dynamicContentPage(1);
}); });
$(document).on("click", ".last_page", function(e){
e.preventDefault();
List.dynamicContentPage(10);
});
$(document).on("click", ".first_page", function(e){
e.preventDefault();
List.dynamicContentPage(-10);
});
$(document).on('click', '#toast-container', function(){ $(document).on('click', '#toast-container', function(){
$(".toast").fadeOut(function(){ $(".toast").fadeOut(function(){
$(".toast").remove(); $(".toast").remove();