Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add search-clearing button.

Browse Source
This commit is contained in:
Mayhem 2013-11-15 01:31:01 +01:00
parent 46e3414ec9
commit e9a128da70
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@ -372,13 +372,21 @@ a[href="javascript:;"] {
display: none; display: none;
} }
#index-search { #index-search {
padding-right: 1.5em;
width: 100px; width: 100px;
transition: color .25s, border-color .25s, width .25s; transition: color .25s, border-color .25s, width .25s;
} }
#index-search:hover, #index-search[data-searching] {
#index-search:focus {
width: 200px; 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 { .summary {
text-decoration: none; text-decoration: none;
} }

1
html/General/Index-navlinks.html
View File

@ -1,3 +1,4 @@
[<a href="./catalog">Catalog</a>]&nbsp; [<a href="./catalog">Catalog</a>]&nbsp;
[<time id="index-last-refresh" title="Last index refresh" data-init="1">...</time>]&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"> <input type="search" id="index-search" class="field" placeholder="Search">
<a id="index-search-clear" class="fa fa-times-circle" href="javascript:;"></a>

11
src/General/Index.coffee
View File

@ -58,6 +58,7 @@ Index =
$.on window, 'popstate', @cb.popstate $.on window, 'popstate', @cb.popstate
$.on @pagelist, 'click', @cb.pageNav $.on @pagelist, 'click', @cb.pageNav
$.on @searchInput, 'input', @onSearchInput $.on @searchInput, 'input', @onSearchInput
$.on $('#index-search-clear', @navLinks), 'click', @clearSearch
$.asap (-> $('.pagelist', doc) or d.readyState isnt 'loading'), -> $.asap (-> $('.pagelist', doc) or d.readyState isnt 'loading'), ->
$.replace $('.board'), Index.root $.replace $('.board'), Index.root
$.replace $('.pagelist'), Index.pagelist $.replace $('.pagelist'), Index.pagelist
@ -297,7 +298,7 @@ Index =
offset = 0 offset = 0
for threadRoot, i in Index.sortedNodes by 2 when Get.threadFromRoot(threadRoot).isOnTop for threadRoot, i in Index.sortedNodes by 2 when Get.threadFromRoot(threadRoot).isOnTop
Index.sortedNodes.splice offset++ * 2, 0, Index.sortedNodes.splice(i, 2)... 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 Index.sortedNodes = Index.querySearch(Index.searchInput.value) or Index.sortedNodes
buildIndex: -> buildIndex: ->
if Conf['Index Mode'] is 'paged' if Conf['Index Mode'] is 'paged'
@ -311,7 +312,15 @@ Index =
$.event 'IndexBuild', nodes $.event 'IndexBuild', nodes
$.add Index.root, nodes $.add Index.root, nodes
isSearching: false
clearSearch: ->
Index.searchInput.value = null
Index.onSearchInput()
onSearchInput: -> onSearchInput: ->
if Index.isSearching = !!Index.searchInput.value.trim()
Index.searchInput.dataset.searching = 1
else
delete Index.searchInput.dataset.searching
Index.sort() Index.sort()
Index.buildIndex() Index.buildIndex()
querySearch: (query) -> querySearch: (query) ->