b193bb28d8
git-subtree-dir: docs git-subtree-mainline: 23545aa7ea599faf17737de9879733a1bde700d1 git-subtree-split: 106142b25c9387ffd002437027ced1b04f494205
1588 lines
46 KiB
JavaScript
1588 lines
46 KiB
JavaScript
/*!
|
|
* Shuffle.js by @Vestride
|
|
* Categorize, sort, and filter a responsive grid of items.
|
|
* Dependencies: jQuery 1.9+, Modernizr 2.6.2+
|
|
* @license MIT license
|
|
* @version 3.0.0
|
|
*/
|
|
|
|
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
|
|
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-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){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!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.slice(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.6.2",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,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!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}),q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},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);
|
|
|
|
(function (factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
define(['jquery', 'modernizr'], factory);
|
|
} else {
|
|
window.Shuffle = factory(window.jQuery, window.Modernizr);
|
|
}
|
|
})(function($, Modernizr, undefined) {
|
|
|
|
'use strict';
|
|
|
|
|
|
// Validate Modernizr exists.
|
|
// Shuffle requires `csstransitions`, `csstransforms`, `csstransforms3d`,
|
|
// and `prefixed` to exist on the Modernizr object.
|
|
if (typeof Modernizr !== 'object') {
|
|
throw new Error('Shuffle.js requires Modernizr.\n' +
|
|
'http://vestride.github.io/Shuffle/#dependencies');
|
|
}
|
|
|
|
|
|
/**
|
|
* Returns css prefixed properties like `-webkit-transition` or `box-sizing`
|
|
* from `transition` or `boxSizing`, respectively.
|
|
* @param {(string|boolean)} prop Property to be prefixed.
|
|
* @return {string} The prefixed css property.
|
|
*/
|
|
function dashify( prop ) {
|
|
if (!prop) {
|
|
return '';
|
|
}
|
|
|
|
// Replace upper case with dash-lowercase,
|
|
// then fix ms- prefixes because they're not capitalized.
|
|
return prop.replace(/([A-Z])/g, function( str, m1 ) {
|
|
return '-' + m1.toLowerCase();
|
|
}).replace(/^ms-/,'-ms-');
|
|
}
|
|
|
|
// Constant, prefixed variables.
|
|
var TRANSITION = Modernizr.prefixed('transition');
|
|
var TRANSITION_DELAY = Modernizr.prefixed('transitionDelay');
|
|
var TRANSITION_DURATION = Modernizr.prefixed('transitionDuration');
|
|
|
|
// Note(glen): Stock Android 4.1.x browser will fail here because it wrongly
|
|
// says it supports non-prefixed transitions.
|
|
// https://github.com/Modernizr/Modernizr/issues/897
|
|
var TRANSITIONEND = {
|
|
'WebkitTransition' : 'webkitTransitionEnd',
|
|
'transition' : 'transitionend'
|
|
}[ TRANSITION ];
|
|
|
|
var TRANSFORM = Modernizr.prefixed('transform');
|
|
var CSS_TRANSFORM = dashify(TRANSFORM);
|
|
|
|
// Constants
|
|
var CAN_TRANSITION_TRANSFORMS = Modernizr.csstransforms && Modernizr.csstransitions;
|
|
var HAS_TRANSFORMS_3D = Modernizr.csstransforms3d;
|
|
var SHUFFLE = 'shuffle';
|
|
var COLUMN_THRESHOLD = 0.3;
|
|
|
|
// Configurable. You can change these constants to fit your application.
|
|
// The default scale and concealed scale, however, have to be different values.
|
|
var ALL_ITEMS = 'all';
|
|
var FILTER_ATTRIBUTE_KEY = 'groups';
|
|
var DEFAULT_SCALE = 1;
|
|
var CONCEALED_SCALE = 0.001;
|
|
|
|
|
|
// Underscore's throttle function.
|
|
function throttle(func, wait, options) {
|
|
var context, args, result;
|
|
var timeout = null;
|
|
var previous = 0;
|
|
options = options || {};
|
|
var later = function() {
|
|
previous = options.leading === false ? 0 : $.now();
|
|
timeout = null;
|
|
result = func.apply(context, args);
|
|
context = args = null;
|
|
};
|
|
return function() {
|
|
var now = $.now();
|
|
if (!previous && options.leading === false) {
|
|
previous = now;
|
|
}
|
|
var remaining = wait - (now - previous);
|
|
context = this;
|
|
args = arguments;
|
|
if (remaining <= 0 || remaining > wait) {
|
|
clearTimeout(timeout);
|
|
timeout = null;
|
|
previous = now;
|
|
result = func.apply(context, args);
|
|
context = args = null;
|
|
} else if (!timeout && options.trailing !== false) {
|
|
timeout = setTimeout(later, remaining);
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
|
|
function each(obj, iterator, context) {
|
|
for (var i = 0, length = obj.length; i < length; i++) {
|
|
if (iterator.call(context, obj[i], i, obj) === {}) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
function defer(fn, context, wait) {
|
|
return setTimeout( $.proxy( fn, context ), wait );
|
|
}
|
|
|
|
function arrayMax( array ) {
|
|
return Math.max.apply( Math, array );
|
|
}
|
|
|
|
function arrayMin( array ) {
|
|
return Math.min.apply( Math, array );
|
|
}
|
|
|
|
|
|
/**
|
|
* Always returns a numeric value, given a value.
|
|
* @param {*} value Possibly numeric value.
|
|
* @return {number} `value` or zero if `value` isn't numeric.
|
|
* @private
|
|
*/
|
|
function getNumber(value) {
|
|
return $.isNumeric(value) ? value : 0;
|
|
}
|
|
|
|
|
|
/**
|
|
* Represents a coordinate pair.
|
|
* @param {number} [x=0] X.
|
|
* @param {number} [y=0] Y.
|
|
*/
|
|
var Point = function(x, y) {
|
|
this.x = getNumber( x );
|
|
this.y = getNumber( y );
|
|
};
|
|
|
|
|
|
/**
|
|
* Whether two points are equal.
|
|
* @param {Point} a Point A.
|
|
* @param {Point} b Point B.
|
|
* @return {boolean}
|
|
*/
|
|
Point.equals = function(a, b) {
|
|
return a.x === b.x && a.y === b.y;
|
|
};
|
|
|
|
|
|
// Used for unique instance variables
|
|
var id = 0;
|
|
var $window = $( window );
|
|
|
|
|
|
/**
|
|
* Categorize, sort, and filter a responsive grid of items.
|
|
*
|
|
* @param {Element} element An element which is the parent container for the grid items.
|
|
* @param {Object} [options=Shuffle.options] Options object.
|
|
* @constructor
|
|
*/
|
|
var Shuffle = function( element, options ) {
|
|
options = options || {};
|
|
$.extend( this, Shuffle.options, options, Shuffle.settings );
|
|
|
|
this.$el = $(element);
|
|
this.element = element;
|
|
this.unique = 'shuffle_' + id++;
|
|
|
|
this._fire( Shuffle.EventType.LOADING );
|
|
this._init();
|
|
|
|
// Dispatch the done event asynchronously so that people can bind to it after
|
|
// Shuffle has been initialized.
|
|
defer(function() {
|
|
this.initialized = true;
|
|
this._fire( Shuffle.EventType.DONE );
|
|
}, this, 16);
|
|
};
|
|
|
|
|
|
/**
|
|
* Events the container element emits with the .shuffle namespace.
|
|
* For example, "done.shuffle".
|
|
* @enum {string}
|
|
*/
|
|
Shuffle.EventType = {
|
|
LOADING: 'loading',
|
|
DONE: 'done',
|
|
LAYOUT: 'layout',
|
|
REMOVED: 'removed'
|
|
};
|
|
|
|
|
|
/** @enum {string} */
|
|
Shuffle.ClassName = {
|
|
BASE: SHUFFLE,
|
|
SHUFFLE_ITEM: 'shuffle-item',
|
|
FILTERED: 'filtered',
|
|
CONCEALED: 'concealed'
|
|
};
|
|
|
|
|
|
// Overrideable options
|
|
Shuffle.options = {
|
|
group: ALL_ITEMS, // Initial filter group.
|
|
speed: 250, // Transition/animation speed (milliseconds).
|
|
easing: 'ease-out', // CSS easing function to use.
|
|
itemSelector: '', // e.g. '.picture-item'.
|
|
sizer: null, // Sizer element. Use an element to determine the size of columns and gutters.
|
|
gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
|
|
columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
|
|
delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
|
|
buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
|
|
initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
|
|
throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
|
|
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
|
|
sequentialFadeDelay: 150, // Delay between each item that fades in when adding items.
|
|
supported: CAN_TRANSITION_TRANSFORMS // Whether to use transforms or absolute positioning.
|
|
};
|
|
|
|
|
|
// Not overrideable
|
|
Shuffle.settings = {
|
|
useSizer: false,
|
|
itemCss : { // default CSS for each item
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
visibility: 'visible'
|
|
},
|
|
revealAppendedDelay: 300,
|
|
lastSort: {},
|
|
lastFilter: ALL_ITEMS,
|
|
enabled: true,
|
|
destroyed: false,
|
|
initialized: false,
|
|
_animations: [],
|
|
styleQueue: []
|
|
};
|
|
|
|
|
|
// Expose for testing.
|
|
Shuffle.Point = Point;
|
|
|
|
|
|
/**
|
|
* Static methods.
|
|
*/
|
|
|
|
/**
|
|
* If the browser has 3d transforms available, build a string with those,
|
|
* otherwise use 2d transforms.
|
|
* @param {Point} point X and Y positions.
|
|
* @param {number} scale Scale amount.
|
|
* @return {string} A normalized string which can be used with the transform style.
|
|
* @private
|
|
*/
|
|
Shuffle._getItemTransformString = function(point, scale) {
|
|
if ( HAS_TRANSFORMS_3D ) {
|
|
return 'translate3d(' + point.x + 'px, ' + point.y + 'px, 0) scale3d(' + scale + ', ' + scale + ', 1)';
|
|
} else {
|
|
return 'translate(' + point.x + 'px, ' + point.y + 'px) scale(' + scale + ')';
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Retrieve the computed style for an element, parsed as a float. This should
|
|
* not be used for width or height values because jQuery mangles them and they
|
|
* are not precise enough.
|
|
* @param {Element} element Element to get style for.
|
|
* @param {string} style Style property.
|
|
* @return {number} The parsed computed value or zero if that fails because IE
|
|
* will return 'auto' when the element doesn't have margins instead of
|
|
* the computed style.
|
|
* @private
|
|
*/
|
|
Shuffle._getNumberStyle = function( element, style ) {
|
|
return Shuffle._getFloat( $( element ).css( style ) );
|
|
};
|
|
|
|
|
|
/**
|
|
* Parse a string as an integer.
|
|
* @param {string} value String integer.
|
|
* @return {number} The string as an integer or zero.
|
|
* @private
|
|
*/
|
|
Shuffle._getInt = function(value) {
|
|
return getNumber( parseInt( value, 10 ) );
|
|
};
|
|
|
|
/**
|
|
* Parse a string as an float.
|
|
* @param {string} value String float.
|
|
* @return {number} The string as an float or zero.
|
|
* @private
|
|
*/
|
|
Shuffle._getFloat = function(value) {
|
|
return getNumber( parseFloat( value ) );
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the outer width of an element, optionally including its margins.
|
|
* The `offsetWidth` property must be used because having a scale transform
|
|
* on the element affects the bounding box. Sadly, Firefox doesn't return an
|
|
* integer value for offsetWidth (yet).
|
|
* @param {Element} element The element.
|
|
* @param {boolean} [includeMargins] Whether to include margins. Default is false.
|
|
* @return {number} The width.
|
|
*/
|
|
Shuffle._getOuterWidth = function( element, includeMargins ) {
|
|
var width = element.offsetWidth;
|
|
|
|
// Use jQuery here because it uses getComputedStyle internally and is
|
|
// cross-browser. Using the style property of the element will only work
|
|
// if there are inline styles.
|
|
if ( includeMargins ) {
|
|
var marginLeft = Shuffle._getNumberStyle( element, 'marginLeft');
|
|
var marginRight = Shuffle._getNumberStyle( element, 'marginRight');
|
|
width += marginLeft + marginRight;
|
|
}
|
|
|
|
return width;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the outer height of an element, optionally including its margins.
|
|
* @param {Element} element The element.
|
|
* @param {boolean} [includeMargins] Whether to include margins. Default is false.
|
|
* @return {number} The height.
|
|
*/
|
|
Shuffle._getOuterHeight = function( element, includeMargins ) {
|
|
var height = element.offsetHeight;
|
|
|
|
if ( includeMargins ) {
|
|
var marginTop = Shuffle._getNumberStyle( element, 'marginTop');
|
|
var marginBottom = Shuffle._getNumberStyle( element, 'marginBottom');
|
|
height += marginTop + marginBottom;
|
|
}
|
|
|
|
return height;
|
|
};
|
|
|
|
|
|
/**
|
|
* Change a property or execute a function which will not have a transition
|
|
* @param {Element} element DOM element that won't be transitioned
|
|
* @param {Function} callback A function which will be called while transition
|
|
* is set to 0ms.
|
|
* @param {Object} [context] Optional context for the callback function.
|
|
* @private
|
|
*/
|
|
Shuffle._skipTransition = function( element, callback, context ) {
|
|
var duration = element.style[ TRANSITION_DURATION ];
|
|
|
|
// Set the duration to zero so it happens immediately
|
|
element.style[ TRANSITION_DURATION ] = '0ms'; // ms needed for firefox!
|
|
|
|
callback.call( context );
|
|
|
|
// Force reflow
|
|
var reflow = element.offsetWidth;
|
|
// Avoid jshint warnings: unused variables and expressions.
|
|
reflow = null;
|
|
|
|
// Put the duration back
|
|
element.style[ TRANSITION_DURATION ] = duration;
|
|
};
|
|
|
|
|
|
/**
|
|
* Instance methods.
|
|
*/
|
|
|
|
Shuffle.prototype._init = function() {
|
|
this.$items = this._getItems();
|
|
|
|
this.sizer = this._getElementOption( this.sizer );
|
|
|
|
if ( this.sizer ) {
|
|
this.useSizer = true;
|
|
}
|
|
|
|
// Add class and invalidate styles
|
|
this.$el.addClass( Shuffle.ClassName.BASE );
|
|
|
|
// Set initial css for each item
|
|
this._initItems();
|
|
|
|
// Bind resize events
|
|
// http://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer
|
|
$window.on('resize.' + SHUFFLE + '.' + this.unique, this._getResizeFunction());
|
|
|
|
// Get container css all in one request. Causes reflow
|
|
var containerCSS = this.$el.css(['position', 'overflow']);
|
|
var containerWidth = Shuffle._getOuterWidth( this.element );
|
|
|
|
// Add styles to the container if it doesn't have them.
|
|
this._validateStyles( containerCSS );
|
|
|
|
// We already got the container's width above, no need to cause another reflow getting it again...
|
|
// Calculate the number of columns there will be
|
|
this._setColumns( containerWidth );
|
|
|
|
// Kick off!
|
|
this.shuffle( this.group, this.initialSort );
|
|
|
|
// The shuffle items haven't had transitions set on them yet
|
|
// so the user doesn't see the first layout. Set them now that the first layout is done.
|
|
if ( this.supported ) {
|
|
defer(function() {
|
|
this._setTransitions();
|
|
this.element.style[ TRANSITION ] = 'height ' + this.speed + 'ms ' + this.easing;
|
|
}, this);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns a throttled and proxied function for the resize handler.
|
|
* @return {Function}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getResizeFunction = function() {
|
|
var resizeFunction = $.proxy( this._onResize, this );
|
|
return this.throttle ?
|
|
this.throttle( resizeFunction, this.throttleTime ) :
|
|
resizeFunction;
|
|
};
|
|
|
|
|
|
/**
|
|
* Retrieve an element from an option.
|
|
* @param {string|jQuery|Element} option The option to check.
|
|
* @return {?Element} The plain element or null.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getElementOption = function( option ) {
|
|
// If column width is a string, treat is as a selector and search for the
|
|
// sizer element within the outermost container
|
|
if ( typeof option === 'string' ) {
|
|
return this.$el.find( option )[0] || null;
|
|
|
|
// Check for an element
|
|
} else if ( option && option.nodeType && option.nodeType === 1 ) {
|
|
return option;
|
|
|
|
// Check for jQuery object
|
|
} else if ( option && option.jquery ) {
|
|
return option[0];
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Ensures the shuffle container has the css styles it needs applied to it.
|
|
* @param {Object} styles Key value pairs for position and overflow.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._validateStyles = function(styles) {
|
|
// Position cannot be static.
|
|
if ( styles.position === 'static' ) {
|
|
this.element.style.position = 'relative';
|
|
}
|
|
|
|
// Overflow has to be hidden
|
|
if ( styles.overflow !== 'hidden' ) {
|
|
this.element.style.overflow = 'hidden';
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Filter the elements by a category.
|
|
* @param {string} [category] Category to filter by. If it's given, the last
|
|
* category will be used to filter the items.
|
|
* @param {ArrayLike} [$collection] Optionally filter a collection. Defaults to
|
|
* all the items.
|
|
* @return {jQuery} Filtered items.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._filter = function( category, $collection ) {
|
|
category = category || this.lastFilter;
|
|
$collection = $collection || this.$items;
|
|
|
|
var set = this._getFilteredSets( category, $collection );
|
|
|
|
// Individually add/remove concealed/filtered classes
|
|
this._toggleFilterClasses( set.filtered, set.concealed );
|
|
|
|
// Save the last filter in case elements are appended.
|
|
this.lastFilter = category;
|
|
|
|
// This is saved mainly because providing a filter function (like searching)
|
|
// will overwrite the `lastFilter` property every time its called.
|
|
if ( typeof category === 'string' ) {
|
|
this.group = category;
|
|
}
|
|
|
|
return set.filtered;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns an object containing the filtered and concealed elements.
|
|
* @param {string|Function} category Category or function to filter by.
|
|
* @param {ArrayLike.<Element>} $items A collection of items to filter.
|
|
* @return {!{filtered: jQuery, concealed: jQuery}}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getFilteredSets = function( category, $items ) {
|
|
var $filtered = $();
|
|
var $concealed = $();
|
|
|
|
// category === 'all', add filtered class to everything
|
|
if ( category === ALL_ITEMS ) {
|
|
$filtered = $items;
|
|
|
|
// Loop through each item and use provided function to determine
|
|
// whether to hide it or not.
|
|
} else {
|
|
each($items, function( el ) {
|
|
var $item = $(el);
|
|
if ( this._doesPassFilter( category, $item ) ) {
|
|
$filtered = $filtered.add( $item );
|
|
} else {
|
|
$concealed = $concealed.add( $item );
|
|
}
|
|
}, this);
|
|
}
|
|
|
|
return {
|
|
filtered: $filtered,
|
|
concealed: $concealed
|
|
};
|
|
};
|
|
|
|
|
|
/**
|
|
* Test an item to see if it passes a category.
|
|
* @param {string|Function} category Category or function to filter by.
|
|
* @param {jQuery} $item A single item, wrapped with jQuery.
|
|
* @return {boolean} Whether it passes the category/filter.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._doesPassFilter = function( category, $item ) {
|
|
if ( $.isFunction( category ) ) {
|
|
return category.call( $item[0], $item, this );
|
|
|
|
// Check each element's data-groups attribute against the given category.
|
|
} else {
|
|
var groups = $item.data( FILTER_ATTRIBUTE_KEY );
|
|
var keys = this.delimeter && !$.isArray( groups ) ?
|
|
groups.split( this.delimeter ) :
|
|
groups;
|
|
return $.inArray(category, keys) > -1;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Toggles the filtered and concealed class names.
|
|
* @param {jQuery} $filtered Filtered set.
|
|
* @param {jQuery} $concealed Concealed set.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._toggleFilterClasses = function( $filtered, $concealed ) {
|
|
$filtered
|
|
.removeClass( Shuffle.ClassName.CONCEALED )
|
|
.addClass( Shuffle.ClassName.FILTERED );
|
|
$concealed
|
|
.removeClass( Shuffle.ClassName.FILTERED )
|
|
.addClass( Shuffle.ClassName.CONCEALED );
|
|
};
|
|
|
|
|
|
/**
|
|
* Set the initial css for each item
|
|
* @param {jQuery} [$items] Optionally specifiy at set to initialize
|
|
*/
|
|
Shuffle.prototype._initItems = function( $items ) {
|
|
$items = $items || this.$items;
|
|
$items.addClass([
|
|
Shuffle.ClassName.SHUFFLE_ITEM,
|
|
Shuffle.ClassName.FILTERED
|
|
].join(' '));
|
|
$items.css( this.itemCss ).data('point', new Point()).data('scale', DEFAULT_SCALE);
|
|
};
|
|
|
|
|
|
/**
|
|
* Updates the filtered item count.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._updateItemCount = function() {
|
|
this.visibleItems = this._getFilteredItems().length;
|
|
};
|
|
|
|
|
|
/**
|
|
* Sets css transform transition on a an element.
|
|
* @param {Element} element Element to set transition on.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._setTransition = function( element ) {
|
|
element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' +
|
|
this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
|
|
};
|
|
|
|
|
|
/**
|
|
* Sets css transform transition on a group of elements.
|
|
* @param {ArrayLike.<Element>} $items Elements to set transitions on.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._setTransitions = function( $items ) {
|
|
$items = $items || this.$items;
|
|
each($items, function( el ) {
|
|
this._setTransition( el );
|
|
}, this);
|
|
};
|
|
|
|
|
|
/**
|
|
* Sets a transition delay on a collection of elements, making each delay
|
|
* greater than the last.
|
|
* @param {ArrayLike.<Element>} $collection Array to iterate over.
|
|
*/
|
|
Shuffle.prototype._setSequentialDelay = function( $collection ) {
|
|
if ( !this.supported ) {
|
|
return;
|
|
}
|
|
|
|
// $collection can be an array of dom elements or jquery object
|
|
each($collection, function( el, i ) {
|
|
// This works because the transition-property: transform, opacity;
|
|
el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * this.sequentialFadeDelay) + 'ms';
|
|
}, this);
|
|
};
|
|
|
|
|
|
Shuffle.prototype._getItems = function() {
|
|
return this.$el.children( this.itemSelector );
|
|
};
|
|
|
|
|
|
Shuffle.prototype._getFilteredItems = function() {
|
|
return this.$items.filter('.' + Shuffle.ClassName.FILTERED);
|
|
};
|
|
|
|
|
|
Shuffle.prototype._getConcealedItems = function() {
|
|
return this.$items.filter('.' + Shuffle.ClassName.CONCEALED);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the column size, based on column width and sizer options.
|
|
* @param {number} containerWidth Size of the parent container.
|
|
* @param {number} gutterSize Size of the gutters.
|
|
* @return {number}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getColumnSize = function( containerWidth, gutterSize ) {
|
|
var size;
|
|
|
|
// If the columnWidth property is a function, then the grid is fluid
|
|
if ( $.isFunction( this.columnWidth ) ) {
|
|
size = this.columnWidth(containerWidth);
|
|
|
|
// columnWidth option isn't a function, are they using a sizing element?
|
|
} else if ( this.useSizer ) {
|
|
size = Shuffle._getOuterWidth(this.sizer);
|
|
|
|
// if not, how about the explicitly set option?
|
|
} else if ( this.columnWidth ) {
|
|
size = this.columnWidth;
|
|
|
|
// or use the size of the first item
|
|
} else if ( this.$items.length > 0 ) {
|
|
size = Shuffle._getOuterWidth(this.$items[0], true);
|
|
|
|
// if there's no items, use size of container
|
|
} else {
|
|
size = containerWidth;
|
|
}
|
|
|
|
// Don't let them set a column width of zero.
|
|
if ( size === 0 ) {
|
|
size = containerWidth;
|
|
}
|
|
|
|
return size + gutterSize;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the gutter size, based on gutter width and sizer options.
|
|
* @param {number} containerWidth Size of the parent container.
|
|
* @return {number}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getGutterSize = function( containerWidth ) {
|
|
var size;
|
|
if ( $.isFunction( this.gutterWidth ) ) {
|
|
size = this.gutterWidth(containerWidth);
|
|
} else if ( this.useSizer ) {
|
|
size = Shuffle._getNumberStyle(this.sizer, 'marginLeft');
|
|
} else {
|
|
size = this.gutterWidth;
|
|
}
|
|
|
|
return size;
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculate the number of columns to be used. Gets css if using sizer element.
|
|
* @param {number} [theContainerWidth] Optionally specify a container width if it's already available.
|
|
*/
|
|
Shuffle.prototype._setColumns = function( theContainerWidth ) {
|
|
var containerWidth = theContainerWidth || Shuffle._getOuterWidth( this.element );
|
|
var gutter = this._getGutterSize( containerWidth );
|
|
var columnWidth = this._getColumnSize( containerWidth, gutter );
|
|
var calculatedColumns = (containerWidth + gutter) / columnWidth;
|
|
|
|
// Widths given from getComputedStyle are not precise enough...
|
|
if ( Math.abs(Math.round(calculatedColumns) - calculatedColumns) < COLUMN_THRESHOLD ) {
|
|
// e.g. calculatedColumns = 11.998876
|
|
calculatedColumns = Math.round( calculatedColumns );
|
|
}
|
|
|
|
this.cols = Math.max( Math.floor(calculatedColumns), 1 );
|
|
this.containerWidth = containerWidth;
|
|
this.colWidth = columnWidth;
|
|
};
|
|
|
|
/**
|
|
* Adjust the height of the grid
|
|
*/
|
|
Shuffle.prototype._setContainerSize = function() {
|
|
this.$el.css( 'height', this._getContainerSize() );
|
|
};
|
|
|
|
|
|
/**
|
|
* Based on the column heights, it returns the biggest one.
|
|
* @return {number}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getContainerSize = function() {
|
|
return arrayMax( this.positions );
|
|
};
|
|
|
|
|
|
/**
|
|
* Fire events with .shuffle namespace
|
|
*/
|
|
Shuffle.prototype._fire = function( name, args ) {
|
|
this.$el.trigger( name + '.' + SHUFFLE, args && args.length ? args : [ this ] );
|
|
};
|
|
|
|
|
|
/**
|
|
* Zeros out the y columns array, which is used to determine item placement.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._resetCols = function() {
|
|
var i = this.cols;
|
|
this.positions = [];
|
|
while (i--) {
|
|
this.positions.push( 0 );
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Loops through each item that should be shown and calculates the x, y position.
|
|
* @param {Array.<Element>} items Array of items that will be shown/layed out in order in their array.
|
|
* Because jQuery collection are always ordered in DOM order, we can't pass a jq collection.
|
|
* @param {boolean} [isOnlyPosition=false] If true this will position the items with zero opacity.
|
|
*/
|
|
Shuffle.prototype._layout = function( items, isOnlyPosition ) {
|
|
each(items, function( item ) {
|
|
this._layoutItem( item, !!isOnlyPosition );
|
|
}, this);
|
|
|
|
// `_layout` always happens after `_shrink`, so it's safe to process the style
|
|
// queue here with styles from the shrink method.
|
|
this._processStyleQueue();
|
|
|
|
// Adjust the height of the container.
|
|
this._setContainerSize();
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculates the position of the item and pushes it onto the style queue.
|
|
* @param {Element} item Element which is being positioned.
|
|
* @param {boolean} isOnlyPosition Whether to position the item, but with zero
|
|
* opacity so that it can fade in later.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._layoutItem = function( item, isOnlyPosition ) {
|
|
var $item = $(item);
|
|
var itemData = $item.data();
|
|
var currPos = itemData.point;
|
|
var currScale = itemData.scale;
|
|
var itemSize = {
|
|
width: Shuffle._getOuterWidth( item, true ),
|
|
height: Shuffle._getOuterHeight( item, true )
|
|
};
|
|
var pos = this._getItemPosition( itemSize );
|
|
|
|
// If the item will not change its position, do not add it to the render
|
|
// queue. Transitions don't fire when setting a property to the same value.
|
|
if ( Point.equals(currPos, pos) && currScale === DEFAULT_SCALE ) {
|
|
return;
|
|
}
|
|
|
|
// Save data for shrink
|
|
itemData.point = pos;
|
|
itemData.scale = DEFAULT_SCALE;
|
|
|
|
this.styleQueue.push({
|
|
$item: $item,
|
|
point: pos,
|
|
scale: DEFAULT_SCALE,
|
|
opacity: isOnlyPosition ? 0 : 1,
|
|
skipTransition: isOnlyPosition,
|
|
callfront: function() {
|
|
if ( !isOnlyPosition ) {
|
|
$item.css( 'visibility', 'visible' );
|
|
}
|
|
},
|
|
callback: function() {
|
|
if ( isOnlyPosition ) {
|
|
$item.css( 'visibility', 'hidden' );
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* Determine the location of the next item, based on its size.
|
|
* @param {{width: number, height: number}} itemSize Object with width and height.
|
|
* @return {Point}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getItemPosition = function( itemSize ) {
|
|
var columnSpan = this._getColumnSpan( itemSize.width, this.colWidth, this.cols );
|
|
|
|
var setY = this._getColumnSet( columnSpan, this.cols );
|
|
|
|
// Finds the index of the smallest number in the set.
|
|
var shortColumnIndex = this._getShortColumn( setY, this.buffer );
|
|
|
|
// Position the item
|
|
var point = new Point(
|
|
Math.round( this.colWidth * shortColumnIndex ),
|
|
Math.round( setY[shortColumnIndex] ));
|
|
|
|
// Update the columns array with the new values for each column.
|
|
// e.g. before the update the columns could be [250, 0, 0, 0] for an item
|
|
// which spans 2 columns. After it would be [250, itemHeight, itemHeight, 0].
|
|
var setHeight = setY[shortColumnIndex] + itemSize.height;
|
|
var setSpan = this.cols + 1 - setY.length;
|
|
for ( var i = 0; i < setSpan; i++ ) {
|
|
this.positions[ shortColumnIndex + i ] = setHeight;
|
|
}
|
|
|
|
return point;
|
|
};
|
|
|
|
|
|
/**
|
|
* Determine the number of columns an items spans.
|
|
* @param {number} itemWidth Width of the item.
|
|
* @param {number} columnWidth Width of the column (includes gutter).
|
|
* @param {number} columns Total number of columns
|
|
* @return {number}
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getColumnSpan = function( itemWidth, columnWidth, columns ) {
|
|
var columnSpan = itemWidth / columnWidth;
|
|
|
|
// If the difference between the rounded column span number and the
|
|
// calculated column span number is really small, round the number to
|
|
// make it fit.
|
|
if ( Math.abs(Math.round( columnSpan ) - columnSpan ) < COLUMN_THRESHOLD ) {
|
|
// e.g. columnSpan = 4.0089945390298745
|
|
columnSpan = Math.round( columnSpan );
|
|
}
|
|
|
|
// Ensure the column span is not more than the amount of columns in the whole layout.
|
|
return Math.min( Math.ceil( columnSpan ), columns );
|
|
};
|
|
|
|
|
|
/**
|
|
* Retrieves the column set to use for placement.
|
|
* @param {number} columnSpan The number of columns this current item spans.
|
|
* @param {number} columns The total columns in the grid.
|
|
* @return {Array.<number>} An array of numbers represeting the column set.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getColumnSet = function( columnSpan, columns ) {
|
|
// The item spans only one column.
|
|
if ( columnSpan === 1 ) {
|
|
return this.positions;
|
|
|
|
// The item spans more than one column, figure out how many different
|
|
// places it could fit horizontally.
|
|
// The group count is the number of places within the positions this block
|
|
// could fit, ignoring the current positions of items.
|
|
// Imagine a 2 column brick as the second item in a 4 column grid with
|
|
// 10px height each. Find the places it would fit:
|
|
// [10, 0, 0, 0]
|
|
// | | |
|
|
// * * *
|
|
//
|
|
// Then take the places which fit and get the bigger of the two:
|
|
// max([10, 0]), max([0, 0]), max([0, 0]) = [10, 0, 0]
|
|
//
|
|
// Next, find the first smallest number (the short column).
|
|
// [10, 0, 0]
|
|
// |
|
|
// *
|
|
//
|
|
// And that's where it should be placed!
|
|
} else {
|
|
var groupCount = columns + 1 - columnSpan;
|
|
var groupY = [];
|
|
|
|
// For how many possible positions for this item there are.
|
|
for ( var i = 0; i < groupCount; i++ ) {
|
|
// Find the bigger value for each place it could fit.
|
|
groupY[i] = arrayMax( this.positions.slice( i, i + columnSpan ) );
|
|
}
|
|
|
|
return groupY;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Find index of short column, the first from the left where this item will go.
|
|
*
|
|
* @param {Array.<number>} positions The array to search for the smallest number.
|
|
* @param {number} buffer Optional buffer which is very useful when the height
|
|
* is a percentage of the width.
|
|
* @return {number} Index of the short column.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getShortColumn = function( positions, buffer ) {
|
|
var minPosition = arrayMin( positions );
|
|
for (var i = 0, len = positions.length; i < len; i++) {
|
|
if ( positions[i] >= minPosition - buffer && positions[i] <= minPosition + buffer ) {
|
|
return i;
|
|
}
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
|
|
/**
|
|
* Hides the elements that don't match our filter.
|
|
* @param {jQuery} $collection jQuery collection to shrink.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._shrink = function( $collection ) {
|
|
var $concealed = $collection || this._getConcealedItems();
|
|
|
|
each($concealed, function( item ) {
|
|
var $item = $(item);
|
|
var itemData = $item.data();
|
|
|
|
// Continuing would add a transitionend event listener to the element, but
|
|
// that listener would not execute because the transform and opacity would
|
|
// stay the same.
|
|
if ( itemData.scale === CONCEALED_SCALE ) {
|
|
return;
|
|
}
|
|
|
|
itemData.scale = CONCEALED_SCALE;
|
|
|
|
this.styleQueue.push({
|
|
$item: $item,
|
|
point: itemData.point,
|
|
scale : CONCEALED_SCALE,
|
|
opacity: 0,
|
|
callback: function() {
|
|
$item.css( 'visibility', 'hidden' );
|
|
}
|
|
});
|
|
}, this);
|
|
};
|
|
|
|
|
|
/**
|
|
* Resize handler.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._onResize = function() {
|
|
// If shuffle is disabled, destroyed, don't do anything
|
|
if ( !this.enabled || this.destroyed || this.isTransitioning ) {
|
|
return;
|
|
}
|
|
|
|
// Will need to check height in the future if it's layed out horizontaly
|
|
var containerWidth = Shuffle._getOuterWidth( this.element );
|
|
|
|
// containerWidth hasn't changed, don't do anything
|
|
if ( containerWidth === this.containerWidth ) {
|
|
return;
|
|
}
|
|
|
|
this.update();
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns styles for either jQuery animate or transition.
|
|
* @param {Object} opts Transition options.
|
|
* @return {!Object} Transforms for transitions, left/top for animate.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._getStylesForTransition = function( opts ) {
|
|
var styles = {
|
|
opacity: opts.opacity
|
|
};
|
|
|
|
if ( this.supported ) {
|
|
styles[ TRANSFORM ] = Shuffle._getItemTransformString( opts.point, opts.scale );
|
|
} else {
|
|
styles.left = opts.point.x;
|
|
styles.top = opts.point.y;
|
|
}
|
|
|
|
return styles;
|
|
};
|
|
|
|
|
|
/**
|
|
* Transitions an item in the grid
|
|
*
|
|
* @param {Object} opts options.
|
|
* @param {jQuery} opts.$item jQuery object representing the current item.
|
|
* @param {Point} opts.point A point object with the x and y coordinates.
|
|
* @param {number} opts.scale Amount to scale the item.
|
|
* @param {number} opts.opacity Opacity of the item.
|
|
* @param {Function} opts.callback Complete function for the animation.
|
|
* @param {Function} opts.callfront Function to call before transitioning.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._transition = function( opts ) {
|
|
var styles = this._getStylesForTransition( opts );
|
|
this._startItemAnimation( opts.$item, styles, opts.callfront || $.noop, opts.callback || $.noop );
|
|
};
|
|
|
|
|
|
Shuffle.prototype._startItemAnimation = function( $item, styles, callfront, callback ) {
|
|
// Transition end handler removes its listener.
|
|
function handleTransitionEnd( evt ) {
|
|
// Make sure this event handler has not bubbled up from a child.
|
|
if ( evt.target === evt.currentTarget ) {
|
|
$( evt.target ).off( TRANSITIONEND, handleTransitionEnd );
|
|
callback();
|
|
}
|
|
}
|
|
|
|
callfront();
|
|
|
|
// Transitions are not set until shuffle has loaded to avoid the initial transition.
|
|
if ( !this.initialized ) {
|
|
$item.css( styles );
|
|
callback();
|
|
return;
|
|
}
|
|
|
|
// Use CSS Transforms if we have them
|
|
if ( this.supported ) {
|
|
$item.css( styles );
|
|
$item.on( TRANSITIONEND, handleTransitionEnd );
|
|
|
|
// Use jQuery to animate left/top
|
|
} else {
|
|
// Save the deferred object which jQuery returns.
|
|
var anim = $item.stop( true ).animate( styles, this.speed, 'swing', callback );
|
|
// Push the animation to the list of pending animations.
|
|
this._animations.push( anim.promise() );
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Execute the styles gathered in the style queue. This applies styles to elements,
|
|
* triggering transitions.
|
|
* @param {boolean} noLayout Whether to trigger a layout event.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._processStyleQueue = function( noLayout ) {
|
|
var $transitions = $();
|
|
|
|
// Iterate over the queue and keep track of ones that use transitions.
|
|
each(this.styleQueue, function( transitionObj ) {
|
|
if ( transitionObj.skipTransition ) {
|
|
this._styleImmediately( transitionObj );
|
|
} else {
|
|
$transitions = $transitions.add( transitionObj.$item );
|
|
this._transition( transitionObj );
|
|
}
|
|
}, this);
|
|
|
|
|
|
if ( $transitions.length > 0 && this.initialized ) {
|
|
// Set flag that shuffle is currently in motion.
|
|
this.isTransitioning = true;
|
|
|
|
if ( this.supported ) {
|
|
this._whenCollectionDone( $transitions, TRANSITIONEND, this._movementFinished );
|
|
|
|
// The _transition function appends a promise to the animations array.
|
|
// When they're all complete, do things.
|
|
} else {
|
|
this._whenAnimationsDone( this._movementFinished );
|
|
}
|
|
|
|
// A call to layout happened, but none of the newly filtered items will
|
|
// change position. Asynchronously fire the callback here.
|
|
} else if ( !noLayout ) {
|
|
defer( this._layoutEnd, this );
|
|
}
|
|
|
|
// Remove everything in the style queue
|
|
this.styleQueue.length = 0;
|
|
};
|
|
|
|
|
|
/**
|
|
* Apply styles without a transition.
|
|
* @param {Object} opts Transitions options object.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._styleImmediately = function( opts ) {
|
|
Shuffle._skipTransition(opts.$item[0], function() {
|
|
opts.$item.css( this._getStylesForTransition( opts ) );
|
|
}, this);
|
|
};
|
|
|
|
Shuffle.prototype._movementFinished = function() {
|
|
this.isTransitioning = false;
|
|
this._layoutEnd();
|
|
};
|
|
|
|
Shuffle.prototype._layoutEnd = function() {
|
|
this._fire( Shuffle.EventType.LAYOUT );
|
|
};
|
|
|
|
Shuffle.prototype._addItems = function( $newItems, addToEnd, isSequential ) {
|
|
// Add classes and set initial positions.
|
|
this._initItems( $newItems );
|
|
|
|
// Add transition to each item.
|
|
this._setTransitions( $newItems );
|
|
|
|
// Update the list of
|
|
this.$items = this._getItems();
|
|
|
|
// Shrink all items (without transitions).
|
|
this._shrink( $newItems );
|
|
each(this.styleQueue, function( transitionObj ) {
|
|
transitionObj.skipTransition = true;
|
|
});
|
|
|
|
// Apply shrink positions, but do not cause a layout event.
|
|
this._processStyleQueue( true );
|
|
|
|
if ( addToEnd ) {
|
|
this._addItemsToEnd( $newItems, isSequential );
|
|
} else {
|
|
this.shuffle( this.lastFilter );
|
|
}
|
|
};
|
|
|
|
|
|
Shuffle.prototype._addItemsToEnd = function( $newItems, isSequential ) {
|
|
// Get ones that passed the current filter
|
|
var $passed = this._filter( null, $newItems );
|
|
var passed = $passed.get();
|
|
|
|
// How many filtered elements?
|
|
this._updateItemCount();
|
|
|
|
this._layout( passed, true );
|
|
|
|
if ( isSequential && this.supported ) {
|
|
this._setSequentialDelay( passed );
|
|
}
|
|
|
|
this._revealAppended( passed );
|
|
};
|
|
|
|
|
|
/**
|
|
* Triggers appended elements to fade in.
|
|
* @param {ArrayLike.<Element>} $newFilteredItems Collection of elements.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._revealAppended = function( newFilteredItems ) {
|
|
defer(function() {
|
|
each(newFilteredItems, function( el ) {
|
|
var $item = $( el );
|
|
this._transition({
|
|
$item: $item,
|
|
opacity: 1,
|
|
point: $item.data('point'),
|
|
scale: DEFAULT_SCALE
|
|
});
|
|
}, this);
|
|
|
|
this._whenCollectionDone($(newFilteredItems), TRANSITIONEND, function() {
|
|
$(newFilteredItems).css( TRANSITION_DELAY, '0ms' );
|
|
this._movementFinished();
|
|
});
|
|
}, this, this.revealAppendedDelay);
|
|
};
|
|
|
|
|
|
/**
|
|
* Execute a function when an event has been triggered for every item in a collection.
|
|
* @param {jQuery} $collection Collection of elements.
|
|
* @param {string} eventName Event to listen for.
|
|
* @param {Function} callback Callback to execute when they're done.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._whenCollectionDone = function( $collection, eventName, callback ) {
|
|
var done = 0;
|
|
var items = $collection.length;
|
|
var self = this;
|
|
|
|
function handleEventName( evt ) {
|
|
if ( evt.target === evt.currentTarget ) {
|
|
$( evt.target ).off( eventName, handleEventName );
|
|
done++;
|
|
|
|
// Execute callback if all items have emitted the correct event.
|
|
if ( done === items ) {
|
|
callback.call( self );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bind the event to all items.
|
|
$collection.on( eventName, handleEventName );
|
|
};
|
|
|
|
|
|
/**
|
|
* Execute a callback after jQuery `animate` for a collection has finished.
|
|
* @param {Function} callback Callback to execute when they're done.
|
|
* @private
|
|
*/
|
|
Shuffle.prototype._whenAnimationsDone = function( callback ) {
|
|
$.when.apply( null, this._animations ).always( $.proxy( function() {
|
|
this._animations.length = 0;
|
|
callback.call( this );
|
|
}, this ));
|
|
};
|
|
|
|
|
|
/**
|
|
* Public Methods
|
|
*/
|
|
|
|
/**
|
|
* The magic. This is what makes the plugin 'shuffle'
|
|
* @param {string|Function} [category] Category to filter by. Can be a function
|
|
* @param {Object} [sortObj] A sort object which can sort the filtered set
|
|
*/
|
|
Shuffle.prototype.shuffle = function( category, sortObj ) {
|
|
if ( !this.enabled || this.isTransitioning ) {
|
|
return;
|
|
}
|
|
|
|
if ( !category ) {
|
|
category = ALL_ITEMS;
|
|
}
|
|
|
|
this._filter( category );
|
|
|
|
// How many filtered elements?
|
|
this._updateItemCount();
|
|
|
|
// Shrink each concealed item
|
|
this._shrink();
|
|
|
|
// Update transforms on .filtered elements so they will animate to their new positions
|
|
this.sort( sortObj );
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the .filtered elements, sorts them, and passes them to layout.
|
|
* @param {Object} opts the options object for the sorted plugin
|
|
*/
|
|
Shuffle.prototype.sort = function( opts ) {
|
|
if ( this.enabled && !this.isTransitioning ) {
|
|
this._resetCols();
|
|
|
|
var sortOptions = opts || this.lastSort;
|
|
var items = this._getFilteredItems().sorted( sortOptions );
|
|
|
|
this._layout( items );
|
|
|
|
this.lastSort = sortOptions;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Reposition everything.
|
|
* @param {boolean} isOnlyLayout If true, column and gutter widths won't be
|
|
* recalculated.
|
|
*/
|
|
Shuffle.prototype.update = function( isOnlyLayout ) {
|
|
if ( this.enabled && !this.isTransitioning ) {
|
|
|
|
if ( !isOnlyLayout ) {
|
|
// Get updated colCount
|
|
this._setColumns();
|
|
}
|
|
|
|
// Layout items
|
|
this.sort();
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Use this instead of `update()` if you don't need the columns and gutters updated
|
|
* Maybe an image inside `shuffle` loaded (and now has a height), which means calculations
|
|
* could be off.
|
|
*/
|
|
Shuffle.prototype.layout = function() {
|
|
this.update( true );
|
|
};
|
|
|
|
|
|
/**
|
|
* New items have been appended to shuffle. Fade them in sequentially
|
|
* @param {jQuery} $newItems jQuery collection of new items
|
|
* @param {boolean} [addToEnd=false] If true, new items will be added to the end / bottom
|
|
* of the items. If not true, items will be mixed in with the current sort order.
|
|
* @param {boolean} [isSequential=true] If false, new items won't sequentially fade in
|
|
*/
|
|
Shuffle.prototype.appended = function( $newItems, addToEnd, isSequential ) {
|
|
this._addItems( $newItems, addToEnd === true, isSequential !== false );
|
|
};
|
|
|
|
|
|
/**
|
|
* Disables shuffle from updating dimensions and layout on resize
|
|
*/
|
|
Shuffle.prototype.disable = function() {
|
|
this.enabled = false;
|
|
};
|
|
|
|
|
|
/**
|
|
* Enables shuffle again
|
|
* @param {boolean} [isUpdateLayout=true] if undefined, shuffle will update columns and gutters
|
|
*/
|
|
Shuffle.prototype.enable = function( isUpdateLayout ) {
|
|
this.enabled = true;
|
|
if ( isUpdateLayout !== false ) {
|
|
this.update();
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Remove 1 or more shuffle items
|
|
* @param {jQuery} $collection A jQuery object containing one or more element in shuffle
|
|
* @return {Shuffle} The shuffle object
|
|
*/
|
|
Shuffle.prototype.remove = function( $collection ) {
|
|
|
|
// If this isn't a jquery object, exit
|
|
if ( !$collection.length || !$collection.jquery ) {
|
|
return;
|
|
}
|
|
|
|
function handleRemoved() {
|
|
// Remove the collection in the callback
|
|
$collection.remove();
|
|
|
|
// Update things now that elements have been removed.
|
|
this.$items = this._getItems();
|
|
this._updateItemCount();
|
|
|
|
this._fire( Shuffle.EventType.REMOVED, [ $collection, this ] );
|
|
|
|
// Let it get garbage collected
|
|
$collection = null;
|
|
}
|
|
|
|
// Hide collection first.
|
|
this._toggleFilterClasses( $(), $collection );
|
|
this._shrink( $collection );
|
|
|
|
this.sort();
|
|
|
|
this.$el.one( Shuffle.EventType.LAYOUT + '.' + SHUFFLE, $.proxy( handleRemoved, this ) );
|
|
};
|
|
|
|
|
|
/**
|
|
* Destroys shuffle, removes events, styles, and classes
|
|
*/
|
|
Shuffle.prototype.destroy = function() {
|
|
// If there is more than one shuffle instance on the page,
|
|
// removing the resize handler from the window would remove them
|
|
// all. This is why a unique value is needed.
|
|
$window.off('.' + this.unique);
|
|
|
|
// Reset container styles
|
|
this.$el
|
|
.removeClass( SHUFFLE )
|
|
.removeAttr('style')
|
|
.removeData( SHUFFLE );
|
|
|
|
// Reset individual item styles
|
|
this.$items
|
|
.removeAttr('style')
|
|
.removeData('point')
|
|
.removeData('scale')
|
|
.removeClass([
|
|
Shuffle.ClassName.CONCEALED,
|
|
Shuffle.ClassName.FILTERED,
|
|
Shuffle.ClassName.SHUFFLE_ITEM
|
|
].join(' '));
|
|
|
|
// Null DOM references
|
|
this.$items = null;
|
|
this.$el = null;
|
|
this.sizer = null;
|
|
this.element = null;
|
|
|
|
// Set a flag so if a debounced resize has been triggered,
|
|
// it can first check if it is actually destroyed and not doing anything
|
|
this.destroyed = true;
|
|
};
|
|
|
|
|
|
// Plugin definition
|
|
$.fn.shuffle = function( opts ) {
|
|
var args = Array.prototype.slice.call( arguments, 1 );
|
|
return this.each(function() {
|
|
var $this = $( this );
|
|
var shuffle = $this.data( SHUFFLE );
|
|
|
|
// If we don't have a stored shuffle, make a new one and save it
|
|
if ( !shuffle ) {
|
|
shuffle = new Shuffle( this, opts );
|
|
$this.data( SHUFFLE, shuffle );
|
|
} else if ( typeof opts === 'string' && shuffle[ opts ] ) {
|
|
shuffle[ opts ].apply( shuffle, args );
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
// http://stackoverflow.com/a/962890/373422
|
|
function randomize( array ) {
|
|
var tmp, current;
|
|
var top = array.length;
|
|
|
|
if ( !top ) {
|
|
return array;
|
|
}
|
|
|
|
while ( --top ) {
|
|
current = Math.floor( Math.random() * (top + 1) );
|
|
tmp = array[ current ];
|
|
array[ current ] = array[ top ];
|
|
array[ top ] = tmp;
|
|
}
|
|
|
|
return array;
|
|
}
|
|
|
|
|
|
// You can return `undefined` from the `by` function to revert to DOM order
|
|
// This plugin does NOT return a jQuery object. It returns a plain array because
|
|
// jQuery sorts everything in DOM order.
|
|
$.fn.sorted = function(options) {
|
|
var opts = $.extend({}, $.fn.sorted.defaults, options);
|
|
var arr = this.get();
|
|
var revert = false;
|
|
|
|
if ( !arr.length ) {
|
|
return [];
|
|
}
|
|
|
|
if ( opts.randomize ) {
|
|
return randomize( arr );
|
|
}
|
|
|
|
// Sort the elements by the opts.by function.
|
|
// If we don't have opts.by, default to DOM order
|
|
if ( $.isFunction( opts.by ) ) {
|
|
arr.sort(function(a, b) {
|
|
|
|
// Exit early if we already know we want to revert
|
|
if ( revert ) {
|
|
return 0;
|
|
}
|
|
|
|
var valA = opts.by($(a));
|
|
var valB = opts.by($(b));
|
|
|
|
// If both values are undefined, use the DOM order
|
|
if ( valA === undefined && valB === undefined ) {
|
|
revert = true;
|
|
return 0;
|
|
}
|
|
|
|
if ( valA < valB || valA === 'sortFirst' || valB === 'sortLast' ) {
|
|
return -1;
|
|
}
|
|
|
|
if ( valA > valB || valA === 'sortLast' || valB === 'sortFirst' ) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
// Revert to the original array if necessary
|
|
if ( revert ) {
|
|
return this.get();
|
|
}
|
|
|
|
if ( opts.reverse ) {
|
|
arr.reverse();
|
|
}
|
|
|
|
return arr;
|
|
};
|
|
|
|
|
|
$.fn.sorted.defaults = {
|
|
reverse: false, // Use array.reverse() to reverse the results
|
|
by: null, // Sorting function
|
|
randomize: false // If true, this will skip the sorting and return a randomized order in the array
|
|
};
|
|
|
|
return Shuffle;
|
|
|
|
}); |