Changeset 4379

Timestamp:

01/29/14 10:48:19 (10 years ago)

Author:

twagoo

Message:

added facet filter to all facets

Location:

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

Files:

• index.html (modified) (7 diffs)
• js/vlo-facets.js (modified) (2 diffs)
• style/vlo-facets.css (modified) (2 diffs)

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

@@ -96 +96 @@
                     <h1>Language</h1>
                     <div class="filtertoggle"><span>filter</span></div>
-                    <!--enabled as link:--> 
-                    <!--<a class="filtertoggle" href="#"><span>filter</span></a>-->
                     <form class="filterform">
                         <input type="text" />
@@ -103 +101 @@
                     <div class="sbilinks">
                         <ul>
-                            <li><span class="selectedfacetvalue">Dutch (148081)</span><a class="removefacetvalue" href="">✕</a></li>
+                            <li><span class="selectedfacetvalue">Dutch (148081)</span><a class="unselectfacetvalue" title="unselect value" href=""><span>[unselect]</span></a></li>
                             <li><span class="facetvalue">English (72435) </span></li>
                             <li><span class="facetvalue">German (42365) </span></li>
@@ -271 +269 @@
                     <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>Genre</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form> 
                     <div class="sbilinks">
                         <ul>
@@ -295 +297 @@
                     <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>Keywords</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form>                    
                     <div class="sbilinks">
                         <ul>
@@ -319 +325 @@
                     <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>Format</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form> 
                     <div class="sbilinks">
                         <ul>
@@ -343 +353 @@
                     <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>Organisation</h1>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form> 
                     <div class="sbilinks">
                         <ul>
@@ -367 +381 @@
                     <a href="#" class="collapsefacet"><span>collapse</span></a>
                     <h1>National project</h1>
-                    <div class="sbilinks">
-                        <ul>
-                            <li><span class="selectedfacetvalue">CLARIN-NL (362797)</span><a class="removefacetvalue" href="">✕</a></li>
+                    <a class="filtertoggle" href="#"><span>filter</span></a>
+                    <form class="filterform">
+                        <input type="text" />
+                    </form> 
+                    <div class="sbilinks">
+                        <ul>
+                            <li><span class="selectedfacetvalue">CLARIN-NL (362797)</span><a class="unselectfacetvalue" title="unselect value" href=""><span>[unselect]</span></a></li>
                             <li><span class="facetvalue">CLARIN-D (34574)</span></li>
                             <li><span class="facetvalue">CLARIN-DK-UCPH (7810)</span></li>

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

@@ -16 +16 @@
  */
 
+function expandFacet(p) {
+    p.find(".sbilinks").show(200);
+    p.addClass("expandedfacet");
+    p.removeClass("collapsedfacet");
+}
+
+function collapseFacet(p) {
+    p.find(".sbilinks").hide(200);
+    p.find(".filterform").hide(200);
+    p.addClass("collapsedfacet");
+    p.removeClass("expandedfacet");
+}
+
 $(document).ready(function() {
-
     /* facet collapse/expand */
     $("a.expandfacet").click(function(event) {
         event.preventDefault();
         var p = $(this).parent(".collapsedfacet");
-        p.find(".sbilinks").show(200);
-        p.addClass("expandedfacet");
-        p.removeClass("collapsedfacet");
+        expandFacet(p);
     });
     $("a.collapsefacet").click(function(event) {
         event.preventDefault();
         var p = $(this).parent(".expandedfacet");
-        p.find(".sbilinks").hide(200);
-        p.addClass("collapsedfacet");
-        p.removeClass("expandedfacet");
+        collapseFacet(p);
     });
 
     /* facet filter */
-    $(".filterform").toggle();
+    $(".filterform").hide();
 
     $("a.filtertoggle").click(function(event) {
@@ -42 +50 @@
         var form = $(this).parent(".sidebaritem").find(".filterform");
         form.siblings(".sbilinks").find("li").show();
+        expandFacet($(this).parent(".collapsedfacet"));
         form.toggle(100, function(event) {
             var input = form.children("input");

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

@@ -31 +31 @@
 }
 
-.sbilinks li a.removefacetvalue, .sbilinks li a.removefacetvalue:hover {
+/* unselect facet */
+
+.sbilinks li a.unselectfacetvalue, .sbilinks li a.unselectfacetvalue:hover {
     text-decoration: none;
+}
+
+a.unselectfacetvalue span {
+    display: none;
+}
+
+a.unselectfacetvalue:after {
+    /* show delete cross */
+    content: "✕";
 }
 
@@ -75 +86 @@
 }
 
-.sidebaritem.collapsedfacet .sbilinks {
+.sidebaritem.collapsedfacet .sbilinks, .sidebaritem.collapsedfacet .filterform {
     display:  none;
 }