Add arrangeComplete event; Fixes #732

triggered after layout, hide and reveal are all done

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)
 

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 ) {

sandbox/filter-sort.html

@@ -212,6 +212,9 @@ docReady( function() {
   //   console.log( 'revealComplete', items );
   // })
 
+  // iso.on( 'arrangeComplete', function( items ) {
+  //   console.log( 'arrangeComplete', items.length );
+  // });
 
 });
 

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();

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>