better search

7 files changed, 229 insertions, 163 deletions

diff --git a/src/site.clj b/src/site.clj
index 5294f40..e38171e 100644
--- a/src/site.clj
+++ b/src/site.clj
@@ -963,8 +963,8 @@ order by count desc limit ? offset ?")
 	   tokens (map #(str "%" %1 "%") tokens)
 	   query (ghetto-search-query (count tokens))
 	   rows (do-select (vec (concat [query] tokens)))] 
-       (str "searchResult(" (json-str rows) ")"))
-     (str "searchError('sorry, no fancy characters')")))
+       (str "Search.searchResult(" (json-str rows) ")"))
+     (str "Search.searchError('sorry, no fancy characters')")))
 
 ;; Account resets
 
diff --git a/static/css/dump.css b/static/css/dump.css
index 4a914e0..2cb9833 100755
--- a/static/css/dump.css
+++ b/static/css/dump.css
@@ -434,7 +434,7 @@ a.msg-image-zoom img.zoom-icon:hover {
 #searchbox{
     position:absolute;
     top:18px;
-    right:36px;
+    right:100px;
 }
 
 #search-query{
@@ -443,11 +443,12 @@ a.msg-image-zoom img.zoom-icon:hover {
     color: #C0C8D3;
     font-size: 13px;
     padding: 3px 12px 3px 37px;
-    padding-left: 37px;
-    text-indent:5px;
-    border-radius: 50px;
-    -webkit-border-radius: 50px;
-    -moz-border-radius: 50px;
+    padding-left: 10px;
+    ztext-indent:5px;
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    width: 150px;
 }
 
 .search_icon  {
@@ -461,29 +462,69 @@ a.msg-image-zoom img.zoom-icon:hover {
     top:3px;
     width:32px;
 }
+#search-results{
+  position: absolute;
+  top:55px;
+  width:100%;
+  text-align: center;
+  left: 0;
+}
 
-#searchresults{
-    top:50px;
-    overflow:auto;
-    position:fixed;background-image:url(/static/img/bg.dither.gif);
-    background-color:#eee;
-    width:100%;
-    min-width:600px;
-    border-bottom:1px solid #000;
-    left:-1px;
-    margin-top:-1px;
+#search-results-images{
+  display: none;
+  overflow:auto;
+  background-image:url(/static/img/bg.dither.gif);
+  background-color:#eee;
+  width:95%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -22px;
+  padding-top: 30px;
+  -moz-box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  -webkit-box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;    
 }
-#searchresults img{
-    max-width:300px;
-    width: expression(this.width > 300 ? 300: true);
-    max-height:50px;
-    height: expression(this.width > 300 ? 300: true);
+#search-results-images img{
     max-width:300px;
+    max-height:100px;
     border:1px solid #eee;
-    float:left;
+    float:right;
     display:inline;
     margin-right:10px;
 }
+#search-controls {
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  text-align: right;
+  display: none;
+  top: 0;
+  padding-right: 8px;
+}
+#search-control-text {
+  font-size: medium;
+  padding: 4px;
+}
+#search-controls a {
+  -moz-box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  -webkit-box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  box-shadow: 0 0 10px #D8DBDE, 0 0 2px #000000;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  padding: 4px;
+}
+#search-message {
+  display: inline;
+  font-size: medium;
+}
+#search-control-previous, #search-control-next {
+  visibility: hidden;
+}
 
 
 /* pichat.css */
diff --git a/static/js/pichat.js b/static/js/pichat.js
index 44db3cf..de078f6 100644
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -482,6 +482,8 @@ function refresh() {
 }
 
 function initChat() {
+  Search.init()
+  
     $('.oldmsg').each(function() {
         var dump = $(this);
         var content = dump.find(".content")
@@ -556,6 +558,7 @@ function enableProfileEdit() {
 }
 
 function initProfile() {
+  Search.init()
     $(".linkify").each(function() {
         var text = jQuery(this).text();
         jQuery(this).html(linkifyWithoutImage(text));
@@ -571,6 +574,7 @@ function initProfile() {
 };
 
 function initLog() {
+  Search.init()
     $('.logged-dump .content').each(function() {
         var t = $(this);
         t.html(buildMsgContent(t.text()));
@@ -771,6 +775,146 @@ function setupUploadAvatar(elementId) {
     });
 }
 
+var Search = {
+  
+  'term': "",
+  'imagesPerPage': 25,
+  'images': [],
+  'tokens': [],
+  
+  'init': function(){
+    $("#search-query").val("search dump.fm")
+    $("#search-query").focus(function(){
+      if ($("#search-query").val() == 'search dump.fm')
+        $("#search-query").val("")
+    })
+    $("#search-query").blur(function(){
+      if ($("#search-query").val().trim() == '')
+        $("#search-query").val("search dump.fm")
+    })
+    $("#search-query").keydown(ifEnter(Search.doSearch))
+  },
+
+  'addScript': function(term) {
+    $("#search-script").remove()
+    $("head").append("<scr"+"ipt src='/cmd/ghettosearch/"+term+"' id='search-script'></sc"+"ript>")
+  },
+  'setContent': function(x){
+    $("#search-results-images").html(x)
+  },
+  'setMessage': function(x){
+    $("#search-controls").css("display", "block")
+    $("#search-control-text").html(x)
+  },
+  'searchError': function(error){
+    Search.setContent("")
+    $('#search-control-previous').css("visibility", "hidden")
+    $('#search-control-next').css("visibility", "hidden")
+    Search.setMessage(error)
+  },
+
+  'doSearch': function(){
+    term = $("#search-query").val().trim().toLowerCase()
+    var rawTokens = term.split(" ")
+    Search.tokens = []
+    for(var t = 0; t < rawTokens.length; t++) {
+      if (rawTokens[t].length > 2)
+        Search.tokens.push(rawTokens[t])
+    }
+    if (Search.tokens.length == 0) {
+      Search.setMessage("search query too small")
+    } else {
+      Search.setMessage("searching for '"+Search.tokens.join(" and ")+"'")
+      Search.addScript(Search.tokens.join("+"))
+    }
+  },
+
+  'renderPage': function(num){
+    $("#search-results-images").css("display", "block")
+    $("#search-controls").css("display", "block")
+    if (Search.images.length > 0)
+        Search.setMessage("results for '"+Search.tokens.join(" and ")+"' (page " + (num + 1) + ")");
+    var contentString = ''
+    var start = num * Search.imagesPerPage
+    var imageCounter = 0
+    for(var i = start; i < Search.images.length; i++){
+        if(imageCounter > Search.imagesPerPage) break;
+        contentString += '<a href="'+Search.images[i]+'" target="_blank" onclick="return Search.addToChatBoxIfPossible(this)"><img src="'+Search.images[i]+'"></a>'
+        imageCounter += 1
+    }
+    contentString += '<br><br><div id="search-commands">'
+    if(num > 0) {
+      $('#search-control-previous').attr("href", 'javascript:Search.renderPage('+(num-1)+')')
+      $('#search-control-previous').css("visibility", "visible")
+    } else {
+      $('#search-control-previous').attr("href", 'javascript:void()')
+      $('#search-control-previous').css("visibility", "hidden")
+    }
+    
+    if (Search.images.length > start + imageCounter) {
+      $('#search-control-next').attr("href", 'javascript:Search.renderPage('+(num+1)+')')
+      $('#search-control-next').css("visibility", "visible")
+    } else {
+      $('#search-control-next').attr("href", 'javascript:void()')
+      $('#search-control-next').css("visibility", "hidden")
+    }
+    Search.setContent(contentString)
+  },
+
+  'addToChatBoxIfPossible': function(img){
+    var chatBoxExists = $("#msgInput").length
+    if (chatBoxExists) {
+      var chatText = $("#msgInput").val()
+      if (chatText.length && chatText[chatText.length - 1] != " ")
+        chatText += " "
+      chatText += $(img).attr("href") + " "
+      $("#msgInput").val(chatText)
+      $("#msgInput").focus().val($("#msgInput").val()) //http://stackoverflow.com/questions/1056359/
+      return false
+    } else return true
+  },
+
+  'searchResult': function(results){
+    Search.images = []
+    var alreadyGot = {}
+    if(results === null || results.length == 0) {
+        Search.setContent("")
+        Search.setMessage("no results found")        
+    } else {
+        for(var r = 0; r<results.length; r++){
+          var content = results[r]['content']
+          if (content.substring(0,6) == "<safe>") continue; // skip html posts
+          var imageUrls = getImagesAsArray(content);
+          for (var i=0; i<imageUrls.length; i++){
+	          var imageUrl = imageUrls[i];
+	          if (imageUrl in alreadyGot) continue;
+	          alreadyGot[imageUrl] = true
+	          var validImage = true;
+	          for(var t = 0; t<Search.tokens.length; t++){
+	            if (imageUrl.toLowerCase().indexOf(Search.tokens[t]) == -1) {
+		            validImage = false;
+		            break;
+	            }
+	          }
+	          if (validImage)
+	            Search.images.push(imageUrl);
+          }
+        }
+        if (Search.images.length == 0) {
+            Search.setMessage("no results found")  
+        }
+        Search.renderPage(0)
+    }
+  },
+  'close': function(){
+    Search.setContent("")
+    $("#search-results-images").css("display", "none")
+    $("#search-controls").css("display", "none")
+  }
+  
+
+}
+
 
 // scrolling stuff
 // this code keeps the div scrolled to the bottom, but will also let the user scroll up, without jumping down
@@ -821,6 +965,7 @@ function initDirectory() {
         var t = $(this);
         t.html(buildMsgContent(t.text()));
     });
+  Search.init()
 }
 
 //big hand stuff
diff --git a/template/banner.st b/template/banner.st
index 9630bd2..d9ff644 100644
--- a/template/banner.st
+++ b/template/banner.st
@@ -35,45 +35,43 @@
 	</div>
       </div>
     </div>
-    $if(isadmin)$ 
     <div id="searchbox">
-      <input type="text" name="search-query" id="search-query" value="search dump.fm" 
-	     onblur="this.className = ''; resume_key_commands(); if (this.value == '') { this.value = default_search_text; this.style.color = '#c0c8d3'; }"
-	     onfocus="suspend_key_commands(); if (this.value == default_search_text) { this.value = ''; this.style.color = '#5c7480'; }"
-	     style="color: rgb(192, 200, 211);" class="" />
-      <a href="#" onclick="hideItem(searchresults);">
-	<div class="search_icon"></div></a>
+      <input type="text" name="search-query" id="search-query" />
+	<!--<div class="search_icon"></div>-->
     </div>
-    $endif$
     <div id="topic"></div>
     <div id="dumplist">
-      $if(user_nick)$
+$if(user_nick)$
       want a room? <a href="mailto:info@dump.fm">contact us! - <a href="$domain$/chat/vortex"> checkout the image vortex!! </a>$else$ Talk with pictures! - <a href="$domain$/chat/vortex"> checkout the nifty dump fm image vortex! </a> $endif$ $if(isadmin)$ 
 	<a href="http://news.dump.fm">- news</a> -  <a href="http://gossip.dump.fm">gossip</a> - <a href="http://art.dump.fm">art</a> - <a href="http://gif.dump.fm">gif</a> -  <a href="http://design.dump.fm">design</a> - <a href="http://fashion.dump.fm">fashion</a>
         -<a href="http://vip.dump.fm/">  NAUGHTY BOYS DELIGHT </a>
-        $endif$
+$endif$
     </div>
-    $if(user_nick)$
+$if(user_nick)$
     <div id="logout7" class="white">   
       <div align="center">
 	<a href="/logout" onclick="pageTracker._trackEvent('button', 'logout'); return true;">Logout</a>
       </div>
-      $else$
+    </div>
+$else$
       <div id="toplogin" class="white">
-	$form_login()$
+  $form_login()$
+      </div>
+$endif$
+      <div id="search-results">
+        <div id="search-controls">
+          <a id="search-control-previous">previous</a>
+          <span id="search-control-text"></span>
+          <a id="search-control-next">next</a>
+          <a id="search-control-close" href="javascript:Search.close()">close</a>
+        </div>
+        <div id="search-results-images"></div>
       </div>
-      $endif$
-      <div id="searchresults"></div>
     </div>
     <div align="center"><br /></div>
   </div>
 </div>
 
-$if(isadmin)$
-<script>
-  $search_script()$
-</script>
-$endif$
 
 <div class="apple_overlay black" id="overlay">
 <center>
diff --git a/template/google_analytics.st b/template/google_analytics.st
index 4d81b8b..48cda8b 100644
--- a/template/google_analytics.st
+++ b/template/google_analytics.st
@@ -13,4 +13,4 @@ qacct:"p-a3mCwIEHECjGE"
 <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
 <noscript>
 <img src="http://pixel.quantserve.com/pixel/p-a3mCwIEHECjGE.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
-</noscript>
+</noscript>
\ No newline at end of file
diff --git a/template/head.st b/template/head.st
index 7ff5828..a898df8 100644
--- a/template/head.st
+++ b/template/head.st
@@ -3,26 +3,6 @@
 <meta name="description" content="dump.fm - Talk with pictures!" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="$domain$/static/js/jquery-ui-1.8.effects.min.js"></script>
-<!-- <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> -->
-
-<script>
-/*
-jQuery(function() { 
-    jQuery("a[rel]").overlay({ 
-        expose: '#eee',
-        effect: 'apple', 
-        onBeforeLoad: function() { 
-            var wrap = this.getContent().find(".contentWrap"); 
-            wrap.load(this.getTrigger().attr("href")); 
-        } 
- 
-    }); 
-}); 
-jQuery(function() { 
-    jQuery("#triggers img[rel]").overlay({effect: 'apple'}); 
-}); 
-*/
-</script>
 <script type="text/javascript" src="$domain$/static/js/pichat.js"></script>
 <link rel="stylesheet" type="text/css" href="$domain$/static/css/dump.css">
 
diff --git a/template/search_script.st b/template/search_script.st
deleted file mode 100644
index 94461b3..0000000
--- a/template/search_script.st
+++ /dev/null
@@ -1,98 +0,0 @@
-var term = ""
-var imagesPerPage = 25;
-var images = []
-function addScript(term) {
-    jQuery("#search-script").remove()
-    jQuery("head").append("<scr"+"ipt src='/cmd/ghettosearch/"+term+"' id='search-script'></sc"+"ript>")
-}
-
-function setContent(x){
-    jQuery("#searchresults").html(x)
-}
-
-function setMessage(x){
-    jQuery("#message").html(x)
-}
-
-function searchError(error){
-    setContent("")
-    setMessage(error)
-}
-
-function renderPage(num){
-    if (images.length > 0)
-        setMessage("page " + (num + 1));
-    var contentString = ''
-    var start = num * imagesPerPage
-    var imageCounter = 0
-    for(var i = start; i < images.length; i++){
-        if(imageCounter > imagesPerPage) break;
-        contentString += '<a href="'+images[i]+'"target="_blank"><img src="'+images[i]+'"></a>'
-        imageCounter += 1
-    }
-    contentString += '<br><br>'
-    if(num > 0)
-        contentString += '<a href="javascript:renderPage('+(num-1)+')"><h1>previous</h1></a> '
-    if (images.length > start + imageCounter)
-        contentString += ' <a href="javascript:renderPage('+(num+1)+')"><h1>next</h1></a>'
-    setContent(contentString)
-}
-
-function searchResult(results){
-    images = []
-    var alreadyGot = {}
-    if(results === null || results.length == 0) {
-        setContent("")
-        setMessage("no results found")        
-    } else {
-        for(var r = 0; r<results.length; r++){
-            var content = results[r]['content']
-            if (content.substring(0,6) == "<safe>") continue; // skip html posts
-            var imageUrls = getImagesAsArray(content);
-            for (var i=0; i<imageUrls.length; i++){
-		var imageUrl = imageUrls[i];
-		if (imageUrl in alreadyGot) continue;
-		alreadyGot[imageUrl] = true
-		var validImage = true;
-		for(var t = 0; t<tokens.length; t++){
-		    if (imageUrl.toLowerCase().indexOf(tokens[t]) == -1) {
-			validImage = false;
-			break;
-		    }
-		}
-		if (validImage)
-		    images.push(imageUrl);
-            }
-        }
-        if (images.length == 0) {
-            setMessage("no results found")  
-        }
-        renderPage(0)
-    }
-}
-
-var tokens = []
-
-function doSearch(){
-    term = jQuery("#search-query").val().trim().toLowerCase()
-    var rawTokens = term.split(" ")
-    tokens = []
-    for(var t = 0; t < rawTokens.length; t++) {
-        if (rawTokens[t].length > 2)
-            tokens.push(rawTokens[t])
-    }
-    if (tokens.length == 0) {
-        setMessage("search query too small")
-    } else {
-        setMessage("searching for '"+tokens.join(" and ")+"'")
-        addScript(tokens.join("+"))
-    }
-}
-
-// only search every 800ms while someone is typing
-function keyHandler(){
-    if (keyHandler.timeout) clearTimeout(keyHandler.timeout);
-    keyHandler.timeout = setTimeout(doSearch, 800)
-}
-
-jQuery("#search-query").keyup(keyHandler)
\ No newline at end of file