Awesome support for filtering

docs/filtering.html

@@ -319,7 +319,7 @@
       $wall.mercutio({
         columnWidth: 100, 
         // only apply mercutio layout to visible elements
-        itemSelector: '.box:not(.invis)',
+        selector: '.box',
         animate: true,
         animationOptions: {
           duration: speed,
@@ -328,21 +328,10 @@
       });
 
       $('#filtering-nav a').click(function(){
-        var colorClass = '.' + $(this).attr('class');
-
-        if(colorClass=='.all') {
-          // show all hidden boxes
-          $wall.children('.invis')
-            .toggleClass('invis').fadeIn(speed);
-        } else {  
-          // hide visible boxes 
-          $wall.children().not(colorClass).not('.invis')
-            .toggleClass('invis').fadeOut(speed);
-          // show hidden boxes
-          $wall.children(colorClass+'.invis')
-            .toggleClass('invis').fadeIn(speed);
-        }
-        $wall.mercutio();
+        console.log('click')
+        var className = $(this).attr('class'),
+            filterSelector = className === 'all' ? '*' : '.' + className;
+        $wall.mercutio({ filter: filterSelector });
 
         return false;
       });

jquery.mercutio.js

@@ -43,19 +43,15 @@
     return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
   };
 
-  /*
-    $cards.all
-    $cards.filtered
-    $cards.sorted
-  */
+
+  // ========================= mercutio ===============================
 
   var mercutioMethods = {
     
 
-    filter : function() {
+    filter : function( $cards ) {
       var props  = this.data('mercutio'),
-          filter = props.opts.filter,
-          $cards = props.$cards.all;
+          filter = props.opts.filter === '' ? '*' : props.opts.filter;
 
       if ( !filter ) {
         props.$cards.filtered = $cards;
@@ -68,16 +64,17 @@
 
         props.$cards.filtered = $cards.filter( filter );
 
-        if ( filter === '*' ) {
-          // $visibleCards = this;
-        } else {
+        if ( filter !== '*' ) {
           $cardsToShow = $hiddenCards.filter( filter );
-          $cardsToHide = $visibleCards.not( filter );
+
+          var $cardsToHide = $visibleCards.not( filter ).toggleClass( hiddenClass );
+          $cardsToHide.addClass( hiddenClass );
           props.styleQueue.push({ $el: $cardsToHide, style: props.opts.hiddenStyle });
         }
         
         props.styleQueue.push({ $el: $cardsToShow, style: props.opts.visibleStyle });
-        
+        $cardsToShow.removeClass( hiddenClass );
+
       }
       
       return this;
@@ -261,7 +258,7 @@
       // need to get cards
       props.$cards.all = props.opts.selector ? 
         this.find( props.opts.selector ) : 
-        this.children;
+        this.children();
       
       props.colW = props.opts.columnWidth || props.$cards.all.outerWidth(true);
 
@@ -321,7 +318,7 @@
 
         var colYs = $this.mercutio( 'resetColYs', props );
         $this
-          .mercutio( 'filter' )
+          .mercutio( 'filter', props.$cards.all )
           .mercutio( 'layout', props.$cards.filtered, colYs );
 
 
@@ -371,9 +368,10 @@
     },
     visibleStyle : {
       opacity : 1
+    },
+    animationOptions: {
+      queue: false
     }
-    // animate: false,
-    // animationOptions: {}
   };
 
 })(jQuery);