Skip to content

Commit

Permalink
src : v1.2 add _updateOption so animationEngine can be updated after …
Browse files Browse the repository at this point in the history
…init. Fixes #53
  • Loading branch information
desandro committed May 13, 2011
1 parent c7e789f commit b3cf613
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 47 deletions.
127 changes: 127 additions & 0 deletions _posts/tests/2011-05-13-jquery-animation01.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
---
title: jquery animation01
layout: demo
category: tests
---

<style>
.isotope,
.isotope .isotope-item {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
</style>

<section id="copy">
<p></p>
</section>

<section id="options" class="clearfix">

<h3>Filters</h3>

<ul id="filters" class="option-set floated clearfix">
<li><a href="#show-all" class="selected">show all</a></li>
<li><a href="#metalloid">metalloid</a></li>
<li><a href="#metal">metal</a></li>
<li><a href="#alkali">alkali</a></li>
<li><a href="#alkaline-earth">alkaline-earth</a></li>
<li><a href="#inner-transition">inner-transition</a></li>
<li><a href="#lanthanoid">lanthanoid</a></li>
<li><a href="#actinoid">actinoid</a></li>
<li><a href="#transition">transition</a></li>
<li><a href="#post-transition">post-transition</a></li>
<li><a href="#nonmetal">nonmetal</a></li>
<li><a href="#other">other</a></li>
<li><a href="#halogen">halogen</a></li>
<li><a href="#noble-gas">noble-gas</a></li>
</ul>

{% include sort-buttons.html %}

<h3>Etc</h3>

<ul id="etc" class="floated clearfix">

<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
</ul>
</section> <!-- #options -->

<div id="container">
{% for element in site.elements limit:40 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #container -->

<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script>
$(function(){

var $container = $('#container');

// hacky way of adding random size classes
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
if ( Math.random() > 0.6 ) {
$(this).addClass('height2');
}
});

{% include sort-buttons.js %}

$('#filters').find('a').click(function(){
// get href attribute, minus the #, plus a . to make it a class
var filterName = '.' + $(this).attr('href').slice(1);
filterName = filterName === '.show-all' ? '*' : filterName;
$container.isotope({ filter: filterName })
return false;
});

{% include option-buttons.js %}

// change size of clicked element
$container.find('.element').live('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;
});

$container.isotope({
itemSelector: '.element',
transformsEnabled: false,
animationEngine: 'jquery',
masonry: {
columnWidth : 120
},
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();
}
}
});

});
</script>
72 changes: 49 additions & 23 deletions jquery.isotope.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Isotope v1.1.110512
* Isotope v1.2.110513
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
Expand Down Expand Up @@ -372,26 +372,9 @@
overflow : 'hidden',
position : 'relative'
});

var jQueryAnimation = false;

// get applyStyleFnName
switch ( this.options.animationEngine.toLowerCase().replace( /[ _\-]/g, '') ) {
case 'css' :
case 'none' :
this.applyStyleFnName = 'css';
break;
case 'jquery' :
this.applyStyleFnName = 'animate';
jQueryAnimation = true;
break;
default : // best available
this.applyStyleFnName = Modernizr.csstransitions ? 'css' : 'animate';
}

this.usingTransforms = this.options.transformsEnabled && Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation;

this.getPositionStyles = this.usingTransforms ? this._translate : this._positionAbs;
this._updateAnimationEngine();
this._updateUsingTransforms();

// sorting
var originalOrderSorter = {
Expand Down Expand Up @@ -449,6 +432,9 @@
// signature: $('#foo').bar({ cool:false });
if ( $.isPlainObject( key ) ){
this.options = $.extend(true, this.options, key);
for ( optionName in key ) {
this._updateOption( optionName );
}

// signature: $('#foo').option('cool'); - getter
} else if ( key && typeof value === "undefined" ){
Expand All @@ -457,10 +443,50 @@
// signature: $('#foo').bar('option', 'baz', false);
} else {
this.options[ key ] = value;
this._updateOption( key );
}

return this; // make sure to return the instance!
},

// ====================== updaters ====================== //
// kind of like setters

// trigger _updateOptionName if it exists
_updateOption : function( optionName ) {
var updateOptionFn = '_update' + optionName.charAt(0).toUpperCase() + optionName.slice(1);
if ( this[ updateOptionFn ] ) {
this[ updateOptionFn ]();
}
},

_updateAnimationEngine : function() {
var animationEngine = this.options.animationEngine.toLowerCase().replace( /[ _\-]/g, '');
// set applyStyleFnName
switch ( animationEngine ) {
case 'css' :
case 'none' :
this.isUsingJQueryAnimation = false;
break;
case 'jquery' :
this.isUsingJQueryAnimation = true;
break;
default : // best available
this.isUsingJQueryAnimation = !Modernizr.csstransitions;
}

this._updateUsingTransforms();
},

_updateTransformsEnabled : function() {
this._updateUsingTransforms();
},

_updateUsingTransforms : function() {
this.usingTransforms = this.options.transformsEnabled && Modernizr.csstransforms && Modernizr.csstransitions && !this.isUsingJQueryAnimation;

this.getPositionStyles = this.usingTransforms ? this._translate : this._positionAbs;
},


// ====================== Adding ======================
Expand Down Expand Up @@ -598,9 +624,9 @@

// are we animating the layout arrangement?
// use plugin-ish syntax for css or animate

var styleFn = ( this.applyStyleFnName === 'animate' && !this.isLaidOut ) ?
'css' : this.applyStyleFnName,
var styleFn = !this.isLaidOut ? 'css' : (
this.isUsingJQueryAnimation ? 'animate' : 'css'
),
animOpts = this.options.animationOptions;

// process styleQueue
Expand Down
Loading

0 comments on commit b3cf613

Please sign in to comment.