Changeset 4419

Timestamp:

01/31/14 13:52:02 (10 years ago)

Author:

twagoo

Message:

always showing facet filter on expanded facets in mockup (and focus on expand)

Location:

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

Files:

• index3.html (modified) (2 diffs)
• js/vlo-facets.js (modified) (3 diffs)
• style/vlo-facets.css (modified) (1 diff)

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

@@ -109 +109 @@
                         <h1><a href="#">Language</a></h1>
                         <div class="filtertoggle"><span>filter</span></div>
-                        <form action="" class="filterform">
-                            <p><input type="text" /></p>
-                        </form>
                         <div class="selectedvaluelabel">Dutch<a class="unselectfacetvalue" title="unselect value" href="index2.html"><span>[unselect]</span></a></div>
                         <div class="sbilinks facetvalues">
@@ -247 +244 @@
                         <h1><a href="#">National project</a></h1>
                         <div class="filtertoggle" title="Filter values"><span>filter</span></div>
-                        <form action="" class="filterform">
-                            <p><input type="text" /></p>
-                        </form>
                         <div class="selectedvaluelabel">CLARIN-NL<a class="unselectfacetvalue" title="unselect value" href="index2.html"><span>[unselect]</span></a></div>
                         <div class="sbilinks facetvalues">

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

@@ -20 +20 @@
     p.addClass("expandedfacet");
     p.removeClass("collapsedfacet");
+    p.find(".filterform input").focus();
 }
 
 function collapseFacet(p) {
     p.find(".facetvalues").hide(200);
-    p.find(".filterform").hide(200);
     p.addClass("collapsedfacet");
     p.removeClass("expandedfacet");
@@ -41 +41 @@
         collapseFacet(p);
     });
-    
-    $(".facet h1 a").click(function(event){
+
+    $(".facet h1 a").click(function(event) {
         event.preventDefault();
-        if($(this).parents(".expandedfacet").length === 1){
-             var p = $(this).parents(".expandedfacet");
+        if ($(this).parents(".expandedfacet").length === 1) {
+            var p = $(this).parents(".expandedfacet");
             collapseFacet(p);
         } else {
@@ -54 +54 @@
 
     /* facet filter */
-    $(".filterform").hide();
-
-    $("a.filtertoggle").click(function(event) {
-        // toggle link clicked, show or hide filter box and focus on input
-        event.preventDefault();
-        var form = $(this).parent(".facet").find(".filterform");
-        form.siblings(".facetvalues").find("li").show();
-        expandFacet($(this).parent(".collapsedfacet"));
-        form.toggle(100, function(event) {
-            var input = form.children("input");
-            input.val('');
-            input.focus();
-        });
-    });
+//    $(".filterform").hide();
+//
+//    $("a.filtertoggle").click(function(event) {
+//        // toggle link clicked, show or hide filter box and focus on input
+//        event.preventDefault();
+//        var form = $(this).parent(".facet").find(".filterform");
+//        form.siblings(".facetvalues").find("li").show();
+//        expandFacet($(this).parent(".collapsedfacet"));
+//        form.toggle(100, 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(".facetvalues").find("li");
+        var links = $(this).parents(".filterform").siblings(".facetvalues").find("li");
         var match = $(this).val().toUpperCase();
         if (match.length === 0) {

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

@@ -130 +130 @@
 }
 
-.facet.collapsedfacet .filtertoggle {
+.filtertoggle {
     display: none;
 }
 
-.facet .filtertoggle, .facet .filtertoggle:hover {
-    float: right;
-    clear: right;
-    display: block;
-    margin-top: 8px;
-    margin-right: 8px;
-    padding: 0px;
-    width: 16px;
-    height: 16px;
-    background-size: 16px;
-    background-repeat: no-repeat;
-}
 .facet.expandedfacet a.filtertoggle {
     /* link means enabled */