|
|
|
// ========================= jQuery transform extensions ===============================
|
|
|
|
(function($){
|
|
|
|
|
|
|
|
|
|
|
|
// if props.transform hasn't been set, do it already
|
|
|
|
$.props.transform = getStyleProperty('transform');
|
|
|
|
|
|
|
|
var transformFnUtilsDimensional = {
|
|
|
|
'2d' : {
|
|
|
|
translate : function ( position ) {
|
|
|
|
return 'translate(' + position[0] + 'px, ' + position[1] + 'px)';
|
|
|
|
},
|
|
|
|
scale : function ( scale ) {
|
|
|
|
return 'scale(' + scale[0] + ')';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
'3d' : {
|
|
|
|
translate : function ( position ) {
|
|
|
|
return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0)';
|
|
|
|
},
|
|
|
|
scale : function ( scale ) {
|
|
|
|
return 'scale3d(' + scale[0] + ', ' + scale[0] + ', 1)';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
dimensions = Modernizr.csstransforms3d ? '3d' : '2d',
|
|
|
|
transformFnUtils = transformFnUtilsDimensional[ dimensions ];
|
|
|
|
|
|
|
|
|
|
|
|
var _jQueryStyle = $.style;
|
|
|
|
$.style = function ( elem, name, value ) {
|
|
|
|
|
|
|
|
switch ( name ) {
|
|
|
|
case 'scale' :
|
|
|
|
case 'translate' :
|
|
|
|
// unpack current transform data
|
|
|
|
var data = $( elem ).data('transform') || {},
|
|
|
|
// extend new value over current data
|
|
|
|
newData = {},
|
|
|
|
valueFns = [],
|
|
|
|
fnName;
|
|
|
|
newData[ name ] = value;
|
|
|
|
$.extend( data, newData );
|
|
|
|
|
|
|
|
for ( 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(' ');
|
|
|
|
|
|
|
|
// set name to vendor specific property
|
|
|
|
name = $.props.transform;
|
|
|
|
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
return _jQueryStyle.apply( this, arguments );
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
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];
|
|
|
|
}
|
|
|
|
|
|
|
|
return _fxCur.apply(this, arguments);
|
|
|
|
};
|
|
|
|
|
|
|
|
$.fx.step.scale = function (fx) {
|
|
|
|
$( fx.elem ).css({ scale: [ fx.now ] });
|
|
|
|
};
|
|
|
|
|
|
|
|
})( jQuery );
|