Browse Source

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

pull/14/head
David DeSandro 15 years ago
parent
commit
d08dd3b43a
  1. 113
      src/jquery.opto-transform.js

113
src/jquery.opto-transform.js

@ -2,56 +2,44 @@
(function($){
// if props.transform hasn't been set, do it already
$.props.transform = getStyleProperty('transform');
$.optoTransform = {
var optoTransform = {
fnUtilsDimensional : {
'2d' : {
transformProp : getStyleProperty('transform'),
fnUtils : Modernizr.csstransforms3d ?
{ // 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 ) {
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 ) {
return 'scale3d(' + scale[0] + ', ' + scale[0] + ', 1) ';
return 'scale(' + scale + ') ';
}
}
},
dimensions : Modernizr.csstransforms3d ? '3d' : '2d',
// always do translate then scale
transforms : [ 'translate', 'scale' ]
};
,
optoTransform.fnUtils = optoTransform.fnUtilsDimensional[ optoTransform.dimensions ];
optoTransform.transformsLen = 2;
set : function( elem, name, value ) {
var _jQueryStyle = $.style;
$.style = function ( elem, name, value ) {
switch ( name ) {
case 'scale' :
case 'translate' :
// unpack current transform data
var data = $( elem ).data('opto-transform') || {},
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 ];
getFn = $.optoTransform.fnUtils[ fnName ];
transformObj[ fnName ] = getFn( transformValue );
}
@ -63,35 +51,74 @@
valueFns = translateFn + scaleFn;
// set data back in elem
$( elem ).data('opto-transform', data );
$( elem ).data( 'transform', data );
// sorting so scale always comes before
value = valueFns;
// set name to vendor specific property
name = $.props.transform;
elem.style[ $.optoTransform.transformProp ] = valueFns;
break;
}
return _jQueryStyle.apply( this, arguments );
};
// ==================== scale ===================
var _fxCur = $.fx.prototype.cur;
$.fx.prototype.cur = function () {
if ( this.prop === 'scale' ) {
var data = $( this.elem ).data('transform'),
currentScale = data && data[ this.prop ] ? data[ this.prop ] : [ 1 ];
// scale value is saved as a 1 item array
return currentScale[0];
$.cssNumber.scale = true;
$.cssHooks.scale = {
set: function( elem, value ) {
if ( typeof value === 'string' ) {
value = parseFloat( value );
}
return _fxCur.apply(this, arguments);
};
$.optoTransform.set( elem, 'scale', value )
},
get: function( elem, computed ) {
var transform = $.data( elem, 'transform' );
return transform && transform.scale ? transform.scale : 1;
}
}
$.fx.step.scale = function( fx ) {
$( fx.elem ).css({ scale: [ fx.now ] });
$.cssHooks.scale.set( fx.elem, fx.now+fx.unit );
};
// ==================== translate ===================
$.cssNumber.translate = true;
$.cssHooks.translate = {
set: function( elem, value ) {
// 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 ];
}
}
})( jQuery );
Loading…
Cancel
Save