added some simple search functionality to the repo list

This commit is contained in:
Brad 2014-06-05 16:31:12 -07:00
parent b3f77d3226
commit 072dbd95b1
2 changed files with 31 additions and 6 deletions

View file

@ -32,10 +32,10 @@
</header> </header>
<section> <section>
<form class="{{"pure-form"}} {{"search-form"}}"> <form class="{{"pure-form"}} {{"search-form"}}">
<input type="{{"search"}}" placeholder="{{"Filter List"}}" class="{{"pure-u-1"}}" /> <input type="{{"search"}}" placeholder="{{"Filter List"}}" class="{{"pure-u-1"}}" id="{{"search"}}" />
</form> </form>
<div class="{{"repo-list"}}">{{range $repo := .Repos}}{{$__amber_5 := __amber_add "/" .Remote}}{{$__amber_6 := __amber_add $__amber_5 "/"}}{{$__amber_7 := __amber_add $__amber_6 .Owner}}{{$__amber_8 := __amber_add $__amber_7 "/"}}{{$__amber_9 := __amber_add $__amber_8 .Name}} <div class="{{"repo-list"}}">{{range $repo := .Repos}}{{$__amber_5 := __amber_add "/" .Host}}{{$__amber_6 := __amber_add $__amber_5 "/"}}{{$__amber_7 := __amber_add $__amber_6 .Owner}}{{$__amber_8 := __amber_add $__amber_7 "/"}}{{$__amber_9 := __amber_add $__amber_8 .Name}}{{$__amber_10 := __amber_add .Owner "/"}}{{$__amber_11 := __amber_add $__amber_10 .Name}}
<a class="{{"pure-g"}} {{"repo-item"}}" data-status="{{.Active}}" href="{{$__amber_9}}"> <a class="{{"pure-g"}} {{"repo-item"}} {{"searchable"}}" data-status="{{.Active}}" href="{{$__amber_9}}" data-index="{{$__amber_11}}">
<div class="{{"pure-u-11-12"}}"> <div class="{{"pure-u-11-12"}}">
<h2> <h2>
<span>{{.Owner}}</span> <span>{{.Owner}}</span>
@ -55,5 +55,17 @@
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"}}"></script> <script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"}}"></script>
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.1.0/jquery.timeago.js"}}"></script> <script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.1.0/jquery.timeago.js"}}"></script>
<script src="{{"/static/scripts/main.js"}}"></script> <script src="{{"/static/scripts/main.js"}}"></script>
<style id="{{"search_style"}}"></style>
<script type="{{"text/javascript"}}">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value + "\"]) { display: none; }";
});
</script>
</body> </body>
</html> </html>

View file

@ -11,10 +11,10 @@ block content
i.fa.fa-rss i.fa.fa-rss
section section
form.pure-form.search-form form.pure-form.search-form
input[type="search"][placeholder="Filter List"].pure-u-1 input[type="search"][placeholder="Filter List"].pure-u-1#search
div.repo-list div.repo-list
each $repo in Repos each $repo in Repos
a.pure-g.repo-item[data-status=Active][href="/"+Remote+"/"+Owner+"/"+Name] a.pure-g.repo-item.searchable[data-status=Active][href="/"+Host+"/"+Owner+"/"+Name][data-index=Owner+"/"+Name]
div.pure-u-11-12 div.pure-u-11-12
h2 h2
span #{Owner} span #{Owner}
@ -24,4 +24,17 @@ block content
if Active if Active
span.repo-active On span.repo-active On
else else
span.repo-inactive Off span.repo-inactive Off
block append scripts
style#search_style
script[type="text/javascript"]
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value + "\"]) { display: none; }";
});