@ -1,5 +1,5 @@
/ * * / * *
* Isotope v1 . 3.110623 * Isotope v1 . 4.110630
* An exquisite jQuery plugin for magical layouts * An exquisite jQuery plugin for magical layouts
* http : //isotope.metafizzy.co
* http : //isotope.metafizzy.co
* *
@ -9,6 +9,7 @@
* Copyright 2011 David DeSandro / Metafizzy * Copyright 2011 David DeSandro / Metafizzy
* / * /
/*jshint curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, undef: true */
/*global Modernizr: true */ /*global Modernizr: true */
( function ( window , $ , undefined ) { ( function ( window , $ , undefined ) {
@ -23,9 +24,8 @@
var prefixes = 'Moz Webkit Khtml O Ms' . split ( ' ' ) ; var prefixes = 'Moz Webkit Khtml O Ms' . split ( ' ' ) ;
function getStyleProperty ( propName , element ) { function getStyleProperty ( propName ) {
element = element || document . documentElement ; var style = document . documentElement . style ,
var style = element . style ,
prefixed ; prefixed ;
// test standard property first
// test standard property first
@ -63,62 +63,45 @@
* http : //www.modernizr.com/license/
* http : //www.modernizr.com/license/
* / * /
/ * / *
* This version whittles down the script just to check support for * This version whittles down the script just to check support for
* CSS transitions , transforms , and 3 D transforms . * CSS transitions , transforms , and 3 D transforms .
* / * /
var docElement = document . documentElement , var tests = {
tests = [ csstransforms : function ( ) {
{ return ! ! transformProp ;
name : 'csstransforms' , } ,
getResult : function ( ) {
return ! ! transformProp ;
}
} ,
{
name : 'csstransforms3d' ,
getResult : function ( ) {
var test = ! ! getStyleProperty ( 'perspective' ) ;
// double check for Chrome's false positive
if ( test ) {
var st = document . createElement ( 'style' ) ,
div = document . createElement ( 'div' ) ,
vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- ' . split ( ' ' ) ,
mq = '@media (' + vendorCSSPrefixes . join ( 'transform-3d),(' ) + 'modernizr)' ;
st . textContent = mq + '{#modernizr{height:3px}}' ;
( document . head || document . getElementsByTagName ( 'head' ) [ 0 ] ) . appendChild ( st ) ;
div . id = 'modernizr' ;
docElement . appendChild ( div ) ;
test = div . offsetHeight === 3 ;
st . parentNode . removeChild ( st ) ;
div . parentNode . removeChild ( div ) ;
}
return ! ! test ;
}
} ,
{
name : 'csstransitions' ,
getResult : function ( ) {
return ! ! getStyleProperty ( 'transitionProperty' ) ;
}
}
] ,
i , len = tests . length csstransforms3d : function ( ) {
; var test = ! ! getStyleProperty ( 'perspective' ) ;
// double check for Chrome's false positive
if ( test ) {
var vendorCSSPrefixes = ' -o- -moz- -ms- -webkit- -khtml- ' . split ( ' ' ) ,
mediaQuery = '@media (' + vendorCSSPrefixes . join ( 'transform-3d),(' ) + 'modernizr)' ,
$style = $ ( '<style>' + mediaQuery + '{#modernizr{height:3px}}' + '</style>' )
. appendTo ( 'head' ) ,
$div = $ ( '<div id="modernizr" />' ) . appendTo ( 'html' ) ;
test = $div . height ( ) === 3 ;
$div . remove ( ) ;
$style . remove ( ) ;
}
return test ;
} ,
csstransitions : function ( ) {
return ! ! getStyleProperty ( 'transitionProperty' ) ;
}
} ;
if ( window . Modernizr ) { if ( window . Modernizr ) {
// if there's a previous Modernzir, check if there are necessary tests
// if there's a previous Modernzir, check if there are necessary tests
for ( i = 0 ; i < len ; i ++ ) { for ( var testName in tests ) {
var test = tests [ i ] ; if ( ! Modernizr . hasOwnProperty ( testName ) ) {
if ( ! Modernizr . hasOwnProperty ( test . name ) ) {
// if test hasn't been run, use addTest to run it
// if test hasn't been run, use addTest to run it
Modernizr . addTest ( test . name , test . getResult ) ; Modernizr . addTest ( testName , tests [ testName ] ) ;
} }
} }
} else { } else {
@ -128,20 +111,18 @@
var miniModernizr = { var miniModernizr = {
_version : '1.6ish: miniModernizr for Isotope' _version : '1.6ish: miniModernizr for Isotope'
} , } ,
classes = [ ] , classes = ' ' ,
test , result , class Name; result , test Name;
// Run through tests
// Run through tests
for ( i = 0 ; i < len ; i ++ ) { for ( testName in tests ) {
test = tests [ i ] ; result = tests [ testName ] ( ) ;
result = test . getResult ( ) ; miniModernizr [ testName ] = result ;
miniModernizr [ test . name ] = result ; classes += ' ' + ( result ? '' : 'no-' ) + testName ;
className = ( result ? '' : 'no-' ) + test . name ;
classes . push ( className ) ;
} }
// Add the new classes to the <html> element.
// Add the new classes to the <html> element.
docElement . className += ' ' + classes . join ( ' ' ) ; $ ( 'html' ) . addClass ( classes ) ;
return miniModernizr ; return miniModernizr ;
} ) ( ) ; } ) ( ) ;
@ -378,6 +359,9 @@
var originalOrderSorter = { var originalOrderSorter = {
'original-order' : function ( $elem , instance ) { 'original-order' : function ( $elem , instance ) {
return instance . elemCount ; return instance . elemCount ;
} ,
random : function ( ) {
return Math . random ( ) ;
} }
} ; } ;
@ -443,8 +427,14 @@
// signature: $('#foo').bar({ cool:false });
// signature: $('#foo').bar({ cool:false });
if ( $ . isPlainObject ( opts ) ) { if ( $ . isPlainObject ( opts ) ) {
this . options = $ . extend ( true , this . options , opts ) ; this . options = $ . extend ( true , this . options , opts ) ;
// trigger _updateOptionName if it exists
var updateOptionFn ;
for ( var optionName in opts ) { for ( var optionName in opts ) {
this . _updateOption ( optionName ) ; updateOptionFn = '_update' + capitalize ( optionName ) ;
if ( this [ updateOptionFn ] ) {
this [ updateOptionFn ] ( ) ;
}
} }
} }
} , } ,
@ -452,14 +442,6 @@
// ====================== updaters ====================== //
// ====================== updaters ====================== //
// kind of like setters
// kind of like setters
// trigger _updateOptionName if it exists
_updateOption : function ( optionName ) {
var updateOptionFn = '_update' + capitalize ( optionName ) ;
if ( this [ updateOptionFn ] ) {
this [ updateOptionFn ] ( ) ;
}
} ,
_updateAnimationEngine : function ( ) { _updateAnimationEngine : function ( ) {
var animationEngine = this . options . animationEngine . toLowerCase ( ) . replace ( /[ _\-]/g , '' ) ; var animationEngine = this . options . animationEngine . toLowerCase ( ) . replace ( /[ _\-]/g , '' ) ;
// set applyStyleFnName
// set applyStyleFnName
@ -492,33 +474,27 @@
// ====================== Filtering ======================
// ====================== Filtering ======================
_filter : function ( $atoms ) { _filter : function ( $atoms ) {
var $filteredAtoms , var filter = this . options . filter === '' ? '*' : this . options . filter ;
filter = this . options . filter === '' ? '*' : this . options . filter ;
if ( ! filter ) { if ( ! filter ) {
$filteredAtoms = $atoms ; return $atoms ;
} else { }
var hiddenClass = this . options . hiddenClass ,
hiddenSelector = '.' + hiddenClass , var hiddenClass = this . options . hiddenClass ,
$visibleAtoms = $atoms . not ( hiddenSelector ) , hiddenSelector = '.' + hiddenClass ,
$hiddenAtoms = $atoms . filter ( hiddenSelector ) , $hiddenAtoms = $atoms . filter ( hiddenSelector ) ,
$atomsToShow = $hiddenAtoms ; $atomsToShow = $hiddenAtoms ;
$filteredAtoms = $atoms . filter ( filter ) ;
if ( filter !== '*' ) {
$atomsToShow = $hiddenAtoms . filter ( filter ) ;
var $atomsToHide = $visibleAtoms . not ( filter ) . toggleClass ( hiddenClass ) ;
$atomsToHide . addClass ( hiddenClass ) ;
this . styleQueue . push ( { $el : $atomsToHide , style : this . options . hiddenStyle } ) ;
}
this . styleQueue . push ( { $el : $atomsToShow , style : this . options . visibleStyle } ) ; if ( filter !== '*' ) {
$atomsToShow . removeClass ( hiddenClass ) ; $atomsToShow = $hiddenAtoms . filter ( filter ) ;
var $atomsToHide = $atoms . not ( hiddenSelector ) . not ( filter ) . addClass ( hiddenClass ) ;
this . styleQueue . push ( { $el : $atomsToHide , style : this . options . hiddenStyle } ) ;
} }
return $filteredAtoms ; this . styleQueue . push ( { $el : $atomsToShow , style : this . options . visibleStyle } ) ;
$atomsToShow . removeClass ( hiddenClass ) ;
return $atoms . filter ( filter ) ;
} , } ,
// ====================== Sorting ======================
// ====================== Sorting ======================
@ -604,27 +580,34 @@
this . styleQueue . push ( { $el : this . element , style : containerStyle } ) ; this . styleQueue . push ( { $el : this . element , style : containerStyle } ) ;
} }
this . _processStyleQueue ( ) ;
// provide $elems as context for the callback
if ( callback ) {
callback . call ( $elems ) ;
}
this . isLaidOut = true ;
} ,
_processStyleQueue : function ( ) {
// are we animating the layout arrangement?
// are we animating the layout arrangement?
// use plugin-ish syntax for css or animate
// use plugin-ish syntax for css or animate
var styleFn = ! this . isLaidOut ? 'css' : ( var styleFn = ! this . isLaidOut ? 'css' : (
this . isUsingJQueryAnimation ? 'animate' : 'css' this . isUsingJQueryAnimation ? 'animate' : 'css'
) , ) ,
animOpts = this . options . animationOptions ; animOpts = this . options . animationOptions ,
_isInsertingAnimated = this . _isInserting && this . isUsingJQueryAnimation ,
objStyleFn ;
// process styleQueue
// process styleQueue
$ . each ( this . styleQueue , function ( i , obj ) { $ . each ( this . styleQueue , function ( i , obj ) {
obj . $el [ styleFn ] ( obj . style , animOpts ) ; objStyleFn = _isInsertingAnimated && obj . $el . hasClass ( 'no-transition' ) ? 'css' : styleFn ;
obj . $el [ objStyleFn ] ( obj . style , animOpts ) ;
} ) ; } ) ;
// clear out queue for next time
// clear out queue for next time
this . styleQueue = [ ] ; this . styleQueue = [ ] ;
// provide $elems as context for the callback
if ( callback ) {
callback . call ( $elems ) ;
}
this . isLaidOut = true ;
} , } ,
@ -644,6 +627,8 @@
// ====================== Convenience methods ======================
// ====================== Convenience methods ======================
// ====================== Adding items ======================
// adds a jQuery object of items to a isotope container
// adds a jQuery object of items to a isotope container
addItems : function ( $content , callback ) { addItems : function ( $content , callback ) {
var $newAtoms = this . _getAtoms ( $content ) ; var $newAtoms = this . _getAtoms ( $content ) ;
@ -657,29 +642,60 @@
} , } ,
// convienence method for adding elements properly to any layout
// convienence method for adding elements properly to any layout
// positions items, hides them, then animates them back in <--- very sezzy
insert : function ( $content , callback ) { insert : function ( $content , callback ) {
// position items
this . element . append ( $content ) ; this . element . append ( $content ) ;
var instance = this ; var instance = this ;
this . addItems ( $content , function ( $newAtoms ) { this . addItems ( $content , function ( $newAtoms ) {
var $filteredAtoms = instance . _filter ( $newAtoms ) ; var $newFilteredAtoms = instance . _filter ( $newAtoms , true ) ;
instance . $filteredAtoms = instance . $filteredAtoms . add ( $filteredAtoms ) ; instance . _addHideAppended ( $newFilteredAtoms ) ;
instance . _sort ( ) ;
instance . reLayout ( ) ;
instance . _revealAppended ( $newFilteredAtoms , callback ) ;
} ) ; } ) ;
this . _sort ( ) ;
this . reLayout ( callback ) ;
} , } ,
// convienence method for working with Infinite Scroll
// convienence method for working with Infinite Scroll
appended : function ( $content , callback ) { appended : function ( $content , callback ) {
var instance = this ; var instance = this ;
this . addItems ( $content , function ( $newAtoms ) { this . addItems ( $content , function ( $newAtoms ) {
instance . $filteredAtoms = instance . $filteredAtoms . add ( $newAtoms ) ; instance . _addHideAppended ( $newAtoms ) ;
instance . layout ( $newAtoms , callback ) ; instance . layout ( $newAtoms ) ;
instance . _revealAppended ( $newAtoms , callback ) ;
} ) ; } ) ;
} , } ,
// adds new atoms, then hides them before positioning
_addHideAppended : function ( $newAtoms ) {
this . $filteredAtoms = this . $filteredAtoms . add ( $newAtoms ) ;
$newAtoms . addClass ( 'no-transition' ) ;
this . _isInserting = true ;
// apply hidden styles
this . styleQueue . push ( { $el : $newAtoms , style : this . options . hiddenStyle } ) ;
} ,
// sets visible style on new atoms
_revealAppended : function ( $newAtoms , callback ) {
var instance = this ;
// apply visible style after a sec
setTimeout ( function ( ) {
// enable animation
$newAtoms . removeClass ( 'no-transition' ) ;
// reveal newly inserted filtered elements
instance . styleQueue . push ( { $el : $newAtoms , style : instance . options . visibleStyle } ) ;
instance . _processStyleQueue ( ) ;
delete instance . _isInserting ;
if ( callback ) {
callback ( $newAtoms ) ;
}
} , 10 ) ;
} ,
// gathers all atoms
// gathers all atoms
reloadItems : function ( ) { reloadItems : function ( ) {
this . $allAtoms = this . _getAtoms ( this . element . children ( ) ) ; this . $allAtoms = this . _getAtoms ( this . element . children ( ) ) ;
@ -695,28 +711,11 @@
} , } ,
_shuffleArray : function ( array ) { shuffle : function ( ) {
var tmp , current , i = array . length ; this . updateSortData ( this . $allAtoms ) ;
this . options . sortBy = 'random' ;
if ( i ) {
this . _sort ( ) ;
while ( -- i ) { this . reLayout ( ) ;
current = ~ ~ ( Math . random ( ) * ( i + 1 ) ) ;
tmp = array [ current ] ;
array [ current ] = array [ i ] ;
array [ i ] = tmp ;
}
}
return array ;
} ,
// HACKy should probably remove
shuffle : function ( callback ) {
this . options . sortBy = 'shuffle' ;
this . $allAtoms = this . _shuffleArray ( this . $allAtoms ) ;
this . $filteredAtoms = this . _filter ( this . $allAtoms ) ;
this . reLayout ( callback ) ;
} , } ,
// destroys widget, returns elements and container back (close) to original style
// destroys widget, returns elements and container back (close) to original style
David DeSandro
14 years ago