From e9a128da704726397f2c15853c6494cbc1128528 Mon Sep 17 00:00:00 2001
From: Mayhem <stepien.nicolas@gmail.com>
Date: Fri, 15 Nov 2013 01:31:01 +0100
Subject: [PATCH] Add search-clearing button.

---
 css/style.css                    | 12 ++++++++++--
 html/General/Index-navlinks.html |  1 +
 src/General/Index.coffee         | 11 ++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 89639943b..56a6a5d31 100644
--- a/css/style.css
+++ b/css/style.css
@@ -372,13 +372,21 @@ a[href="javascript:;"] {
   display: none;
 }
 #index-search {
+  padding-right: 1.5em;
   width: 100px;
   transition: color .25s, border-color .25s, width .25s;
 }
-#index-search:hover,
-#index-search:focus {
+#index-search[data-searching] {
   width: 200px;
 }
+#index-search-clear {
+  color: gray;
+  margin-left: -1.25em;
+}
+#index-search::-webkit-search-cancel-button,
+#index-search:not([data-searching]) + #index-search-clear {
+  display: none;
+}
 .summary {
   text-decoration: none;
 }
diff --git a/html/General/Index-navlinks.html b/html/General/Index-navlinks.html
index 7d3b04da7..cb69adae9 100644
--- a/html/General/Index-navlinks.html
+++ b/html/General/Index-navlinks.html
@@ -1,3 +1,4 @@
 [<a href="./catalog">Catalog</a>]&nbsp;
 [<time id="index-last-refresh" title="Last index refresh" data-init="1">...</time>]&nbsp;
 <input type="search" id="index-search" class="field" placeholder="Search">
+<a id="index-search-clear" class="fa fa-times-circle" href="javascript:;"></a>
diff --git a/src/General/Index.coffee b/src/General/Index.coffee
index 77b10aa5f..5a492f7fe 100644
--- a/src/General/Index.coffee
+++ b/src/General/Index.coffee
@@ -58,6 +58,7 @@ Index =
     $.on window, 'popstate', @cb.popstate
     $.on @pagelist, 'click', @cb.pageNav
     $.on @searchInput, 'input', @onSearchInput
+    $.on $('#index-search-clear', @navLinks), 'click', @clearSearch
     $.asap (-> $('.pagelist', doc) or d.readyState isnt 'loading'), ->
       $.replace $('.board'),    Index.root
       $.replace $('.pagelist'), Index.pagelist
@@ -297,7 +298,7 @@ Index =
       offset = 0
       for threadRoot, i in Index.sortedNodes by 2 when Get.threadFromRoot(threadRoot).isOnTop
         Index.sortedNodes.splice offset++ * 2, 0, Index.sortedNodes.splice(i, 2)...
-    if Index.searchInput.value
+    if Index.isSearching
       Index.sortedNodes = Index.querySearch(Index.searchInput.value) or Index.sortedNodes
   buildIndex: ->
     if Conf['Index Mode'] is 'paged'
@@ -311,7 +312,15 @@ Index =
     $.event 'IndexBuild', nodes
     $.add Index.root, nodes
 
+  isSearching: false
+  clearSearch: ->
+    Index.searchInput.value = null
+    Index.onSearchInput()
   onSearchInput: ->
+    if Index.isSearching = !!Index.searchInput.value.trim()
+      Index.searchInput.dataset.searching = 1
+    else
+      delete Index.searchInput.dataset.searching
     Index.sort()
     Index.buildIndex()
   querySearch: (query) ->