Permalink
Browse files

src : inserting & appending items get hidden, then revealed

  • Loading branch information...
1 parent 13d07fc commit 8e2f51612eaf20e3031b81b8c5ff5e322cbb7b4f @desandro desandro committed Jun 30, 2011
Showing with 59 additions and 19 deletions.
  1. +58 −18 jquery.isotope.js
  2. +1 −1 jquery.isotope.min.js
View
@@ -607,27 +607,34 @@
this.styleQueue.push({ $el: this.element, style: containerStyle });
}
+ this._processStyleQueue();
+
+ // provide $elems as context for the callback
+ if ( callback ) {
+ callback.call( $elems );
+ }
+
+ this.isLaidOut = true;
+ },
+
+ _processStyleQueue : function() {
// are we animating the layout arrangement?
// use plugin-ish syntax for css or animate
var styleFn = !this.isLaidOut ? 'css' : (
this.isUsingJQueryAnimation ? 'animate' : 'css'
),
- animOpts = this.options.animationOptions;
-
+ animOpts = this.options.animationOptions,
+ _isInsertingAnimated = this._isInserting && this.isUsingJQueryAnimation,
+ objStyleFn;
+
// process styleQueue
$.each( this.styleQueue, function( i, obj ) {
- obj.$el[ styleFn ]( obj.style, animOpts );
+ objStyleFn = _isInsertingAnimated && obj.$el.hasClass('no-transition') ? 'css' : styleFn;
+ obj.$el[ objStyleFn ]( obj.style, animOpts );
});
// clear out queue for next time
this.styleQueue = [];
-
- // provide $elems as context for the callback
- if ( callback ) {
- callback.call( $elems );
- }
-
- this.isLaidOut = true;
},
@@ -647,6 +654,8 @@
// ====================== Convenience methods ======================
+ // ====================== Adding items ======================
+
// adds a jQuery object of items to a isotope container
addItems : function( $content, callback ) {
var $newAtoms = this._getAtoms( $content );
@@ -660,29 +669,60 @@
},
// convienence method for adding elements properly to any layout
+ // positions items, hides them, then animates them back in <--- very sezzy
insert : function( $content, callback ) {
+ // position items
this.element.append( $content );
var instance = this;
this.addItems( $content, function( $newAtoms ) {
- var $filteredAtoms = instance._filter( $newAtoms );
- instance.$filteredAtoms = instance.$filteredAtoms.add( $filteredAtoms );
+ var $newFilteredAtoms = instance._filter( $newAtoms, true );
+ instance._addHideAppended( $newFilteredAtoms );
+ instance._sort();
+ instance.reLayout();
+ instance._revealAppended( $newFilteredAtoms, callback );
});
- this._sort();
- this.reLayout( callback );
-
},
// convienence method for working with Infinite Scroll
appended : function( $content, callback ) {
var instance = this;
- this.addItems( $content, function( $newAtoms ){
- instance.$filteredAtoms = instance.$filteredAtoms.add( $newAtoms );
- instance.layout( $newAtoms, callback );
+ this.addItems( $content, function( $newAtoms ) {
+ instance._addHideAppended( $newAtoms );
+ instance.layout( $newAtoms );
+ instance._revealAppended( $newAtoms, callback );
});
},
+ // adds new atoms, then hides them before positioning
+ _addHideAppended : function( $newAtoms ) {
+ this.$filteredAtoms = this.$filteredAtoms.add( $newAtoms );
+ $newAtoms.addClass('no-transition');
+
+ this._isInserting = true;
+
+ // apply hidden styles
+ this.styleQueue.push({ $el: $newAtoms, style: this.options.hiddenStyle });
+ },
+
+ // sets visible style on new atoms
+ _revealAppended : function( $newAtoms, callback ) {
+ var instance = this;
+ // apply visible style after a sec
+ setTimeout( function() {
+ // enable animation
+ $newAtoms.removeClass('no-transition');
+ // reveal newly inserted filtered elements
+ instance.styleQueue.push({ $el: $newAtoms, style: instance.options.visibleStyle });
+ instance._processStyleQueue();
+ delete instance._isInserting;
+ if ( callback ) {
+ callback( $newAtoms );
+ }
+ }, 10 );
+ },
+
// gathers all atoms
reloadItems : function() {
this.$allAtoms = this._getAtoms( this.element.children() );
Oops, something went wrong.

0 comments on commit 8e2f516

Please sign in to comment.