mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1407 lines
42 KiB
1407 lines
42 KiB
/** |
|
* Isotope v1.5.25 |
|
* An exquisite jQuery plugin for magical layouts |
|
* http://isotope.metafizzy.co |
|
* |
|
* Commercial use requires one-time license fee |
|
* http://metafizzy.co/#licenses |
|
* |
|
* Copyright 2012 David DeSandro / Metafizzy |
|
*/ |
|
|
|
/*jshint asi: true, browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true */ |
|
/*global jQuery: false */ |
|
|
|
(function( window, $, undefined ){ |
|
|
|
'use strict'; |
|
|
|
// get global vars |
|
var document = window.document; |
|
var Modernizr = window.Modernizr; |
|
|
|
// helper function |
|
var capitalize = function( str ) { |
|
return str.charAt(0).toUpperCase() + str.slice(1); |
|
}; |
|
|
|
// ========================= getStyleProperty by kangax =============================== |
|
// http://perfectionkills.com/feature-testing-css-properties/ |
|
|
|
var prefixes = 'Moz Webkit O Ms'.split(' '); |
|
|
|
var getStyleProperty = function( propName ) { |
|
var style = document.documentElement.style, |
|
prefixed; |
|
|
|
// test standard property first |
|
if ( typeof style[propName] === 'string' ) { |
|
return propName; |
|
} |
|
|
|
// capitalize |
|
propName = capitalize( propName ); |
|
|
|
// test vendor specific properties |
|
for ( var i=0, len = prefixes.length; i < len; i++ ) { |
|
prefixed = prefixes[i] + propName; |
|
if ( typeof style[ prefixed ] === 'string' ) { |
|
return prefixed; |
|
} |
|
} |
|
}; |
|
|
|
var transformProp = getStyleProperty('transform'), |
|
transitionProp = getStyleProperty('transitionProperty'); |
|
|
|
|
|
// ========================= miniModernizr =============================== |
|
// <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting |
|
|
|
/*! |
|
* Modernizr v1.6ish: miniModernizr for Isotope |
|
* http://www.modernizr.com |
|
* |
|
* Developed by: |
|
* - Faruk Ates http://farukat.es/ |
|
* - Paul Irish http://paulirish.com/ |
|
* |
|
* Copyright (c) 2009-2010 |
|
* Dual-licensed under the BSD or MIT licenses. |
|
* http://www.modernizr.com/license/ |
|
*/ |
|
|
|
/* |
|
* This version whittles down the script just to check support for |
|
* CSS transitions, transforms, and 3D transforms. |
|
*/ |
|
|
|
var tests = { |
|
csstransforms: function() { |
|
return !!transformProp; |
|
}, |
|
|
|
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 !!transitionProp; |
|
} |
|
}; |
|
|
|
var testName; |
|
|
|
if ( Modernizr ) { |
|
// if there's a previous Modernzir, check if there are necessary tests |
|
for ( testName in tests) { |
|
if ( !Modernizr.hasOwnProperty( testName ) ) { |
|
// if test hasn't been run, use addTest to run it |
|
Modernizr.addTest( testName, tests[ testName ] ); |
|
} |
|
} |
|
} else { |
|
// or create new mini Modernizr that just has the 3 tests |
|
Modernizr = window.Modernizr = { |
|
_version : '1.6ish: miniModernizr for Isotope' |
|
}; |
|
|
|
var classes = ' '; |
|
var result; |
|
|
|
// Run through tests |
|
for ( testName in tests) { |
|
result = tests[ testName ](); |
|
Modernizr[ testName ] = result; |
|
classes += ' ' + ( result ? '' : 'no-' ) + testName; |
|
} |
|
|
|
// Add the new classes to the <html> element. |
|
$('html').addClass( classes ); |
|
} |
|
|
|
|
|
// ========================= isoTransform =============================== |
|
|
|
/** |
|
* provides hooks for .css({ scale: value, translate: [x, y] }) |
|
* Progressively enhanced CSS transforms |
|
* Uses hardware accelerated 3D transforms for Safari |
|
* or falls back to 2D transforms. |
|
*/ |
|
|
|
if ( Modernizr.csstransforms ) { |
|
|
|
// i.e. transformFnNotations.scale(0.5) >> 'scale3d( 0.5, 0.5, 1)' |
|
var transformFnNotations = Modernizr.csstransforms3d ? |
|
{ // 3D transform functions |
|
translate : function ( position ) { |
|
return 'translate3d(' + position[0] + 'px, ' + position[1] + 'px, 0) '; |
|
}, |
|
scale : function ( scale ) { |
|
return 'scale3d(' + scale + ', ' + scale + ', 1) '; |
|
} |
|
} : |
|
{ // 2D transform functions |
|
translate : function ( position ) { |
|
return 'translate(' + position[0] + 'px, ' + position[1] + 'px) '; |
|
}, |
|
scale : function ( scale ) { |
|
return 'scale(' + scale + ') '; |
|
} |
|
} |
|
; |
|
|
|
var setIsoTransform = function ( elem, name, value ) { |
|
// unpack current transform data |
|
var data = $.data( elem, 'isoTransform' ) || {}, |
|
newData = {}, |
|
fnName, |
|
transformObj = {}, |
|
transformValue; |
|
|
|
// i.e. newData.scale = 0.5 |
|
newData[ name ] = value; |
|
// extend new value over current data |
|
$.extend( data, newData ); |
|
|
|
for ( fnName in data ) { |
|
transformValue = data[ fnName ]; |
|
transformObj[ fnName ] = transformFnNotations[ fnName ]( transformValue ); |
|
} |
|
|
|
// get proper order |
|
// ideally, we could loop through this give an array, but since we only have |
|
// a couple transforms we're keeping track of, we'll do it like so |
|
var translateFn = transformObj.translate || '', |
|
scaleFn = transformObj.scale || '', |
|
// sorting so translate always comes first |
|
valueFns = translateFn + scaleFn; |
|
|
|
// set data back in elem |
|
$.data( elem, 'isoTransform', data ); |
|
|
|
// set name to vendor specific property |
|
elem.style[ transformProp ] = valueFns; |
|
}; |
|
|
|
// ==================== scale =================== |
|
|
|
$.cssNumber.scale = true; |
|
|
|
$.cssHooks.scale = { |
|
set: function( elem, value ) { |
|
// uncomment this bit if you want to properly parse strings |
|
// if ( typeof value === 'string' ) { |
|
// value = parseFloat( value ); |
|
// } |
|
setIsoTransform( elem, 'scale', value ); |
|
}, |
|
get: function( elem, computed ) { |
|
var transform = $.data( elem, 'isoTransform' ); |
|
return transform && transform.scale ? transform.scale : 1; |
|
} |
|
}; |
|
|
|
$.fx.step.scale = function( fx ) { |
|
$.cssHooks.scale.set( fx.elem, fx.now+fx.unit ); |
|
}; |
|
|
|
|
|
// ==================== translate =================== |
|
|
|
$.cssNumber.translate = true; |
|
|
|
$.cssHooks.translate = { |
|
set: function( elem, value ) { |
|
|
|
// uncomment this bit if you want to properly parse strings |
|
// if ( typeof value === 'string' ) { |
|
// value = value.split(' '); |
|
// } |
|
// |
|
// var i, val; |
|
// for ( i = 0; i < 2; i++ ) { |
|
// val = value[i]; |
|
// if ( typeof val === 'string' ) { |
|
// val = parseInt( val ); |
|
// } |
|
// } |
|
|
|
setIsoTransform( elem, 'translate', value ); |
|
}, |
|
|
|
get: function( elem, computed ) { |
|
var transform = $.data( elem, 'isoTransform' ); |
|
return transform && transform.translate ? transform.translate : [ 0, 0 ]; |
|
} |
|
}; |
|
|
|
} |
|
|
|
// ========================= get transition-end event =============================== |
|
var transitionEndEvent, transitionDurProp; |
|
|
|
if ( Modernizr.csstransitions ) { |
|
transitionEndEvent = { |
|
WebkitTransitionProperty: 'webkitTransitionEnd', // webkit |
|
MozTransitionProperty: 'transitionend', |
|
OTransitionProperty: 'oTransitionEnd otransitionend', |
|
transitionProperty: 'transitionend' |
|
}[ transitionProp ]; |
|
|
|
transitionDurProp = getStyleProperty('transitionDuration'); |
|
} |
|
|
|
// ========================= smartresize =============================== |
|
|
|
/* |
|
* smartresize: debounced resize event for jQuery |
|
* |
|
* latest version and complete README available on Github: |
|
* https://github.com/louisremi/jquery.smartresize.js |
|
* |
|
* Copyright 2011 @louis_remi |
|
* Licensed under the MIT license. |
|
*/ |
|
|
|
var $event = $.event, |
|
dispatchMethod = $.event.handle ? 'handle' : 'dispatch', |
|
resizeTimeout; |
|
|
|
$event.special.smartresize = { |
|
setup: function() { |
|
$(this).bind( "resize", $event.special.smartresize.handler ); |
|
}, |
|
teardown: function() { |
|
$(this).unbind( "resize", $event.special.smartresize.handler ); |
|
}, |
|
handler: function( event, execAsap ) { |
|
// Save the context |
|
var context = this, |
|
args = arguments; |
|
|
|
// set correct event type |
|
event.type = "smartresize"; |
|
|
|
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } |
|
resizeTimeout = setTimeout(function() { |
|
$event[ dispatchMethod ].apply( context, args ); |
|
}, execAsap === "execAsap"? 0 : 100 ); |
|
} |
|
}; |
|
|
|
$.fn.smartresize = function( fn ) { |
|
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); |
|
}; |
|
|
|
|
|
|
|
// ========================= Isotope =============================== |
|
|
|
|
|
// our "Widget" object constructor |
|
$.Isotope = function( options, element, callback ){ |
|
this.element = $( element ); |
|
|
|
this._create( options ); |
|
this._init( callback ); |
|
}; |
|
|
|
// styles of container element we want to keep track of |
|
var isoContainerStyles = [ 'width', 'height' ]; |
|
|
|
var $window = $(window); |
|
|
|
$.Isotope.settings = { |
|
resizable: true, |
|
layoutMode : 'masonry', |
|
containerClass : 'isotope', |
|
itemClass : 'isotope-item', |
|
hiddenClass : 'isotope-hidden', |
|
hiddenStyle: { opacity: 0, scale: 0.001 }, |
|
visibleStyle: { opacity: 1, scale: 1 }, |
|
containerStyle: { |
|
position: 'relative', |
|
overflow: 'hidden' |
|
}, |
|
animationEngine: 'best-available', |
|
animationOptions: { |
|
queue: false, |
|
duration: 800 |
|
}, |
|
sortBy : 'original-order', |
|
sortAscending : true, |
|
resizesContainer : true, |
|
transformsEnabled: true, |
|
itemPositionDataEnabled: false |
|
}; |
|
|
|
$.Isotope.prototype = { |
|
|
|
// sets up widget |
|
_create : function( options ) { |
|
|
|
this.options = $.extend( {}, $.Isotope.settings, options ); |
|
|
|
this.styleQueue = []; |
|
this.elemCount = 0; |
|
|
|
// get original styles in case we re-apply them in .destroy() |
|
var elemStyle = this.element[0].style; |
|
this.originalStyle = {}; |
|
// keep track of container styles |
|
var containerStyles = isoContainerStyles.slice(0); |
|
for ( var prop in this.options.containerStyle ) { |
|
containerStyles.push( prop ); |
|
} |
|
for ( var i=0, len = containerStyles.length; i < len; i++ ) { |
|
prop = containerStyles[i]; |
|
this.originalStyle[ prop ] = elemStyle[ prop ] || ''; |
|
} |
|
// apply container style from options |
|
this.element.css( this.options.containerStyle ); |
|
|
|
this._updateAnimationEngine(); |
|
this._updateUsingTransforms(); |
|
|
|
// sorting |
|
var originalOrderSorter = { |
|
'original-order' : function( $elem, instance ) { |
|
instance.elemCount ++; |
|
return instance.elemCount; |
|
}, |
|
random : function() { |
|
return Math.random(); |
|
} |
|
}; |
|
|
|
this.options.getSortData = $.extend( this.options.getSortData, originalOrderSorter ); |
|
|
|
// need to get atoms |
|
this.reloadItems(); |
|
|
|
// get top left position of where the bricks should be |
|
this.offset = { |
|
left: parseInt( ( this.element.css('padding-left') || 0 ), 10 ), |
|
top: parseInt( ( this.element.css('padding-top') || 0 ), 10 ) |
|
}; |
|
|
|
// add isotope class first time around |
|
var instance = this; |
|
setTimeout( function() { |
|
instance.element.addClass( instance.options.containerClass ); |
|
}, 0 ); |
|
|
|
// bind resize method |
|
if ( this.options.resizable ) { |
|
$window.bind( 'smartresize.isotope', function() { |
|
instance.resize(); |
|
}); |
|
} |
|
|
|
// dismiss all click events from hidden events |
|
this.element.delegate( '.' + this.options.hiddenClass, 'click', function(){ |
|
return false; |
|
}); |
|
|
|
}, |
|
|
|
_getAtoms : function( $elems ) { |
|
var selector = this.options.itemSelector, |
|
// filter & find |
|
$atoms = selector ? $elems.filter( selector ).add( $elems.find( selector ) ) : $elems, |
|
// base style for atoms |
|
atomStyle = { position: 'absolute' }; |
|
|
|
// filter out text nodes |
|
$atoms = $atoms.filter( function( i, atom ) { |
|
return atom.nodeType === 1; |
|
}); |
|
|
|
if ( this.usingTransforms ) { |
|
atomStyle.left = 0; |
|
atomStyle.top = 0; |
|
} |
|
|
|
$atoms.css( atomStyle ).addClass( this.options.itemClass ); |
|
|
|
this.updateSortData( $atoms, true ); |
|
|
|
return $atoms; |
|
}, |
|
|
|
// _init fires when your instance is first created |
|
// (from the constructor above), and when you |
|
// attempt to initialize the widget again (by the bridge) |
|
// after it has already been initialized. |
|
_init : function( callback ) { |
|
|
|
this.$filteredAtoms = this._filter( this.$allAtoms ); |
|
this._sort(); |
|
this.reLayout( callback ); |
|
|
|
}, |
|
|
|
option : function( opts ){ |
|
// change options AFTER initialization: |
|
// signature: $('#foo').bar({ cool:false }); |
|
if ( $.isPlainObject( opts ) ){ |
|
this.options = $.extend( true, this.options, opts ); |
|
|
|
// trigger _updateOptionName if it exists |
|
var updateOptionFn; |
|
for ( var optionName in opts ) { |
|
updateOptionFn = '_update' + capitalize( optionName ); |
|
if ( this[ updateOptionFn ] ) { |
|
this[ updateOptionFn ](); |
|
} |
|
} |
|
} |
|
}, |
|
|
|
// ====================== updaters ====================== // |
|
// kind of like setters |
|
|
|
_updateAnimationEngine : function() { |
|
var animationEngine = this.options.animationEngine.toLowerCase().replace( /[ _\-]/g, ''); |
|
var isUsingJQueryAnimation; |
|
// set applyStyleFnName |
|
switch ( animationEngine ) { |
|
case 'css' : |
|
case 'none' : |
|
isUsingJQueryAnimation = false; |
|
break; |
|
case 'jquery' : |
|
isUsingJQueryAnimation = true; |
|
break; |
|
default : // best available |
|
isUsingJQueryAnimation = !Modernizr.csstransitions; |
|
} |
|
this.isUsingJQueryAnimation = isUsingJQueryAnimation; |
|
this._updateUsingTransforms(); |
|
}, |
|
|
|
_updateTransformsEnabled : function() { |
|
this._updateUsingTransforms(); |
|
}, |
|
|
|
_updateUsingTransforms : function() { |
|
var usingTransforms = this.usingTransforms = this.options.transformsEnabled && |
|
Modernizr.csstransforms && Modernizr.csstransitions && !this.isUsingJQueryAnimation; |
|
|
|
// prevent scales when transforms are disabled |
|
if ( !usingTransforms ) { |
|
delete this.options.hiddenStyle.scale; |
|
delete this.options.visibleStyle.scale; |
|
} |
|
|
|
this.getPositionStyles = usingTransforms ? this._translate : this._positionAbs; |
|
}, |
|
|
|
|
|
// ====================== Filtering ====================== |
|
|
|
_filter : function( $atoms ) { |
|
var filter = this.options.filter === '' ? '*' : this.options.filter; |
|
|
|
if ( !filter ) { |
|
return $atoms; |
|
} |
|
|
|
var hiddenClass = this.options.hiddenClass, |
|
hiddenSelector = '.' + hiddenClass, |
|
$hiddenAtoms = $atoms.filter( hiddenSelector ), |
|
$atomsToShow = $hiddenAtoms; |
|
|
|
if ( filter !== '*' ) { |
|
$atomsToShow = $hiddenAtoms.filter( filter ); |
|
var $atomsToHide = $atoms.not( hiddenSelector ).not( filter ).addClass( hiddenClass ); |
|
this.styleQueue.push({ $el: $atomsToHide, style: this.options.hiddenStyle }); |
|
} |
|
|
|
this.styleQueue.push({ $el: $atomsToShow, style: this.options.visibleStyle }); |
|
$atomsToShow.removeClass( hiddenClass ); |
|
|
|
return $atoms.filter( filter ); |
|
}, |
|
|
|
// ====================== Sorting ====================== |
|
|
|
updateSortData : function( $atoms, isIncrementingElemCount ) { |
|
var instance = this, |
|
getSortData = this.options.getSortData, |
|
$this, sortData; |
|
$atoms.each(function(){ |
|
$this = $(this); |
|
sortData = {}; |
|
// get value for sort data based on fn( $elem ) passed in |
|
for ( var key in getSortData ) { |
|
if ( !isIncrementingElemCount && key === 'original-order' ) { |
|
// keep original order original |
|
sortData[ key ] = $.data( this, 'isotope-sort-data' )[ key ]; |
|
} else { |
|
sortData[ key ] = getSortData[ key ]( $this, instance ); |
|
} |
|
} |
|
// apply sort data to element |
|
$.data( this, 'isotope-sort-data', sortData ); |
|
}); |
|
}, |
|
|
|
// used on all the filtered atoms |
|
_sort : function() { |
|
|
|
var sortBy = this.options.sortBy, |
|
getSorter = this._getSorter, |
|
sortDir = this.options.sortAscending ? 1 : -1, |
|
sortFn = function( alpha, beta ) { |
|
var a = getSorter( alpha, sortBy ), |
|
b = getSorter( beta, sortBy ); |
|
// fall back to original order if data matches |
|
if ( a === b && sortBy !== 'original-order') { |
|
a = getSorter( alpha, 'original-order' ); |
|
b = getSorter( beta, 'original-order' ); |
|
} |
|
return ( ( a > b ) ? 1 : ( a < b ) ? -1 : 0 ) * sortDir; |
|
}; |
|
|
|
this.$filteredAtoms.sort( sortFn ); |
|
}, |
|
|
|
_getSorter : function( elem, sortBy ) { |
|
return $.data( elem, 'isotope-sort-data' )[ sortBy ]; |
|
}, |
|
|
|
// ====================== Layout Helpers ====================== |
|
|
|
_translate : function( x, y ) { |
|
return { translate : [ x, y ] }; |
|
}, |
|
|
|
_positionAbs : function( x, y ) { |
|
return { left: x, top: y }; |
|
}, |
|
|
|
_pushPosition : function( $elem, x, y ) { |
|
x = Math.round( x + this.offset.left ); |
|
y = Math.round( y + this.offset.top ); |
|
var position = this.getPositionStyles( x, y ); |
|
this.styleQueue.push({ $el: $elem, style: position }); |
|
if ( this.options.itemPositionDataEnabled ) { |
|
$elem.data('isotope-item-position', {x: x, y: y} ); |
|
} |
|
}, |
|
|
|
|
|
// ====================== General Layout ====================== |
|
|
|
// used on collection of atoms (should be filtered, and sorted before ) |
|
// accepts atoms-to-be-laid-out to start with |
|
layout : function( $elems, callback ) { |
|
|
|
var layoutMode = this.options.layoutMode; |
|
|
|
// layout logic |
|
this[ '_' + layoutMode + 'Layout' ]( $elems ); |
|
|
|
// set the size of the container |
|
if ( this.options.resizesContainer ) { |
|
var containerStyle = this[ '_' + layoutMode + 'GetContainerSize' ](); |
|
this.styleQueue.push({ $el: this.element, style: containerStyle }); |
|
} |
|
|
|
this._processStyleQueue( $elems, callback ); |
|
|
|
this.isLaidOut = true; |
|
}, |
|
|
|
_processStyleQueue : function( $elems, callback ) { |
|
// are we animating the layout arrangement? |
|
// use plugin-ish syntax for css or animate |
|
var styleFn = !this.isLaidOut ? 'css' : ( |
|
this.isUsingJQueryAnimation ? 'animate' : 'css' |
|
), |
|
animOpts = this.options.animationOptions, |
|
onLayout = this.options.onLayout, |
|
objStyleFn, processor, |
|
triggerCallbackNow, callbackFn; |
|
|
|
// default styleQueue processor, may be overwritten down below |
|
processor = function( i, obj ) { |
|
obj.$el[ styleFn ]( obj.style, animOpts ); |
|
}; |
|
|
|
if ( this._isInserting && this.isUsingJQueryAnimation ) { |
|
// if using styleQueue to insert items |
|
processor = function( i, obj ) { |
|
// only animate if it not being inserted |
|
objStyleFn = obj.$el.hasClass('no-transition') ? 'css' : styleFn; |
|
obj.$el[ objStyleFn ]( obj.style, animOpts ); |
|
}; |
|
|
|
} else if ( callback || onLayout || animOpts.complete ) { |
|
// has callback |
|
var isCallbackTriggered = false, |
|
// array of possible callbacks to trigger |
|
callbacks = [ callback, onLayout, animOpts.complete ], |
|
instance = this; |
|
triggerCallbackNow = true; |
|
// trigger callback only once |
|
callbackFn = function() { |
|
if ( isCallbackTriggered ) { |
|
return; |
|
} |
|
var hollaback; |
|
for (var i=0, len = callbacks.length; i < len; i++) { |
|
hollaback = callbacks[i]; |
|
if ( typeof hollaback === 'function' ) { |
|
hollaback.call( instance.element, $elems, instance ); |
|
} |
|
} |
|
isCallbackTriggered = true; |
|
}; |
|
|
|
if ( this.isUsingJQueryAnimation && styleFn === 'animate' ) { |
|
// add callback to animation options |
|
animOpts.complete = callbackFn; |
|
triggerCallbackNow = false; |
|
|
|
} else if ( Modernizr.csstransitions ) { |
|
// detect if first item has transition |
|
var i = 0, |
|
firstItem = this.styleQueue[0], |
|
testElem = firstItem && firstItem.$el, |
|
styleObj; |
|
// get first non-empty jQ object |
|
while ( !testElem || !testElem.length ) { |
|
styleObj = this.styleQueue[ i++ ]; |
|
// HACK: sometimes styleQueue[i] is undefined |
|
if ( !styleObj ) { |
|
return; |
|
} |
|
testElem = styleObj.$el; |
|
} |
|
// get transition duration of the first element in that object |
|
// yeah, this is inexact |
|
var duration = parseFloat( getComputedStyle( testElem[0] )[ transitionDurProp ] ); |
|
if ( duration > 0 ) { |
|
processor = function( i, obj ) { |
|
obj.$el[ styleFn ]( obj.style, animOpts ) |
|
// trigger callback at transition end |
|
.one( transitionEndEvent, callbackFn ); |
|
}; |
|
triggerCallbackNow = false; |
|
} |
|
} |
|
} |
|
|
|
// process styleQueue |
|
$.each( this.styleQueue, processor ); |
|
|
|
if ( triggerCallbackNow ) { |
|
callbackFn(); |
|
} |
|
|
|
// clear out queue for next time |
|
this.styleQueue = []; |
|
}, |
|
|
|
|
|
resize : function() { |
|
if ( this[ '_' + this.options.layoutMode + 'ResizeChanged' ]() ) { |
|
this.reLayout(); |
|
} |
|
}, |
|
|
|
|
|
reLayout : function( callback ) { |
|
|
|
this[ '_' + this.options.layoutMode + 'Reset' ](); |
|
this.layout( this.$filteredAtoms, callback ); |
|
|
|
}, |
|
|
|
// ====================== Convenience methods ====================== |
|
|
|
// ====================== Adding items ====================== |
|
|
|
// adds a jQuery object of items to a isotope container |
|
addItems : function( $content, callback ) { |
|
var $newAtoms = this._getAtoms( $content ); |
|
// add new atoms to atoms pools |
|
this.$allAtoms = this.$allAtoms.add( $newAtoms ); |
|
|
|
if ( callback ) { |
|
callback( $newAtoms ); |
|
} |
|
}, |
|
|
|
// convienence method for adding elements properly to any layout |
|
// positions items, hides them, then animates them back in <--- very sezzy |
|
insert : function( $content, callback ) { |
|
// position items |
|
this.element.append( $content ); |
|
|
|
var instance = this; |
|
this.addItems( $content, function( $newAtoms ) { |
|
var $newFilteredAtoms = instance._filter( $newAtoms ); |
|
instance._addHideAppended( $newFilteredAtoms ); |
|
instance._sort(); |
|
instance.reLayout(); |
|
instance._revealAppended( $newFilteredAtoms, callback ); |
|
}); |
|
|
|
}, |
|
|
|
// convienence method for working with Infinite Scroll |
|
appended : function( $content, callback ) { |
|
var instance = this; |
|
this.addItems( $content, function( $newAtoms ) { |
|
instance._addHideAppended( $newAtoms ); |
|
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._isInserting = false; |
|
instance._processStyleQueue( $newAtoms, callback ); |
|
}, 10 ); |
|
}, |
|
|
|
// gathers all atoms |
|
reloadItems : function() { |
|
this.$allAtoms = this._getAtoms( this.element.children() ); |
|
}, |
|
|
|
// removes elements from Isotope widget |
|
remove: function( $content, callback ) { |
|
// remove elements immediately from Isotope instance |
|
this.$allAtoms = this.$allAtoms.not( $content ); |
|
this.$filteredAtoms = this.$filteredAtoms.not( $content ); |
|
// remove() as a callback, for after transition / animation |
|
var instance = this; |
|
var removeContent = function() { |
|
$content.remove(); |
|
if ( callback ) { |
|
callback.call( instance.element ); |
|
} |
|
}; |
|
|
|
if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) { |
|
// if any non-hidden content needs to be removed |
|
this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle }); |
|
this._sort(); |
|
this.reLayout( removeContent ); |
|
} else { |
|
// remove it now |
|
removeContent(); |
|
} |
|
|
|
}, |
|
|
|
shuffle : function( callback ) { |
|
this.updateSortData( this.$allAtoms ); |
|
this.options.sortBy = 'random'; |
|
this._sort(); |
|
this.reLayout( callback ); |
|
}, |
|
|
|
// destroys widget, returns elements and container back (close) to original style |
|
destroy : function() { |
|
|
|
var usingTransforms = this.usingTransforms; |
|
var options = this.options; |
|
|
|
this.$allAtoms |
|
.removeClass( options.hiddenClass + ' ' + options.itemClass ) |
|
.each(function(){ |
|
var style = this.style; |
|
style.position = ''; |
|
style.top = ''; |
|
style.left = ''; |
|
style.opacity = ''; |
|
if ( usingTransforms ) { |
|
style[ transformProp ] = ''; |
|
} |
|
}); |
|
|
|
// re-apply saved container styles |
|
var elemStyle = this.element[0].style; |
|
for ( var prop in this.originalStyle ) { |
|
elemStyle[ prop ] = this.originalStyle[ prop ]; |
|
} |
|
|
|
this.element |
|
.unbind('.isotope') |
|
.undelegate( '.' + options.hiddenClass, 'click' ) |
|
.removeClass( options.containerClass ) |
|
.removeData('isotope'); |
|
|
|
$window.unbind('.isotope'); |
|
|
|
}, |
|
|
|
|
|
// ====================== LAYOUTS ====================== |
|
|
|
// calculates number of rows or columns |
|
// requires columnWidth or rowHeight to be set on namespaced object |
|
// i.e. this.masonry.columnWidth = 200 |
|
_getSegments : function( isRows ) { |
|
var namespace = this.options.layoutMode, |
|
measure = isRows ? 'rowHeight' : 'columnWidth', |
|
size = isRows ? 'height' : 'width', |
|
segmentsName = isRows ? 'rows' : 'cols', |
|
containerSize = this.element[ size ](), |
|
segments, |
|
// i.e. options.masonry && options.masonry.columnWidth |
|
segmentSize = this.options[ namespace ] && this.options[ namespace ][ measure ] || |
|
// or use the size of the first item, i.e. outerWidth |
|
this.$filteredAtoms[ 'outer' + capitalize(size) ](true) || |
|
// if there's no items, use size of container |
|
containerSize; |
|
|
|
segments = Math.floor( containerSize / segmentSize ); |
|
segments = Math.max( segments, 1 ); |
|
|
|
// i.e. this.masonry.cols = .... |
|
this[ namespace ][ segmentsName ] = segments; |
|
// i.e. this.masonry.columnWidth = ... |
|
this[ namespace ][ measure ] = segmentSize; |
|
|
|
}, |
|
|
|
_checkIfSegmentsChanged : function( isRows ) { |
|
var namespace = this.options.layoutMode, |
|
segmentsName = isRows ? 'rows' : 'cols', |
|
prevSegments = this[ namespace ][ segmentsName ]; |
|
// update cols/rows |
|
this._getSegments( isRows ); |
|
// return if updated cols/rows is not equal to previous |
|
return ( this[ namespace ][ segmentsName ] !== prevSegments ); |
|
}, |
|
|
|
// ====================== Masonry ====================== |
|
|
|
_masonryReset : function() { |
|
// layout-specific props |
|
this.masonry = {}; |
|
// FIXME shouldn't have to call this again |
|
this._getSegments(); |
|
var i = this.masonry.cols; |
|
this.masonry.colYs = []; |
|
while (i--) { |
|
this.masonry.colYs.push( 0 ); |
|
} |
|
}, |
|
|
|
_masonryLayout : function( $elems ) { |
|
var instance = this, |
|
props = instance.masonry; |
|
$elems.each(function(){ |
|
var $this = $(this), |
|
//how many columns does this brick span |
|
colSpan = Math.ceil( $this.outerWidth(true) / props.columnWidth ); |
|
colSpan = Math.min( colSpan, props.cols ); |
|
|
|
if ( colSpan === 1 ) { |
|
// if brick spans only one column, just like singleMode |
|
instance._masonryPlaceBrick( $this, props.colYs ); |
|
} else { |
|
// brick spans more than one column |
|
// how many different places could this brick fit horizontally |
|
var groupCount = props.cols + 1 - colSpan, |
|
groupY = [], |
|
groupColY, |
|
i; |
|
|
|
// for each group potential horizontal position |
|
for ( i=0; i < groupCount; i++ ) { |
|
// make an array of colY values for that one group |
|
groupColY = props.colYs.slice( i, i+colSpan ); |
|
// and get the max value of the array |
|
groupY[i] = Math.max.apply( Math, groupColY ); |
|
} |
|
|
|
instance._masonryPlaceBrick( $this, groupY ); |
|
} |
|
}); |
|
}, |
|
|
|
// worker method that places brick in the columnSet |
|
// with the the minY |
|
_masonryPlaceBrick : function( $brick, setY ) { |
|
// get the minimum Y value from the columns |
|
var minimumY = Math.min.apply( Math, setY ), |
|
shortCol = 0; |
|
|
|
// Find index of short column, the first from the left |
|
for (var i=0, len = setY.length; i < len; i++) { |
|
if ( setY[i] === minimumY ) { |
|
shortCol = i; |
|
break; |
|
} |
|
} |
|
|
|
// position the brick |
|
var x = this.masonry.columnWidth * shortCol, |
|
y = minimumY; |
|
this._pushPosition( $brick, x, y ); |
|
|
|
// apply setHeight to necessary columns |
|
var setHeight = minimumY + $brick.outerHeight(true), |
|
setSpan = this.masonry.cols + 1 - len; |
|
for ( i=0; i < setSpan; i++ ) { |
|
this.masonry.colYs[ shortCol + i ] = setHeight; |
|
} |
|
|
|
}, |
|
|
|
_masonryGetContainerSize : function() { |
|
var containerHeight = Math.max.apply( Math, this.masonry.colYs ); |
|
return { height: containerHeight }; |
|
}, |
|
|
|
_masonryResizeChanged : function() { |
|
return this._checkIfSegmentsChanged(); |
|
}, |
|
|
|
// ====================== fitRows ====================== |
|
|
|
_fitRowsReset : function() { |
|
this.fitRows = { |
|
x : 0, |
|
y : 0, |
|
height : 0 |
|
}; |
|
}, |
|
|
|
_fitRowsLayout : function( $elems ) { |
|
var instance = this, |
|
containerWidth = this.element.width(), |
|
props = this.fitRows; |
|
|
|
$elems.each( function() { |
|
var $this = $(this), |
|
atomW = $this.outerWidth(true), |
|
atomH = $this.outerHeight(true); |
|
|
|
if ( props.x !== 0 && atomW + props.x > containerWidth ) { |
|
// if this element cannot fit in the current row |
|
props.x = 0; |
|
props.y = props.height; |
|
} |
|
|
|
// position the atom |
|
instance._pushPosition( $this, props.x, props.y ); |
|
|
|
props.height = Math.max( props.y + atomH, props.height ); |
|
props.x += atomW; |
|
|
|
}); |
|
}, |
|
|
|
_fitRowsGetContainerSize : function () { |
|
return { height : this.fitRows.height }; |
|
}, |
|
|
|
_fitRowsResizeChanged : function() { |
|
return true; |
|
}, |
|
|
|
|
|
// ====================== cellsByRow ====================== |
|
|
|
_cellsByRowReset : function() { |
|
this.cellsByRow = { |
|
index : 0 |
|
}; |
|
// get this.cellsByRow.columnWidth |
|
this._getSegments(); |
|
// get this.cellsByRow.rowHeight |
|
this._getSegments(true); |
|
}, |
|
|
|
_cellsByRowLayout : function( $elems ) { |
|
var instance = this, |
|
props = this.cellsByRow; |
|
$elems.each( function(){ |
|
var $this = $(this), |
|
col = props.index % props.cols, |
|
row = Math.floor( props.index / props.cols ), |
|
x = ( col + 0.5 ) * props.columnWidth - $this.outerWidth(true) / 2, |
|
y = ( row + 0.5 ) * props.rowHeight - $this.outerHeight(true) / 2; |
|
instance._pushPosition( $this, x, y ); |
|
props.index ++; |
|
}); |
|
}, |
|
|
|
_cellsByRowGetContainerSize : function() { |
|
return { height : Math.ceil( this.$filteredAtoms.length / this.cellsByRow.cols ) * this.cellsByRow.rowHeight + this.offset.top }; |
|
}, |
|
|
|
_cellsByRowResizeChanged : function() { |
|
return this._checkIfSegmentsChanged(); |
|
}, |
|
|
|
|
|
// ====================== straightDown ====================== |
|
|
|
_straightDownReset : function() { |
|
this.straightDown = { |
|
y : 0 |
|
}; |
|
}, |
|
|
|
_straightDownLayout : function( $elems ) { |
|
var instance = this; |
|
$elems.each( function( i ){ |
|
var $this = $(this); |
|
instance._pushPosition( $this, 0, instance.straightDown.y ); |
|
instance.straightDown.y += $this.outerHeight(true); |
|
}); |
|
}, |
|
|
|
_straightDownGetContainerSize : function() { |
|
return { height : this.straightDown.y }; |
|
}, |
|
|
|
_straightDownResizeChanged : function() { |
|
return true; |
|
}, |
|
|
|
|
|
// ====================== masonryHorizontal ====================== |
|
|
|
_masonryHorizontalReset : function() { |
|
// layout-specific props |
|
this.masonryHorizontal = {}; |
|
// FIXME shouldn't have to call this again |
|
this._getSegments( true ); |
|
var i = this.masonryHorizontal.rows; |
|
this.masonryHorizontal.rowXs = []; |
|
while (i--) { |
|
this.masonryHorizontal.rowXs.push( 0 ); |
|
} |
|
}, |
|
|
|
_masonryHorizontalLayout : function( $elems ) { |
|
var instance = this, |
|
props = instance.masonryHorizontal; |
|
$elems.each(function(){ |
|
var $this = $(this), |
|
//how many rows does this brick span |
|
rowSpan = Math.ceil( $this.outerHeight(true) / props.rowHeight ); |
|
rowSpan = Math.min( rowSpan, props.rows ); |
|
|
|
if ( rowSpan === 1 ) { |
|
// if brick spans only one column, just like singleMode |
|
instance._masonryHorizontalPlaceBrick( $this, props.rowXs ); |
|
} else { |
|
// brick spans more than one row |
|
// how many different places could this brick fit horizontally |
|
var groupCount = props.rows + 1 - rowSpan, |
|
groupX = [], |
|
groupRowX, i; |
|
|
|
// for each group potential horizontal position |
|
for ( i=0; i < groupCount; i++ ) { |
|
// make an array of colY values for that one group |
|
groupRowX = props.rowXs.slice( i, i+rowSpan ); |
|
// and get the max value of the array |
|
groupX[i] = Math.max.apply( Math, groupRowX ); |
|
} |
|
|
|
instance._masonryHorizontalPlaceBrick( $this, groupX ); |
|
} |
|
}); |
|
}, |
|
|
|
_masonryHorizontalPlaceBrick : function( $brick, setX ) { |
|
// get the minimum Y value from the columns |
|
var minimumX = Math.min.apply( Math, setX ), |
|
smallRow = 0; |
|
// Find index of smallest row, the first from the top |
|
for (var i=0, len = setX.length; i < len; i++) { |
|
if ( setX[i] === minimumX ) { |
|
smallRow = i; |
|
break; |
|
} |
|
} |
|
|
|
// position the brick |
|
var x = minimumX, |
|
y = this.masonryHorizontal.rowHeight * smallRow; |
|
this._pushPosition( $brick, x, y ); |
|
|
|
// apply setHeight to necessary columns |
|
var setWidth = minimumX + $brick.outerWidth(true), |
|
setSpan = this.masonryHorizontal.rows + 1 - len; |
|
for ( i=0; i < setSpan; i++ ) { |
|
this.masonryHorizontal.rowXs[ smallRow + i ] = setWidth; |
|
} |
|
}, |
|
|
|
_masonryHorizontalGetContainerSize : function() { |
|
var containerWidth = Math.max.apply( Math, this.masonryHorizontal.rowXs ); |
|
return { width: containerWidth }; |
|
}, |
|
|
|
_masonryHorizontalResizeChanged : function() { |
|
return this._checkIfSegmentsChanged(true); |
|
}, |
|
|
|
|
|
// ====================== fitColumns ====================== |
|
|
|
_fitColumnsReset : function() { |
|
this.fitColumns = { |
|
x : 0, |
|
y : 0, |
|
width : 0 |
|
}; |
|
}, |
|
|
|
_fitColumnsLayout : function( $elems ) { |
|
var instance = this, |
|
containerHeight = this.element.height(), |
|
props = this.fitColumns; |
|
$elems.each( function() { |
|
var $this = $(this), |
|
atomW = $this.outerWidth(true), |
|
atomH = $this.outerHeight(true); |
|
|
|
if ( props.y !== 0 && atomH + props.y > containerHeight ) { |
|
// if this element cannot fit in the current column |
|
props.x = props.width; |
|
props.y = 0; |
|
} |
|
|
|
// position the atom |
|
instance._pushPosition( $this, props.x, props.y ); |
|
|
|
props.width = Math.max( props.x + atomW, props.width ); |
|
props.y += atomH; |
|
|
|
}); |
|
}, |
|
|
|
_fitColumnsGetContainerSize : function () { |
|
return { width : this.fitColumns.width }; |
|
}, |
|
|
|
_fitColumnsResizeChanged : function() { |
|
return true; |
|
}, |
|
|
|
|
|
|
|
// ====================== cellsByColumn ====================== |
|
|
|
_cellsByColumnReset : function() { |
|
this.cellsByColumn = { |
|
index : 0 |
|
}; |
|
// get this.cellsByColumn.columnWidth |
|
this._getSegments(); |
|
// get this.cellsByColumn.rowHeight |
|
this._getSegments(true); |
|
}, |
|
|
|
_cellsByColumnLayout : function( $elems ) { |
|
var instance = this, |
|
props = this.cellsByColumn; |
|
$elems.each( function(){ |
|
var $this = $(this), |
|
col = Math.floor( props.index / props.rows ), |
|
row = props.index % props.rows, |
|
x = ( col + 0.5 ) * props.columnWidth - $this.outerWidth(true) / 2, |
|
y = ( row + 0.5 ) * props.rowHeight - $this.outerHeight(true) / 2; |
|
instance._pushPosition( $this, x, y ); |
|
props.index ++; |
|
}); |
|
}, |
|
|
|
_cellsByColumnGetContainerSize : function() { |
|
return { width : Math.ceil( this.$filteredAtoms.length / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth }; |
|
}, |
|
|
|
_cellsByColumnResizeChanged : function() { |
|
return this._checkIfSegmentsChanged(true); |
|
}, |
|
|
|
// ====================== straightAcross ====================== |
|
|
|
_straightAcrossReset : function() { |
|
this.straightAcross = { |
|
x : 0 |
|
}; |
|
}, |
|
|
|
_straightAcrossLayout : function( $elems ) { |
|
var instance = this; |
|
$elems.each( function( i ){ |
|
var $this = $(this); |
|
instance._pushPosition( $this, instance.straightAcross.x, 0 ); |
|
instance.straightAcross.x += $this.outerWidth(true); |
|
}); |
|
}, |
|
|
|
_straightAcrossGetContainerSize : function() { |
|
return { width : this.straightAcross.x }; |
|
}, |
|
|
|
_straightAcrossResizeChanged : function() { |
|
return true; |
|
} |
|
|
|
}; |
|
|
|
|
|
// ======================= imagesLoaded Plugin =============================== |
|
/*! |
|
* jQuery imagesLoaded plugin v1.1.0 |
|
* http://github.com/desandro/imagesloaded |
|
* |
|
* MIT License. by Paul Irish et al. |
|
*/ |
|
|
|
|
|
// $('#my-container').imagesLoaded(myFunction) |
|
// or |
|
// $('img').imagesLoaded(myFunction) |
|
|
|
// execute a callback when all images have loaded. |
|
// needed because .load() doesn't work on cached images |
|
|
|
// callback function gets image collection as argument |
|
// `this` is the container |
|
|
|
$.fn.imagesLoaded = function( callback ) { |
|
var $this = this, |
|
$images = $this.find('img').add( $this.filter('img') ), |
|
len = $images.length, |
|
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==', |
|
loaded = []; |
|
|
|
function triggerCallback() { |
|
callback.call( $this, $images ); |
|
} |
|
|
|
function imgLoaded( event ) { |
|
var img = event.target; |
|
if ( img.src !== blank && $.inArray( img, loaded ) === -1 ){ |
|
loaded.push( img ); |
|
if ( --len <= 0 ){ |
|
setTimeout( triggerCallback ); |
|
$images.unbind( '.imagesLoaded', imgLoaded ); |
|
} |
|
} |
|
} |
|
|
|
// if no images, trigger immediately |
|
if ( !len ) { |
|
triggerCallback(); |
|
} |
|
|
|
$images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoaded ).each( function() { |
|
// cached images don't fire load sometimes, so we reset src. |
|
var src = this.src; |
|
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f |
|
// data uri bypasses webkit log warning (thx doug jones) |
|
this.src = blank; |
|
this.src = src; |
|
}); |
|
|
|
return $this; |
|
}; |
|
|
|
|
|
// helper function for logging errors |
|
// $.error breaks jQuery chaining |
|
var logError = function( message ) { |
|
if ( window.console ) { |
|
window.console.error( message ); |
|
} |
|
}; |
|
|
|
// ======================= Plugin bridge =============================== |
|
// leverages data method to either create or return $.Isotope constructor |
|
// A bit from jQuery UI |
|
// https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js |
|
// A bit from jcarousel |
|
// https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js |
|
|
|
$.fn.isotope = function( options, callback ) { |
|
if ( typeof options === 'string' ) { |
|
// call method |
|
var args = Array.prototype.slice.call( arguments, 1 ); |
|
|
|
this.each(function(){ |
|
var instance = $.data( this, 'isotope' ); |
|
if ( !instance ) { |
|
logError( "cannot call methods on isotope prior to initialization; " + |
|
"attempted to call method '" + options + "'" ); |
|
return; |
|
} |
|
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { |
|
logError( "no such method '" + options + "' for isotope instance" ); |
|
return; |
|
} |
|
// apply method |
|
instance[ options ].apply( instance, args ); |
|
}); |
|
} else { |
|
this.each(function() { |
|
var instance = $.data( this, 'isotope' ); |
|
if ( instance ) { |
|
// apply options & init |
|
instance.option( options ); |
|
instance._init( callback ); |
|
} else { |
|
// initialize new instance |
|
$.data( this, 'isotope', new $.Isotope( options, this, callback ) ); |
|
} |
|
}); |
|
} |
|
// return jQuery object |
|
// so plugin methods do not have to |
|
return this; |
|
}; |
|
|
|
})( window, jQuery ); |