playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Bring in jQuery extensions for style/animating transforms

pull/14/head
desandro 14 years ago
parent
6acf84473d
commit
e17b828ad5
1 changed files with 109 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 194
      jquery.molequul.js

194
jquery.molequul.js
Unescape View File

@ -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);
}
} }
} }
@ -35,7 +47,7 @@
// ========================= miniModernizr =============================== // ========================= miniModernizr ===============================
// <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting // <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting
if ( !window.Modernizr ) { if ( !window.Modernizr ) {
var miniModernizr = {}, var miniModernizr = {},
vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '), vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '),
classes = [], classes = [],
@ -46,19 +58,19 @@
}, },
csstransforms3d : function() { csstransforms3d : function() {
var ret = !!getStyleProperty('perspective'); var ret = !!getStyleProperty('perspective');
if (ret){ if (ret){
var st = document.createElement('style'), var st = document.createElement('style'),
div = document.createElement('div'); div = document.createElement('div');
st.textContent = '@media ('+vendorCSSPrefixes.join('transform-3d),(') + st.textContent = '@media ('+vendorCSSPrefixes.join('transform-3d),(') +
'modernizr){#modernizr{height:3px}}'; 'modernizr){#modernizr{height:3px}}';
document.getElementsByTagName('head')[0].appendChild(st); document.getElementsByTagName('head')[0].appendChild(st);
div.id = 'modernizr'; div.id = 'modernizr';
docElement.appendChild(div); docElement.appendChild(div);
ret = div.offsetHeight === 3; ret = div.offsetHeight === 3;
st.parentNode.removeChild(st); st.parentNode.removeChild(st);
div.parentNode.removeChild(div); div.parentNode.removeChild(div);
} }
@ -68,7 +80,7 @@
return !!getStyleProperty('transitionProperty'); return !!getStyleProperty('transitionProperty');
} }
}; };
// hasOwnProperty shim by kangax needed for Safari 2.0 support // hasOwnProperty shim by kangax needed for Safari 2.0 support
var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty; var _hasOwnProperty = ({}).hasOwnProperty, hasOwnProperty;
if (typeof _hasOwnProperty !== 'undefined' && typeof _hasOwnProperty.call !== 'undefined') { if (typeof _hasOwnProperty !== 'undefined' && typeof _hasOwnProperty.call !== 'undefined') {
@ -81,7 +93,7 @@
return ((property in object) && typeof object.constructor.prototype[property] === 'undefined'); return ((property in object) && typeof object.constructor.prototype[property] === 'undefined');
}; };
} }
// Run through all tests and detect their support in the current UA. // Run through all tests and detect their support in the current UA.
for ( var feature in tests ) { for ( var feature in tests ) {
if ( hasOwnProperty( tests, feature ) ) { if ( hasOwnProperty( tests, feature ) ) {
@ -94,44 +106,97 @@
classes.push( className ); classes.push( className );
} }
} }
// Add the new classes to the <html> element. // Add the new classes to the <html> element.
docElement.className += ' ' + classes.join( ' ' ); docElement.className += ' ' + classes.join( ' ' );
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 = {
'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', 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

Write Preview
Loading…
Cancel
Save