From e7ca421c3d387469b9f40646cf0816329e4810e3 Mon Sep 17 00:00:00 2001 From: Nixo Date: Thu, 30 Oct 2014 23:17:40 +0100 Subject: [PATCH] Fixed search timer, can search with enter, can press ESC to quit search --- js/search.js | 199 +++++++++++++++++++++++++---------------------- static/style.css | 5 +- 2 files changed, 108 insertions(+), 96 deletions(-) diff --git a/js/search.js b/js/search.js index 013506f6..b514ea9c 100755 --- a/js/search.js +++ b/js/search.js @@ -1,102 +1,113 @@ +var old_input=""; +var timer = 0; + $(document).ready(function() - { +{ - $("#search").focus(); + $("#search").focus(); - $('#base').bind("keyup keypress", function(e) { - var code = e.keyCode || e.which; - if (code == 13) { - e.preventDefault(); - return false; - } - }); - var old_input=""; - $(".search_input").focus(); - setTimeout(function(){ - $(".search_input").keyup(function() + $('#base').bind("keyup keypress", function(e) { + var code = e.keyCode || e.which; + if (code == 13) { + e.preventDefault(); + return false; + } + }); + + $(".search_input").focus(); + $(".search_input").keyup(function(event) { + var search_input = $(this).val(); + if(search_input.length < 3){$("#results").html("");} + if(event.keyCode == 13){ + search(search_input); + }else if(event.keyCode == 27){ + $("#results").html(""); + }else{ + timer=100; + } + + + }); + + setInterval(function(){ + timer--; + if(timer==0){ + search($(".search_input").val()); + } + }, 1); +}); + + +function search(search_input){ + + + $("#results").html(''); + if(search_input != ""){ + var keyword= encodeURIComponent(search_input); + + var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=25&v=2&alt=jsonc'; + + $.ajax({ + type: "GET", + url: yt_url, + dataType:"jsonp", + success: function(response) { - var search_input = $(this).val(); - if(search_input.length < 3){ - $("#results").html(""); + if(response.data.items) + { + $.each(response.data.items, function(i,data) + { + if(data.duration > 720 && longS == 0){return;} + if(data["category"] == "Music" || music == 1){ + var video_title=encodeURIComponent(data.title).replace(/'/g, "\\\'"); + var views=data.viewCount; + var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg"; + var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60); + var finalhtml="
"+ + ""+ + "
"+data.title+""+ + "
"+views+" views • "+length+"
"; + //+data.uploader+" • "+ + $("#results").append(finalhtml); + } + }); } - - if(search_input != old_input){ - old_input=search_input; - $("#results").html(''); - if(search_input != ""){ - var keyword= encodeURIComponent(search_input); - - var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=25&v=2&alt=jsonc'; - - - $.ajax({ - type: "GET", - url: yt_url, - dataType:"jsonp", - success: function(response) - { - if(response.data.items) - { - $.each(response.data.items, function(i,data) - { - if(data.duration > 720 && longS == 0){return;} - if(data["category"] == "Music" || music == 1){ - var video_title=encodeURIComponent(data.title).replace(/'/g, "\\\'"); - var views=data.viewCount; - var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg"; - var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60); - var finalhtml="
"+ - ""+ - "
"+data.title+""+ - "
"+views+" views • "+length+"
"; - //+data.uploader+" • "+ - $("#results").append(finalhtml); - } - }); - - - } - else - { - $("#video").html("
No Video
"); - } - } - - }); - } - } - }); - }, 300); - }); - - function submit(id,title){ - console.log($.ajax({ - type: "GET", - url: "php/change.php", - async: false, - data: "v="+id+"&n="+title+"&pass="+adminpass, - success: function() { - console.log("added "+id); - document.getElementById("search").value = ""; - $("#search").addClass("success"); - $("#results").html(''); - //updateList(); - }, - error: function(){ - console.log("error in adding"); - document.getElementById("search").value = ""; - $("#search").addClass("error"); - $("#results").html(''); - } - }).responseText); - - $("#search").focus(); - - setTimeout(function(){ - $("#search").removeClass("success"); - $("#search").removeClass("error"); - },1500); - updateList(); + else{ $("#video").html("
No Video
");} } + }); + } + +} + +function submit(id,title){ + console.log($.ajax({ + type: "GET", + url: "php/change.php", + async: false, + data: "v="+id+"&n="+title+"&pass="+adminpass, + success: function() { + console.log("added "+id); + document.getElementById("search").value = ""; + $("#search").addClass("success"); + $("#results").html(''); + //updateList(); + }, + error: function(){ + console.log("error in adding"); + document.getElementById("search").value = ""; + $("#search").addClass("error"); + $("#results").html(''); + } + }).responseText); + + $("#search").focus(); + + setTimeout(function(){ + $("#search").removeClass("success"); + $("#search").removeClass("error"); + },1500); + updateList(); +} + // if(reply=="added"){$("#search").removeClass('success'); $("#search").addClass('success');} diff --git a/static/style.css b/static/style.css index 321be501..511635d5 100755 --- a/static/style.css +++ b/static/style.css @@ -45,14 +45,15 @@ body{background:#000; margin:0; } #results{position:absolute; background-color: white; font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;} .result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;} -.result:hover, .result:hover #title, .result:hover .result_info {background-color: rgba(90, 90, 90, 1); color:white !important;} +.result:hover, .result:hover #title, .result:hover .result_info {color:white !important;} +.result:hover{background-color: rgba(0, 0, 0, 0.4);} #title{ padding-left: 9%; padding-top: 16px; max-width: 76%; color: #000000; height: 36px;} .result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;} .thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;} .main{width:90%; margin: 0 auto 0 auto;} .playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; height: calc(87% - 183px);} -.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2);} +.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2); } .lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} .ltitle{ color:#FFF; overflow: hidden; height: 40px; }