Changeset 4340

Timestamp:

01/27/14 09:37:40 (10 years ago)

Author:

twagoo

Message:

added value filtering for facets in mockup

Location:

vlo/branches/vlo-3.0/vlo-web-app/src/main/html

Files:

• index.html (modified) (3 diffs)
• js/vlo-facets.js (modified) (1 diff)
• style/search_icon.png (added)
• style/style.css (modified) (1 diff)
• style/vlo-facets.css (modified) (1 diff)

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/index.html

@@ -75 +75 @@
 
             <div class="sidebar">
-                <div class="sidebaritem">
+                <div class="sidebaritem filterfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
                     <h1>Language</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form>
                     <div class="sbilinks">
                         <ul>
@@ -96 +100 @@
                     <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
                 </div>
-                <div class="sidebaritem">
+                <div class="sidebaritem filterfacet">
                     <!-- rounded corners - top **** -->
                     <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
                     <h1>Resource class</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form>
                     <div class="sbilinks">
                         <ul>
@@ -308 +316 @@
                     <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
                 </div>
-                
+
                 <div class="sidebaritem collapsedfacet">
                     <!-- rounded corners - top **** -->

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/js/vlo-facets.js

@@ -31 +31 @@
         p.removeClass("expandedfacet");
     });
+
+    /* facet filter */
+    $(".filterform").toggle();
+
+    $("a.filtertoggle").click(function(event) {
+        // toggle link clicked, show or hide filter box and focus on input
+        var form = $(this).parent(".sidebaritem").find(".filterform");
+        form.siblings(".sbilinks").find("li").show();
+        form.toggle(function(event) {
+            var input = form.children("input");
+            input.val('');
+            input.focus();
+        });
+    });
+
+    var filterHandler = function(event) {
+        // filter text entered, update result list
+        var links = $(this).parent(".filterform").siblings(".sbilinks").find("li");
+        var match = $(this).val().toUpperCase();
+        if (match.length === 0) {
+            links.show();
+        } else {
+            // hide all results
+            links.hide();
+            // show all matching results
+            links.filter(function(index) {
+                // case insensitive match
+                return links[index].textContent.toUpperCase().indexOf(match) >= 0;
+            }).show();
+        }
+    };
+    
+    $(".filterform input").on('input', filterHandler);
 });

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/style/style.css

@@ -201 +201 @@
 }
 
+.sbilinks {clear: both;}
+
 .sbilinks ul{margin: 0px;}
 

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/style/vlo-facets.css

@@ -66 +66 @@
     display:  none;
 }
+
+
+.filterfacet h1 {
+    float: left;
+    margin-right: 20px;
+}
+
+.filterfacet .filtertoggle {
+    float: right;
+    clear: right;
+    display: block;
+    margin-top: 8px;
+    width: 16px;
+    height: 16px;
+    background: url('search_icon.png') no-repeat;
+    background-size: 16px;
+}
+
+a.filtertoggle span{
+    display: none;
+}
+
+.filterform {
+    clear: both;
+    margin-left: 12px;
+}
+.filterform input {
+    width: 90%;
+}