Added a search in list function on CTRL/cmd + F

public/css/style.css

@@ -660,6 +660,20 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 }
 
+#find_div{
+  position: absolute;
+  background: #282828;
+  z-index: 1;
+  width: 100%;
+  padding: 0 15px;
+  top: 0;
+  color: white;
+}
+
+.highlight{
+  background: rgba(255, 255, 255, 0.2) !important;
+}
+
 .room-namer::-webkit-input-placeholder{
   /*color:rgb(155, 155, 155) !important;*/
   -webkit-transition:opacity 0.5s;

public/js/list.js

@@ -154,6 +154,30 @@ var List = {
 		$("#wrapper").css("opacity", "1");
     },
 
+    dynamicContentPageJumpTo: function(page){
+        page = page * 11;
+      if(page > List.page || page < List.page){
+        $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
+        List.page = page;
+        $("#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");
+        }
+
+        $("#pageNumber").html((List.page / List.can_fit) + 1);
+      }
+    },
+
     dynamicContentPage: function(way){
         if(way == 1){
             $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();

public/js/listeners.js

@@ -43,6 +43,8 @@ var color               = "808080";
 var find_start          = false;
 var find_started        = false;
 var chromecastReady = false;
+var found_array = [];
+var found_array_index = 0;
 var castSession;
 
 if(localStorage.debug === undefined){
@@ -1057,24 +1059,34 @@ $(document).on("click", "#bottom-button", function(){
 	List.scrollBottom();
 });
 
-/*
+
 $(document).keydown(function(event) {
     //console.log(find_start);
     //console.log(event.keyCode);
+    if(window.location.pathname != "/"){
         if(event.keyCode == 91 || event.keyCode == 17){
             find_start = true;
         } else if(find_start && event.keyCode == 70){
             find_start = false;
             find_started = !find_started;
-        //event.preventDefault();
+            event.preventDefault();
             if(find_started){
                 console.log("time to search");
+                $("#find_div").toggleClass("hide");
+                $("#find_input").focus();
             } else {
                 console.log("abort search");
+                $("#find_div").toggleClass("hide");
+                $("#find_input").val("");
+                $("#find_input").blur();
+                $(".highlight").removeClass("highlight");
+                found_array = [];
+                found_array_index = 0;
             }
         } else {
             find_start = false;
         }
+    }
 });
 
 $(document).keyup(function(event){
@@ -1082,7 +1094,36 @@ $(document).keyup(function(event){
         find_start = false;
     }
 });
-*/
+
+$(document).on("submit", "#find_form", function(e){
+    e.preventDefault();
+    if(found_array.length == 0){
+        var that = this;
+        found_array_index = 0;
+        /*var result = $.grep(full_playlist, function(v,i) {
+            return v.title.toLowerCase().indexOf(that.find_value.value.toLowerCase()) >= 0;
+        });*/
+        found_array = $.map(full_playlist, function(obj, index) {
+            if(obj.title.toLowerCase().indexOf(that.find_value.value.toLowerCase()) >= 0) {
+                return index;
+            }
+        });
+    } else {
+        found_array_index = found_array_index + 1;
+        if(found_array.length - 1 < found_array_index){
+            found_array_index = 0;
+        }
+    }
+    if(found_array.length > 0 && found_array[found_array_index] != full_playlist.length - 1){
+        $(".highlight").removeClass("highlight");
+        var jump_to_page = Math.floor(found_array[found_array_index] / List.can_fit);
+        $($("#wrapper").children()[found_array[found_array_index]]).addClass("highlight");
+        List.dynamicContentPageJumpTo(jump_to_page);
+    } else {
+        Helper.log("none found");
+    }
+});
+
 
 function share_link_modifier_channel(){
 	$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.no/" + chan.toLowerCase());

public/php/channel.php

@@ -231,6 +231,11 @@
                 <li class="tab col s3"><a class="playlist-tab-links suggested-link" href="#suggestions">Suggested</a></li>
                 <li class="tab col s3"><a class="playlist-tab-links chat-link" href="#chat">Chat</a></li>
               </ul>
+              <div id="find_div" class="hide">
+                <form id="find_form">
+                  <input type="text" name="find_value" placeholder="Find.." id="find_input" autocomplete="off" />
+                </form>
+              </div>
                 <div id="wrapper" class="tabs_height">
                     <div id="list-song-html">
                         <div id="list-song" class="card left-align list-song">