Browse Source

Bring in jQuery extensions for style/animating transforms

pull/14/head
desandro 14 years ago
parent
commit
e17b828ad5
  1. 172
      jquery.molequul.js

172
jquery.molequul.js

@ -10,22 +10,34 @@
var getStyleProperty = (function(){ var getStyleProperty = (function(){
var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms']; var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
var _cache = { };
function getStyleProperty(propName, element) { function getStyleProperty(propName, element) {
element = element || document.documentElement; element = element || document.documentElement;
var style = element.style, 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 // 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 // capitalize
propName = propName.charAt(0).toUpperCase() + propName.slice(1); uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
// test vendor specific properties // test vendor specific properties
for (var i=0, l=prefixes.length; i<l; i++) { 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; 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 = {
'2d' : {
translate : function ( position ) {
return 'translate(' + position[0] + 'px, ' + position[1] + 'px)';
}, },
'3d' : function ( position ) { scale : function ( scale ) {
return 'translate3d(' + position.x + 'px, ' + position.y + 'px, 0)'; 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 ) { scale : function ( scale ) {
return 'scale3d(' + scale + ', ' + scale + ', 1)'; return 'scale3d(' + scale[0] + ', ' + scale[0] + ', 1)';
} }
},
regex : /scale(3d)?\([\s\d\-\.,px]+\)/
} }
}, },
// 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', 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 =============================== // ========================= smartresize ===============================
@ -287,13 +352,6 @@
}); });
}, },
// parseTransformStyle : function( style ) {
// for ( prop in style ) {
// switch
// }
// return style;
// },
complete : function( props ) { complete : function( props ) {
// are we animating the layout arrangement? // are we animating the layout arrangement?
@ -303,16 +361,6 @@
// process styleQueue // process styleQueue
$.each( props.styleQueue, function( i, obj ){ $.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 // have to extend animation to play nice with jQuery
obj.$el[ styleFn ]( obj.style, $.extend( {}, animOpts ) ); 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 ) { 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 ) { 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 // molequul code begin
$.fn.molequul = function( firstArg ) { $.fn.molequul = function( firstArg ) {
@ -535,20 +564,15 @@
// Default plugin options // Default plugin options
$.fn.molequul.defaults = { $.fn.molequul.defaults = {
// singleMode: false,
// columnWidth: undefined,
// itemSelector: undefined,
// appendedContent: undefined,
// saveOptions: true,
resizeable: true, resizeable: true,
hiddenClass : 'molequul-hidden', hiddenClass : 'molequul-hidden',
hiddenStyle : { hiddenStyle : {
opacity : 0, opacity : 0,
scale: 0.001 scale : [ 0 ]
}, },
visibleStyle : { visibleStyle : {
opacity : 1, opacity : 1,
scale: 1 scale : [ 1 ]
}, },
animationOptions: { animationOptions: {
queue: false queue: false

Loading…
Cancel
Save