Totally revise opto-transform for jquery 1.4.3, based off of Louis-Rémi Babé jquery.rotate.js

src/jquery.opto-transform.js

@@ -2,96 +2,123 @@
 (function($){  
 
 
-  // if props.transform hasn't been set, do it already
+  $.optoTransform = {
-  $.props.transform = getStyleProperty('transform');
+    
-  
+    transformProp : getStyleProperty('transform'),
-  var optoTransform = {
+    
-    fnUtilsDimensional : {
+    fnUtils : Modernizr.csstransforms3d ? 
-      '2d' : {
+      { // 2d transform functions
         translate : function ( position ) {
-          return 'translate(' + position[0] + 'px, ' + position[1] + 'px) ';
+          return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0) ';
         },
-        scale :  function ( scale ) {
+        scale : function ( scale ) {
-          return 'scale(' + scale[0] + ') ';
+          return 'scale3d(' + scale + ', ' + scale + ', 1) ';
         }
-      },
+      } :
-      '3d' : {
+      { // 3d transform functions
         translate : function ( position ) {
-          return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0) ';
+          return 'translate(' + position[0] + 'px, ' + position[1] + 'px) ';
         },
-        scale : function ( scale ) {
+        scale :  function ( scale ) {
-          return 'scale3d(' + scale[0] + ', ' + scale[0] + ', 1) ';
+          return 'scale(' + scale + ') ';
         }
       }
-    },
+    ,
-    dimensions : Modernizr.csstransforms3d ? '3d' : '2d',
+    
-    // always do translate then scale
+    set : function( elem, name, value ) {
-    transforms : [ 'translate', 'scale' ]
+
-  };
+      // unpack current transform data
+      var data =  $( elem ).data('transform') || {},
+      // extend new value over current data
+          newData = {},
+          fnName,
+          transformObj = {};
+      // overwrite new data
+      newData[ name ] = value;
+      $.extend( data, newData );
+
+      for ( fnName in data ) {
+        var transformValue = data[ fnName ],
+            getFn = $.optoTransform.fnUtils[ fnName ];
+        transformObj[ fnName ] = getFn( transformValue );
+      }
+
+      // get proper order
+      // ideally, we could loop through this give an array, but since we only have
+      // a couple transforms we're keeping track of, we'll do it like so
+      var translateFn = transformObj.translate || '',
+          scaleFn = transformObj.scale || '',
+          valueFns = translateFn + scaleFn;
+
+      // set data back in elem
+      $( elem ).data( 'transform', data );
+
+      // sorting so scale always comes before 
+      value = valueFns;
 
-  optoTransform.fnUtils = optoTransform.fnUtilsDimensional[ optoTransform.dimensions ];
+      // set name to vendor specific property
-  optoTransform.transformsLen = 2;
+      elem.style[ $.optoTransform.transformProp ] = valueFns;
+
+    }
+  };
   
+  // ==================== scale ===================
   
+  $.cssNumber.scale = true;
   
-  var _jQueryStyle = $.style;
+  $.cssHooks.scale = {
-  $.style = function ( elem, name, value  ) {
+    set: function( elem, value ) {
-
-    switch ( name ) {
-      case 'scale' :
-      case 'translate' :
-        // unpack current transform data
-        var data =  $( elem ).data('opto-transform') || {},
-        // extend new value over current data
-            newData = {},
-            fnName,
-            transformObj = {};
-        newData[ name ] = value;
-        $.extend( data, newData );
-
-        for ( fnName in data ) {
-          var transformValue = data[ fnName ],
-              getFn = optoTransform.fnUtils[ fnName ];
-          transformObj[ fnName ] = getFn( transformValue );
-        }
 
-        // get proper order
+      if ( typeof value === 'string' ) {
-        // ideally, we could loop through this give an array, but since we only have
+        value = parseFloat( value );
-        // a couple transforms we're keeping track of, we'll do it like so
+      }
-        var translateFn = transformObj.translate || '',
+
-            scaleFn = transformObj.scale || '',
+      $.optoTransform.set( elem, 'scale', value )
-            valueFns = translateFn + scaleFn;
+
-
+    },
-        // set data back in elem
+    get: function( elem, computed ) {
-        $( elem ).data('opto-transform', data );
+      var transform = $.data( elem, 'transform' );
-
+      return transform && transform.scale ? transform.scale : 1;
-        // sorting so scale always comes before 
-        value = valueFns;
-        
-        // set name to vendor specific property
-        name = $.props.transform;
-        
-        break;
     }
+  }
 
-    return _jQueryStyle.apply( this, arguments );
+  $.fx.step.scale = function( fx ) {
+    $.cssHooks.scale.set( fx.elem, fx.now+fx.unit );
   };
   
   
-  var _fxCur = $.fx.prototype.cur;
+  // ==================== translate ===================
-  $.fx.prototype.cur = function () {
+    
-    if ( this.prop === 'scale' ) {
+  $.cssNumber.translate = true;
-      var data = $( this.elem ).data('transform'),
+  
-          currentScale = data && data[ this.prop ] ? data[ this.prop ] : [ 1 ];
+  $.cssHooks.translate = {
-      // scale value is saved as a 1 item array
+    set: function( elem, value ) {
-      return currentScale[0];
-    }
 
-    return _fxCur.apply(this, arguments);
+      // all this would be for public ease-of-use,
-  };
+      // but we're leaving it out since this add-on is
+      // only for internal-plugin use
+      // if ( typeof value === 'string' ) {
+      //   value = value.split(' ');
+      // }
+      // 
+      //  
+      // var i, val;
+      // for ( i = 0; i < 2; i++ ) {
+      //   val = value[i];
+      //   if ( typeof val === 'string' ) {
+      //     val = parseInt( val );
+      //   }
+      // }
+
+      $.optoTransform.set( elem, 'translate', value )
+
+    },
+    
+    get: function( elem, computed ) {
+      var transform = $.data( elem, 'transform' );
+      return transform && transform.translate ? transform.translate : [ 0, 0 ];
+    }
+  }
 
-  $.fx.step.scale = function (fx) {
-    $( fx.elem ).css({ scale: [ fx.now ] });
-  };
 
 })( jQuery );