diff --git a/js/isotope.js b/js/isotope.js index b777b66..258e5c1 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -177,7 +177,23 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this.option( opts ); this._getIsInstant(); // filter, sort, and layout - this.filteredItems = this._filter( this.items ); + + // filter + var filtered = this._filter( this.items ); + this.filteredItems = filtered.matches; + + var _this = this; + function hideReveal() { + _this.reveal( filtered.needReveal ); + _this.hide( filtered.needHide ); + } + + if ( this._isInstant ) { + this._noTransition( hideReveal ); + } else { + hideReveal(); + } + this._sort(); this._layout(); }; @@ -226,19 +242,12 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } } - var _this = this; - function hideReveal() { - _this.reveal( hiddenMatched ); - _this.hide( visibleUnmatched ); - } - - if ( this._isInstant ) { - this._noTransition( hideReveal ); - } else { - hideReveal(); - } - - return matches; + // return collections of items to be manipulated + return { + matches: matches, + needReveal: hiddenMatched, + needHide: visibleUnmatched + }; }; // get a jQuery, function, or a matchesSelector test given the filter @@ -456,6 +465,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode if ( !items.length ) { return; } + // filter, layout, reveal new items var filteredItems = this._filterRevealAdded( items ); // add to filteredItems this.filteredItems = this.filteredItems.concat( filteredItems ); @@ -467,28 +477,26 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode if ( !items.length ) { return; } - // add items to beginning of collection - var previousItems = this.items.slice(0); - this.items = items.concat( previousItems ); // start new layout this._resetLayout(); this._manageStamps(); - // layout new stuff without transition + // filter, layout, reveal new items var filteredItems = this._filterRevealAdded( items ); // layout previous items - this.layoutItems( previousItems ); - // add to filteredItems + this.layoutItems( this.filteredItems ); + // add to items and filteredItems this.filteredItems = filteredItems.concat( this.filteredItems ); + this.items = items.concat( this.items ); }; Isotope.prototype._filterRevealAdded = function( items ) { - var filteredItems = this._noTransition( function() { - return this._filter( items ); - }); - // layout and reveal just the new items - this.layoutItems( filteredItems, true ); - this.reveal( filteredItems ); - return items; + var filtered = this._filter( items ); + this.hide( filtered.needHide ); + // reveal all new items + this.reveal( filtered.matches ); + // layout new items, no transition + this.layoutItems( filtered.matches, true ); + return filtered.matches; }; /** @@ -508,24 +516,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this.element.appendChild( item.element ); } // 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 ); - }); - // */ + var filteredInsertItems = this._filter( items ).matches; // set flag for ( i=0; i < len; i++ ) { items[i].isLayoutInstant = true; diff --git a/sandbox/insert.html b/sandbox/insert.html index 3647c88..b13af5b 100644 --- a/sandbox/insert.html +++ b/sandbox/insert.html @@ -12,7 +12,11 @@

insert

-

+

+ + + +

49
@@ -60,8 +64,13 @@ docReady( function() { } }); + eventie.bind( document.querySelector('#prepend'), 'click', function() { + // prepend 3 new items + iso.prepended( [ prependItem(), prependItem(), prependItem() ] ); + }); + eventie.bind( document.querySelector('#insert'), 'click', function() { - // append 3 new items + // insert 3 new items iso.insert( [ getItem(), getItem(), getItem() ] ); }); @@ -78,6 +87,12 @@ docReady( function() { return item; } + function prependItem() { + var item = getItem(); + container.insertBefore( item, container.firstChild ); + return item; + } + function appendItem() { var item = getItem(); container.appendChild( item ); @@ -95,8 +110,6 @@ var getText = docElem.textContent ? function( elem ) { return elem.innerText; }; - -