Bring in jQuery extensions for style/animating transforms

jquery.molequul.js

@@ -10,22 +10,34 @@
   var getStyleProperty = (function(){
 
     var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
+    var _cache = { };
 
     function getStyleProperty(propName, element) {
       element = element || document.documentElement;
       var style = element.style,
-          prefixed;
+          prefixed,
+          uPropName;
 
+      // check cache only when no element is given
+      if (arguments.length == 1 && typeof _cache[propName] == 'string') {
+        return _cache[propName];
+      }
       // test standard property first
-      if (typeof style[propName] == 'string') return propName;
+      if (typeof style[propName] == 'string') {
+        return (_cache[propName] = propName);
+      }
+      
+      // console.log('getting prop', propName)
 
       // capitalize
-      propName = propName.charAt(0).toUpperCase() + propName.slice(1);
+      uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
 
       // test vendor specific properties
       for (var i=0, l=prefixes.length; i<l; i++) {
-        prefixed = prefixes[i] + propName;
+        prefixed = prefixes[i] + uPropName;
-        if (typeof style[prefixed] == 'string') return prefixed;
+        if (typeof style[prefixed] == 'string') {
+          return (_cache[propName] = prefixed);
+        }
       }
     }
 
@@ -101,37 +113,90 @@
     window.Modernizr = miniModernizr;
   }
 
-  // convienence vars
+  // ========================= jQuery transform extensions ===============================
-  var transformFnUtils = {
+
-        translate : {
+  // if props.transform hasn't been set, do it already
-          getFn : {
+  $.props.transform = getStyleProperty('transform');
-            '2d' : function ( position ) {
+
-              return 'translate(' + position.x + 'px, ' + position.y + 'px)';
+
-            },
+  var transformFnUtilsDimensional = {
-            '3d' : function ( position ) {
+        '2d' : {
-              return 'translate3d(' + position.x + 'px, ' + position.y + 'px, 0)';
+          translate : function ( position ) {
-            }
+            return 'translate(' + position[0] + 'px, ' + position[1] + 'px)';
+          },
+          scale :  function ( scale ) {
+            return 'scale(' + scale[0] + ')';
           },
-          regex : /translate(3d)?\([\s\d\-\.,px]+\)/
         },
-        scale : {
+        '3d' : {
-          getFn : {
+          translate : function ( position ) {
-            '2d' : function ( scale ) {
+            return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0)';
-              return 'scale(' + scale + ')';
-            },
-            '3d' : function ( scale ) {
-              return 'scale3d(' + scale + ', ' + scale + ', 1)';
-            }
           },
-          regex : /scale(3d)?\([\s\d\-\.,px]+\)/
+          scale : function ( scale ) {
+            return 'scale3d(' + scale[0] + ', ' + scale[0] + ', 1)';
+          }
+          
         }
       },
-      // for now, we'll only use transforms in Chrome and Safari
-      // In Opera, transform removes all text anti-aliasing, crippling legibility
-      // in FF, you cannot transition transforms in < 4.0
-      usingTransforms = Modernizr.csstransforms && $.browser.webkit,
       dimensions = Modernizr.csstransforms3d ? '3d' : '2d',
-      transformProp = getStyleProperty('transform');
+      usingTransforms = Modernizr.csstransforms && $.browser.webkit,
+      transformFnUtils = transformFnUtilsDimensional[ dimensions ];
+      
+  var _jQueryStyle = $.style;
+  $.style = function ( elem, name, value  ) {
+
+    switch ( name ) {
+      case 'scale' :
+      case 'translate' :
+        console.log( name )
+        // unpack current transform data
+        var data =  $( elem ).data('transform') || {};
+        // extend new value over current data
+        var newData = {};
+        newData[ name ] = value;
+        $.extend( data, newData );
+
+        var valueFns = [];
+
+        for ( var fnName in data ) {
+          var transformValue = data[ fnName ],
+              getFn = transformFnUtils[ fnName ],
+              valueFn = getFn( transformValue );
+          valueFns.push( valueFn );
+        }
+
+        // set data back in elem
+        $( elem ).data('transform', data );
+
+        value = valueFns.join(' ');
+        // console.log( value )
+        
+        // set name to vendor specific property
+        name = $.props.transform;
+        
+        break
+    }
+
+    // if ( name === 'transform') {
+    // }
+    return _jQueryStyle.apply( this, arguments );
+  };
+  
+  
+  var _fxCur = $.fx.prototype.cur;
+  $.fx.prototype.cur = function () {
+    if ( this.prop === 'scale' ) {
+      var currentScale = $( this.elem ).data('transform')[ this.prop ] || [ 1 ];
+      // scale value is saved as a 1 item array
+      return currentScale[0]
+    }
+
+    return _fxCur.apply(this, arguments);
+  }
+
+  $.fx.step.scale = function (fx) {
+    $( fx.elem ).css({ scale: [ fx.now ] });
+  };
 
 
   // ========================= smartresize ===============================
@@ -287,13 +352,6 @@
       });
     },
     
-    // parseTransformStyle : function( style ) {
-    //   for ( prop in style ) {
-    //     switch
-    //   }
-    //   return style;
-    // },
-
     complete : function( props ) {
 
       // are we animating the layout arrangement?
@@ -303,16 +361,6 @@
 
       // process styleQueue
       $.each( props.styleQueue, function( i, obj ){
-        // var style = molequulMethods.parseTransformStyle( obj.style );
-        for ( var prop in obj.style ) {
-          console.log( prop, obj.style[prop] )
-          // switch ( obj.style[prop] ) {
-          //   case 'scale' :
-          //     console.log( obj.style )
-          //     break;
-          // }
-        }
-        
                                    // have to extend animation to play nice with jQuery
         obj.$el[ styleFn ]( obj.style, $.extend( {}, animOpts ) );
       });
@@ -483,37 +531,18 @@
       
     },
     
-    transform : function( value ) {
-      return {
-        '-webkit-transform' : value,
-           '-moz-transform' : value,
-             '-o-transform' : value,
-                'transform' : value
-      }
-    },
-    
     translate : function( x, y ) {
-      return molequulMethods.transform('translate(' + x + 'px, ' + y + 'px) scale(1)')
+      return { translate : [ x, y ] }
-    },
-    
-    translate3d : function( x, y ) {
-      return molequulMethods.transform('translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)')
     },
     
     positionAbs : function( x, y ) {
-      return { left: x, top: y }
+      return { left: x, top: y };
     }
     
   };
 
 
-  if ( usingTransforms ) {
+  molequulMethods.position = usingTransforms ? molequulMethods.translate : molequulMethods.positionAbs;
-    var translateMethod = Modernizr.csstransforms3d ? 'translate3d' : 'translate';
-    molequulMethods.position = molequulMethods[ translateMethod ];
-  } else {
-    molequulMethods.position = molequulMethods.positionAbs;
-  }
-  // molequulMethods.position = Modernizr.csstransforms3d ? molequulMethods.translate3d : molequulMethods.positionAbs;
 
   // molequul code begin
   $.fn.molequul = function( firstArg ) { 
@@ -535,20 +564,15 @@
 
   // Default plugin options
   $.fn.molequul.defaults = {
-    // singleMode: false,
-    // columnWidth: undefined,
-    // itemSelector: undefined,
-    // appendedContent: undefined,
-    // saveOptions: true,
     resizeable: true,
     hiddenClass : 'molequul-hidden',
     hiddenStyle : {
       opacity : 0,
-      scale: 0.001
+      scale : [ 0 ]
     },
     visibleStyle : {
       opacity : 1,
-      scale: 1
+      scale : [ 1 ]
     },
     animationOptions: {
       queue: false