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

use transforms for positioning if available

pull/14/head
desandro 14 years ago
parent
f390e318dd
commit
c8df5cdc06
1 changed files with 129 additions and 92 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. 65
      jquery.mercutio.js

65
jquery.mercutio.js
Unescape View File

@ -7,6 +7,8 @@
// ========================= 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 ( !Modernizr ) {
var miniModernizr = {}, var miniModernizr = {},
vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '), vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- '.split(' '),
classes = [], classes = [],
@ -15,15 +17,13 @@
m_style = m.style, m_style = m.style,
test_props = function ( props, callback ) { test_props = function ( props, callback ) {
for ( var i in props ) { for ( var i in props ) {
// IE9 ugliness
try { try {
m_style[ props[i] ] !== undefined m_style[ props[i] ] !== undefined
} catch(e){ } catch(e){
continue; continue;
} }
console.log( props[i], m_style[ props[i] ] )
if ( m_style[ props[i] ] !== undefined ) { if ( m_style[ props[i] ] !== undefined ) {
return true; return true;
} }
@ -44,8 +44,6 @@
'MozTransform', 'OTransform', 'msTransform' ]); 'MozTransform', 'OTransform', 'msTransform' ]);
}, },
csstransforms3d : function() { csstransforms3d : function() {
// set_css_all( 'perspective:500' );
var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]); var ret = !!test_props([ 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective' ]);
if (ret){ if (ret){
@ -99,6 +97,15 @@
// Add the new classes to the <html> element. // Add the new classes to the <html> element.
docElement.className += ' ' + classes.join( ' ' ); docElement.className += ' ' + classes.join( ' ' );
var Modernizr = miniModernizr;
}
// position convience method
// 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
var usingTransforms = Modernizr.csstransforms && $.browser.webkit;
// ========================= smartresize =============================== // ========================= smartresize ===============================
@ -183,10 +190,7 @@
}, },
// will use top
position : function() {
},
placeCard : function( setCount, setY, props ) { placeCard : function( setCount, setY, props ) {
// here, `this` refers to a child element or "brick" // here, `this` refers to a child element or "brick"
@ -197,7 +201,7 @@
shortCol = i, shortCol = i,
setSpan = props.colCount + 1 - i, setSpan = props.colCount + 1 - i,
animOpts = $.extend( {}, props.opts.animationOptions ), animOpts = $.extend( {}, props.opts.animationOptions ),
position; position, x, y ;
// Which column has the minY value, closest to the left // Which column has the minY value, closest to the left
while (i--) { while (i--) {
if ( setY[i] === minimumY ) { if ( setY[i] === minimumY ) {
@ -205,10 +209,9 @@
} }
} }
position = { x = props.colW * shortCol + props.posLeft;
left: props.colW * shortCol + props.posLeft, y = minimumY;
top: minimumY position = mercutioMethods.position( x, y );
};
// position the brick // position the brick
props.styleQueue.push({ $el: this, style: position }); props.styleQueue.push({ $el: this, style: position });
@ -368,7 +371,12 @@
this.css('position', 'relative').mercutio( 'getColCount', props ); this.css('position', 'relative').mercutio( 'getColCount', props );
props.$cards.all.css( 'position', 'absolute' ); cardStyle = { position: 'absolute' };
if ( usingTransforms ) {
cardStyle.left = 0;
cardStyle.top = 0;
}
props.$cards.all.css( cardStyle );
// get top left position of where the bricks should be // get top left position of where the bricks should be
var $cursor = $( document.createElement('div') ); var $cursor = $( document.createElement('div') );
@ -429,11 +437,40 @@
}); });
},
transform : function( value ) {
return {
'-webkit-transform' : value,
'-moz-transform' : value,
'-o-transform' : value,
'transform' : value
} }
},
translate : function( x, y ) {
return mercutioMethods.transform('translate(' + x + 'px, ' + y + 'px)')
},
translate3d : function( x, y ) {
return mercutioMethods.transform('translate3d(' + x + 'px, ' + y + 'px, 0)')
},
positionAbs : function( x, y ) {
return { left: x, top: y }
}
}; };
if ( usingTransforms ) {
var translateMethod = Modernizr.csstransforms3d ? 'translate3d' : 'translate';
mercutioMethods.position = mercutioMethods[ translateMethod ];
} else {
mercutioMethods.position = mercutioMethods.positionAbs;
}
// mercutioMethods.position = Modernizr.csstransforms3d ? mercutioMethods.translate3d : mercutioMethods.positionAbs;
// mercutio code begin // mercutio code begin
$.fn.mercutio = function( firstArg ) { $.fn.mercutio = function( firstArg ) {

Write Preview
Loading…
Cancel
Save