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

Trying some new sizing of playlist, removing scroll form playlist, only pagination

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-11-20 14:55:51 +01:00
parent d52c169873
commit 7e950ea734
5 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/style.css
View File

@@ -1302,10 +1302,14 @@ nav ul li:hover, nav ul li.active {
} }
#del, #del_suggested, #del_user_suggested{ #del, #del_suggested, #del_user_suggested{
height: 100%; position: absolute;
line-height: normal; text-align: right;
padding: 2px 12px; bottom: -72%;
color:white; left: 0%;
height: 100%;
line-height: normal;
padding: 2px 12px;
color: white;
} }
.result { .result {

2
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

66
static/js/list.js
View File

@@ -2,9 +2,12 @@ var List = {
empty: false, empty: false,
page: 0, page: 0,
can_fit: Math.round(($("#wrapper").height()) / 71),
element_height: (($("#wrapper").height()) / Math.round(($("#wrapper").height()) / 71)) - 25,
channel_function: function(msg) channel_function: function(msg)
{ {
switch(msg.type) switch(msg.type)
{ {
case "list": case "list":
@@ -47,7 +50,7 @@ var List = {
var i = List.getIndexOfSong(song_info.id); var i = List.getIndexOfSong(song_info.id);
var display = "none"; var display = "none";
if(!song_info.now_playing){ if(!song_info.now_playing){
if(i >= List.page && i < List.page + 19) display = "block" if(i >= List.page && i < List.page + (List.can_fit-1)) display = "block"
var add = List.generateSong(song_info, transition, false, true, false, display, false); var add = List.generateSong(song_info, transition, false, true, false, display, false);
if(i === 0) { if(i === 0) {
$("#wrapper").prepend(add); $("#wrapper").prepend(add);
@@ -56,16 +59,16 @@ var List = {
} }
var added = $("#wrapper").children()[i]; var added = $("#wrapper").children()[i];
$(added).css("display", display); $(added).css("display", display);
if(display == "block" && $("#wrapper").children().length >= List.page + 21){ if(display == "block" && $("#wrapper").children().length >= List.page + List.can_fit + 1){
$($("#wrapper").children()[List.page + 20]).css("display", "none"); $($("#wrapper").children()[List.page + List.can_fit]).css("display", "none");
} else if(i < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){ } else if(i < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
$($("#wrapper").children()[List.page - 1]).css("display", "block"); $($("#wrapper").children()[List.page - 1]).css("display", "block");
} else if($("#wrapper").children().length > List.page + 20){ } else if($("#wrapper").children().length > List.page + List.can_fit){
$($("#wrapper").children()[List.page + 20]).css("display", "block"); $($("#wrapper").children()[List.page + List.can_fit]).css("display", "block");
} }
if(transition){ if(transition){
setTimeout(function(){ setTimeout(function(){
$(added).css("height", 66); $(added).css("height", List.element_height);
},5); },5);
} }
} }
@@ -73,9 +76,15 @@ var List = {
populate_list: function(msg) populate_list: function(msg)
{ {
if(!Helper.mobilecheck()){
List.can_fit = Math.round(($("#wrapper").height()) / 71)+1;
List.element_height = (($("#wrapper").height()) / List.can_fit)-6;
} else {
List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() -66) / 71)+1;
List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() -66) / List.can_fit)-6;
}
if(list_html === undefined) list_html = $("#list-song-html").html(); if(list_html === undefined) list_html = $("#list-song-html").html();
full_playlist = msg; full_playlist = msg;
List.can_fit = (($("main").height()) / 66);
List.sortList(); List.sortList();
$("#wrapper").empty(); $("#wrapper").empty();
@@ -91,7 +100,7 @@ var List = {
$("#wrapper").append(List.generateSong(current_song, false, lazy_load, true, false, "", true)); $("#wrapper").append(List.generateSong(current_song, false, lazy_load, true, false, "", true));
} }
}); });
if($("#wrapper").children().length > 20 && !$("#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="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");
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
$(".next_page_hide").css("display","none"); $(".next_page_hide").css("display","none");
@@ -130,23 +139,23 @@ var List = {
dynamicContentPage: function(way){ dynamicContentPage: function(way){
if(way == 1){ if(way == 1){
$("#wrapper").children().slice(List.page, List.page + 20).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page + 20; List.page = List.page + List.can_fit;
$("#wrapper").children().slice(List.page, List.page + 20).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
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");
} }
if(List.page + 20 >= $("#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");
} }
//$("#wrapper").scrollTop(0); //$("#wrapper").scrollTop(0);
} else { } else {
$("#wrapper").children().slice(List.page - 20, List.page).show(); $("#wrapper").children().slice(List.page - List.can_fit, List.page).show();
$("#wrapper").children().slice(List.page, List.page + 20).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page - 20; List.page = List.page - List.can_fit;
//$("#wrapper").scrollTop(0); //$("#wrapper").scrollTop(0);
if(List.page == 0 && !$(".prev_page").hasClass("hide")){ if(List.page == 0 && !$(".prev_page").hasClass("hide")){
$(".prev_page").toggleClass("hide"); $(".prev_page").toggleClass("hide");
@@ -157,12 +166,12 @@ var List = {
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
} }
if(List.page + 20 < $("#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");
} }
} }
$("#pageNumber").html((List.page / 20) + 1); $("#pageNumber").html((List.page / List.can_fit) + 1);
}, },
added_song: function(added){ added_song: function(added){
@@ -182,7 +191,7 @@ var List = {
} }
$("#empty-channel-message").remove(); $("#empty-channel-message").remove();
List.insertAtIndex(added, true); List.insertAtIndex(added, true);
if($("#wrapper").children().length > List.page + 20){ if($("#wrapper").children().length > List.page + List.can_fit){
$(".next_page_hide").css("display", "none"); $(".next_page_hide").css("display", "none");
$(".next_page").removeClass("hide"); $(".next_page").removeClass("hide");
$(".next_page").css("display", "inline-block"); $(".next_page").css("display", "inline-block");
@@ -205,12 +214,12 @@ var List = {
full_playlist.splice(List.getIndexOfSong(deleted), 1); full_playlist.splice(List.getIndexOfSong(deleted), 1);
if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){ if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
$($("#wrapper").children()[List.page - 1]).css("display", "block"); $($("#wrapper").children()[List.page - 1]).css("display", "block");
} else if($("#wrapper").children().length > List.page + 19){ } else if($("#wrapper").children().length > List.page + (List.can_fit-1)){
$($("#wrapper").children()[List.page + 19]).css("display", "block"); $($("#wrapper").children()[List.page + (List.can_fit - 1)]).css("display", "block");
} }
if(List.page >= $("#wrapper").children().length){ if(List.page >= $("#wrapper").children().length){
List.dynamicContentPage(-1); List.dynamicContentPage(-1);
} else if(List.page + 20 >= $("#wrapper").children().length){ } else 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");
} }
@@ -225,8 +234,8 @@ var List = {
$("#wrapper").children()[$("#wrapper").children().length-1].remove(); $("#wrapper").children()[$("#wrapper").children().length-1].remove();
if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){ if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
$($("#wrapper").children()[List.page - 1]).css("display", "block"); $($("#wrapper").children()[List.page - 1]).css("display", "block");
} else if($("#wrapper").children().length > List.page + 20){ } else if($("#wrapper").children().length > List.page + List.can_fit){
$($("#wrapper").children()[List.page + 19]).css("display", "block"); $($("#wrapper").children()[List.page + (List.can_fit - 1)]).css("display", "block");
} }
if(chromecastAvailable){ if(chromecastAvailable){
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
@@ -239,7 +248,7 @@ var List = {
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
} }
$("#suggested-"+deleted).remove(); $("#suggested-"+deleted).remove();
if(List.page + 20 < $("#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");
} }
@@ -282,8 +291,8 @@ var List = {
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
} }
List.insertAtIndex(full_playlist[length-1], false); List.insertAtIndex(full_playlist[length-1], false);
if($("#wrapper").children().length >= List.page + 20){ if($("#wrapper").children().length >= List.page + List.can_fit){
$($("#wrapper").children()[List.page + 20]).css("display", "block"); $($("#wrapper").children()[List.page + List.can_fit]).css("display", "block");
} }
}catch(e){} }catch(e){}
@@ -430,8 +439,9 @@ var List = {
var attr; var attr;
var del_attr; var del_attr;
//song.find(".list-song");
if(transition) song.find("#list-song").css("height", 0); if(transition) song.find("#list-song").css("height", 0);
else song.find(".list-song").css("height", List.element_height);
if(!w_p) song.find(".card-action").removeClass("hide"); if(!w_p) song.find(".card-action").removeClass("hide");
if(video_votes == 1)song.find(".vote-text").text("vote"); if(video_votes == 1)song.find(".vote-text").text("vote");
if(lazy){ if(lazy){
@@ -443,7 +453,7 @@ var List = {
song.find(".list-votes").text(video_votes); song.find(".list-votes").text(video_votes);
song.find("#list-song").attr("id", video_id); song.find("#list-song").attr("id", video_id);
song.find(".vote-container").attr("title", video_title); song.find(".vote-container").attr("title", video_title);
if((($("#wrapper").children().length >= 20) && initial) || display == "none"){ if((($("#wrapper").children().length >= List.can_fit) && initial) || display == "none"){
song.find(".card").css("display", "none"); song.find(".card").css("display", "none");
} }
attr = ".vote-container"; attr = ".vote-container";

5
static/js/listeners.js
View File

@@ -857,6 +857,11 @@ $(document).on("click", "#closeSettings", function(e)
Admin.hide_settings(); Admin.hide_settings();
}); });
$(window).resize(function(){
List.element_height = (($("#wrapper").height()) / List.can_fit)-6;
$(".list-song").css("height", List.element_height + "px");
})
$(document).on( "click", ".result-object", function(e){ $(document).on( "click", ".result-object", function(e){
var $html = $(e.target); var $html = $(e.target);
var substr = $html.prop('outerHTML').substring(0,4); var substr = $html.prop('outerHTML').substring(0,4);