From e4a11f7a7afb1537f6f845a014912498eaf2c951 Mon Sep 17 00:00:00 2001
From: Wesley Moore <wez@wezm.net>
Date: Thu, 4 Mar 2010 17:59:41 +1100
Subject: [PATCH] Implement clearing of search field

---
 layouts/articles.html    |  2 +-
 output/css/style.css     |  9 +++------
 output/js/application.js | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/layouts/articles.html b/layouts/articles.html
index c10d381..72261f7 100644
--- a/layouts/articles.html
+++ b/layouts/articles.html
@@ -48,7 +48,7 @@
         <fieldset>
           <label for="query">Search</label>
           <input type="text" name="q" id="query" value="" />
-          <span class="sbox_r"></span>
+          <span class="clear"></span>
         </fieldset>
       </li>
     </ul>
diff --git a/output/css/style.css b/output/css/style.css
index eec3029..f233296 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -274,17 +274,14 @@ ul.inline li:first-child {
   font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
   color: #000;
 }
-#search .sbox_r {
+#search .clear {
   background: #fff url(/images/srch_r.gif) 0 0 no-repeat;
   float: left;
   width: 19px;
   height: 19px;
 }
-#search .sbox_r_f2 {
-  background: #fff url(/images/srch_r.gif) 0 -19px no-repeat;
-  float: left;
-  width: 19px;
-  height: 19px;
+#search .active {
+  background-position: 0 -19px;
 }
 
 /* Extra parts on post page */
diff --git a/output/js/application.js b/output/js/application.js
index 9b27cf4..dafd30b 100644
--- a/output/js/application.js
+++ b/output/js/application.js
@@ -12,6 +12,21 @@ var WezM = {
     if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
       $('#search input').css('paddingTop', 0);
     }
+    $('#search input').keyup(function(e) {
+      var input = $(this);
+      var clear_search = $('#search .clear');
+      var value = input.attr('value');
+      if(value && (value != '')) {
+        clear_search.addClass('active');
+      }
+      else {
+        clear_search.removeClass('active');
+      }
+    });
+    $('#search .clear.active').live('click', function() {
+      $('#search input').attr('value', '').keyup(); // Simulate keypress to clear results
+
+    });
   },
   _searchItemSelected: function() {},
   _renderArticle: function(o) {