Merge pull request #10 from meodai/filter-function

Filter
meodai · Oct 23, 2014 · 85fd0eb · 85fd0eb
2 parents af3941d + 6617a8c
commit 85fd0eb
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 3 deletions.
diff --git a/.theme/footer.html b/.theme/footer.html
@@ -7,7 +7,7 @@
 <script>
     <!--
     (function($,w,d){
-        var parseList, parseTitle, fixTable, setTheme, setFolderHover;
+        var parseList, parseTitle, fixTable, setTheme, setFolderHover, filter;
 
         //fixes for older apache versions
         fixTable = function( $table ){
@@ -107,6 +107,22 @@
 
         setFolderHover( $(".type--PARENTDIR img:eq(0)").attr("src") );
 
+        /* filter field */
+        filter = function( inputSelector ){
+            var timer, $tr = $("#indexlist tr").not(":first");
+
+            $(d).on("keyup.filter", inputSelector, function(e){
+                clearTimeout(timer);
+                var $this = $(this);
+                timer = setTimeout(function(){
+                    $tr.removeClass("is-nomatch");
+                    $tr.not(":contains(" + $this.val() + ")").addClass("is-nomatch");
+                },50);
+            });
+        };
+
+        filter( ".js-search" );
+
     }(jQuery,window,document));
     -->
 </script>
diff --git a/.theme/header.html b/.theme/header.html
@@ -1,2 +1,5 @@
-<h1 class="main-title js-main-title">Directory</h1>
+<div class="header">
+    <h1 class="main-title js-main-title">Directory</h1>
+    <input type="search" placeholder="filter" class="search search--main js-search" />
+</div>
 <div class="wrap" data-theme="dark">
diff --git a/.theme/style.css b/.theme/style.css
@@ -54,13 +54,56 @@ a[href$="/"]:hover,a[href$="/"]:hover,a.link--breadcrumb:hover {
     color: rgba(250,190,110,1);
 }
 
+/* header */
+.header {
+
+}
+@media only screen and (max-width : 400px) {
+    .header {
+        padding: 0.5em;
+    }
+}
+.search {
+    box-sizing: border-box;
+    background: rgba(45,45,45,1);
+    border: none;
+    padding: 0.6em;
+    color: #fff;
+    outline: none;
+    border-radius: 4px;
+}
+
+.search:focus {
+    box-shadow: 0 0 0 1px rgba(250,190,110,.9);
+}
+
+.search--main {
+    display: inline-block;
+    float: right;
+    width: 30%;
+}
+@media only screen and (max-width : 400px) {
+    .search--main {
+        width: 100%;
+        float: none;
+    }
+}
+
+
 /* directory title */
 .main-title {
+    float: left;
     font-size: 1.2em;
     font-weight: 100;
     margin-bottom: 0.8em;
+    max-width: 70%;
+}
+@media only screen and (max-width : 400px) {
+    .main-title {
+        max-width: 100%;
+        float: none;
+    }
 }
-
 
 /* wraps the table */
 .wrap {
@@ -84,6 +127,10 @@ a[href$="/"]:hover,a[href$="/"]:hover,a.link--breadcrumb:hover {
     cursor: pointer;
 }
 
+#indexlist tr.is-nomatch {
+    display: none;
+}
+
 #indexlist tr td {
     padding: 0.5em 0.3em;