@ -1,10 +1,10 @@
// IMPORTANT!
// If you're already using Modernizr, delete it from this file. If you don't know what Modernizr is, leave it :)
/ * M o d e r n i z r 2 . 5. 3 ( C u s t o m B u i l d ) | M I T & B S D
* Build : http : //modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions- cssclasses- prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
/ * M o d e r n i z r 2 . 6. 1 ( C u s t o m B u i l d ) | M I T & B S D
* Build : http : //modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions- prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
* /
; window . Modernizr = function ( a , b , c ) { function z( a ) { j . cssText = a } function A ( a , b ) { return z ( m . join ( a + ";" ) + ( b || "" ) ) } function B ( a , b ) { return typeof a === b } function C ( a , b ) { return ! ! ~ ( "" + a ) . indexOf ( b ) } function D ( a , b ) { for ( var d in a ) if ( j [ a [ d ] ] !== c ) return b == "pfx" ? a[ d ] : ! 0 ; return ! 1 } function E ( a , b , d ) { for ( var e in a ) { var f = b [ a [ e ] ] ; if ( f !== c ) return d === ! 1 ? a [ e ] : B ( f , "function" ) ? f . bind ( d || b ) : f } return ! 1 } function F ( a , b , c ) { var d = a . charAt ( 0 ) . toUpperCase ( ) + a . s ubstr ( 1 ) , e = ( a + " " + o . join ( d + " " ) + d ) . split ( " " ) ; return B( b , "string" ) || B ( b , "undefined" ) ? D ( e , b ) : ( e = ( a + " " + p . join ( d + " " ) + d ) . split ( " " ) , E ( e , b , c ) ) } var d = "2. 5.3 ", e = { } , f = ! 0 , g = b . documentElement , h= "modernizr" , i = b . createElement ( h ) , j = i . style , k , l = { } . toString , m = " -webkit- -moz- -o- -ms- " . split ( " " ) , n= "Webkit Moz O ms" , o = n . split ( " " ) , p = n . toLowerCase ( ) . split ( " " ) , q= { } , r = { } , s = { } , t = [ ] , u = t . slice , v , w = function ( a , c , d , e ) { var f , i , j , k = b . createElement ( "div" ) , l = b . body , m = l ? l : b . createElement ( "body" ) ; if ( parseInt ( d , 10 ) ) while ( d -- ) j = b . createElement ( "div" ) , j . id = e ? e [ d ] : h + ( d + 1 ) , k . appendChild ( j ) ; return f= [ "­" , "<style>" , a , "</style>" ] . join ( "" ) , k . id = h , ( l ? k : m ) . innerHTML += f , m . appendChild ( k ) , l || ( m . style . background = "" , g . appendChild ( m ) ) , i = c ( k , a ) , l ? k . parentNode . removeChild ( k ) : m . parentNode . removeChild ( m ) , ! ! i } , x= { } . hasOwnProperty , y ; ! B ( x , "undefined" ) && ! B ( x . call , "undefined" ) ? y = function ( a , b ) { return x. call ( a , b ) } : y = function ( a , b ) { return b in a && B ( a . constructor . prototype [ b ] , "undefined" ) } , Function . prototype . bind || ( Function . prototype . bind = function ( b ) { var c = this ; if ( typeof c != "function" ) throw new TypeError ; var d = u . call ( arguments , 1 ) , e = function ( ) { if ( this instanceof e ) { var a = function ( ) { } ; a . prototype = c . prototype ; var f = new a , g = c . apply ( f , d . concat ( u . call ( arguments ) ) ) ; return Object ( g ) === g ? g : f } return c . apply ( b , d . concat ( u . call ( arguments ) ) ) } ; return e } ) ;var G = function ( a , c ) { var d = a . join ( "" ) , f = c . length ; w ( d , function ( a , c ) { var d = b . styleSheets [ b . styleSheets . length - 1 ] , g = d ? d . cssRules && d . cssRules [ 0 ] ? d . cssRules [ 0 ] . cssText : d . cssText || "" : "" , h = a . childNodes , i = { } ; while ( f -- ) i [ h [ f ] . id ] = h [ f ] ; e . csstransforms3d = ( i . csstransforms3d && i . csstransforms3d . offsetLeft ) === 9 && i . csstransforms3d . offsetHeight === 3 } , f , c ) } ( [ , [ "@media (" , m . join ( "transform-3d),(" ) , h , ")" , "{#csstransforms3d{left:9px;position:absolute;height:3px;}}" ] . join ( "" ) ] , [ , "csstransforms3d" ] ) ; q . csstransforms = function ( ) { return ! ! F ( "transform" ) } , q . csstransforms3d = function ( ) { var a = ! ! F ( "perspective" ) ; return a && "webkitPerspective" in g . style && ( a = e . csstransforms3d ) , a } , q . csstransitions = function ( ) { return F ( "transition" ) } ; for ( var H in q ) y ( q , H ) && ( v = H . toLowerCase ( ) , e [ v ] = q [ H ] ( ) , t . push ( ( e [ v ] ? "" : "no-" ) + v ) ) ; return z ( "" ) , i = k = null , e . _version = d , e . _prefixes = m, e . _domPrefixes = p , e . _cssomPrefixes = o , e . testProp = function ( a ) { return D ( [ a ] ) } , e . testAllProps = F, e . testStyles = w , e . prefixed = function ( a , b , c ) { return b ? F( a , b , c ) : F ( a , "pfx" ) } , g . className = g . className . replace ( /(^|\s)no-js(\s|$)/ , "$1$2" ) + ( f ? " js " + t . join ( " " ) : "" ) , e } ( this , this . document ) ;
; window . Modernizr = function ( a , b , c ) { function y( a ) { i . cssText = a } function z ( a , b ) { return y ( l . join ( a + ";" ) + ( b || "" ) ) } function A ( a , b ) { return typeof a === b } function B ( a , b ) { return ! ! ~ ( "" + a ) . indexOf ( b ) } function C ( a , b ) { for ( var d in a ) { var e = a [ d ] ; if ( ! B ( e , "-" ) && i [ e ] !== c ) return b == "pfx" ? e: ! 0 } return ! 1 } function D ( a , b , d ) { for ( var e in a ) { var f = b [ a [ e ] ] ; if ( f !== c ) return d === ! 1 ? a [ e ] : A ( f , "function" ) ? f . bind ( d || b ) : f } return ! 1 } function E ( a , b , c ) { var d = a . charAt ( 0 ) . toUpperCase ( ) + a . s lice ( 1 ) , e = ( a + " " + n . join ( d + " " ) + d ) . split ( " " ) ; return A( b , "string" ) || A ( b , "undefined" ) ? C ( e , b ) : ( e = ( a + " " + o . join ( d + " " ) + d ) . split ( " " ) , D ( e , b , c ) ) } var d = "2. 6.1 ", e = { } , f = b . documentElement , g= "modernizr" , h = b . createElement ( g ) , i = h . style , j , k = { } . toString , l = " -webkit- -moz- -o- -ms- " . split ( " " ) , m= "Webkit Moz O ms" , n = m . split ( " " ) , o = m . toLowerCase ( ) . split ( " " ) , p= { } , q = { } , r = { } , s = [ ] , t = s . slice , u , v = function ( a , c , d , e ) { var h , i , j , k = b . createElement ( "div" ) , l = b . body , m = l ? l : b . createElement ( "body" ) ; if ( parseInt ( d , 10 ) ) while ( d -- ) j = b . createElement ( "div" ) , j . id = e ? e [ d ] : g + ( d + 1 ) , k . appendChild ( j ) ; return h= [ "­" , '<style id="s' , g , '">' , a , "</style>" ] . join ( "" ) , k . id = g , ( l ? k : m ) . innerHTML += h , m . appendChild ( k ) , l || ( m . style . background = "" , f . appendChild ( m ) ) , i = c ( k , a ) , l ? k . parentNode . removeChild ( k ) : m . parentNode . removeChild ( m ) , ! ! i } , w= { } . hasOwnProperty , x ; ! A ( w , "undefined" ) && ! A ( w . call , "undefined" ) ? x = function ( a , b ) { return w. call ( a , b ) } : x = function ( a , b ) { return b in a && A ( a . constructor . prototype [ b ] , "undefined" ) } , Function . prototype . bind || ( Function . prototype . bind = function ( b ) { var c = this ; if ( typeof c != "function" ) throw new TypeError ; var d = t . call ( arguments , 1 ) , e = function ( ) { if ( this instanceof e ) { var a = function ( ) { } ; a . prototype = c . prototype ; var f = new a , g = c . apply ( f , d . concat ( t . call ( arguments ) ) ) ; return Object ( g ) === g ? g : f } return c . apply ( b , d . concat ( t . call ( arguments ) ) ) } ; return e } ) ,p . csstransforms = function ( ) { return ! ! E ( "transform" ) } , p . csstransforms3d = function ( ) { var a = ! ! E ( "perspective" ) ; return a && "webkitPerspective" in f . style && v ( "@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}" , function ( b , c ) { a = b . offsetLeft === 9 && b . offsetHeight === 3 } ) , a } , p . csstransitions = function ( ) { return E ( "transition" ) } ; for ( var F in p ) x ( p , F ) && ( u = F . toLowerCase ( ) , e [ u ] = p [ F ] ( ) , s . push ( ( e [ u ] ? "" : "no-" ) + u ) ) ; return e . addTest = function ( a , b ) { if ( typeof a == "object" ) for ( var d in a ) x ( a , d ) && e . addTest ( d , a [ d ] ) ; else { a = a . toLowerCase ( ) ; if ( e [ a ] !== c ) return e ; b = typeof b == "function" ? b ( ) : b , enableClasses && ( f . className += " " + ( b ? "" : "no-" ) + a ) , e [ a ] = b } return e } , y ( "" ) , h = j = null , e . _version = d , e . _prefixes = l, e . _domPrefixes = o , e . _cssomPrefixes = n , e . testProp = function ( a ) { return C ( [ a ] ) } , e . testAllProps = E, e . testStyles = v , e . prefixed = function ( a , b , c ) { return b ? E( a , b , c ) : E ( a , "pfx" ) } , e } ( this , this . document ) ;
/ * *
* jQuery Shuffle Plugin
@ -12,108 +12,86 @@
* Inspired by Isotope http : //isotope.metafizzy.co/
* Use it for whatever you want !
* @ author Glen Cheney ( http : //glencheney.com)
* @ version 1. 3
* @ date 7 / 3 / 12
* @ version 1. 4
* @ date 7 / 21 / 12
* /
; ( function ( $ , Modernizr ) {
"use strict" ;
var supported = Modernizr . csstransforms || Modernizr . csstransitions ,
methods = {
var Shuffle = function ( $container , options ) {
var self = this ,
$this = $ ( this ) ;
$ . extend ( self , {
itemWidth : 230 ,
marginTop : 20 ,
marginRight : 20 ,
key : 'all' ,
speed : 800 ,
easing : 'ease-out'
} , options , {
$container : $container ,
supported : Modernizr . csstransforms && Modernizr . csstransitions
} ) ;
// CSS for each item
self . itemCss = {
position : 'absolute' ,
opacity : 1 , // Everything after this is for jQuery fallback
top : 0 ,
left : 0 ,
marginTop : self . marginTop ,
marginRight : self . marginRight ,
'float' : 'left'
} ;
init : function ( options ) {
self . $items = self . $container . children ( ) ;
self . itemsPerRow = Math . floor ( self . $container . width ( ) / self . itemWidth ) ;
self . itemHeight = self . $items . first ( ) . outerHeight ( ) ;
self . transitionName = self . prefixed ( 'transition' ) ,
self . transform = self . getPrefixed ( 'transform' ) ;
// Customizable options
var settings = {
itemWidth : 230 ,
marginTop : 20 ,
marginRight : 20 ,
key : 'all' ,
speed : 800 ,
easing : 'ease-out'
} ;
// Set up css for transitions
self . $container . css ( 'position' , 'relative' ) . get ( 0 ) . style [ self . transitionName ] = 'height ' + self . speed + 'ms ' + self . easing ;
self . $items . each ( function ( index ) {
var defaults = self . itemCss ;
if ( options ) {
$ . extend ( settings , options ) ;
// Set CSS transition for transforms and opacity
if ( self . supported ) {
this . style [ self . transitionName ] = self . transform + ' ' + self . speed + 'ms ' + self . easing + ', opacity ' + self . speed + 'ms ' + self . easing ;
}
settings . itemCss = {
position : 'absolute' ,
opacity : 1 , // Everything after this is for jQuery fallback
top : 0 ,
left : 0 ,
marginTop : settings . marginTop ,
marginRight : settings . marginRight ,
float : 'left'
} ;
return this . each ( function ( ) {
var $this = $ ( this ) ,
$items = $this . children ( ) ,
itemsPerRow = Math . floor ( $this . width ( ) / settings . itemWidth ) ,
itemHeight = $items . first ( ) . outerHeight ( ) ,
data ,
transition = Modernizr . prefixed ( 'transition' ) ,
transform = methods . getPrefixed ( 'transform' ) ;
// Set the margin-right to zero for the last item in the row
if ( ( index + 1 ) % self . itemsPerRow === 0 ) {
defaults . marginRight = 0 ;
}
// Set up css for transitions
$this . css ( 'position' , 'relative' ) . get ( 0 ) . style [ transition ] = 'height ' + settings . speed + 'ms ' + settings . easing ;
$items . each ( function ( index ) {
var defaults = settings . itemCss ;
// Set CSS transition for transforms and opacity
if ( supported ) {
this . style [ transition ] = transform + ' ' + settings . speed + 'ms ' + settings . easing + ', opacity ' + settings . speed + 'ms ' + settings . easing ;
}
// Set the margin-right to zero for the last item in the row
if ( ( index + 1 ) % itemsPerRow === 0 ) {
defaults . marginRight = 0 ;
}
$ ( this ) . css ( self . itemCss ) ;
} ) ;
// Do it
self . shuffle ( 'all' ) ;
} ;
$ ( this ) . css ( settings . itemCss ) ;
} ) ;
Shuffle . prototype = {
data = {
$items : $items ,
itemsPerRow : itemsPerRow ,
itemHeight : itemHeight ,
itemWidth : settings . itemWidth ,
marginTop : settings . marginTop ,
marginRight : settings . marginRight ,
settings : settings
} ;
constructor : Shuffle ,
// Save our settings for recall
$this . data ( 'shuffle' , data ) ;
// Do it
methods . shuffle . call ( this , 'all' ) ;
} ) ;
} ,
/ * *
* The magic . This is what makes the plugin 'shuffle'
* /
shuffle : function ( category ) {
var $this = $ ( this ) ,
data = $this . data ( 'shuffle' ) ,
var self = this ,
numElements ,
gridHeight ;
// If we somehow don't have data, initialize it
if ( ! data ) {
methods . init . call ( this ) ;
data = $ ( this ) . data ( 'shuffle' ) ;
}
if ( ! category ) category = 'all' ;
// Hide/show appropriate items
if ( category === 'all' ) {
data . $items . removeClass ( 'concealed' ) ;
self . $items . removeClass ( 'concealed' ) ;
} else {
data . $items . removeClass ( 'concealed filtered' ) . each ( function ( ) {
self . $items . removeClass ( 'concealed filtered' ) . each ( function ( ) {
var keys = $ ( this ) . attr ( 'data-key' ) ,
kArray = $ . parseJSON ( keys ) ;
if ( $ . inArray ( category , kArray ) === - 1 ) {
@ -124,17 +102,25 @@
}
// How many filtered elements?
numElements = data . $items . not ( '.concealed' ) . addClass ( 'filtered' ) . length ;
numElements = self . $items . not ( '.concealed' ) . addClass ( 'filtered' ) . length ;
// Shrink each concealed item
methods . shrink . call ( this ) ;
self . $container . trigger ( 'shrink.shuffle' , self ) ;
self . shrink ( ) ;
setTimeout ( function ( ) {
self . $container . trigger ( 'shrunk.shuffle' , self ) ;
} , self . speed ) ;
// Update transforms on .filtered elements so they will animate to their new positions
methods . filter . call ( this ) ;
self . $container . trigger ( 'filter.shuffle' , self ) ;
self . filter ( ) ;
setTimeout ( function ( ) {
self . $container . trigger ( 'filtered.shuffle' , self ) ;
} , self . speed ) ;
// Adjust the height of the grid
gridHeight = ( Math . ceil ( numElements / data . itemsPerRow ) * ( data . itemHeight + data . marginTop ) ) - data . marginTop ;
$this . css ( 'height' , gridHeight + 'px' ) ;
gridHeight = ( Math . ceil ( numElements / self. itemsPerRow ) * ( self . itemHeight + self . marginTop ) ) - self . marginTop ;
self. $container . css ( 'height' , gridHeight + 'px' ) ;
} ,
@ -142,25 +128,25 @@
* Hides the elements that don ' t match our filter
* /
shrink : function ( ) {
var $concealed = $ ( this ) . find ( '.concealed' ) ;
var self = this ,
$concealed = self . $container . find ( '.concealed' ) ;
if ( $concealed . length === 0 ) {
return ;
}
$concealed . each ( function ( ) {
var $this = $ ( this ) ,
x = parseInt ( $this . attr ( 'data-x' ) , 10 ) ,
y = parseInt ( $this . attr ( 'data-y' ) , 10 ) ,
data = $this . parent ( ) . data ( 'shuffle' ) ;
y = parseInt ( $this . attr ( 'data-y' ) , 10 ) ;
if ( ! x ) x = 0 ;
if ( ! y ) y = 0 ;
methods . transition ( {
self . transition ( {
$this : $this ,
x : x ,
y : y ,
left : ( x + ( data . itemWidth / 2 ) ) + 'px' ,
top : ( y + ( data . itemHeight / 2 ) ) + 'px' ,
left : ( x + ( self . itemWidth / 2 ) ) + 'px' ,
top : ( y + ( self . itemHeight / 2 ) ) + 'px' ,
scale : 0.001 ,
opacity : 0 ,
height : '0px' ,
@ -175,22 +161,23 @@
* Calculates the x and y position and then tranitions it
* /
filter : function ( ) {
var y = 0 , $filtered = $ ( this ) . find ( '.filtered' ) ;
var self = this ,
y = 0 ,
$filtered = self . $container . find ( '.filtered' ) ;
$filtered . each ( function ( index ) {
var $this = $ ( this ) ,
data = $this . parent ( ) . data ( 'shuffle' ) ,
x = ( index % data . itemsPerRow ) * ( data . itemWidth + data . marginRight ) ,
row = Math . floor ( index / data . itemsPerRow ) ;
x = ( index % self . itemsPerRow ) * ( self . itemWidth + self . marginRight ) ,
row = Math . floor ( index / self . itemsPerRow ) ;
if ( index % data . itemsPerRow === 0 ) {
y = row * ( data. itemHeight + data . marginTop ) ;
if ( index % self . itemsPerRow === 0 ) {
y = row * ( self. itemHeight + self . marginTop ) ;
}
// Save data for shrink
$this . attr ( { 'data-x' : x , 'data-y' : y } ) ;
methods . transition ( {
self . transition ( {
$this : $this ,
x : x ,
y : y ,
@ -198,8 +185,8 @@
top : y + 'px' ,
scale : 1 ,
opacity : 1 ,
height : data . itemHeight + 'px' ,
width : data . itemWidth + 'px'
height : self . itemHeight + 'px' ,
width : self . itemWidth + 'px'
} ) ;
} ) ;
} ,
@ -214,6 +201,10 @@
$el . css ( Modernizr . prefixed ( prop ) , value ) ;
} ,
prefixed : function ( prop ) {
return Modernizr . prefixed ( prop ) ;
} ,
/ * *
* Returns things like - webkit - transition or - moz - box - sizing
* @ param { string } property to be prefixed .
@ -238,9 +229,10 @@
* @ param { String } opts . width the width of the item ( used when no transforms available )
* /
transition : function ( opts ) {
var transform ;
var self = this ,
transform ;
// Use CSS Transforms if we have them
if ( s upported) {
if ( s elf. s upported) {
if ( Modernizr . csstransforms3d ) {
transform = 'translate3d(' + opts . x + 'px, ' + opts . y + 'px, 0px) scale3d(' + opts . scale + ', ' + opts . scale + ', ' + opts . scale + ')' ;
} else {
@ -249,7 +241,7 @@
// Update css to trigger CSS Animation
opts . $this . css ( 'opacity' , opts . opacity ) ;
methods . setPrefixedCss ( opts . $this , 'transform' , transform ) ;
self . setPrefixedCss ( opts . $this , 'transform' , transform ) ;
} else {
// Use jQuery to animate left/top
opts . $this . animate ( {
@ -258,20 +250,29 @@
opacity : opts . opacity ,
height : opts . height ,
width : opts . width
} , 800 ) ;
} , self . speed ) ;
}
}
} ;
// Plugin definition
$ . fn . shuffle = function ( method ) {
if ( methods [ method ] ) {
return methods [ method ] . apply ( this , Array . prototype . slice . call ( arguments , 1 ) ) ;
} else if ( typeof method === 'object' || ! method ) {
return methods . init . apply ( this , arguments ) ;
} else {
$ . error ( 'Method ' + method + ' does not exist on jQuery.shuffle' ) ;
return false ;
}
$ . fn . shuffle = function ( opts , key ) {
return this . each ( function ( ) {
var $this = $ ( this ) ,
shuffle = $this . data ( 'shuffle' ) ;
if ( ! shuffle ) {
shuffle = new Shuffle ( $this , opts ) ;
$this . data ( 'shuffle' , shuffle ) ;
}
// Execute a function
if ( typeof opts === 'string' ) {
if ( opts !== 'shuffle' ) {
key = opts ;
}
shuffle . shuffle ( key ) ;
}
} ) ;
} ;
} ) ( jQuery , Modernizr ) ;
Glen Cheeny
12 years ago
