From cbb6543bcb7e9759f45fb9a3e4e7478f5226779c Mon Sep 17 00:00:00 2001
From: David DeSandro <desandrocodes@gmail.com>
Date: Mon, 13 Jan 2014 20:00:54 -0500
Subject: [PATCH] insert only transitions reveal for new items

requires Outlayer that respects item.isLayoutInstant
---
 examples/insert.html | 18 ++++++++++++------
 js/isotope.js        | 28 ++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/examples/insert.html b/examples/insert.html
index 817918c..b611233 100644
--- a/examples/insert.html
+++ b/examples/insert.html
@@ -12,7 +12,7 @@
 
 <h1>insert</h1>
 
-<p><button id="insert">Insert</button></p>
+<p><button id="insert">Insert</button> <button id="append">Append</button></p>
 
 <div id="container">
   <div class="item"><b>49</b></div>
@@ -49,6 +49,7 @@ docReady( function() {
   var container = document.querySelector('#container');
   var iso = new Isotope( container, {
     layoutMode: 'masonry',
+    transitionDuration: '0.8s',
     getSortData: {
       b: 'b parseInt'
     },
@@ -59,13 +60,18 @@ docReady( function() {
     }
   });
 
+  function getAppendedItems() {
+    return [ appendItem(), appendItem(), appendItem() ];
+  }
+
   eventie.bind( document.querySelector('#insert'), 'click', function() {
     // append 3 new items
-    var appendedItems = [];
-    appendedItems.push( appendItem() );
-    appendedItems.push( appendItem() );
-    appendedItems.push( appendItem() );
-    iso.insert( appendedItems );
+    iso.insert( getAppendedItems() );
+  });
+
+  eventie.bind( document.querySelector('#append'), 'click', function() {
+    // append 3 new items
+    iso.appended( getAppendedItems() );
   });
 
   function appendItem() {
diff --git a/js/isotope.js b/js/isotope.js
index 9eee186..95223df 100644
--- a/js/isotope.js
+++ b/js/isotope.js
@@ -496,7 +496,35 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     if ( !items.length ) {
       return;
     }
+    // filter new stuff
+    /*
+    // this way adds hides new filtered items with NO transition
+    // so user can't see if new hidden items have been inserted
+    var filteredInsertItems;
+    this._noTransition( function() {
+      filteredInsertItems = this._filter( items );
+      // hide all new items
+      this.hide( filteredInsertItems );
+    });
+    // */
+    // this way hides new filtered items with transition
+    // so user at least sees that something has been added
+    var filteredInsertItems = this._filter( items );
+    // hide all newitems
+    this._noTransition( function() {
+      this.hide( filteredInsertItems );
+    });
+    // */
+    // set flag
+    for ( var i=0, len = items.length; i < len; i++ ) {
+      items[i].isLayoutInstant = true;
+    }
     this.arrange();
+    // reset flag
+    for ( i=0; i < len; i++ ) {
+      delete items[i].isLayoutInstant;
+    }
+    this.reveal( filteredInsertItems );
   };
 
   var _remove = Isotope.prototype.remove;