Merge branch 'v2' of github.com:desandro/isotope into v2

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 = [];
+    iso.insert( getAppendedItems() );
-    appendedItems.push( appendItem() );
+  });
-    appendedItems.push( appendItem() );
+
-    appendedItems.push( appendItem() );
+  eventie.bind( document.querySelector('#append'), 'click', function() {
-    iso.insert( appendedItems );
+    // append 3 new items
+    iso.appended( getAppendedItems() );
   });
 
   function appendItem() {

js/isotope.js

@@ -100,6 +100,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     this.itemGUID = 0;
     // functions that sort items
     this._sorters = {};
+    this._getSorters();
     // call super
     Outlayer.prototype._create.call( this );
 
@@ -129,7 +130,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       var item = items[i];
       item.id = this.itemGUID++;
     }
-    this.updateSortData( items );
+    this._updateItemsSortData( items );
     return items;
   };
 
@@ -224,17 +225,16 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       }
     }
 
-    // HACK
+    var _this = this;
-    // disable transition if instant
+    function hideReveal() {
-    var _transitionDuration = this.options.transitionDuration;
+      _this.reveal( hiddenMatched );
-    if ( this._isInstant ) {
+      _this.hide( visibleUnmatched );
-      this.options.transitionDuration = 0;
     }
-    this.reveal( hiddenMatched );
+
-    this.hide( visibleUnmatched );
-    // set back
     if ( this._isInstant ) {
-      this.options.transitionDuration = _transitionDuration;
+      this._noTransition( hideReveal );
+    } else {
+      hideReveal();
     }
 
     return matches;
@@ -242,40 +242,56 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
 
   // get a jQuery, function, or a matchesSelector test given the filter
   Isotope.prototype._getFilterTest = function( filter ) {
-    var test;
     if ( jQuery && this.options.isJQueryFiltering ) {
-      test = function( item ) {
+      // use jQuery
+      return function( item ) {
         return jQuery( item.element ).is( filter );
       };
-    } else if ( typeof filter === 'function' ) {
+    }
-      test = function( item ) {
+    if ( typeof filter === 'function' ) {
+      // use filter as function
+      return function( item ) {
         return filter( item.element );
       };
-    } else {
+    }
-      test = function( item ) {
+    // default, use filter as selector string
+    return function( item ) {
       return matchesSelector( item.element, filter );
     };
-    }
-    return test;
   };
 
   // -------------------------- sorting -------------------------- //
 
-  Isotope.prototype.updateSortData = function( items ) {
+  /**
-    // update sorters
+   * @params {Array} elems
+   * @public
+   */
+  Isotope.prototype.updateSortData = function( elems ) {
+    this._getSorters();
+    // update item sort data
+    // default to all items if none are passed in
+    elems = makeArray( elems );
+    var items = this.getItems( elems );
+    // if no items found, update all items
+    items = items.length ? items : this.items;
+    this._updateItemsSortData( items );
+  };
+
+  Isotope.prototype._getSorters = function() {
     var getSortData = this.options.getSortData;
     for ( var key in getSortData ) {
       var sorter = getSortData[ key ];
       this._sorters[ key ] = mungeSorter( sorter );
     }
-    // update item sort data
+  };
-    // default to all items if none are passed in
+
-    items = items || this.items;
+  /**
+   * @params {Array} items - of Isotope.Items
+   * @private
+   */
+  Isotope.prototype._updateItemsSortData = function( items ) {
     for ( var i=0, len = items.length; i < len; i++ ) {
       var item = items[i];
-      if ( item.isIgnored ) {
-        continue;
-      }
       item.updateSortData();
     }
   };
@@ -303,7 +319,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       var attr = attrMatch && attrMatch[1];
       var getValue = getValueGetter( attr, query );
       // use second argument as a parser
-      var parser = getParser( args[1] );
+      var parser = Isotope.sortDataParsers[ args[1] ];
       // parse the value, if there was a parser
       sorter = parser ? function( elem ) {
         return elem && parser( getValue( elem ) );
@@ -334,33 +350,18 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       return getValue;
     }
 
-    // return a parser function if arg matches
-    function getParser( arg ) {
-      var parser;
-      switch ( arg ) {
-        case 'parseInt' :
-          parser = function( val ) {
-            return parseInt( val, 10 );
-          };
-          break;
-        case 'parseFloat' :
-          parser = function( val ) {
-            return parseFloat( val );
-          };
-          break;
-        default :
-          // just return val if parser isn't one of these
-          // TODO - console log that that parser doesn't exist
-          parser = function( val ) {
-            return val;
-          };
-      }
-      return parser;
-    }
-
     return mungeSorter;
   })();
 
+  // parsers used in getSortData shortcut strings
+  Isotope.sortDataParsers = {
+    'parseInt': function( val ) {
+      return parseInt( val, 10 );
+    },
+    'parseFloat': function( val ) {
+      return parseFloat( val );
+    }
+  };
 
   // ----- sort method ----- //
 
@@ -477,12 +478,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
   };
 
   Isotope.prototype._filterRevealAdded = function( items ) {
-    // disable transition for filtering
+    var filteredItems = this._noTransition( function() {
-    var transitionDuration = this.options.transitionDuration;
+      return this._filter( items );
-    this.options.transitionDuration = 0;
+    });
-    var filteredItems = this._filter( items );
-    // re-enable transition for reveal
-    this.options.transitionDuration = transitionDuration;
     // layout and reveal just the new items
     this.layoutItems( filteredItems, true );
     this.reveal( filteredItems );
@@ -498,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;
@@ -519,6 +545,25 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     }
   };
 
+  /**
+   * trigger fn without transition
+   * kind of hacky to have this in the first place
+   * @param {Function} fn
+   * @returns ret
+   * @private
+   */
+  Isotope.prototype._noTransition = function( fn ) {
+    // save transitionDuration before disabling
+    var transitionDuration = this.options.transitionDuration;
+    // disable transition
+    this.options.transitionDuration = 0;
+    // do it
+    var returnValue = fn.call( this );
+    // re-enable transition for reveal
+    this.options.transitionDuration = transitionDuration;
+    return returnValue;
+  };
+
   // -----  ----- //
 
   return Isotope;

js/item.js

@@ -25,6 +25,9 @@ Item.prototype._create = function() {
 };
 
 Item.prototype.updateSortData = function() {
+  if ( this.isIgnored ) {
+    return;
+  }
   // default sorters
   this.sortData.id = this.id;
   // for backward compatibility

test/index.html

@@ -28,7 +28,8 @@
 <script src="../js/isotope.js"></script>
 <script src="../js/layout-modes/fit-rows.js"></script>
 <script src="../js/layout-modes/masonry.js"></script>
-<script src="../js/layout-modes/cells-by-row.js"></script>
+
+<script src="../bower_components/isotope-cells-by-row/cells-by-row.js"></script>
 
 <script src="helpers.js"></script>
 <script src="sorting.js"></script>