src : v1.2 add _updateOption so animationEngine can be updated after …

…init. Fixes #53
metafizzy · May 13, 2011 · b3cf613 · b3cf613
1 parent c7e789f
commit b3cf613
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 47 deletions.
diff --git a/_posts/tests/2011-05-13-jquery-animation01.html b/_posts/tests/2011-05-13-jquery-animation01.html
@@ -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>
diff --git a/jquery.isotope.js b/jquery.isotope.js
@@ -1,5 +1,5 @@
 /**
- * Isotope v1.1.110512
+ * Isotope v1.2.110513
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -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 = {
@@ -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" ){
@@ -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 ======================
@@ -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