Shuffle emits an event when a layout happens and when elements are removed. The event names are Shuffle.EventType.LAYOUT and Shuffle.EventType.REMOVED.
+
Shuffle uses the global CustomEvent to create events. A polyfill for IE<=11 is bundled with Shuffle.
// Overrideable options
Shuffle.options = {
- group: ALL_ITEMS, // Initial filter group.
+ group: Shuffle.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.
+ easing: 'ease', // CSS easing function to use.
+ itemSelector: '*', // e.g. '.picture-item'.
+ sizer: null, // Element or selector string. 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).
- columnThreshold: HAS_COMPUTED_STYLE ? 0.01 : 0.1, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
+ columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
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.
+ staggerAmount: 15, // Transition delay offset for each item in milliseconds.
+ staggerAmountMax: 250, // Maximum stagger delay in milliseconds.
+ useTransforms: true, // Whether to use transforms or absolute positioning.
};
-
No options need to be specified, but itemSelector should be used. Other common options to change are speed, easing, gutterWidth, and columnWidth (or sizer).
+
No options need to be specified, but itemSelector should be used. Other common options to change are speed and sizer.
The only real important thing here is the data-groups attribute. It has to be a valid JSON array of strings. Optionally, it can be a string delimeted by a value you provide. See delimeter in the options.
-
In this example, shuffle is using the fluid grid from the Twitter Bootstrap v2.3. It's also making use of BEM class naming.
+
This example is using this site's grid. Each item would be 4 columns at the "sm" breakpoint (768px).
+
+
Images
+
To see why the images are wrapped in .aspect elements, check out the images demo.
The columnWidth option is used to calculate the column width. You have several options:
+
There are 4 options for defining the width of the columns:
-
Use a sizer element. This is the easest way to specify column and gutter widths. You can use an element or an element wrapped in jQuery to define the column width and gutter width. Shuffle will measure the width and margin-left of this sizer element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage. The sizer option is an alias for columnWidth.See a demo using a sizer element or look at the js file for the sizer demo.
+
Use a sizer element. This is the easiest way to specify column and gutter widths. Add the sizer element and make it 1 column wide. Shuffle will measure the width and margin-left of this sizer element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage.
Use a function. When a function is used, its first parameter will be the width of the shuffle element. You need to return the column width for shuffle to use (in pixels).
A number. This will explicitly set the column width to your number (in pixels).
By default, shuffle will use the width of the first item to calculate the column width.
@@ -51,14 +49,14 @@
A basic setup example
If you want functional buttons, check out the js file.
+
Shuffle uses a UMD definition so that you can use it with globals, AMD, or CommonJS.
You can encounter problems when shuffle item dimensions depend on images. Like this demo. There are three good solutions to this.
-
-
Set an explicit height on .shuffle-items like the basic demo.
-
Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses this technique.
-
Get notified when images load and call myShuffleInstance.layout(). I recommend using Desandro's images loaded plugin to know when your images have finished loading.
-
+
+
+
Using images with Shuffle
+
You can encounter problems when shuffle item dimensions depend on images. Like this demo. There are three good solutions to this.
+
+
Set an explicit height on .shuffle-items like the basic demo.
+
Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses this technique.
+
Get notified when images load and call myShuffleInstance.layout(). I recommend using Desandro's images loaded plugin to know when your images have finished loading.
In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect. See here for a solution.
-
Resize the window and it'll fix itself.
+
+
+
This probably looks broken.
+
In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect. See here for a solution.
- Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like RequireJS. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the config file used on this page.
-
+
+
+
RequireJS!
+
+ Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like RequireJS. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the config file used on this page.
+
+
+
@@ -34,7 +38,7 @@ pagejs: false
-
+
{% for item in site.items %}
@@ -50,10 +54,12 @@ pagejs: false
-
-
-
Shuffle.js
-
{{ site.longDescription }}
+
+
+
+
Shuffle.js
+
{{ site.longDescription }}
+
diff --git a/_scss/_grid.scss b/_scss/_grid.scss
index 2d6d91c..29df1e9 100644
--- a/_scss/_grid.scss
+++ b/_scss/_grid.scss
@@ -87,8 +87,12 @@
pre {
position: relative;
z-index: 1;
+ min-height: 56px;
+ padding-top: 1em;
+ padding-bottom: 1em;
padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
+ margin: .5em 0;
}
}
diff --git a/_scss/shuffle-styles.scss b/_scss/shuffle-styles.scss
index 676699e..4aae0bb 100644
--- a/_scss/shuffle-styles.scss
+++ b/_scss/shuffle-styles.scss
@@ -108,12 +108,12 @@ $itemHeight: 220px;
It will set it for you, but it'll cause another style recalculation and layout.
AKA worse performance - so just set it here
*/
-.shuffle--container {
+.my-shuffle-container {
position: relative;
overflow: hidden;
}
-.shuffle--fluid .shuffle__sizer {
+.my-sizer-element {
position: absolute;
opacity: 0;
visibility: hidden;
diff --git a/css/shuffle-styles.css b/css/shuffle-styles.css
index e769cad..8159e07 100644
--- a/css/shuffle-styles.css
+++ b/css/shuffle-styles.css
@@ -76,11 +76,11 @@
It will set it for you, but it'll cause another style recalculation and layout.
AKA worse performance - so just set it here
*/
-.shuffle--container {
+.my-shuffle-container {
position: relative;
overflow: hidden; }
-.shuffle--fluid .shuffle__sizer {
+.my-sizer-element {
position: absolute;
opacity: 0;
visibility: hidden; }
diff --git a/css/style.css b/css/style.css
index 794c704..c80221a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -997,8 +997,12 @@ h3:hover > a {
.code-block pre {
position: relative;
z-index: 1;
+ min-height: 56px;
+ padding-top: 1em;
+ padding-bottom: 1em;
padding-left: calc(3.5vw + 8px);
- padding-right: calc(3.5vw + 8px); }
+ padding-right: calc(3.5vw + 8px);
+ margin: .5em 0; }
@media screen and (min-width: 768px) {
.code-block {
diff --git a/dist/shuffle.js b/dist/shuffle.js
index 3f24473..2d4835f 100644
--- a/dist/shuffle.js
+++ b/dist/shuffle.js
@@ -114,10 +114,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
- function defer(fn, context, wait) {
- return setTimeout(fn.bind(context), wait);
- }
-
function arrayMax(array) {
return Math.max.apply(Math, array);
}
@@ -163,7 +159,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.isDestroyed = false;
this.isInitialized = false;
this._transitions = [];
- this._isMovementCanceled = false;
+ this.isTransitioning = false;
this._queue = [];
element = this._getElementOption(element);
@@ -175,15 +171,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.element = element;
this.id = 'shuffle_' + id++;
- this._dispatch(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.isInitialized = true;
- this._dispatch(Shuffle.EventType.DONE);
- }, this, 16);
+ this.isInitialized = true;
}
_createClass(Shuffle, [{
@@ -221,12 +210,13 @@ return /******/ (function(modules) { // webpackBootstrap
// Kick off!
this.filter(this.options.group, this.options.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.
- defer(function () {
- this._setTransitions();
- this.element.style.transition = 'height ' + this.options.speed + 'ms ' + this.options.easing;
- }, this);
+ // 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.
+ // First, however, a synchronous layout must be caused for the previous
+ // styles to be applied without transitions.
+ this.element.offsetWidth; // jshint ignore: line
+ this._setTransitions();
+ this.element.style.transition = 'height ' + this.options.speed + 'ms ' + this.options.easing;
}
/**
@@ -535,16 +525,16 @@ return /******/ (function(modules) { // webpackBootstrap
var size;
// If the columnWidth property is a function, then the grid is fluid
- if (typeof this.columnWidth === 'function') {
- size = this.columnWidth(containerWidth);
+ if (typeof this.options.columnWidth === 'function') {
+ size = this.options.columnWidth(containerWidth);
// columnWidth option isn't a function, are they using a sizing element?
} else if (this.useSizer) {
size = Shuffle.getSize(this.options.sizer).width;
// if not, how about the explicitly set option?
- } else if (this.columnWidth) {
- size = this.columnWidth;
+ } else if (this.options.columnWidth) {
+ size = this.options.columnWidth;
// or use the size of the first item
} else if (this.items.length > 0) {
@@ -654,6 +644,10 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _dispatch(name) {
var details = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+ if (this.isDestroyed) {
+ return;
+ }
+
details.shuffle = this;
return !this.element.dispatchEvent(new CustomEvent(name, {
bubbles: true,
@@ -957,13 +951,12 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_transition',
value: function _transition(opts) {
opts.item.applyCss(this._getStylesForTransition(opts));
- this._whenTransitionDone(opts.item.element, opts.callback);
+ return this._whenTransitionDone(opts.item.element, opts.callback);
}
/**
* Execute the styles gathered in the style queue. This applies styles to elements,
* triggering transitions.
- * @param {boolean} withLayout Whether to trigger a layout event.
* @private
*/
@@ -972,8 +965,6 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _processQueue() {
var _this6 = this;
- var withLayout = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
-
if (this.isTransitioning) {
this._cancelMovement();
}
@@ -996,8 +987,8 @@ return /******/ (function(modules) { // webpackBootstrap
// A call to layout happened, but none of the newly filtered items will
// change position. Asynchronously fire the callback here.
- } else if (withLayout) {
- defer(this._dispatchLayout, this);
+ } else {
+ setTimeout(this._dispatchLayout.bind(this), 0);
}
// Remove everything in the style queue
@@ -1421,8 +1412,6 @@ return /******/ (function(modules) { // webpackBootstrap
* @enum {string}
*/
Shuffle.EventType = {
- LOADING: 'shuffle:loading',
- DONE: 'shuffle:done',
LAYOUT: 'shuffle:layout',
REMOVED: 'shuffle:removed'
};
@@ -1444,7 +1433,8 @@ return /******/ (function(modules) { // webpackBootstrap
// e.g. '.picture-item'.
itemSelector: '*',
- // Sizer element. Use an element to determine the size of columns and gutters.
+ // Element or selector string. Use an element to determine the size of columns
+ // and gutters.
sizer: null,
// A static number or function that tells the plugin how wide the gutters
@@ -1481,7 +1471,7 @@ return /******/ (function(modules) { // webpackBootstrap
// Transition delay offset for each item in milliseconds.
staggerAmount: 15,
- // It can look a little weird when the last element is in the top row
+ // Maximum stagger delay in milliseconds.
staggerAmountMax: 250,
// Whether to use transforms or absolute positioning.
@@ -2096,7 +2086,7 @@ return /******/ (function(modules) { // webpackBootstrap
function cancelTransitionEnd(id) {
if (transitions[id]) {
transitions[id].element.removeEventListener(eventName, transitions[id].listener);
- delete transitions[id];
+ transitions[id] = null;
return true;
}
diff --git a/dist/shuffle.min.js b/dist/shuffle.min.js
index 972a933..89b4f8f 100644
--- a/dist/shuffle.min.js
+++ b/dist/shuffle.min.js
@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.shuffle=e():t.shuffle=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){return Array.prototype.slice.call(t)}function r(t,e,i){for(var n=0,s=t.length;s>n;n++)if(e.call(i,t[n],n,t)==={})return}function l(t,e,i){return setTimeout(t.bind(e),i)}function a(t){return Math.max.apply(Math,t)}function u(t){return Math.min.apply(Math,t)}function h(t,e){return 2===arguments.length?h(t)(e):function(e){return t.indexOf(e)>-1}}var f=function(){function t(t,e){for(var i=0;i0?t.getSize(this.items[0].element,!0).width:e,0===n&&(n=e),n+i}},{key:"_getGutterSize",value:function(t){var e;return e="function"==typeof this.options.gutterWidth?this.options.gutterWidth(t):this.useSizer?(0,C["default"])(this.options.sizer,"marginLeft"):this.options.gutterWidth}},{key:"_setColumns",value:function(){var e=arguments.length<=0||void 0===arguments[0]?t.getSize(this.element).width:arguments[0],i=this._getGutterSize(e),n=this._getColumnSize(e,i),s=(e+i)/n;Math.abs(Math.round(s)-s)l;l++)this.positions[n+l]=o;return s}},{key:"_getColumnSpan",value:function(t,e,i){var n=t/e;return Math.abs(Math.round(n)-n)s;s++)n[s]=a(this.positions.slice(s,s+t));return n}},{key:"_getShortColumn",value:function(t,e){for(var i=u(t),n=0,s=t.length;s>n;n++)if(t[n]>=i-e&&t[n]<=i+e)return n;return 0}},{key:"_shrink",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?this._getConcealedItems():arguments[0],i=0;r(e,function(e){e.scale!==T["default"].Scale.FILTERED&&(e.scale=T["default"].Scale.FILTERED,t._queue.push({item:e,opacity:0,transitionDelay:t._getStaggerAmount(i),callback:function(){e.element.style.visibility="hidden"}}),i++)})}},{key:"_handleResize",value:function(){if(this.isEnabled&&!this.isDestroyed){var e=t.getSize(this.element).width;e!==this.containerWidth&&this.update()}}},{key:"_getStylesForTransition",value:function(t){var e=t.item,i={opacity:t.opacity,visibility:t.visibility,transitionDelay:(t.transitionDelay||0)+"ms"},n=e.point.x,s=e.point.y;return this.options.useTransforms?i.transform="translate("+n+"px, "+s+"px) scale("+e.scale+")":(i.left=n+"px",i.top=s+"px"),i}},{key:"_whenTransitionDone",value:function(t,e){var i=this;return new Promise(function(n){var s=(0,z.onTransitionEnd)(t,function(t){t.currentTarget.style.transitionDelay="",e&&e(),n()});i._transitions.push(s)})}},{key:"_transition",value:function(t){t.item.applyCss(this._getStylesForTransition(t)),this._whenTransitionDone(t.item.element,t.callback)}},{key:"_processQueue",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0];this.isTransitioning&&this._cancelMovement();var i=[],n=[];this._queue.forEach(function(e){t.isInitialized&&0!==t.options.speed?n.push(e):i.push(e)}),this._styleImmediately(i),n.length>0&&this.options.speed>0?this._startTransitions(n):e&&l(this._dispatchLayout,this),this._queue.length=0}},{key:"_startTransitions",value:function(t){var e=this;this.isTransitioning=!0;var i=t.map(function(t){return e._transition(t)});Promise.all(i).then(this._movementFinished.bind(this))}},{key:"_cancelMovement",value:function(){r(this._transitions,z.cancelTransitionEnd),this._transitions.length=0,this.isTransitioning=!1}},{key:"_styleImmediately",value:function(e){var i=this;if(e.length){var n=e.map(function(t){return t.item.element});t._skipTransitions(n,function(){e.forEach(function(t){t.item.applyCss(i._getStylesForTransition(t)),t.callback&&t.callback()})})}}},{key:"_movementFinished",value:function(){this.isTransitioning=!1,this._dispatchLayout()}},{key:"_dispatchLayout",value:function(){this._dispatch(t.EventType.LAYOUT)}},{key:"filter",value:function(e,i){this.isEnabled&&((!e||e&&0===e.length)&&(e=t.ALL_ITEMS),this._filter(e),this._shrink(),this._updateItemCount(),this.sort(i))}},{key:"sort",value:function(){var t=arguments.length<=0||void 0===arguments[0]?this.lastSort:arguments[0];if(this.isEnabled){this._resetCols();var e=this._getFilteredItems();e=(0,M["default"])(e,t),this._layout(e),this._processQueue(),this._setContainerSize(),this.lastSort=t}}},{key:"update",value:function(t){this.isEnabled&&(t||this._setColumns(),this.sort())}},{key:"layout",value:function(){this.update(!0)}},{key:"add",value:function(t){t=(0,v["default"])(t).map(function(t){return new T["default"](t)}),this._initItems(t),this._setTransitions(t),this.items=this.items.concat(t),this._updateItemsOrder(),this.filter(this.lastFilter)}},{key:"disable",value:function(){this.isEnabled=!1}},{key:"enable",value:function(t){this.isEnabled=!0,t!==!1&&this.update()}},{key:"remove",value:function(e){var i=this;e=(0,v["default"])(e);var n=e.map(function(t){return i.getItemByElement(t)}).filter(function(t){return!!t});if(e.length){var s=function o(){i.element.removeEventListener(t.EventType.LAYOUT,o),i._disposeItems(n),e.forEach(function(t){t.parentNode.removeChild(t)}),i.items=i.items.filter(function(t){return!h(n,t)}),i._updateItemCount(),i._dispatch(t.EventType.REMOVED,{collection:e}),e=null,n=null};this._toggleFilterClasses({filtered:[],concealed:n}),this._shrink(n),this.sort(),this.element.addEventListener(t.EventType.LAYOUT,s)}}},{key:"getItemByElement",value:function(t){for(var e=this.items.length-1;e>=0;e--)if(this.items[e].element===t)return this.items[e];return null}},{key:"destroy",value:function(){this._cancelMovement(),window.removeEventListener("resize",this._onResize),this.element.classList.remove("shuffle"),this.element.removeAttribute("style"),this._disposeItems(),this.items=null,this.options.sizer=null,this.element=null,this._transitions=null,this.isDestroyed=!0}}],[{key:"getSize",value:function(t,e){var i=window.getComputedStyle(t,null),n=(0,C["default"])(t,"width",i),s=(0,C["default"])(t,"height",i);if(e){var o=(0,C["default"])(t,"marginLeft",i),r=(0,C["default"])(t,"marginRight",i),l=(0,C["default"])(t,"marginTop",i),a=(0,C["default"])(t,"marginBottom",i);n+=o+r,s+=l+a}return{width:n,height:s}}},{key:"_skipTransitions",value:function(t,e){var i="0ms",n=t.map(function(t){var e=t.style,n=e.transitionDuration,s=e.transitionDelay;return e.transitionDuration=i,e.transitionDelay=i,{duration:n,delay:s}});e(),t[0].offsetWidth,t.forEach(function(t,e){t.style.transitionDuration=n[e].duration,t.style.transitionDelay=n[e].delay})}}]),t}();x.ALL_ITEMS="all",x.FILTER_ATTRIBUTE_KEY="groups",x.EventType={LOADING:"shuffle:loading",DONE:"shuffle:done",LAYOUT:"shuffle:layout",REMOVED:"shuffle:removed"},x.ClassName=L["default"],x.options={group:x.ALL_ITEMS,speed:250,easing:"ease",itemSelector:"*",sizer:null,gutterWidth:0,columnWidth:0,delimeter:null,buffer:0,columnThreshold:.01,initialSort:null,throttle:g["default"],throttleTime:300,staggerAmount:15,staggerAmountMax:250,useTransforms:!0},x.Point=b["default"],x.ShuffleItem=T["default"],x.sorter=M["default"],t.exports=x},function(t,e){try{new window.CustomEvent("test")}catch(i){var n=function(t,e){var i;return e=e||{bubbles:!1,cancelable:!1,detail:void 0},i=document.createEvent("CustomEvent"),i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i};n.prototype=window.Event.prototype,window.CustomEvent=n}},function(t,e){"use strict";function i(t,e){if(s)return s.call(t,e);for(var i=t.parentNode.querySelectorAll(e),n=0;n=h||h>e?(r&&(clearTimeout(r),r=null),l=u,o=t.apply(n,s),r||(n=s=null)):r||i.trailing===!1||(r=setTimeout(a,h)),o}}},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var s=i(7),o=n(s),r=function(t,e){this.x=(0,o["default"])(t),this.y=(0,o["default"])(e)};r.equals=function(t,e){return t.x===e.x&&t.y===e.y},e["default"]=r},function(t,e){"use strict";function i(t){return parseFloat(t)||0}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=i},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;in||"sortFirst"===n||"sortLast"===s?-1:n>s||"sortLast"===n||"sortFirst"===s?1:0}),o?n:(i.reverse&&t.reverse(),t)):[]}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o;var r=i(4),l=n(r),a={reverse:!1,by:null,randomize:!1,key:"element"}},function(t,e){"use strict";function i(){return r+l++}function n(t,e){var n=i(),l=function(t){t.currentTarget===t.target&&(s(n),e(t))};return t.addEventListener(r,l),o[n]={element:t,listener:l},n}function s(t){return o[t]?(o[t].element.removeEventListener(r,o[t].listener),delete o[t],!0):!1}Object.defineProperty(e,"__esModule",{value:!0}),e.onTransitionEnd=n,e.cancelTransitionEnd=s;var o={},r="transitionend",l=0}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.shuffle=e():t.shuffle=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){return Array.prototype.slice.call(t)}function r(t,e,i){for(var n=0,s=t.length;s>n;n++)if(e.call(i,t[n],n,t)==={})return}function l(t){return Math.max.apply(Math,t)}function a(t){return Math.min.apply(Math,t)}function u(t,e){return 2===arguments.length?u(t)(e):function(e){return t.indexOf(e)>-1}}var h=function(){function t(t,e){for(var i=0;i0?t.getSize(this.items[0].element,!0).width:e,0===n&&(n=e),n+i}},{key:"_getGutterSize",value:function(t){var e;return e="function"==typeof this.options.gutterWidth?this.options.gutterWidth(t):this.useSizer?(0,w["default"])(this.options.sizer,"marginLeft"):this.options.gutterWidth}},{key:"_setColumns",value:function(){var e=arguments.length<=0||void 0===arguments[0]?t.getSize(this.element).width:arguments[0],i=this._getGutterSize(e),n=this._getColumnSize(e,i),s=(e+i)/n;Math.abs(Math.round(s)-s)l;l++)this.positions[n+l]=o;return s}},{key:"_getColumnSpan",value:function(t,e,i){var n=t/e;return Math.abs(Math.round(n)-n)s;s++)n[s]=l(this.positions.slice(s,s+t));return n}},{key:"_getShortColumn",value:function(t,e){for(var i=a(t),n=0,s=t.length;s>n;n++)if(t[n]>=i-e&&t[n]<=i+e)return n;return 0}},{key:"_shrink",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?this._getConcealedItems():arguments[0],i=0;r(e,function(e){e.scale!==S["default"].Scale.FILTERED&&(e.scale=S["default"].Scale.FILTERED,t._queue.push({item:e,opacity:0,transitionDelay:t._getStaggerAmount(i),callback:function(){e.element.style.visibility="hidden"}}),i++)})}},{key:"_handleResize",value:function(){if(this.isEnabled&&!this.isDestroyed){var e=t.getSize(this.element).width;e!==this.containerWidth&&this.update()}}},{key:"_getStylesForTransition",value:function(t){var e=t.item,i={opacity:t.opacity,visibility:t.visibility,transitionDelay:(t.transitionDelay||0)+"ms"},n=e.point.x,s=e.point.y;return this.options.useTransforms?i.transform="translate("+n+"px, "+s+"px) scale("+e.scale+")":(i.left=n+"px",i.top=s+"px"),i}},{key:"_whenTransitionDone",value:function(t,e){var i=this;return new Promise(function(n){var s=(0,M.onTransitionEnd)(t,function(t){t.currentTarget.style.transitionDelay="",e&&e(),n()});i._transitions.push(s)})}},{key:"_transition",value:function(t){return t.item.applyCss(this._getStylesForTransition(t)),this._whenTransitionDone(t.item.element,t.callback)}},{key:"_processQueue",value:function(){var t=this;this.isTransitioning&&this._cancelMovement();var e=[],i=[];this._queue.forEach(function(n){t.isInitialized&&0!==t.options.speed?i.push(n):e.push(n)}),this._styleImmediately(e),i.length>0&&this.options.speed>0?this._startTransitions(i):setTimeout(this._dispatchLayout.bind(this),0),this._queue.length=0}},{key:"_startTransitions",value:function(t){var e=this;this.isTransitioning=!0;var i=t.map(function(t){return e._transition(t)});Promise.all(i).then(this._movementFinished.bind(this))}},{key:"_cancelMovement",value:function(){r(this._transitions,M.cancelTransitionEnd),this._transitions.length=0,this.isTransitioning=!1}},{key:"_styleImmediately",value:function(e){var i=this;if(e.length){var n=e.map(function(t){return t.item.element});t._skipTransitions(n,function(){e.forEach(function(t){t.item.applyCss(i._getStylesForTransition(t)),t.callback&&t.callback()})})}}},{key:"_movementFinished",value:function(){this.isTransitioning=!1,this._dispatchLayout()}},{key:"_dispatchLayout",value:function(){this._dispatch(t.EventType.LAYOUT)}},{key:"filter",value:function(e,i){this.isEnabled&&((!e||e&&0===e.length)&&(e=t.ALL_ITEMS),this._filter(e),this._shrink(),this._updateItemCount(),this.sort(i))}},{key:"sort",value:function(){var t=arguments.length<=0||void 0===arguments[0]?this.lastSort:arguments[0];if(this.isEnabled){this._resetCols();var e=this._getFilteredItems();e=(0,I["default"])(e,t),this._layout(e),this._processQueue(),this._setContainerSize(),this.lastSort=t}}},{key:"update",value:function(t){this.isEnabled&&(t||this._setColumns(),this.sort())}},{key:"layout",value:function(){this.update(!0)}},{key:"add",value:function(t){t=(0,m["default"])(t).map(function(t){return new S["default"](t)}),this._initItems(t),this._setTransitions(t),this.items=this.items.concat(t),this._updateItemsOrder(),this.filter(this.lastFilter)}},{key:"disable",value:function(){this.isEnabled=!1}},{key:"enable",value:function(t){this.isEnabled=!0,t!==!1&&this.update()}},{key:"remove",value:function(e){var i=this;e=(0,m["default"])(e);var n=e.map(function(t){return i.getItemByElement(t)}).filter(function(t){return!!t});if(e.length){var s=function o(){i.element.removeEventListener(t.EventType.LAYOUT,o),i._disposeItems(n),e.forEach(function(t){t.parentNode.removeChild(t)}),i.items=i.items.filter(function(t){return!u(n,t)}),i._updateItemCount(),i._dispatch(t.EventType.REMOVED,{collection:e}),e=null,n=null};this._toggleFilterClasses({filtered:[],concealed:n}),this._shrink(n),this.sort(),this.element.addEventListener(t.EventType.LAYOUT,s)}}},{key:"getItemByElement",value:function(t){for(var e=this.items.length-1;e>=0;e--)if(this.items[e].element===t)return this.items[e];return null}},{key:"destroy",value:function(){this._cancelMovement(),window.removeEventListener("resize",this._onResize),this.element.classList.remove("shuffle"),this.element.removeAttribute("style"),this._disposeItems(),this.items=null,this.options.sizer=null,this.element=null,this._transitions=null,this.isDestroyed=!0}}],[{key:"getSize",value:function(t,e){var i=window.getComputedStyle(t,null),n=(0,w["default"])(t,"width",i),s=(0,w["default"])(t,"height",i);if(e){var o=(0,w["default"])(t,"marginLeft",i),r=(0,w["default"])(t,"marginRight",i),l=(0,w["default"])(t,"marginTop",i),a=(0,w["default"])(t,"marginBottom",i);n+=o+r,s+=l+a}return{width:n,height:s}}},{key:"_skipTransitions",value:function(t,e){var i="0ms",n=t.map(function(t){var e=t.style,n=e.transitionDuration,s=e.transitionDelay;return e.transitionDuration=i,e.transitionDelay=i,{duration:n,delay:s}});e(),t[0].offsetWidth,t.forEach(function(t,e){t.style.transitionDuration=n[e].duration,t.style.transitionDelay=n[e].delay})}}]),t}();F.ALL_ITEMS="all",F.FILTER_ATTRIBUTE_KEY="groups",F.EventType={LAYOUT:"shuffle:layout",REMOVED:"shuffle:removed"},F.ClassName=k["default"],F.options={group:F.ALL_ITEMS,speed:250,easing:"ease",itemSelector:"*",sizer:null,gutterWidth:0,columnWidth:0,delimeter:null,buffer:0,columnThreshold:.01,initialSort:null,throttle:_["default"],throttleTime:300,staggerAmount:15,staggerAmountMax:250,useTransforms:!0},F.Point=E["default"],F.ShuffleItem=S["default"],F.sorter=I["default"],t.exports=F},function(t,e){try{new window.CustomEvent("test")}catch(i){var n=function(t,e){var i;return e=e||{bubbles:!1,cancelable:!1,detail:void 0},i=document.createEvent("CustomEvent"),i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i};n.prototype=window.Event.prototype,window.CustomEvent=n}},function(t,e){"use strict";function i(t,e){if(s)return s.call(t,e);for(var i=t.parentNode.querySelectorAll(e),n=0;n=h||h>e?(r&&(clearTimeout(r),r=null),l=u,o=t.apply(n,s),r||(n=s=null)):r||i.trailing===!1||(r=setTimeout(a,h)),o}}},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var s=i(7),o=n(s),r=function(t,e){this.x=(0,o["default"])(t),this.y=(0,o["default"])(e)};r.equals=function(t,e){return t.x===e.x&&t.y===e.y},e["default"]=r},function(t,e){"use strict";function i(t){return parseFloat(t)||0}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=i},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){for(var i=0;in||"sortFirst"===n||"sortLast"===s?-1:n>s||"sortLast"===n||"sortFirst"===s?1:0}),o?n:(i.reverse&&t.reverse(),t)):[]}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o;var r=i(4),l=n(r),a={reverse:!1,by:null,randomize:!1,key:"element"}},function(t,e){"use strict";function i(){return r+l++}function n(t,e){var n=i(),l=function(t){t.currentTarget===t.target&&(s(n),e(t))};return t.addEventListener(r,l),o[n]={element:t,listener:l},n}function s(t){return o[t]?(o[t].element.removeEventListener(r,o[t].listener),o[t]=null,!0):!1}Object.defineProperty(e,"__esModule",{value:!0}),e.onTransitionEnd=n,e.cancelTransitionEnd=s;var o={},r="transitionend",l=0}])});
//# sourceMappingURL=shuffle.min.js.map
\ No newline at end of file
diff --git a/index.html b/index.html
index b381074..ef602cb 100644
--- a/index.html
+++ b/index.html
@@ -70,12 +70,12 @@ prism: true
-
+
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
-
+
@@ -188,6 +188,8 @@ prism: true
Dependencies
+
Shuffle assumes Promise is available globally. If you care about IE11, use a polyfill. Current support.