Search pagination and animations

- Added previous and next button at the end of searches, and styled the buttons
- Added so buttons only work when there are a previous or next page, depending on what is clicked
- Added a pretty and better way of showing the search with animations

server/public/assets/css/style.css

@@ -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;

server/public/assets/js/listeners.js

@@ -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");

server/public/assets/js/search.js

@@ -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();
         }
+        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");
                                 }

server/public/partials/channel/header.handlebars

@@ -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>