mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Merge pull request #206 from zoff-music/feature/pagination_search
Search pagination and animations
This commit is contained in:
Kasper Rynning-Tønnesen
GitHub
@@ -1272,12 +1272,26 @@ hide mdi-action-visibility mdi-action-visibility-off
|
||||
display:none;
|
||||
}
|
||||
|
||||
#inner-results {
|
||||
height: calc(100vh - 64px - 76px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#empty-results {
|
||||
text-align:center;
|
||||
height:100px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pagination-results {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination-results a {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#empty-results span {
|
||||
margin:auto;
|
||||
}
|
||||
@@ -2739,6 +2753,11 @@ nav ul li:hover, nav ul li.active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#inner-results {
|
||||
height: calc(100vh - 54px - 64px - 76px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#results{
|
||||
background-color: #000;
|
||||
margin-top:56px;
|
||||
|
||||
@@ -81,6 +81,7 @@ if(localStorage.debug === undefined){
|
||||
var image_timeout;
|
||||
var result_html;
|
||||
var empty_results_html;
|
||||
var pagination_buttons_html;
|
||||
var mobile_beginning;
|
||||
var timeout_search;
|
||||
var id;
|
||||
@@ -249,6 +250,7 @@ function init(){
|
||||
spotify_is_authenticated(spotify_authenticated);
|
||||
|
||||
result_html = $("#temp-results-container");
|
||||
pagination_buttons_html = $("<div>").append($(".pagination-results").clone()).html();
|
||||
empty_results_html = $("#empty-results-container").html();
|
||||
not_import_html = $(".not-imported-container").html();
|
||||
not_export_html = $(".not-exported-container").html();
|
||||
@@ -1026,6 +1028,15 @@ function seekToClick(e){
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on("click", ".pagination-results a", function(e) {
|
||||
e.preventDefault();
|
||||
var that = $(this);
|
||||
var pageToken = that.attr("data-pagination");
|
||||
var searchInput = that.attr("data-original-search");
|
||||
$(".pagination-results a").addClass("disabled");
|
||||
Search.search(searchInput, false, false, pageToken);
|
||||
});
|
||||
|
||||
$(document).on("click", ".accept-delete", function(e) {
|
||||
e.preventDefault();
|
||||
/*var delete_id = $(this).attr("data-video-id");
|
||||
@@ -1038,7 +1049,7 @@ $(document).on("click", ".accept-delete", function(e) {
|
||||
|
||||
$(document).keyup(function(event) {
|
||||
if(event.keyCode == 27){
|
||||
$("#results").html("");
|
||||
//$("#results").html("");
|
||||
if($("#search-wrapper").length != 0 && !Helper.contains($("#search-wrapper").attr("class").split(" "), "hide"))
|
||||
$("#search-wrapper").toggleClass("hide");
|
||||
if($("#song-title").length != 0 && Helper.contains($("#song-title").attr("class").split(" "), "hide"))
|
||||
@@ -1046,7 +1057,13 @@ $(document).keyup(function(event) {
|
||||
|
||||
if($("#search-btn i").html() == "close")
|
||||
{
|
||||
$("#results").slideUp({
|
||||
complete: function() {
|
||||
$("#results").empty();
|
||||
}
|
||||
});
|
||||
$("#search-btn i").html("search");
|
||||
$(".search_input").val("");
|
||||
}
|
||||
if($(".search-container").length != 0 && !Helper.contains($(".search-container").attr("class").split(" "), "hide")){
|
||||
$("#results").toggleClass("hide");
|
||||
|
||||
@@ -10,8 +10,14 @@ var Search = {
|
||||
$(".search_input").focus();
|
||||
}
|
||||
$("#song-title").toggleClass("hide");
|
||||
$("#results").empty();
|
||||
//$("#results").empty();
|
||||
if($("#search-btn i").html() == "close") {
|
||||
$("#results").slideUp({
|
||||
complete: function() {
|
||||
$("#results").empty();
|
||||
}
|
||||
});
|
||||
$(".search_input").val("");
|
||||
$("#search-btn i").html("search");
|
||||
} else {
|
||||
$("#search-btn i").html("close");
|
||||
@@ -20,19 +26,21 @@ var Search = {
|
||||
|
||||
},
|
||||
|
||||
search: function(search_input, retried, related){
|
||||
search: function(search_input, retried, related, pagination){
|
||||
if(result_html === undefined || empty_results_html === undefined) {
|
||||
result_html = $("#temp-results-container");
|
||||
empty_results_html = $("#empty-results-container").html();
|
||||
}
|
||||
$(".search_results").html('');
|
||||
if(!pagination && $("#inner-results").length == 0) {
|
||||
$(".search_results").html('');
|
||||
}
|
||||
if(search_input !== ""){
|
||||
searching = true;
|
||||
var keyword= encodeURIComponent(search_input);
|
||||
var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25";
|
||||
var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id&type=video&order=viewCount&safeSearch=none&maxResults=25";
|
||||
yt_url+="&q="+keyword;
|
||||
if(music)yt_url+="&videoCategoryId=10";
|
||||
|
||||
if(pagination) yt_url += "&pageToken=" + pagination;
|
||||
var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
|
||||
if(related) {
|
||||
var yt_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId="+keyword+"&type=video&key="+api_key;
|
||||
@@ -50,9 +58,11 @@ var Search = {
|
||||
url: yt_url,
|
||||
dataType:"jsonp",
|
||||
success: function(response){
|
||||
var nextPageToken = response.nextPageToken;
|
||||
var prevPageToken = response.prevPageToken;
|
||||
if(response.items.length === 0) {
|
||||
|
||||
$("<div style='display:none;' id='mock-div'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
|
||||
$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
|
||||
if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active"))
|
||||
$(".search_loader_spinner").removeClass("active");
|
||||
|
||||
@@ -105,9 +115,34 @@ var Search = {
|
||||
}
|
||||
}
|
||||
});
|
||||
var fresh = false;
|
||||
if($("#inner-results").length == 0) {
|
||||
fresh = true;
|
||||
}
|
||||
$(".search_results").empty();
|
||||
if(output.length > 0) {
|
||||
if(!pagination && fresh) {
|
||||
$(".search_results").css("display", "none");
|
||||
}
|
||||
$("#results").append(pagination_buttons_html);
|
||||
$("<div id='inner-results'>"+output+"</div>").prependTo($("#results"));
|
||||
if(!pagination && fresh) {
|
||||
$(".search_results").slideDown();
|
||||
}
|
||||
|
||||
$("<div style='display:none;' id='mock-div'>"+output+"</div>").appendTo($("#results")).show("blind", (response.items.length-1) * 83.33);
|
||||
|
||||
if(nextPageToken) {
|
||||
$(".next-results-button").attr("data-pagination", nextPageToken);
|
||||
} else {
|
||||
$(".next-results-button").addClass("disabled");
|
||||
}
|
||||
if(prevPageToken) {
|
||||
$(".prev-results-button").attr("data-pagination", prevPageToken);
|
||||
} else {
|
||||
$(".prev-results-button").addClass("disabled");
|
||||
}
|
||||
|
||||
$(".pagination-results a").attr("data-original-search", search_input);
|
||||
|
||||
//setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250);
|
||||
|
||||
@@ -122,7 +157,7 @@ var Search = {
|
||||
} else if(!retried){
|
||||
Search.search(search_input, true);
|
||||
} else {
|
||||
$("<div style='display:none;' id='mock-div'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
|
||||
$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
|
||||
if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active"))
|
||||
$(".search_loader_spinner").removeClass("active");
|
||||
}
|
||||
|
||||
@@ -75,6 +75,10 @@
|
||||
<span class="valign">No results found..</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-results">
|
||||
<a href="#" class="btn waves-effect waves-light prev-results-button orange">Prev</a>
|
||||
<a href="#" class="btn waves-effect waves-light next-results-button orange">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user