Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Showing with 252 additions and 28 deletions.
  1. +165 −0 _posts/tests/2011-10-19-callbacks.html
  2. +87 −28 jquery.isotope.js
165 _posts/tests/2011-10-19-callbacks.html
View
@@ -0,0 +1,165 @@
+---
+title: Callbacks
+layout: default
+category: tests
+---
+
+<section id="copy">
+ <p>Tests that callbacks are triggering properly, after animation/transition has completed.</p>
+
+</section>
+
+<section id="options" class="clearfix">
+
+ {% include filter-buttons.html %}
+
+ {% include sort-buttons.html %}
+
+ <h3>Etc</h3>
+
+ <ul id="etc" class="clearfix">
+ <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
+ <li id="insert"><a href="#insert">Insert new elements</a></li>
+ <li id="append"><a href='#append'>Append new elements</a></li>
+ <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
+ </ul>
+
+</section> <!-- #options -->
+
+<div id="container" class="clickable variable-sizes clearfix">
+ {% for elem_number in site.best_of_order %}
+ {% assign element = site.elements[elem_number] %}
+ {% include element-partial.html %}
+ {% endfor %}
+</div> <!-- #container -->
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script src="../js/fake-element.js"></script>
+<script>
+
+ $(function(){
+
+ var $container = $('#container');
+
+ {% include random-sizes.js %}
+
+ var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'],
+ colorI = 0;
+
+ function changeBGColor() {
+ var color = colors[ colorI % colors.length ];
+ $container.css({ background: color })
+ colorI++;
+ }
+
+ $container.isotope({
+ itemSelector : '.element',
+ masonry : {
+ columnWidth : 120
+ },
+ masonryHorizontal : {
+ rowHeight: 120
+ },
+ cellsByRow : {
+ columnWidth : 240,
+ rowHeight : 240
+ },
+ cellsByColumn : {
+ columnWidth : 240,
+ rowHeight : 240
+ },
+ getSortData : {
+ symbol : function( $elem ) {
+ return $elem.attr('data-symbol');
+ },
+ category : function( $elem ) {
+ return $elem.attr('data-category');
+ },
+ number : function( $elem ) {
+ return parseInt( $elem.find('.number').text(), 10 );
+ },
+ weight : function( $elem ) {
+ return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
+ },
+ name : function ( $elem ) {
+ return $elem.find('.name').text();
+ }
+ }
+ }, changeBGColor );
+
+
+ var $optionSets = $('#options .option-set'),
+ $optionLinks = $optionSets.find('a');
+
+ $optionLinks.click(function(){
+ var $this = $(this);
+ // don't proceed if already selected
+ if ( $this.hasClass('selected') ) {
+ return false;
+ }
+ var $optionSet = $this.parents('.option-set');
+ $optionSet.find('.selected').removeClass('selected');
+ $this.addClass('selected');
+
+ // make option object dynamically, i.e. { filter: '.my-filter-class' }
+ var options = {},
+ key = $optionSet.attr('data-option-key'),
+ value = $this.attr('data-option-value');
+ // parse 'false' as false boolean
+ value = value === 'false' ? false : value;
+ options[ key ] = value;
+ if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
+ // changes in layout modes need extra logic
+ changeLayoutMode( $this, options )
+ } else {
+ // otherwise, apply new options
+ $container.isotope( options, changeBGColor );
+ }
+
+ return false;
+ });
+
+
+
+ $('#insert a').click(function(){
+ var $newEls = $( fakeElement.getGroup() );
+ $container.isotope( 'insert', $newEls, changeBGColor );
+
+ return false;
+ });
+
+ $('#append a').click(function(){
+ var $newEls = $( fakeElement.getGroup() );
+ $container.append( $newEls ).isotope( 'appended', $newEls, changeBGColor );
+
+ return false;
+ });
+
+
+ // change size of clicked element
+ $container.delegate( '.element', 'click', function(){
+ $(this).toggleClass('large');
+ $container.isotope('reLayout');
+ });
+
+ // toggle variable sizes of all elements
+ $('#toggle-sizes').find('a').click(function(){
+ $container
+ .toggleClass('variable-sizes')
+ .isotope('reLayout');
+ return false;
+ });
+
+
+ var $sortBy = $('#sort-by');
+ $('#shuffle a').click(function(){
+ $container.isotope('shuffle');
+ $sortBy.find('.selected').removeClass('selected');
+ $sortBy.find('[data-option-value="random"]').addClass('selected');
+ return false;
+ });
+
+ });
+</script>
115 jquery.isotope.js
View
@@ -1,5 +1,5 @@
/**
- * Isotope v1.4.110906
+ * Isotope v1.5.0 beta
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@@ -45,7 +45,9 @@
}
}
- var transformProp = getStyleProperty('transform');
+ var transformProp = getStyleProperty('transform'),
+ transitionProp = getStyleProperty('transitionProperty');
+
// ========================= miniModernizr ===============================
// <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting
@@ -92,7 +94,7 @@
},
csstransitions: function() {
- return !!getStyleProperty('transitionProperty');
+ return !!transitionProp;
}
};
@@ -247,8 +249,20 @@
};
}
+
+ // ========================= get transition-end event ===============================
+
+ if ( Modernizr.csstransitions ) {
+ var transitionEndEvent = {
+ WebkitTransitionProperty: 'webkitTransitionEnd', // webkit
+ MozTransitionProperty: 'transitionend',
+ OTransitionProperty: 'oTransitionEnd',
+ transitionProperty: 'transitionEnd'
+ }[ transitionProp ];
+ var transitionDurProp = getStyleProperty('transitionDuration');
+ }
-
+ // ========================= smartresize ===============================
/*
* smartresize: debounced resize event for jQuery
@@ -295,11 +309,11 @@
// our "Widget" object constructor
- $.Isotope = function( options, element ){
+ $.Isotope = function( options, element, callback ){
this.element = $( element );
this._create( options );
- this._init();
+ this._init( callback );
};
// styles of container element we want to keep track of
@@ -423,7 +437,6 @@
this.$filteredAtoms = this._filter( this.$allAtoms );
this._sort();
-
this.reLayout( callback );
},
@@ -588,17 +601,12 @@
this.styleQueue.push({ $el: this.element, style: containerStyle });
}
- this._processStyleQueue();
-
- // provide $elems as context for the callback
- if ( callback ) {
- callback.call( $elems );
- }
+ this._processStyleQueue( $elems, callback );
this.isLaidOut = true;
},
- _processStyleQueue : function() {
+ _processStyleQueue : function( $elems, callback ) {
// are we animating the layout arrangement?
// use plugin-ish syntax for css or animate
var styleFn = !this.isLaidOut ? 'css' : (
@@ -606,13 +614,67 @@
),
animOpts = this.options.animationOptions,
_isInsertingAnimated = this._isInserting && this.isUsingJQueryAnimation,
- objStyleFn;
-
+ objStyleFn, processor,
+ triggerCallbackNow, callbackFn;
+
+ // default styleQueue processor, may be overwritten down below
+ processor = function( i, obj ) {
+ obj.$el[ styleFn ]( obj.style, animOpts );
+ };
+
+ if ( this._isInserting || !callback ) {
+ // process styleQueue
+ processor = function( i, obj ) {
+ // only animate if it not being inserted
+ objStyleFn = _isInsertingAnimated && obj.$el.hasClass('no-transition') ? 'css' : styleFn;
+ obj.$el[ objStyleFn ]( obj.style, animOpts );
+ };
+
+ } else {
+ var isCallbackTriggered = false;
+ callbackFn = function() {
+ // trigger callback only once
+ if ( isCallbackTriggered ) {
+ return;
+ }
+ callback( $elems );
+ isCallbackTriggered = true;
+ };
+
+ if ( this.isUsingJQueryAnimation ) {
+ // add callback to animation options
+ animOpts.complete = callbackFn;
+ } else if ( Modernizr.csstransitions ) {
+ // detect if first item has transition
+ var i = 0,
+ testElem = this.styleQueue[0].$el;
+ // get first non-empty jQ object
+ // console.log( this.styleQueue )
+ if ( !testElem.length ) {
+ return;
+ }
+ // get transition duration of the first element in that object
+ // yeah, this is inexact
+ var duration = parseFloat( getComputedStyle( testElem[0] )[ transitionDurProp ] );
+ if ( duration > 0 ) {
+ processor = function( i, obj ) {
+ obj.$el[ styleFn ]( obj.style, animOpts )
+ // trigger callback at transition end
+ .one( transitionEndEvent, callbackFn );
+ }
+ } else {
+ // no transition? hit it now, son
+ triggerCallbackNow = true;
+ }
+ }
+ }
+
// process styleQueue
- $.each( this.styleQueue, function( i, obj ) {
- objStyleFn = _isInsertingAnimated && obj.$el.hasClass('no-transition') ? 'css' : styleFn;
- obj.$el[ objStyleFn ]( obj.style, animOpts );
- });
+ $.each( this.styleQueue, processor );
+
+ if ( triggerCallbackNow ) {
+ callbackFn()
+ }
// clear out queue for next time
this.styleQueue = [];
@@ -695,11 +757,8 @@
$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 );
- }
+ instance._isInserting = false;
+ instance._processStyleQueue( $newAtoms, callback );
}, 10 );
},
@@ -1246,7 +1305,7 @@
// A bit from jcarousel
// https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
- $.fn.isotope = function( options ) {
+ $.fn.isotope = function( options, callback ) {
if ( typeof options === 'string' ) {
// call method
var args = Array.prototype.slice.call( arguments, 1 );
@@ -1271,10 +1330,10 @@
if ( instance ) {
// apply options & init
instance.option( options );
- instance._init();
+ instance._init( callback );
} else {
// initialize new instance
- $.data( this, 'isotope', new $.Isotope( options, this ) );
+ $.data( this, 'isotope', new $.Isotope( options, this, callback ) );
}
});
}
Please sign in to comment.
Something went wrong with that request. Please try again.