From fa2c14ba2bc3171c363d9650d6a2179ac4f47bf8 Mon Sep 17 00:00:00 2001
From: David DeSandro <desandrocodes@gmail.com>
Date: Fri, 10 Apr 2015 14:32:06 -0400
Subject: [PATCH] Add arrangeComplete event; Fixes #732

triggered after layout, hide and reveal are all done
---
 changelog.md                                  |  1 +
 js/isotope.js                                 | 27 +++++++++++++++++++
 sandbox/filter-sort.html                      |  3 +++
 ...layout-complete.js => arrange-complete.js} | 16 +++++------
 test/index.html                               |  4 +--
 5 files changed, 41 insertions(+), 10 deletions(-)
 rename test/{layout-complete.js => arrange-complete.js} (71%)

diff --git a/changelog.md b/changelog.md
index 13d7e73..3be4ddf 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,6 @@
 # Changelog
 
++ Added [`arrangeComplete` event](http://isotope.metafizzy.co/events.html#arrangecomplete). Fixed [#732](https://github.com/metafizzy/isotope/issues/732)
 + Changed `bower.json` `main` to just `js/isotope.js`. Resolved [#879](https://github.com/metafizzy/isotope/issues/879)
 + Added [fizzy-ui-utils](https://github.com/metafizzy/fizzy-ui-utils)
 
diff --git a/js/isotope.js b/js/isotope.js
index 8d095ef..8c309d4 100644
--- a/js/isotope.js
+++ b/js/isotope.js
@@ -190,6 +190,8 @@ var getText = docElem.textContent ?
       _this.hide( filtered.needHide );
     }
 
+    this._bindArrangeComplete();
+
     if ( this._isInstant ) {
       this._noTransition( hideReveal );
     } else {
@@ -212,6 +214,31 @@ var getText = docElem.textContent ?
     return isInstant;
   };
 
+  // listen for layoutComplete, hideComplete and revealComplete
+  // to trigger arrangeComplete
+  Isotope.prototype._bindArrangeComplete = function() {
+    // listen for 3 events to trigger arrangeComplete
+    var isLayoutComplete, isHideComplete, isRevealComplete;
+    var _this = this;
+    function arrangeParallelCallback() {
+      if ( isLayoutComplete && isHideComplete && isRevealComplete ) {
+        _this.emitEvent( 'arrangeComplete', [ _this.filteredItems ] );
+      }
+    }
+    this.once( 'layoutComplete', function() {
+      isLayoutComplete = true;
+      arrangeParallelCallback();
+    });
+    this.once( 'hideComplete', function() {
+      isHideComplete = true;
+      arrangeParallelCallback();
+    });
+    this.once( 'revealComplete', function() {
+      isRevealComplete = true;
+      arrangeParallelCallback();
+    });
+  };
+
   // -------------------------- filter -------------------------- //
 
   Isotope.prototype._filter = function( items ) {
diff --git a/sandbox/filter-sort.html b/sandbox/filter-sort.html
index dda3e51..5479527 100644
--- a/sandbox/filter-sort.html
+++ b/sandbox/filter-sort.html
@@ -212,6 +212,9 @@ docReady( function() {
   //   console.log( 'revealComplete', items );
   // })
 
+  // iso.on( 'arrangeComplete', function( items ) {
+  //   console.log( 'arrangeComplete', items.length );
+  // });
 
 });
 
diff --git a/test/layout-complete.js b/test/arrange-complete.js
similarity index 71%
rename from test/layout-complete.js
rename to test/arrange-complete.js
index 82a1ec4..3d91f85 100644
--- a/test/layout-complete.js
+++ b/test/arrange-complete.js
@@ -1,16 +1,16 @@
-test( 'layoutComplete', function() {
+test( 'arrangeComplete', function() {
 
   'use strict';
 
-  var iso = new Isotope( '#layout-complete', {
+  var iso = new Isotope( '#arrange-complete', {
     layoutMode: 'fitRows',
     transitionDuration: '0.1s'
   });
 
   var tests = [
     function() {
-      iso.once( 'layoutComplete', function() {
-        ok( true, 'layoutComplete after some were filtered' );
+      iso.once( 'arrangeComplete', function() {
+        ok( true, 'arrangeComplete after some were filtered' );
         next();
       });
 
@@ -19,7 +19,7 @@ test( 'layoutComplete', function() {
       });
     },
     function() {
-      iso.once( 'layoutComplete', function() {
+      iso.once( 'arrangeComplete', function() {
         ok( true, 'after some revealed, some hidden, some same' );
         next();
       });
@@ -29,7 +29,7 @@ test( 'layoutComplete', function() {
       });
     },
     function() {
-      iso.once( 'layoutComplete', function() {
+      iso.once( 'arrangeComplete', function() {
         ok( true, 'after random sort' );
         next();
       });
@@ -39,7 +39,7 @@ test( 'layoutComplete', function() {
       });
     },
     function() {
-      iso.once( 'layoutComplete', function() {
+      iso.once( 'arrangeComplete', function() {
         ok( true, 'after layout mid-way thru transition' );
         next();
       });
@@ -60,7 +60,7 @@ test( 'layoutComplete', function() {
   function next() {
     if ( tests.length ) {
       var nextTest = tests.shift();
-      // HACK for consecutive layoutComplete calls
+      // HACK for consecutive arrangeComplete calls
       setTimeout( nextTest );
     } else {
       start();
diff --git a/test/index.html b/test/index.html
index 6473c13..40ac1ba 100644
--- a/test/index.html
+++ b/test/index.html
@@ -36,7 +36,7 @@
 <script src="sorting.js"></script>
 <script src="sort-data.js"></script>
 <script src="filtering.js"></script>
-<script src="layout-complete.js"></script>
+<script src="arrange-complete.js"></script>
 <script src="get-segment-size.js"></script>
 <script src="masonry-measure-columns.js"></script>
 <script src="masonry-stamp.js"></script>
@@ -90,7 +90,7 @@
 
   <h2>layoutComplete</h2>
 
-  <div id="layout-complete" class="container">
+  <div id="arrange-complete" class="container">
     <div class="item a1 b1">a1 b1</div>
     <div class="item a2 b1">a2 b1</div>
     <div class="item a3 b1">a3 b1</div>