src: animate removing method

docs: add removing demo

v1.5.05

Fixes #122

_posts/demos/2011-01-02-adding-items.html

@@ -48,6 +48,7 @@ category: demos
 
       $container.isotope({
         itemSelector : '.element',
+        filter: '*',
         getSortData : {
           symbol : function( $elem ) {
             return $elem.attr('data-symbol');

_posts/demos/2011-12-22-removing.html

@@ -0,0 +1,60 @@
+---
+title: Removing
+layout: default
+category: demos
+---
+
+  <section id="copy">
+    <p>Removing items filters them out then removes them from the page. Click on a button or the item itself to remove them.</p>
+  </section>
+  
+
+  <section id="options" class="clearfix">
+    
+    
+    <h3>Remove</h3>
+
+    <ul id="removable" class="option-set clearfix">
+      <li><a href="#remove" data-option-value=".metal">metal</a></li>
+      <li><a href="#remove" data-option-value=".transition">transition</a></li>
+      <li><a href="#remove" data-option-value=".post-transition">post-transition</a></li>
+      <li><a href="#remove" data-option-value=".nonmetal">nonmetal</a></li>
+      <li><a href="#remove" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
+      <li><a href="#remove" data-option-value=".metalloid">metalloid</a></li>
+    </ul>
+
+    
+  </section> <!-- #options -->
+  
+  <div id="container" class="variable-sizes clickable clearfix">
+    {% for element in site.elements limit:40 %}
+      {% include element-partial.html %}
+    {% endfor %}
+  </div> <!-- #container -->
+  
+  <script src="../{{ site.jquery_js }}"></script>
+  <script src="../{{ site.isotope_js }}"></script>
+  <script>
+    $(function(){
+      
+      var $container = $('#container');
+
+      $container.isotope({
+        itemSelector : '.element'
+      });
+      
+      $('#removable a').click(function(){
+        var selector = $(this).attr('data-option-value');
+        var $removable = $container.find( selector );
+        $container.isotope( 'remove', $removable );
+      });
+      
+      // remove item if clicked
+      $container.delegate( '.element', 'click', function(){
+        $container.isotope( 'remove', $(this) );
+      });
+      
+      
+    });
+  </script>
+  

_posts/docs/2010-12-04-methods.mdown

@@ -136,6 +136,8 @@ Re-collects all item elements in their current order in the DOM.  Useful for pre
 
 Removes specified item elements from Isotope widget and the DOM.
 
+[**See Demo: Removing**](../demos/removing.html).
+
 ## shuffle
 
 {% highlight javascript %}

jquery.isotope.js

@@ -1,5 +1,5 @@
 /**
- * Isotope v1.5.04
+ * Isotope v1.5.05
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -732,7 +732,7 @@
       
       var instance = this;
       this.addItems( $content, function( $newAtoms ) {
-        var $newFilteredAtoms = instance._filter( $newAtoms, true );
+        var $newFilteredAtoms = instance._filter( $newAtoms );
         instance._addHideAppended( $newFilteredAtoms );
         instance._sort();
         instance.reLayout();
@@ -783,11 +783,23 @@
     
     // removes elements from Isotope widget
     remove: function( $content ) {
+      // remove elements from Isotope instance in callback
+      var instance = this;
+      var removeContent = function() {
+        instance.$allAtoms = instance.$allAtoms.not( $content );
+        $content.remove();
+      };
 
-      this.$allAtoms = this.$allAtoms.not( $content );
+      if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) {
+        // if any non-hidden content needs to be removed
+        this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle });
         this.$filteredAtoms = this.$filteredAtoms.not( $content );
-
+        this._sort();
-      $content.remove();
+        this.reLayout( removeContent );
+      } else {
+        // remove it now
+        removeContent();
+      }
 
     },