jquery.shuffle.modernizr.js 50 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693
  1. /*!
  2. * Shuffle.js by @Vestride
  3. * Categorize, sort, and filter a responsive grid of items.
  4. * Dependencies: jQuery 1.9+, Modernizr 2.6.2+
  5. * @license MIT license
  6. * @version 3.1.1
  7. */
  8. /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
  9. * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
  10. */
  11. 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=["&#173;",'<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);
  12. (function (factory) {
  13. if (typeof define === 'function' && define.amd) {
  14. define(['jquery', 'modernizr'], factory);
  15. } else if (typeof exports === 'object') {
  16. module.exports = factory(require('jquery'), window.Modernizr);
  17. } else {
  18. window.Shuffle = factory(window.jQuery, window.Modernizr);
  19. }
  20. })(function($, Modernizr, undefined) {
  21. 'use strict';
  22. // Validate Modernizr exists.
  23. // Shuffle requires `csstransitions`, `csstransforms`, `csstransforms3d`,
  24. // and `prefixed` to exist on the Modernizr object.
  25. if (typeof Modernizr !== 'object') {
  26. throw new Error('Shuffle.js requires Modernizr.\n' +
  27. 'http://vestride.github.io/Shuffle/#dependencies');
  28. }
  29. /**
  30. * Returns css prefixed properties like `-webkit-transition` or `box-sizing`
  31. * from `transition` or `boxSizing`, respectively.
  32. * @param {(string|boolean)} prop Property to be prefixed.
  33. * @return {string} The prefixed css property.
  34. */
  35. function dashify( prop ) {
  36. if (!prop) {
  37. return '';
  38. }
  39. // Replace upper case with dash-lowercase,
  40. // then fix ms- prefixes because they're not capitalized.
  41. return prop.replace(/([A-Z])/g, function( str, m1 ) {
  42. return '-' + m1.toLowerCase();
  43. }).replace(/^ms-/,'-ms-');
  44. }
  45. // Constant, prefixed variables.
  46. var TRANSITION = Modernizr.prefixed('transition');
  47. var TRANSITION_DELAY = Modernizr.prefixed('transitionDelay');
  48. var TRANSITION_DURATION = Modernizr.prefixed('transitionDuration');
  49. // Note(glen): Stock Android 4.1.x browser will fail here because it wrongly
  50. // says it supports non-prefixed transitions.
  51. // https://github.com/Modernizr/Modernizr/issues/897
  52. var TRANSITIONEND = {
  53. 'WebkitTransition' : 'webkitTransitionEnd',
  54. 'transition' : 'transitionend'
  55. }[ TRANSITION ];
  56. var TRANSFORM = Modernizr.prefixed('transform');
  57. var CSS_TRANSFORM = dashify(TRANSFORM);
  58. // Constants
  59. var CAN_TRANSITION_TRANSFORMS = Modernizr.csstransforms && Modernizr.csstransitions;
  60. var HAS_TRANSFORMS_3D = Modernizr.csstransforms3d;
  61. var HAS_COMPUTED_STYLE = !!window.getComputedStyle;
  62. var SHUFFLE = 'shuffle';
  63. // Configurable. You can change these constants to fit your application.
  64. // The default scale and concealed scale, however, have to be different values.
  65. var ALL_ITEMS = 'all';
  66. var FILTER_ATTRIBUTE_KEY = 'groups';
  67. var DEFAULT_SCALE = 1;
  68. var CONCEALED_SCALE = 0.001;
  69. // Underscore's throttle function.
  70. function throttle(func, wait, options) {
  71. var context, args, result;
  72. var timeout = null;
  73. var previous = 0;
  74. options = options || {};
  75. var later = function() {
  76. previous = options.leading === false ? 0 : $.now();
  77. timeout = null;
  78. result = func.apply(context, args);
  79. context = args = null;
  80. };
  81. return function() {
  82. var now = $.now();
  83. if (!previous && options.leading === false) {
  84. previous = now;
  85. }
  86. var remaining = wait - (now - previous);
  87. context = this;
  88. args = arguments;
  89. if (remaining <= 0 || remaining > wait) {
  90. clearTimeout(timeout);
  91. timeout = null;
  92. previous = now;
  93. result = func.apply(context, args);
  94. context = args = null;
  95. } else if (!timeout && options.trailing !== false) {
  96. timeout = setTimeout(later, remaining);
  97. }
  98. return result;
  99. };
  100. }
  101. function each(obj, iterator, context) {
  102. for (var i = 0, length = obj.length; i < length; i++) {
  103. if (iterator.call(context, obj[i], i, obj) === {}) {
  104. return;
  105. }
  106. }
  107. }
  108. function defer(fn, context, wait) {
  109. return setTimeout( $.proxy( fn, context ), wait );
  110. }
  111. function arrayMax( array ) {
  112. return Math.max.apply( Math, array );
  113. }
  114. function arrayMin( array ) {
  115. return Math.min.apply( Math, array );
  116. }
  117. /**
  118. * Always returns a numeric value, given a value.
  119. * @param {*} value Possibly numeric value.
  120. * @return {number} `value` or zero if `value` isn't numeric.
  121. * @private
  122. */
  123. function getNumber(value) {
  124. return $.isNumeric(value) ? value : 0;
  125. }
  126. var getStyles = window.getComputedStyle || function() {};
  127. /**
  128. * Represents a coordinate pair.
  129. * @param {number} [x=0] X.
  130. * @param {number} [y=0] Y.
  131. */
  132. var Point = function(x, y) {
  133. this.x = getNumber( x );
  134. this.y = getNumber( y );
  135. };
  136. /**
  137. * Whether two points are equal.
  138. * @param {Point} a Point A.
  139. * @param {Point} b Point B.
  140. * @return {boolean}
  141. */
  142. Point.equals = function(a, b) {
  143. return a.x === b.x && a.y === b.y;
  144. };
  145. var COMPUTED_SIZE_INCLUDES_PADDING = (function() {
  146. if (!HAS_COMPUTED_STYLE) {
  147. return false;
  148. }
  149. var parent = document.body || document.documentElement;
  150. var e = document.createElement('div');
  151. e.style.cssText = 'width:10px;padding:2px;' +
  152. '-webkit-box-sizing:border-box;box-sizing:border-box;';
  153. parent.appendChild(e);
  154. var width = getStyles(e, null).width;
  155. var ret = width === '10px';
  156. parent.removeChild(e);
  157. return ret;
  158. }());
  159. // Used for unique instance variables
  160. var id = 0;
  161. var $window = $( window );
  162. /**
  163. * Categorize, sort, and filter a responsive grid of items.
  164. *
  165. * @param {Element} element An element which is the parent container for the grid items.
  166. * @param {Object} [options=Shuffle.options] Options object.
  167. * @constructor
  168. */
  169. var Shuffle = function( element, options ) {
  170. options = options || {};
  171. $.extend( this, Shuffle.options, options, Shuffle.settings );
  172. this.$el = $(element);
  173. this.element = element;
  174. this.unique = 'shuffle_' + id++;
  175. this._fire( Shuffle.EventType.LOADING );
  176. this._init();
  177. // Dispatch the done event asynchronously so that people can bind to it after
  178. // Shuffle has been initialized.
  179. defer(function() {
  180. this.initialized = true;
  181. this._fire( Shuffle.EventType.DONE );
  182. }, this, 16);
  183. };
  184. /**
  185. * Events the container element emits with the .shuffle namespace.
  186. * For example, "done.shuffle".
  187. * @enum {string}
  188. */
  189. Shuffle.EventType = {
  190. LOADING: 'loading',
  191. DONE: 'done',
  192. LAYOUT: 'layout',
  193. REMOVED: 'removed'
  194. };
  195. /** @enum {string} */
  196. Shuffle.ClassName = {
  197. BASE: SHUFFLE,
  198. SHUFFLE_ITEM: 'shuffle-item',
  199. FILTERED: 'filtered',
  200. CONCEALED: 'concealed'
  201. };
  202. // Overrideable options
  203. Shuffle.options = {
  204. group: ALL_ITEMS, // Initial filter group.
  205. speed: 250, // Transition/animation speed (milliseconds).
  206. easing: 'ease-out', // CSS easing function to use.
  207. itemSelector: '', // e.g. '.picture-item'.
  208. sizer: null, // Sizer element. Use an element to determine the size of columns and gutters.
  209. gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
  210. columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
  211. delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
  212. buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
  213. 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.
  214. initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
  215. throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
  216. throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
  217. sequentialFadeDelay: 150, // Delay between each item that fades in when adding items.
  218. supported: CAN_TRANSITION_TRANSFORMS // Whether to use transforms or absolute positioning.
  219. };
  220. // Not overrideable
  221. Shuffle.settings = {
  222. useSizer: false,
  223. itemCss : { // default CSS for each item
  224. position: 'absolute',
  225. top: 0,
  226. left: 0,
  227. visibility: 'visible'
  228. },
  229. revealAppendedDelay: 300,
  230. lastSort: {},
  231. lastFilter: ALL_ITEMS,
  232. enabled: true,
  233. destroyed: false,
  234. initialized: false,
  235. _animations: [],
  236. _transitions: [],
  237. _isMovementCanceled: false,
  238. styleQueue: []
  239. };
  240. // Expose for testing.
  241. Shuffle.Point = Point;
  242. /**
  243. * Static methods.
  244. */
  245. /**
  246. * If the browser has 3d transforms available, build a string with those,
  247. * otherwise use 2d transforms.
  248. * @param {Point} point X and Y positions.
  249. * @param {number} scale Scale amount.
  250. * @return {string} A normalized string which can be used with the transform style.
  251. * @private
  252. */
  253. Shuffle._getItemTransformString = function(point, scale) {
  254. if ( HAS_TRANSFORMS_3D ) {
  255. return 'translate3d(' + point.x + 'px, ' + point.y + 'px, 0) scale3d(' + scale + ', ' + scale + ', 1)';
  256. } else {
  257. return 'translate(' + point.x + 'px, ' + point.y + 'px) scale(' + scale + ')';
  258. }
  259. };
  260. /**
  261. * Retrieve the computed style for an element, parsed as a float.
  262. * @param {Element} element Element to get style for.
  263. * @param {string} style Style property.
  264. * @param {CSSStyleDeclaration} [styles] Optionally include clean styles to
  265. * use instead of asking for them again.
  266. * @return {number} The parsed computed value or zero if that fails because IE
  267. * will return 'auto' when the element doesn't have margins instead of
  268. * the computed style.
  269. * @private
  270. */
  271. Shuffle._getNumberStyle = function( element, style, styles ) {
  272. if ( HAS_COMPUTED_STYLE ) {
  273. styles = styles || getStyles( element, null );
  274. var value = Shuffle._getFloat( styles[ style ] );
  275. // Support IE<=11 and W3C spec.
  276. if ( !COMPUTED_SIZE_INCLUDES_PADDING && style === 'width' ) {
  277. value += Shuffle._getFloat( styles.paddingLeft ) +
  278. Shuffle._getFloat( styles.paddingRight ) +
  279. Shuffle._getFloat( styles.borderLeftWidth ) +
  280. Shuffle._getFloat( styles.borderRightWidth );
  281. } else if ( !COMPUTED_SIZE_INCLUDES_PADDING && style === 'height' ) {
  282. value += Shuffle._getFloat( styles.paddingTop ) +
  283. Shuffle._getFloat( styles.paddingBottom ) +
  284. Shuffle._getFloat( styles.borderTopWidth ) +
  285. Shuffle._getFloat( styles.borderBottomWidth );
  286. }
  287. return value;
  288. } else {
  289. return Shuffle._getFloat( $( element ).css( style ) );
  290. }
  291. };
  292. /**
  293. * Parse a string as an float.
  294. * @param {string} value String float.
  295. * @return {number} The string as an float or zero.
  296. * @private
  297. */
  298. Shuffle._getFloat = function(value) {
  299. return getNumber( parseFloat( value ) );
  300. };
  301. /**
  302. * Returns the outer width of an element, optionally including its margins.
  303. *
  304. * There are a few different methods for getting the width of an element, none of
  305. * which work perfectly for all Shuffle's use cases.
  306. *
  307. * 1. getBoundingClientRect() `left` and `right` properties.
  308. * - Accounts for transform scaled elements, making it useless for Shuffle
  309. * elements which have shrunk.
  310. * 2. The `offsetWidth` property (or jQuery's CSS).
  311. * - This value stays the same regardless of the elements transform property,
  312. * however, it does not return subpixel values.
  313. * 3. getComputedStyle()
  314. * - This works great Chrome, Firefox, Safari, but IE<=11 does not include
  315. * padding and border when box-sizing: border-box is set, requiring a feature
  316. * test and extra work to add the padding back for IE and other browsers which
  317. * follow the W3C spec here.
  318. *
  319. * @param {Element} element The element.
  320. * @param {boolean} [includeMargins] Whether to include margins. Default is false.
  321. * @return {number} The width.
  322. */
  323. Shuffle._getOuterWidth = function( element, includeMargins ) {
  324. // Store the styles so that they can be used by others without asking for it again.
  325. var styles = getStyles( element, null );
  326. var width = Shuffle._getNumberStyle( element, 'width', styles );
  327. // Use jQuery here because it uses getComputedStyle internally and is
  328. // cross-browser. Using the style property of the element will only work
  329. // if there are inline styles.
  330. if ( includeMargins ) {
  331. var marginLeft = Shuffle._getNumberStyle( element, 'marginLeft', styles );
  332. var marginRight = Shuffle._getNumberStyle( element, 'marginRight', styles );
  333. width += marginLeft + marginRight;
  334. }
  335. return width;
  336. };
  337. /**
  338. * Returns the outer height of an element, optionally including its margins.
  339. * @param {Element} element The element.
  340. * @param {boolean} [includeMargins] Whether to include margins. Default is false.
  341. * @return {number} The height.
  342. */
  343. Shuffle._getOuterHeight = function( element, includeMargins ) {
  344. var styles = getStyles( element, null );
  345. var height = Shuffle._getNumberStyle( element, 'height', styles );
  346. if ( includeMargins ) {
  347. var marginTop = Shuffle._getNumberStyle( element, 'marginTop', styles );
  348. var marginBottom = Shuffle._getNumberStyle( element, 'marginBottom', styles );
  349. height += marginTop + marginBottom;
  350. }
  351. return height;
  352. };
  353. /**
  354. * Change a property or execute a function which will not have a transition
  355. * @param {Element} element DOM element that won't be transitioned
  356. * @param {Function} callback A function which will be called while transition
  357. * is set to 0ms.
  358. * @param {Object} [context] Optional context for the callback function.
  359. * @private
  360. */
  361. Shuffle._skipTransition = function( element, callback, context ) {
  362. var duration = element.style[ TRANSITION_DURATION ];
  363. // Set the duration to zero so it happens immediately
  364. element.style[ TRANSITION_DURATION ] = '0ms'; // ms needed for firefox!
  365. callback.call( context );
  366. // Force reflow
  367. var reflow = element.offsetWidth;
  368. // Avoid jshint warnings: unused variables and expressions.
  369. reflow = null;
  370. // Put the duration back
  371. element.style[ TRANSITION_DURATION ] = duration;
  372. };
  373. /**
  374. * Instance methods.
  375. */
  376. Shuffle.prototype._init = function() {
  377. this.$items = this._getItems();
  378. this.sizer = this._getElementOption( this.sizer );
  379. if ( this.sizer ) {
  380. this.useSizer = true;
  381. }
  382. // Add class and invalidate styles
  383. this.$el.addClass( Shuffle.ClassName.BASE );
  384. // Set initial css for each item
  385. this._initItems();
  386. // Bind resize events
  387. // http://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer
  388. $window.on('resize.' + SHUFFLE + '.' + this.unique, this._getResizeFunction());
  389. // Get container css all in one request. Causes reflow
  390. var containerCSS = this.$el.css(['position', 'overflow']);
  391. var containerWidth = Shuffle._getOuterWidth( this.element );
  392. // Add styles to the container if it doesn't have them.
  393. this._validateStyles( containerCSS );
  394. // We already got the container's width above, no need to cause another reflow getting it again...
  395. // Calculate the number of columns there will be
  396. this._setColumns( containerWidth );
  397. // Kick off!
  398. this.shuffle( this.group, this.initialSort );
  399. // The shuffle items haven't had transitions set on them yet
  400. // so the user doesn't see the first layout. Set them now that the first layout is done.
  401. if ( this.supported ) {
  402. defer(function() {
  403. this._setTransitions();
  404. this.element.style[ TRANSITION ] = 'height ' + this.speed + 'ms ' + this.easing;
  405. }, this);
  406. }
  407. };
  408. /**
  409. * Returns a throttled and proxied function for the resize handler.
  410. * @return {Function}
  411. * @private
  412. */
  413. Shuffle.prototype._getResizeFunction = function() {
  414. var resizeFunction = $.proxy( this._onResize, this );
  415. return this.throttle ?
  416. this.throttle( resizeFunction, this.throttleTime ) :
  417. resizeFunction;
  418. };
  419. /**
  420. * Retrieve an element from an option.
  421. * @param {string|jQuery|Element} option The option to check.
  422. * @return {?Element} The plain element or null.
  423. * @private
  424. */
  425. Shuffle.prototype._getElementOption = function( option ) {
  426. // If column width is a string, treat is as a selector and search for the
  427. // sizer element within the outermost container
  428. if ( typeof option === 'string' ) {
  429. return this.$el.find( option )[0] || null;
  430. // Check for an element
  431. } else if ( option && option.nodeType && option.nodeType === 1 ) {
  432. return option;
  433. // Check for jQuery object
  434. } else if ( option && option.jquery ) {
  435. return option[0];
  436. }
  437. return null;
  438. };
  439. /**
  440. * Ensures the shuffle container has the css styles it needs applied to it.
  441. * @param {Object} styles Key value pairs for position and overflow.
  442. * @private
  443. */
  444. Shuffle.prototype._validateStyles = function(styles) {
  445. // Position cannot be static.
  446. if ( styles.position === 'static' ) {
  447. this.element.style.position = 'relative';
  448. }
  449. // Overflow has to be hidden
  450. if ( styles.overflow !== 'hidden' ) {
  451. this.element.style.overflow = 'hidden';
  452. }
  453. };
  454. /**
  455. * Filter the elements by a category.
  456. * @param {string} [category] Category to filter by. If it's given, the last
  457. * category will be used to filter the items.
  458. * @param {ArrayLike} [$collection] Optionally filter a collection. Defaults to
  459. * all the items.
  460. * @return {jQuery} Filtered items.
  461. * @private
  462. */
  463. Shuffle.prototype._filter = function( category, $collection ) {
  464. category = category || this.lastFilter;
  465. $collection = $collection || this.$items;
  466. var set = this._getFilteredSets( category, $collection );
  467. // Individually add/remove concealed/filtered classes
  468. this._toggleFilterClasses( set.filtered, set.concealed );
  469. // Save the last filter in case elements are appended.
  470. this.lastFilter = category;
  471. // This is saved mainly because providing a filter function (like searching)
  472. // will overwrite the `lastFilter` property every time its called.
  473. if ( typeof category === 'string' ) {
  474. this.group = category;
  475. }
  476. return set.filtered;
  477. };
  478. /**
  479. * Returns an object containing the filtered and concealed elements.
  480. * @param {string|Function} category Category or function to filter by.
  481. * @param {ArrayLike.<Element>} $items A collection of items to filter.
  482. * @return {!{filtered: jQuery, concealed: jQuery}}
  483. * @private
  484. */
  485. Shuffle.prototype._getFilteredSets = function( category, $items ) {
  486. var $filtered = $();
  487. var $concealed = $();
  488. // category === 'all', add filtered class to everything
  489. if ( category === ALL_ITEMS ) {
  490. $filtered = $items;
  491. // Loop through each item and use provided function to determine
  492. // whether to hide it or not.
  493. } else {
  494. each($items, function( el ) {
  495. var $item = $(el);
  496. if ( this._doesPassFilter( category, $item ) ) {
  497. $filtered = $filtered.add( $item );
  498. } else {
  499. $concealed = $concealed.add( $item );
  500. }
  501. }, this);
  502. }
  503. return {
  504. filtered: $filtered,
  505. concealed: $concealed
  506. };
  507. };
  508. /**
  509. * Test an item to see if it passes a category.
  510. * @param {string|Function} category Category or function to filter by.
  511. * @param {jQuery} $item A single item, wrapped with jQuery.
  512. * @return {boolean} Whether it passes the category/filter.
  513. * @private
  514. */
  515. Shuffle.prototype._doesPassFilter = function( category, $item ) {
  516. if ( $.isFunction( category ) ) {
  517. return category.call( $item[0], $item, this );
  518. // Check each element's data-groups attribute against the given category.
  519. } else {
  520. var groups = $item.data( FILTER_ATTRIBUTE_KEY );
  521. var keys = this.delimeter && !$.isArray( groups ) ?
  522. groups.split( this.delimeter ) :
  523. groups;
  524. return $.inArray(category, keys) > -1;
  525. }
  526. };
  527. /**
  528. * Toggles the filtered and concealed class names.
  529. * @param {jQuery} $filtered Filtered set.
  530. * @param {jQuery} $concealed Concealed set.
  531. * @private
  532. */
  533. Shuffle.prototype._toggleFilterClasses = function( $filtered, $concealed ) {
  534. $filtered
  535. .removeClass( Shuffle.ClassName.CONCEALED )
  536. .addClass( Shuffle.ClassName.FILTERED );
  537. $concealed
  538. .removeClass( Shuffle.ClassName.FILTERED )
  539. .addClass( Shuffle.ClassName.CONCEALED );
  540. };
  541. /**
  542. * Set the initial css for each item
  543. * @param {jQuery} [$items] Optionally specifiy at set to initialize
  544. */
  545. Shuffle.prototype._initItems = function( $items ) {
  546. $items = $items || this.$items;
  547. $items.addClass([
  548. Shuffle.ClassName.SHUFFLE_ITEM,
  549. Shuffle.ClassName.FILTERED
  550. ].join(' '));
  551. $items.css( this.itemCss ).data('point', new Point()).data('scale', DEFAULT_SCALE);
  552. };
  553. /**
  554. * Updates the filtered item count.
  555. * @private
  556. */
  557. Shuffle.prototype._updateItemCount = function() {
  558. this.visibleItems = this._getFilteredItems().length;
  559. };
  560. /**
  561. * Sets css transform transition on a an element.
  562. * @param {Element} element Element to set transition on.
  563. * @private
  564. */
  565. Shuffle.prototype._setTransition = function( element ) {
  566. element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' +
  567. this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
  568. };
  569. /**
  570. * Sets css transform transition on a group of elements.
  571. * @param {ArrayLike.<Element>} $items Elements to set transitions on.
  572. * @private
  573. */
  574. Shuffle.prototype._setTransitions = function( $items ) {
  575. $items = $items || this.$items;
  576. each($items, function( el ) {
  577. this._setTransition( el );
  578. }, this);
  579. };
  580. /**
  581. * Sets a transition delay on a collection of elements, making each delay
  582. * greater than the last.
  583. * @param {ArrayLike.<Element>} $collection Array to iterate over.
  584. */
  585. Shuffle.prototype._setSequentialDelay = function( $collection ) {
  586. if ( !this.supported ) {
  587. return;
  588. }
  589. // $collection can be an array of dom elements or jquery object
  590. each($collection, function( el, i ) {
  591. // This works because the transition-property: transform, opacity;
  592. el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * this.sequentialFadeDelay) + 'ms';
  593. }, this);
  594. };
  595. Shuffle.prototype._getItems = function() {
  596. return this.$el.children( this.itemSelector );
  597. };
  598. Shuffle.prototype._getFilteredItems = function() {
  599. return this.$items.filter('.' + Shuffle.ClassName.FILTERED);
  600. };
  601. Shuffle.prototype._getConcealedItems = function() {
  602. return this.$items.filter('.' + Shuffle.ClassName.CONCEALED);
  603. };
  604. /**
  605. * Returns the column size, based on column width and sizer options.
  606. * @param {number} containerWidth Size of the parent container.
  607. * @param {number} gutterSize Size of the gutters.
  608. * @return {number}
  609. * @private
  610. */
  611. Shuffle.prototype._getColumnSize = function( containerWidth, gutterSize ) {
  612. var size;
  613. // If the columnWidth property is a function, then the grid is fluid
  614. if ( $.isFunction( this.columnWidth ) ) {
  615. size = this.columnWidth(containerWidth);
  616. // columnWidth option isn't a function, are they using a sizing element?
  617. } else if ( this.useSizer ) {
  618. size = Shuffle._getOuterWidth(this.sizer);
  619. // if not, how about the explicitly set option?
  620. } else if ( this.columnWidth ) {
  621. size = this.columnWidth;
  622. // or use the size of the first item
  623. } else if ( this.$items.length > 0 ) {
  624. size = Shuffle._getOuterWidth(this.$items[0], true);
  625. // if there's no items, use size of container
  626. } else {
  627. size = containerWidth;
  628. }
  629. // Don't let them set a column width of zero.
  630. if ( size === 0 ) {
  631. size = containerWidth;
  632. }
  633. return size + gutterSize;
  634. };
  635. /**
  636. * Returns the gutter size, based on gutter width and sizer options.
  637. * @param {number} containerWidth Size of the parent container.
  638. * @return {number}
  639. * @private
  640. */
  641. Shuffle.prototype._getGutterSize = function( containerWidth ) {
  642. var size;
  643. if ( $.isFunction( this.gutterWidth ) ) {
  644. size = this.gutterWidth(containerWidth);
  645. } else if ( this.useSizer ) {
  646. size = Shuffle._getNumberStyle(this.sizer, 'marginLeft');
  647. } else {
  648. size = this.gutterWidth;
  649. }
  650. return size;
  651. };
  652. /**
  653. * Calculate the number of columns to be used. Gets css if using sizer element.
  654. * @param {number} [theContainerWidth] Optionally specify a container width if it's already available.
  655. */
  656. Shuffle.prototype._setColumns = function( theContainerWidth ) {
  657. var containerWidth = theContainerWidth || Shuffle._getOuterWidth( this.element );
  658. var gutter = this._getGutterSize( containerWidth );
  659. var columnWidth = this._getColumnSize( containerWidth, gutter );
  660. var calculatedColumns = (containerWidth + gutter) / columnWidth;
  661. // Widths given from getStyles are not precise enough...
  662. if ( Math.abs(Math.round(calculatedColumns) - calculatedColumns) < this.columnThreshold ) {
  663. // e.g. calculatedColumns = 11.998876
  664. calculatedColumns = Math.round( calculatedColumns );
  665. }
  666. this.cols = Math.max( Math.floor(calculatedColumns), 1 );
  667. this.containerWidth = containerWidth;
  668. this.colWidth = columnWidth;
  669. };
  670. /**
  671. * Adjust the height of the grid
  672. */
  673. Shuffle.prototype._setContainerSize = function() {
  674. this.$el.css( 'height', this._getContainerSize() );
  675. };
  676. /**
  677. * Based on the column heights, it returns the biggest one.
  678. * @return {number}
  679. * @private
  680. */
  681. Shuffle.prototype._getContainerSize = function() {
  682. return arrayMax( this.positions );
  683. };
  684. /**
  685. * Fire events with .shuffle namespace
  686. */
  687. Shuffle.prototype._fire = function( name, args ) {
  688. this.$el.trigger( name + '.' + SHUFFLE, args && args.length ? args : [ this ] );
  689. };
  690. /**
  691. * Zeros out the y columns array, which is used to determine item placement.
  692. * @private
  693. */
  694. Shuffle.prototype._resetCols = function() {
  695. var i = this.cols;
  696. this.positions = [];
  697. while (i--) {
  698. this.positions.push( 0 );
  699. }
  700. };
  701. /**
  702. * Loops through each item that should be shown and calculates the x, y position.
  703. * @param {Array.<Element>} items Array of items that will be shown/layed out in order in their array.
  704. * Because jQuery collection are always ordered in DOM order, we can't pass a jq collection.
  705. * @param {boolean} [isOnlyPosition=false] If true this will position the items with zero opacity.
  706. */
  707. Shuffle.prototype._layout = function( items, isOnlyPosition ) {
  708. each(items, function( item ) {
  709. this._layoutItem( item, !!isOnlyPosition );
  710. }, this);
  711. // `_layout` always happens after `_shrink`, so it's safe to process the style
  712. // queue here with styles from the shrink method.
  713. this._processStyleQueue();
  714. // Adjust the height of the container.
  715. this._setContainerSize();
  716. };
  717. /**
  718. * Calculates the position of the item and pushes it onto the style queue.
  719. * @param {Element} item Element which is being positioned.
  720. * @param {boolean} isOnlyPosition Whether to position the item, but with zero
  721. * opacity so that it can fade in later.
  722. * @private
  723. */
  724. Shuffle.prototype._layoutItem = function( item, isOnlyPosition ) {
  725. var $item = $(item);
  726. var itemData = $item.data();
  727. var currPos = itemData.point;
  728. var currScale = itemData.scale;
  729. var itemSize = {
  730. width: Shuffle._getOuterWidth( item, true ),
  731. height: Shuffle._getOuterHeight( item, true )
  732. };
  733. var pos = this._getItemPosition( itemSize );
  734. // If the item will not change its position, do not add it to the render
  735. // queue. Transitions don't fire when setting a property to the same value.
  736. if ( Point.equals(currPos, pos) && currScale === DEFAULT_SCALE ) {
  737. return;
  738. }
  739. // Save data for shrink
  740. itemData.point = pos;
  741. itemData.scale = DEFAULT_SCALE;
  742. this.styleQueue.push({
  743. $item: $item,
  744. point: pos,
  745. scale: DEFAULT_SCALE,
  746. opacity: isOnlyPosition ? 0 : 1,
  747. // Set styles immediately if there is no transition speed.
  748. skipTransition: isOnlyPosition || this.speed === 0,
  749. callfront: function() {
  750. if ( !isOnlyPosition ) {
  751. $item.css( 'visibility', 'visible' );
  752. }
  753. },
  754. callback: function() {
  755. if ( isOnlyPosition ) {
  756. $item.css( 'visibility', 'hidden' );
  757. }
  758. }
  759. });
  760. };
  761. /**
  762. * Determine the location of the next item, based on its size.
  763. * @param {{width: number, height: number}} itemSize Object with width and height.
  764. * @return {Point}
  765. * @private
  766. */
  767. Shuffle.prototype._getItemPosition = function( itemSize ) {
  768. var columnSpan = this._getColumnSpan( itemSize.width, this.colWidth, this.cols );
  769. var setY = this._getColumnSet( columnSpan, this.cols );
  770. // Finds the index of the smallest number in the set.
  771. var shortColumnIndex = this._getShortColumn( setY, this.buffer );
  772. // Position the item
  773. var point = new Point(
  774. Math.round( this.colWidth * shortColumnIndex ),
  775. Math.round( setY[shortColumnIndex] ));
  776. // Update the columns array with the new values for each column.
  777. // e.g. before the update the columns could be [250, 0, 0, 0] for an item
  778. // which spans 2 columns. After it would be [250, itemHeight, itemHeight, 0].
  779. var setHeight = setY[shortColumnIndex] + itemSize.height;
  780. var setSpan = this.cols + 1 - setY.length;
  781. for ( var i = 0; i < setSpan; i++ ) {
  782. this.positions[ shortColumnIndex + i ] = setHeight;
  783. }
  784. return point;
  785. };
  786. /**
  787. * Determine the number of columns an items spans.
  788. * @param {number} itemWidth Width of the item.
  789. * @param {number} columnWidth Width of the column (includes gutter).
  790. * @param {number} columns Total number of columns
  791. * @return {number}
  792. * @private
  793. */
  794. Shuffle.prototype._getColumnSpan = function( itemWidth, columnWidth, columns ) {
  795. var columnSpan = itemWidth / columnWidth;
  796. // If the difference between the rounded column span number and the
  797. // calculated column span number is really small, round the number to
  798. // make it fit.
  799. if ( Math.abs(Math.round( columnSpan ) - columnSpan ) < this.columnThreshold ) {
  800. // e.g. columnSpan = 4.0089945390298745
  801. columnSpan = Math.round( columnSpan );
  802. }
  803. // Ensure the column span is not more than the amount of columns in the whole layout.
  804. return Math.min( Math.ceil( columnSpan ), columns );
  805. };
  806. /**
  807. * Retrieves the column set to use for placement.
  808. * @param {number} columnSpan The number of columns this current item spans.
  809. * @param {number} columns The total columns in the grid.
  810. * @return {Array.<number>} An array of numbers represeting the column set.
  811. * @private
  812. */
  813. Shuffle.prototype._getColumnSet = function( columnSpan, columns ) {
  814. // The item spans only one column.
  815. if ( columnSpan === 1 ) {
  816. return this.positions;
  817. // The item spans more than one column, figure out how many different
  818. // places it could fit horizontally.
  819. // The group count is the number of places within the positions this block
  820. // could fit, ignoring the current positions of items.
  821. // Imagine a 2 column brick as the second item in a 4 column grid with
  822. // 10px height each. Find the places it would fit:
  823. // [10, 0, 0, 0]
  824. // | | |
  825. // * * *
  826. //
  827. // Then take the places which fit and get the bigger of the two:
  828. // max([10, 0]), max([0, 0]), max([0, 0]) = [10, 0, 0]
  829. //
  830. // Next, find the first smallest number (the short column).
  831. // [10, 0, 0]
  832. // |
  833. // *
  834. //
  835. // And that's where it should be placed!
  836. } else {
  837. var groupCount = columns + 1 - columnSpan;
  838. var groupY = [];
  839. // For how many possible positions for this item there are.
  840. for ( var i = 0; i < groupCount; i++ ) {
  841. // Find the bigger value for each place it could fit.
  842. groupY[i] = arrayMax( this.positions.slice( i, i + columnSpan ) );
  843. }
  844. return groupY;
  845. }
  846. };
  847. /**
  848. * Find index of short column, the first from the left where this item will go.
  849. *
  850. * @param {Array.<number>} positions The array to search for the smallest number.
  851. * @param {number} buffer Optional buffer which is very useful when the height
  852. * is a percentage of the width.
  853. * @return {number} Index of the short column.
  854. * @private
  855. */
  856. Shuffle.prototype._getShortColumn = function( positions, buffer ) {
  857. var minPosition = arrayMin( positions );
  858. for (var i = 0, len = positions.length; i < len; i++) {
  859. if ( positions[i] >= minPosition - buffer && positions[i] <= minPosition + buffer ) {
  860. return i;
  861. }
  862. }
  863. return 0;
  864. };
  865. /**
  866. * Hides the elements that don't match our filter.
  867. * @param {jQuery} $collection jQuery collection to shrink.
  868. * @private
  869. */
  870. Shuffle.prototype._shrink = function( $collection ) {
  871. var $concealed = $collection || this._getConcealedItems();
  872. each($concealed, function( item ) {
  873. var $item = $(item);
  874. var itemData = $item.data();
  875. // Continuing would add a transitionend event listener to the element, but
  876. // that listener would not execute because the transform and opacity would
  877. // stay the same.
  878. if ( itemData.scale === CONCEALED_SCALE ) {
  879. return;
  880. }
  881. itemData.scale = CONCEALED_SCALE;
  882. this.styleQueue.push({
  883. $item: $item,
  884. point: itemData.point,
  885. scale : CONCEALED_SCALE,
  886. opacity: 0,
  887. callback: function() {
  888. $item.css( 'visibility', 'hidden' );
  889. }
  890. });
  891. }, this);
  892. };
  893. /**
  894. * Resize handler.
  895. * @private
  896. */
  897. Shuffle.prototype._onResize = function() {
  898. // If shuffle is disabled, destroyed, don't do anything
  899. if ( !this.enabled || this.destroyed ) {
  900. return;
  901. }
  902. // Will need to check height in the future if it's layed out horizontaly
  903. var containerWidth = Shuffle._getOuterWidth( this.element );
  904. // containerWidth hasn't changed, don't do anything
  905. if ( containerWidth === this.containerWidth ) {
  906. return;
  907. }
  908. this.update();
  909. };
  910. /**
  911. * Returns styles for either jQuery animate or transition.
  912. * @param {Object} opts Transition options.
  913. * @return {!Object} Transforms for transitions, left/top for animate.
  914. * @private
  915. */
  916. Shuffle.prototype._getStylesForTransition = function( opts ) {
  917. var styles = {
  918. opacity: opts.opacity
  919. };
  920. if ( this.supported ) {
  921. styles[ TRANSFORM ] = Shuffle._getItemTransformString( opts.point, opts.scale );
  922. } else {
  923. styles.left = opts.point.x;
  924. styles.top = opts.point.y;
  925. }
  926. return styles;
  927. };
  928. /**
  929. * Transitions an item in the grid
  930. *
  931. * @param {Object} opts options.
  932. * @param {jQuery} opts.$item jQuery object representing the current item.
  933. * @param {Point} opts.point A point object with the x and y coordinates.
  934. * @param {number} opts.scale Amount to scale the item.
  935. * @param {number} opts.opacity Opacity of the item.
  936. * @param {Function} opts.callback Complete function for the animation.
  937. * @param {Function} opts.callfront Function to call before transitioning.
  938. * @private
  939. */
  940. Shuffle.prototype._transition = function( opts ) {
  941. var styles = this._getStylesForTransition( opts );
  942. this._startItemAnimation( opts.$item, styles, opts.callfront || $.noop, opts.callback || $.noop );
  943. };
  944. Shuffle.prototype._startItemAnimation = function( $item, styles, callfront, callback ) {
  945. var _this = this;
  946. // Transition end handler removes its listener.
  947. function handleTransitionEnd( evt ) {
  948. // Make sure this event handler has not bubbled up from a child.
  949. if ( evt.target === evt.currentTarget ) {
  950. $( evt.target ).off( TRANSITIONEND, handleTransitionEnd );
  951. _this._removeTransitionReference(reference);
  952. callback();
  953. }
  954. }
  955. var reference = {
  956. $element: $item,
  957. handler: handleTransitionEnd
  958. };
  959. callfront();
  960. // Transitions are not set until shuffle has loaded to avoid the initial transition.
  961. if ( !this.initialized ) {
  962. $item.css( styles );
  963. callback();
  964. return;
  965. }
  966. // Use CSS Transforms if we have them
  967. if ( this.supported ) {
  968. $item.css( styles );
  969. $item.on( TRANSITIONEND, handleTransitionEnd );
  970. this._transitions.push(reference);
  971. // Use jQuery to animate left/top
  972. } else {
  973. // Save the deferred object which jQuery returns.
  974. var anim = $item.stop( true ).animate( styles, this.speed, 'swing', callback );
  975. // Push the animation to the list of pending animations.
  976. this._animations.push( anim.promise() );
  977. }
  978. };
  979. /**
  980. * Execute the styles gathered in the style queue. This applies styles to elements,
  981. * triggering transitions.
  982. * @param {boolean} noLayout Whether to trigger a layout event.
  983. * @private
  984. */
  985. Shuffle.prototype._processStyleQueue = function( noLayout ) {
  986. if ( this.isTransitioning ) {
  987. this._cancelMovement();
  988. }
  989. var $transitions = $();
  990. // Iterate over the queue and keep track of ones that use transitions.
  991. each(this.styleQueue, function( transitionObj ) {
  992. if ( transitionObj.skipTransition ) {
  993. this._styleImmediately( transitionObj );
  994. } else {
  995. $transitions = $transitions.add( transitionObj.$item );
  996. this._transition( transitionObj );
  997. }
  998. }, this);
  999. if ( $transitions.length > 0 && this.initialized && this.speed > 0 ) {
  1000. // Set flag that shuffle is currently in motion.
  1001. this.isTransitioning = true;
  1002. if ( this.supported ) {
  1003. this._whenCollectionDone( $transitions, TRANSITIONEND, this._movementFinished );
  1004. // The _transition function appends a promise to the animations array.
  1005. // When they're all complete, do things.
  1006. } else {
  1007. this._whenAnimationsDone( this._movementFinished );
  1008. }
  1009. // A call to layout happened, but none of the newly filtered items will
  1010. // change position. Asynchronously fire the callback here.
  1011. } else if ( !noLayout ) {
  1012. defer( this._layoutEnd, this );
  1013. }
  1014. // Remove everything in the style queue
  1015. this.styleQueue.length = 0;
  1016. };
  1017. Shuffle.prototype._cancelMovement = function() {
  1018. if (this.supported) {
  1019. // Remove the transition end event for each listener.
  1020. each(this._transitions, function( transition ) {
  1021. transition.$element.off( TRANSITIONEND, transition.handler );
  1022. });
  1023. } else {
  1024. // Even when `stop` is called on the jQuery animation, its promise will
  1025. // still be resolved. Since it cannot be determine from within that callback
  1026. // whether the animation was stopped or not, a flag is set here to distinguish
  1027. // between the two states.
  1028. this._isMovementCanceled = true;
  1029. this.$items.stop(true);
  1030. this._isMovementCanceled = false;
  1031. }
  1032. // Reset the array.
  1033. this._transitions.length = 0;
  1034. // Show it's no longer active.
  1035. this.isTransitioning = false;
  1036. };
  1037. Shuffle.prototype._removeTransitionReference = function(ref) {
  1038. var indexInArray = $.inArray(ref, this._transitions);
  1039. if (indexInArray > -1) {
  1040. this._transitions.splice(indexInArray, 1);
  1041. }
  1042. };
  1043. /**
  1044. * Apply styles without a transition.
  1045. * @param {Object} opts Transitions options object.
  1046. * @private
  1047. */
  1048. Shuffle.prototype._styleImmediately = function( opts ) {
  1049. Shuffle._skipTransition(opts.$item[0], function() {
  1050. opts.$item.css( this._getStylesForTransition( opts ) );
  1051. }, this);
  1052. };
  1053. Shuffle.prototype._movementFinished = function() {
  1054. this.isTransitioning = false;
  1055. this._layoutEnd();
  1056. };
  1057. Shuffle.prototype._layoutEnd = function() {
  1058. this._fire( Shuffle.EventType.LAYOUT );
  1059. };
  1060. Shuffle.prototype._addItems = function( $newItems, addToEnd, isSequential ) {
  1061. // Add classes and set initial positions.
  1062. this._initItems( $newItems );
  1063. // Add transition to each item.
  1064. this._setTransitions( $newItems );
  1065. // Update the list of
  1066. this.$items = this._getItems();
  1067. // Shrink all items (without transitions).
  1068. this._shrink( $newItems );
  1069. each(this.styleQueue, function( transitionObj ) {
  1070. transitionObj.skipTransition = true;
  1071. });
  1072. // Apply shrink positions, but do not cause a layout event.
  1073. this._processStyleQueue( true );
  1074. if ( addToEnd ) {
  1075. this._addItemsToEnd( $newItems, isSequential );
  1076. } else {
  1077. this.shuffle( this.lastFilter );
  1078. }
  1079. };
  1080. Shuffle.prototype._addItemsToEnd = function( $newItems, isSequential ) {
  1081. // Get ones that passed the current filter
  1082. var $passed = this._filter( null, $newItems );
  1083. var passed = $passed.get();
  1084. // How many filtered elements?
  1085. this._updateItemCount();
  1086. this._layout( passed, true );
  1087. if ( isSequential && this.supported ) {
  1088. this._setSequentialDelay( passed );
  1089. }
  1090. this._revealAppended( passed );
  1091. };
  1092. /**
  1093. * Triggers appended elements to fade in.
  1094. * @param {ArrayLike.<Element>} $newFilteredItems Collection of elements.
  1095. * @private
  1096. */
  1097. Shuffle.prototype._revealAppended = function( newFilteredItems ) {
  1098. defer(function() {
  1099. each(newFilteredItems, function( el ) {
  1100. var $item = $( el );
  1101. this._transition({
  1102. $item: $item,
  1103. opacity: 1,
  1104. point: $item.data('point'),
  1105. scale: DEFAULT_SCALE
  1106. });
  1107. }, this);
  1108. this._whenCollectionDone($(newFilteredItems), TRANSITIONEND, function() {
  1109. $(newFilteredItems).css( TRANSITION_DELAY, '0ms' );
  1110. this._movementFinished();
  1111. });
  1112. }, this, this.revealAppendedDelay);
  1113. };
  1114. /**
  1115. * Execute a function when an event has been triggered for every item in a collection.
  1116. * @param {jQuery} $collection Collection of elements.
  1117. * @param {string} eventName Event to listen for.
  1118. * @param {Function} callback Callback to execute when they're done.
  1119. * @private
  1120. */
  1121. Shuffle.prototype._whenCollectionDone = function( $collection, eventName, callback ) {
  1122. var done = 0;
  1123. var items = $collection.length;
  1124. var self = this;
  1125. function handleEventName( evt ) {
  1126. if ( evt.target === evt.currentTarget ) {
  1127. $( evt.target ).off( eventName, handleEventName );
  1128. done++;
  1129. // Execute callback if all items have emitted the correct event.
  1130. if ( done === items ) {
  1131. self._removeTransitionReference(reference);
  1132. callback.call( self );
  1133. }
  1134. }
  1135. }
  1136. var reference = {
  1137. $element: $collection,
  1138. handler: handleEventName
  1139. };
  1140. // Bind the event to all items.
  1141. $collection.on( eventName, handleEventName );
  1142. // Keep track of transitionend events so they can be removed.
  1143. this._transitions.push(reference);
  1144. };
  1145. /**
  1146. * Execute a callback after jQuery `animate` for a collection has finished.
  1147. * @param {Function} callback Callback to execute when they're done.
  1148. * @private
  1149. */
  1150. Shuffle.prototype._whenAnimationsDone = function( callback ) {
  1151. $.when.apply( null, this._animations ).always( $.proxy( function() {
  1152. this._animations.length = 0;
  1153. if (!this._isMovementCanceled) {
  1154. callback.call( this );
  1155. }
  1156. }, this ));
  1157. };
  1158. /**
  1159. * Public Methods
  1160. */
  1161. /**
  1162. * The magic. This is what makes the plugin 'shuffle'
  1163. * @param {string|Function} [category] Category to filter by. Can be a function
  1164. * @param {Object} [sortObj] A sort object which can sort the filtered set
  1165. */
  1166. Shuffle.prototype.shuffle = function( category, sortObj ) {
  1167. if ( !this.enabled ) {
  1168. return;
  1169. }
  1170. if ( !category ) {
  1171. category = ALL_ITEMS;
  1172. }
  1173. this._filter( category );
  1174. // How many filtered elements?
  1175. this._updateItemCount();
  1176. // Shrink each concealed item
  1177. this._shrink();
  1178. // Update transforms on .filtered elements so they will animate to their new positions
  1179. this.sort( sortObj );
  1180. };
  1181. /**
  1182. * Gets the .filtered elements, sorts them, and passes them to layout.
  1183. * @param {Object} opts the options object for the sorted plugin
  1184. */
  1185. Shuffle.prototype.sort = function( opts ) {
  1186. if ( this.enabled ) {
  1187. this._resetCols();
  1188. var sortOptions = opts || this.lastSort;
  1189. var items = this._getFilteredItems().sorted( sortOptions );
  1190. this._layout( items );
  1191. this.lastSort = sortOptions;
  1192. }
  1193. };
  1194. /**
  1195. * Reposition everything.
  1196. * @param {boolean} isOnlyLayout If true, column and gutter widths won't be
  1197. * recalculated.
  1198. */
  1199. Shuffle.prototype.update = function( isOnlyLayout ) {
  1200. if ( this.enabled ) {
  1201. if ( !isOnlyLayout ) {
  1202. // Get updated colCount
  1203. this._setColumns();
  1204. }
  1205. // Layout items
  1206. this.sort();
  1207. }
  1208. };
  1209. /**
  1210. * Use this instead of `update()` if you don't need the columns and gutters updated
  1211. * Maybe an image inside `shuffle` loaded (and now has a height), which means calculations
  1212. * could be off.
  1213. */
  1214. Shuffle.prototype.layout = function() {
  1215. this.update( true );
  1216. };
  1217. /**
  1218. * New items have been appended to shuffle. Fade them in sequentially
  1219. * @param {jQuery} $newItems jQuery collection of new items
  1220. * @param {boolean} [addToEnd=false] If true, new items will be added to the end / bottom
  1221. * of the items. If not true, items will be mixed in with the current sort order.
  1222. * @param {boolean} [isSequential=true] If false, new items won't sequentially fade in
  1223. */
  1224. Shuffle.prototype.appended = function( $newItems, addToEnd, isSequential ) {
  1225. this._addItems( $newItems, addToEnd === true, isSequential !== false );
  1226. };
  1227. /**
  1228. * Disables shuffle from updating dimensions and layout on resize
  1229. */
  1230. Shuffle.prototype.disable = function() {
  1231. this.enabled = false;
  1232. };
  1233. /**
  1234. * Enables shuffle again
  1235. * @param {boolean} [isUpdateLayout=true] if undefined, shuffle will update columns and gutters
  1236. */
  1237. Shuffle.prototype.enable = function( isUpdateLayout ) {
  1238. this.enabled = true;
  1239. if ( isUpdateLayout !== false ) {
  1240. this.update();
  1241. }
  1242. };
  1243. /**
  1244. * Remove 1 or more shuffle items
  1245. * @param {jQuery} $collection A jQuery object containing one or more element in shuffle
  1246. * @return {Shuffle} The shuffle object
  1247. */
  1248. Shuffle.prototype.remove = function( $collection ) {
  1249. // If this isn't a jquery object, exit
  1250. if ( !$collection.length || !$collection.jquery ) {
  1251. return;
  1252. }
  1253. function handleRemoved() {
  1254. // Remove the collection in the callback
  1255. $collection.remove();
  1256. // Update things now that elements have been removed.
  1257. this.$items = this._getItems();
  1258. this._updateItemCount();
  1259. this._fire( Shuffle.EventType.REMOVED, [ $collection, this ] );
  1260. // Let it get garbage collected
  1261. $collection = null;
  1262. }
  1263. // Hide collection first.
  1264. this._toggleFilterClasses( $(), $collection );
  1265. this._shrink( $collection );
  1266. this.sort();
  1267. this.$el.one( Shuffle.EventType.LAYOUT + '.' + SHUFFLE, $.proxy( handleRemoved, this ) );
  1268. };
  1269. /**
  1270. * Destroys shuffle, removes events, styles, and classes
  1271. */
  1272. Shuffle.prototype.destroy = function() {
  1273. // If there is more than one shuffle instance on the page,
  1274. // removing the resize handler from the window would remove them
  1275. // all. This is why a unique value is needed.
  1276. $window.off('.' + this.unique);
  1277. // Reset container styles
  1278. this.$el
  1279. .removeClass( SHUFFLE )
  1280. .removeAttr('style')
  1281. .removeData( SHUFFLE );
  1282. // Reset individual item styles
  1283. this.$items
  1284. .removeAttr('style')
  1285. .removeData('point')
  1286. .removeData('scale')
  1287. .removeClass([
  1288. Shuffle.ClassName.CONCEALED,
  1289. Shuffle.ClassName.FILTERED,
  1290. Shuffle.ClassName.SHUFFLE_ITEM
  1291. ].join(' '));
  1292. // Null DOM references
  1293. this.$items = null;
  1294. this.$el = null;
  1295. this.sizer = null;
  1296. this.element = null;
  1297. this._transitions = null;
  1298. // Set a flag so if a debounced resize has been triggered,
  1299. // it can first check if it is actually destroyed and not doing anything
  1300. this.destroyed = true;
  1301. };
  1302. // Plugin definition
  1303. $.fn.shuffle = function( opts ) {
  1304. var args = Array.prototype.slice.call( arguments, 1 );
  1305. return this.each(function() {
  1306. var $this = $( this );
  1307. var shuffle = $this.data( SHUFFLE );
  1308. // If we don't have a stored shuffle, make a new one and save it
  1309. if ( !shuffle ) {
  1310. shuffle = new Shuffle( this, opts );
  1311. $this.data( SHUFFLE, shuffle );
  1312. } else if ( typeof opts === 'string' && shuffle[ opts ] ) {
  1313. shuffle[ opts ].apply( shuffle, args );
  1314. }
  1315. });
  1316. };
  1317. // http://stackoverflow.com/a/962890/373422
  1318. function randomize( array ) {
  1319. var tmp, current;
  1320. var top = array.length;
  1321. if ( !top ) {
  1322. return array;
  1323. }
  1324. while ( --top ) {
  1325. current = Math.floor( Math.random() * (top + 1) );
  1326. tmp = array[ current ];
  1327. array[ current ] = array[ top ];
  1328. array[ top ] = tmp;
  1329. }
  1330. return array;
  1331. }
  1332. // You can return `undefined` from the `by` function to revert to DOM order
  1333. // This plugin does NOT return a jQuery object. It returns a plain array because
  1334. // jQuery sorts everything in DOM order.
  1335. $.fn.sorted = function(options) {
  1336. var opts = $.extend({}, $.fn.sorted.defaults, options);
  1337. var arr = this.get();
  1338. var revert = false;
  1339. if ( !arr.length ) {
  1340. return [];
  1341. }
  1342. if ( opts.randomize ) {
  1343. return randomize( arr );
  1344. }
  1345. // Sort the elements by the opts.by function.
  1346. // If we don't have opts.by, default to DOM order
  1347. if ( $.isFunction( opts.by ) ) {
  1348. arr.sort(function(a, b) {
  1349. // Exit early if we already know we want to revert
  1350. if ( revert ) {
  1351. return 0;
  1352. }
  1353. var valA = opts.by($(a));
  1354. var valB = opts.by($(b));
  1355. // If both values are undefined, use the DOM order
  1356. if ( valA === undefined && valB === undefined ) {
  1357. revert = true;
  1358. return 0;
  1359. }
  1360. if ( valA < valB || valA === 'sortFirst' || valB === 'sortLast' ) {
  1361. return -1;
  1362. }
  1363. if ( valA > valB || valA === 'sortLast' || valB === 'sortFirst' ) {
  1364. return 1;
  1365. }
  1366. return 0;
  1367. });
  1368. }
  1369. // Revert to the original array if necessary
  1370. if ( revert ) {
  1371. return this.get();
  1372. }
  1373. if ( opts.reverse ) {
  1374. arr.reverse();
  1375. }
  1376. return arr;
  1377. };
  1378. $.fn.sorted.defaults = {
  1379. reverse: false, // Use array.reverse() to reverse the results
  1380. by: null, // Sorting function
  1381. randomize: false // If true, this will skip the sorting and return a randomized order in the array
  1382. };
  1383. return Shuffle;
  1384. });