Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

masonry.pkgd.js 62KB

il y a 6 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499
  1. /*!
  2. * Masonry PACKAGED v4.2.0
  3. * Cascading grid layout library
  4. * http://masonry.desandro.com
  5. * MIT License
  6. * by David DeSandro
  7. */
  8. /**
  9. * Bridget makes jQuery widgets
  10. * v2.0.1
  11. * MIT license
  12. */
  13. /* jshint browser: true, strict: true, undef: true, unused: true */
  14. ( function( window, factory ) {
  15. // universal module definition
  16. /*jshint strict: false */ /* globals define, module, require */
  17. if ( typeof define == 'function' && define.amd ) {
  18. // AMD
  19. define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
  20. return factory( window, jQuery );
  21. });
  22. } else if ( typeof module == 'object' && module.exports ) {
  23. // CommonJS
  24. module.exports = factory(
  25. window,
  26. require('jquery')
  27. );
  28. } else {
  29. // browser global
  30. window.jQueryBridget = factory(
  31. window,
  32. window.jQuery
  33. );
  34. }
  35. }( window, function factory( window, jQuery ) {
  36. 'use strict';
  37. // ----- utils ----- //
  38. var arraySlice = Array.prototype.slice;
  39. // helper function for logging errors
  40. // $.error breaks jQuery chaining
  41. var console = window.console;
  42. var logError = typeof console == 'undefined' ? function() {} :
  43. function( message ) {
  44. console.error( message );
  45. };
  46. // ----- jQueryBridget ----- //
  47. function jQueryBridget( namespace, PluginClass, $ ) {
  48. $ = $ || jQuery || window.jQuery;
  49. if ( !$ ) {
  50. return;
  51. }
  52. // add option method -> $().plugin('option', {...})
  53. if ( !PluginClass.prototype.option ) {
  54. // option setter
  55. PluginClass.prototype.option = function( opts ) {
  56. // bail out if not an object
  57. if ( !$.isPlainObject( opts ) ){
  58. return;
  59. }
  60. this.options = $.extend( true, this.options, opts );
  61. };
  62. }
  63. // make jQuery plugin
  64. $.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
  65. if ( typeof arg0 == 'string' ) {
  66. // method call $().plugin( 'methodName', { options } )
  67. // shift arguments by 1
  68. var args = arraySlice.call( arguments, 1 );
  69. return methodCall( this, arg0, args );
  70. }
  71. // just $().plugin({ options })
  72. plainCall( this, arg0 );
  73. return this;
  74. };
  75. // $().plugin('methodName')
  76. function methodCall( $elems, methodName, args ) {
  77. var returnValue;
  78. var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
  79. $elems.each( function( i, elem ) {
  80. // get instance
  81. var instance = $.data( elem, namespace );
  82. if ( !instance ) {
  83. logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
  84. pluginMethodStr );
  85. return;
  86. }
  87. var method = instance[ methodName ];
  88. if ( !method || methodName.charAt(0) == '_' ) {
  89. logError( pluginMethodStr + ' is not a valid method' );
  90. return;
  91. }
  92. // apply method, get return value
  93. var value = method.apply( instance, args );
  94. // set return value if value is returned, use only first value
  95. returnValue = returnValue === undefined ? value : returnValue;
  96. });
  97. return returnValue !== undefined ? returnValue : $elems;
  98. }
  99. function plainCall( $elems, options ) {
  100. $elems.each( function( i, elem ) {
  101. var instance = $.data( elem, namespace );
  102. if ( instance ) {
  103. // set options & init
  104. instance.option( options );
  105. instance._init();
  106. } else {
  107. // initialize new instance
  108. instance = new PluginClass( elem, options );
  109. $.data( elem, namespace, instance );
  110. }
  111. });
  112. }
  113. updateJQuery( $ );
  114. }
  115. // ----- updateJQuery ----- //
  116. // set $.bridget for v1 backwards compatibility
  117. function updateJQuery( $ ) {
  118. if ( !$ || ( $ && $.bridget ) ) {
  119. return;
  120. }
  121. $.bridget = jQueryBridget;
  122. }
  123. updateJQuery( jQuery || window.jQuery );
  124. // ----- ----- //
  125. return jQueryBridget;
  126. }));
  127. /**
  128. * EvEmitter v1.0.3
  129. * Lil' event emitter
  130. * MIT License
  131. */
  132. /* jshint unused: true, undef: true, strict: true */
  133. ( function( global, factory ) {
  134. // universal module definition
  135. /* jshint strict: false */ /* globals define, module, window */
  136. if ( typeof define == 'function' && define.amd ) {
  137. // AMD - RequireJS
  138. define( 'ev-emitter/ev-emitter',factory );
  139. } else if ( typeof module == 'object' && module.exports ) {
  140. // CommonJS - Browserify, Webpack
  141. module.exports = factory();
  142. } else {
  143. // Browser globals
  144. global.EvEmitter = factory();
  145. }
  146. }( typeof window != 'undefined' ? window : this, function() {
  147. function EvEmitter() {}
  148. var proto = EvEmitter.prototype;
  149. proto.on = function( eventName, listener ) {
  150. if ( !eventName || !listener ) {
  151. return;
  152. }
  153. // set events hash
  154. var events = this._events = this._events || {};
  155. // set listeners array
  156. var listeners = events[ eventName ] = events[ eventName ] || [];
  157. // only add once
  158. if ( listeners.indexOf( listener ) == -1 ) {
  159. listeners.push( listener );
  160. }
  161. return this;
  162. };
  163. proto.once = function( eventName, listener ) {
  164. if ( !eventName || !listener ) {
  165. return;
  166. }
  167. // add event
  168. this.on( eventName, listener );
  169. // set once flag
  170. // set onceEvents hash
  171. var onceEvents = this._onceEvents = this._onceEvents || {};
  172. // set onceListeners object
  173. var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
  174. // set flag
  175. onceListeners[ listener ] = true;
  176. return this;
  177. };
  178. proto.off = function( eventName, listener ) {
  179. var listeners = this._events && this._events[ eventName ];
  180. if ( !listeners || !listeners.length ) {
  181. return;
  182. }
  183. var index = listeners.indexOf( listener );
  184. if ( index != -1 ) {
  185. listeners.splice( index, 1 );
  186. }
  187. return this;
  188. };
  189. proto.emitEvent = function( eventName, args ) {
  190. var listeners = this._events && this._events[ eventName ];
  191. if ( !listeners || !listeners.length ) {
  192. return;
  193. }
  194. var i = 0;
  195. var listener = listeners[i];
  196. args = args || [];
  197. // once stuff
  198. var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
  199. while ( listener ) {
  200. var isOnce = onceListeners && onceListeners[ listener ];
  201. if ( isOnce ) {
  202. // remove listener
  203. // remove before trigger to prevent recursion
  204. this.off( eventName, listener );
  205. // unset once flag
  206. delete onceListeners[ listener ];
  207. }
  208. // trigger listener
  209. listener.apply( this, args );
  210. // get next listener
  211. i += isOnce ? 0 : 1;
  212. listener = listeners[i];
  213. }
  214. return this;
  215. };
  216. return EvEmitter;
  217. }));
  218. /*!
  219. * getSize v2.0.2
  220. * measure size of elements
  221. * MIT license
  222. */
  223. /*jshint browser: true, strict: true, undef: true, unused: true */
  224. /*global define: false, module: false, console: false */
  225. ( function( window, factory ) {
  226. 'use strict';
  227. if ( typeof define == 'function' && define.amd ) {
  228. // AMD
  229. define( 'get-size/get-size',[],function() {
  230. return factory();
  231. });
  232. } else if ( typeof module == 'object' && module.exports ) {
  233. // CommonJS
  234. module.exports = factory();
  235. } else {
  236. // browser global
  237. window.getSize = factory();
  238. }
  239. })( window, function factory() {
  240. 'use strict';
  241. // -------------------------- helpers -------------------------- //
  242. // get a number from a string, not a percentage
  243. function getStyleSize( value ) {
  244. var num = parseFloat( value );
  245. // not a percent like '100%', and a number
  246. var isValid = value.indexOf('%') == -1 && !isNaN( num );
  247. return isValid && num;
  248. }
  249. function noop() {}
  250. var logError = typeof console == 'undefined' ? noop :
  251. function( message ) {
  252. console.error( message );
  253. };
  254. // -------------------------- measurements -------------------------- //
  255. var measurements = [
  256. 'paddingLeft',
  257. 'paddingRight',
  258. 'paddingTop',
  259. 'paddingBottom',
  260. 'marginLeft',
  261. 'marginRight',
  262. 'marginTop',
  263. 'marginBottom',
  264. 'borderLeftWidth',
  265. 'borderRightWidth',
  266. 'borderTopWidth',
  267. 'borderBottomWidth'
  268. ];
  269. var measurementsLength = measurements.length;
  270. function getZeroSize() {
  271. var size = {
  272. width: 0,
  273. height: 0,
  274. innerWidth: 0,
  275. innerHeight: 0,
  276. outerWidth: 0,
  277. outerHeight: 0
  278. };
  279. for ( var i=0; i < measurementsLength; i++ ) {
  280. var measurement = measurements[i];
  281. size[ measurement ] = 0;
  282. }
  283. return size;
  284. }
  285. // -------------------------- getStyle -------------------------- //
  286. /**
  287. * getStyle, get style of element, check for Firefox bug
  288. * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
  289. */
  290. function getStyle( elem ) {
  291. var style = getComputedStyle( elem );
  292. if ( !style ) {
  293. logError( 'Style returned ' + style +
  294. '. Are you running this code in a hidden iframe on Firefox? ' +
  295. 'See http://bit.ly/getsizebug1' );
  296. }
  297. return style;
  298. }
  299. // -------------------------- setup -------------------------- //
  300. var isSetup = false;
  301. var isBoxSizeOuter;
  302. /**
  303. * setup
  304. * check isBoxSizerOuter
  305. * do on first getSize() rather than on page load for Firefox bug
  306. */
  307. function setup() {
  308. // setup once
  309. if ( isSetup ) {
  310. return;
  311. }
  312. isSetup = true;
  313. // -------------------------- box sizing -------------------------- //
  314. /**
  315. * WebKit measures the outer-width on style.width on border-box elems
  316. * IE & Firefox<29 measures the inner-width
  317. */
  318. var div = document.createElement('div');
  319. div.style.width = '200px';
  320. div.style.padding = '1px 2px 3px 4px';
  321. div.style.borderStyle = 'solid';
  322. div.style.borderWidth = '1px 2px 3px 4px';
  323. div.style.boxSizing = 'border-box';
  324. var body = document.body || document.documentElement;
  325. body.appendChild( div );
  326. var style = getStyle( div );
  327. getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
  328. body.removeChild( div );
  329. }
  330. // -------------------------- getSize -------------------------- //
  331. function getSize( elem ) {
  332. setup();
  333. // use querySeletor if elem is string
  334. if ( typeof elem == 'string' ) {
  335. elem = document.querySelector( elem );
  336. }
  337. // do not proceed on non-objects
  338. if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
  339. return;
  340. }
  341. var style = getStyle( elem );
  342. // if hidden, everything is 0
  343. if ( style.display == 'none' ) {
  344. return getZeroSize();
  345. }
  346. var size = {};
  347. size.width = elem.offsetWidth;
  348. size.height = elem.offsetHeight;
  349. var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
  350. // get all measurements
  351. for ( var i=0; i < measurementsLength; i++ ) {
  352. var measurement = measurements[i];
  353. var value = style[ measurement ];
  354. var num = parseFloat( value );
  355. // any 'auto', 'medium' value will be 0
  356. size[ measurement ] = !isNaN( num ) ? num : 0;
  357. }
  358. var paddingWidth = size.paddingLeft + size.paddingRight;
  359. var paddingHeight = size.paddingTop + size.paddingBottom;
  360. var marginWidth = size.marginLeft + size.marginRight;
  361. var marginHeight = size.marginTop + size.marginBottom;
  362. var borderWidth = size.borderLeftWidth + size.borderRightWidth;
  363. var borderHeight = size.borderTopWidth + size.borderBottomWidth;
  364. var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
  365. // overwrite width and height if we can get it from style
  366. var styleWidth = getStyleSize( style.width );
  367. if ( styleWidth !== false ) {
  368. size.width = styleWidth +
  369. // add padding and border unless it's already including it
  370. ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
  371. }
  372. var styleHeight = getStyleSize( style.height );
  373. if ( styleHeight !== false ) {
  374. size.height = styleHeight +
  375. // add padding and border unless it's already including it
  376. ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
  377. }
  378. size.innerWidth = size.width - ( paddingWidth + borderWidth );
  379. size.innerHeight = size.height - ( paddingHeight + borderHeight );
  380. size.outerWidth = size.width + marginWidth;
  381. size.outerHeight = size.height + marginHeight;
  382. return size;
  383. }
  384. return getSize;
  385. });
  386. /**
  387. * matchesSelector v2.0.2
  388. * matchesSelector( element, '.selector' )
  389. * MIT license
  390. */
  391. /*jshint browser: true, strict: true, undef: true, unused: true */
  392. ( function( window, factory ) {
  393. /*global define: false, module: false */
  394. 'use strict';
  395. // universal module definition
  396. if ( typeof define == 'function' && define.amd ) {
  397. // AMD
  398. define( 'desandro-matches-selector/matches-selector',factory );
  399. } else if ( typeof module == 'object' && module.exports ) {
  400. // CommonJS
  401. module.exports = factory();
  402. } else {
  403. // browser global
  404. window.matchesSelector = factory();
  405. }
  406. }( window, function factory() {
  407. 'use strict';
  408. var matchesMethod = ( function() {
  409. var ElemProto = window.Element.prototype;
  410. // check for the standard method name first
  411. if ( ElemProto.matches ) {
  412. return 'matches';
  413. }
  414. // check un-prefixed
  415. if ( ElemProto.matchesSelector ) {
  416. return 'matchesSelector';
  417. }
  418. // check vendor prefixes
  419. var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
  420. for ( var i=0; i < prefixes.length; i++ ) {
  421. var prefix = prefixes[i];
  422. var method = prefix + 'MatchesSelector';
  423. if ( ElemProto[ method ] ) {
  424. return method;
  425. }
  426. }
  427. })();
  428. return function matchesSelector( elem, selector ) {
  429. return elem[ matchesMethod ]( selector );
  430. };
  431. }));
  432. /**
  433. * Fizzy UI utils v2.0.4
  434. * MIT license
  435. */
  436. /*jshint browser: true, undef: true, unused: true, strict: true */
  437. ( function( window, factory ) {
  438. // universal module definition
  439. /*jshint strict: false */ /*globals define, module, require */
  440. if ( typeof define == 'function' && define.amd ) {
  441. // AMD
  442. define( 'fizzy-ui-utils/utils',[
  443. 'desandro-matches-selector/matches-selector'
  444. ], function( matchesSelector ) {
  445. return factory( window, matchesSelector );
  446. });
  447. } else if ( typeof module == 'object' && module.exports ) {
  448. // CommonJS
  449. module.exports = factory(
  450. window,
  451. require('desandro-matches-selector')
  452. );
  453. } else {
  454. // browser global
  455. window.fizzyUIUtils = factory(
  456. window,
  457. window.matchesSelector
  458. );
  459. }
  460. }( window, function factory( window, matchesSelector ) {
  461. var utils = {};
  462. // ----- extend ----- //
  463. // extends objects
  464. utils.extend = function( a, b ) {
  465. for ( var prop in b ) {
  466. a[ prop ] = b[ prop ];
  467. }
  468. return a;
  469. };
  470. // ----- modulo ----- //
  471. utils.modulo = function( num, div ) {
  472. return ( ( num % div ) + div ) % div;
  473. };
  474. // ----- makeArray ----- //
  475. // turn element or nodeList into an array
  476. utils.makeArray = function( obj ) {
  477. var ary = [];
  478. if ( Array.isArray( obj ) ) {
  479. // use object if already an array
  480. ary = obj;
  481. } else if ( obj && typeof obj == 'object' &&
  482. typeof obj.length == 'number' ) {
  483. // convert nodeList to array
  484. for ( var i=0; i < obj.length; i++ ) {
  485. ary.push( obj[i] );
  486. }
  487. } else {
  488. // array of single index
  489. ary.push( obj );
  490. }
  491. return ary;
  492. };
  493. // ----- removeFrom ----- //
  494. utils.removeFrom = function( ary, obj ) {
  495. var index = ary.indexOf( obj );
  496. if ( index != -1 ) {
  497. ary.splice( index, 1 );
  498. }
  499. };
  500. // ----- getParent ----- //
  501. utils.getParent = function( elem, selector ) {
  502. while ( elem != document.body ) {
  503. elem = elem.parentNode;
  504. if ( matchesSelector( elem, selector ) ) {
  505. return elem;
  506. }
  507. }
  508. };
  509. // ----- getQueryElement ----- //
  510. // use element as selector string
  511. utils.getQueryElement = function( elem ) {
  512. if ( typeof elem == 'string' ) {
  513. return document.querySelector( elem );
  514. }
  515. return elem;
  516. };
  517. // ----- handleEvent ----- //
  518. // enable .ontype to trigger from .addEventListener( elem, 'type' )
  519. utils.handleEvent = function( event ) {
  520. var method = 'on' + event.type;
  521. if ( this[ method ] ) {
  522. this[ method ]( event );
  523. }
  524. };
  525. // ----- filterFindElements ----- //
  526. utils.filterFindElements = function( elems, selector ) {
  527. // make array of elems
  528. elems = utils.makeArray( elems );
  529. var ffElems = [];
  530. elems.forEach( function( elem ) {
  531. // check that elem is an actual element
  532. if ( !( elem instanceof HTMLElement ) ) {
  533. return;
  534. }
  535. // add elem if no selector
  536. if ( !selector ) {
  537. ffElems.push( elem );
  538. return;
  539. }
  540. // filter & find items if we have a selector
  541. // filter
  542. if ( matchesSelector( elem, selector ) ) {
  543. ffElems.push( elem );
  544. }
  545. // find children
  546. var childElems = elem.querySelectorAll( selector );
  547. // concat childElems to filterFound array
  548. for ( var i=0; i < childElems.length; i++ ) {
  549. ffElems.push( childElems[i] );
  550. }
  551. });
  552. return ffElems;
  553. };
  554. // ----- debounceMethod ----- //
  555. utils.debounceMethod = function( _class, methodName, threshold ) {
  556. // original method
  557. var method = _class.prototype[ methodName ];
  558. var timeoutName = methodName + 'Timeout';
  559. _class.prototype[ methodName ] = function() {
  560. var timeout = this[ timeoutName ];
  561. if ( timeout ) {
  562. clearTimeout( timeout );
  563. }
  564. var args = arguments;
  565. var _this = this;
  566. this[ timeoutName ] = setTimeout( function() {
  567. method.apply( _this, args );
  568. delete _this[ timeoutName ];
  569. }, threshold || 100 );
  570. };
  571. };
  572. // ----- docReady ----- //
  573. utils.docReady = function( callback ) {
  574. var readyState = document.readyState;
  575. if ( readyState == 'complete' || readyState == 'interactive' ) {
  576. // do async to allow for other scripts to run. metafizzy/flickity#441
  577. setTimeout( callback );
  578. } else {
  579. document.addEventListener( 'DOMContentLoaded', callback );
  580. }
  581. };
  582. // ----- htmlInit ----- //
  583. // http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
  584. utils.toDashed = function( str ) {
  585. return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
  586. return $1 + '-' + $2;
  587. }).toLowerCase();
  588. };
  589. var console = window.console;
  590. /**
  591. * allow user to initialize classes via [data-namespace] or .js-namespace class
  592. * htmlInit( Widget, 'widgetName' )
  593. * options are parsed from data-namespace-options
  594. */
  595. utils.htmlInit = function( WidgetClass, namespace ) {
  596. utils.docReady( function() {
  597. var dashedNamespace = utils.toDashed( namespace );
  598. var dataAttr = 'data-' + dashedNamespace;
  599. var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
  600. var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
  601. var elems = utils.makeArray( dataAttrElems )
  602. .concat( utils.makeArray( jsDashElems ) );
  603. var dataOptionsAttr = dataAttr + '-options';
  604. var jQuery = window.jQuery;
  605. elems.forEach( function( elem ) {
  606. var attr = elem.getAttribute( dataAttr ) ||
  607. elem.getAttribute( dataOptionsAttr );
  608. var options;
  609. try {
  610. options = attr && JSON.parse( attr );
  611. } catch ( error ) {
  612. // log error, do not initialize
  613. if ( console ) {
  614. console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
  615. ': ' + error );
  616. }
  617. return;
  618. }
  619. // initialize
  620. var instance = new WidgetClass( elem, options );
  621. // make available via $().data('namespace')
  622. if ( jQuery ) {
  623. jQuery.data( elem, namespace, instance );
  624. }
  625. });
  626. });
  627. };
  628. // ----- ----- //
  629. return utils;
  630. }));
  631. /**
  632. * Outlayer Item
  633. */
  634. ( function( window, factory ) {
  635. // universal module definition
  636. /* jshint strict: false */ /* globals define, module, require */
  637. if ( typeof define == 'function' && define.amd ) {
  638. // AMD - RequireJS
  639. define( 'outlayer/item',[
  640. 'ev-emitter/ev-emitter',
  641. 'get-size/get-size'
  642. ],
  643. factory
  644. );
  645. } else if ( typeof module == 'object' && module.exports ) {
  646. // CommonJS - Browserify, Webpack
  647. module.exports = factory(
  648. require('ev-emitter'),
  649. require('get-size')
  650. );
  651. } else {
  652. // browser global
  653. window.Outlayer = {};
  654. window.Outlayer.Item = factory(
  655. window.EvEmitter,
  656. window.getSize
  657. );
  658. }
  659. }( window, function factory( EvEmitter, getSize ) {
  660. 'use strict';
  661. // ----- helpers ----- //
  662. function isEmptyObj( obj ) {
  663. for ( var prop in obj ) {
  664. return false;
  665. }
  666. prop = null;
  667. return true;
  668. }
  669. // -------------------------- CSS3 support -------------------------- //
  670. var docElemStyle = document.documentElement.style;
  671. var transitionProperty = typeof docElemStyle.transition == 'string' ?
  672. 'transition' : 'WebkitTransition';
  673. var transformProperty = typeof docElemStyle.transform == 'string' ?
  674. 'transform' : 'WebkitTransform';
  675. var transitionEndEvent = {
  676. WebkitTransition: 'webkitTransitionEnd',
  677. transition: 'transitionend'
  678. }[ transitionProperty ];
  679. // cache all vendor properties that could have vendor prefix
  680. var vendorProperties = {
  681. transform: transformProperty,
  682. transition: transitionProperty,
  683. transitionDuration: transitionProperty + 'Duration',
  684. transitionProperty: transitionProperty + 'Property',
  685. transitionDelay: transitionProperty + 'Delay'
  686. };
  687. // -------------------------- Item -------------------------- //
  688. function Item( element, layout ) {
  689. if ( !element ) {
  690. return;
  691. }
  692. this.element = element;
  693. // parent layout class, i.e. Masonry, Isotope, or Packery
  694. this.layout = layout;
  695. this.position = {
  696. x: 0,
  697. y: 0
  698. };
  699. this._create();
  700. }
  701. // inherit EvEmitter
  702. var proto = Item.prototype = Object.create( EvEmitter.prototype );
  703. proto.constructor = Item;
  704. proto._create = function() {
  705. // transition objects
  706. this._transn = {
  707. ingProperties: {},
  708. clean: {},
  709. onEnd: {}
  710. };
  711. this.css({
  712. position: 'absolute'
  713. });
  714. };
  715. // trigger specified handler for event type
  716. proto.handleEvent = function( event ) {
  717. var method = 'on' + event.type;
  718. if ( this[ method ] ) {
  719. this[ method ]( event );
  720. }
  721. };
  722. proto.getSize = function() {
  723. this.size = getSize( this.element );
  724. };
  725. /**
  726. * apply CSS styles to element
  727. * @param {Object} style
  728. */
  729. proto.css = function( style ) {
  730. var elemStyle = this.element.style;
  731. for ( var prop in style ) {
  732. // use vendor property if available
  733. var supportedProp = vendorProperties[ prop ] || prop;
  734. elemStyle[ supportedProp ] = style[ prop ];
  735. }
  736. };
  737. // measure position, and sets it
  738. proto.getPosition = function() {
  739. var style = getComputedStyle( this.element );
  740. var isOriginLeft = this.layout._getOption('originLeft');
  741. var isOriginTop = this.layout._getOption('originTop');
  742. var xValue = style[ isOriginLeft ? 'left' : 'right' ];
  743. var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
  744. // convert percent to pixels
  745. var layoutSize = this.layout.size;
  746. var x = xValue.indexOf('%') != -1 ?
  747. ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
  748. var y = yValue.indexOf('%') != -1 ?
  749. ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
  750. // clean up 'auto' or other non-integer values
  751. x = isNaN( x ) ? 0 : x;
  752. y = isNaN( y ) ? 0 : y;
  753. // remove padding from measurement
  754. x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
  755. y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
  756. this.position.x = x;
  757. this.position.y = y;
  758. };
  759. // set settled position, apply padding
  760. proto.layoutPosition = function() {
  761. var layoutSize = this.layout.size;
  762. var style = {};
  763. var isOriginLeft = this.layout._getOption('originLeft');
  764. var isOriginTop = this.layout._getOption('originTop');
  765. // x
  766. var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
  767. var xProperty = isOriginLeft ? 'left' : 'right';
  768. var xResetProperty = isOriginLeft ? 'right' : 'left';
  769. var x = this.position.x + layoutSize[ xPadding ];
  770. // set in percentage or pixels
  771. style[ xProperty ] = this.getXValue( x );
  772. // reset other property
  773. style[ xResetProperty ] = '';
  774. // y
  775. var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
  776. var yProperty = isOriginTop ? 'top' : 'bottom';
  777. var yResetProperty = isOriginTop ? 'bottom' : 'top';
  778. var y = this.position.y + layoutSize[ yPadding ];
  779. // set in percentage or pixels
  780. style[ yProperty ] = this.getYValue( y );
  781. // reset other property
  782. style[ yResetProperty ] = '';
  783. this.css( style );
  784. this.emitEvent( 'layout', [ this ] );
  785. };
  786. proto.getXValue = function( x ) {
  787. var isHorizontal = this.layout._getOption('horizontal');
  788. return this.layout.options.percentPosition && !isHorizontal ?
  789. ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
  790. };
  791. proto.getYValue = function( y ) {
  792. var isHorizontal = this.layout._getOption('horizontal');
  793. return this.layout.options.percentPosition && isHorizontal ?
  794. ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
  795. };
  796. proto._transitionTo = function( x, y ) {
  797. this.getPosition();
  798. // get current x & y from top/left
  799. var curX = this.position.x;
  800. var curY = this.position.y;
  801. var compareX = parseInt( x, 10 );
  802. var compareY = parseInt( y, 10 );
  803. var didNotMove = compareX === this.position.x && compareY === this.position.y;
  804. // save end position
  805. this.setPosition( x, y );
  806. // if did not move and not transitioning, just go to layout
  807. if ( didNotMove && !this.isTransitioning ) {
  808. this.layoutPosition();
  809. return;
  810. }
  811. var transX = x - curX;
  812. var transY = y - curY;
  813. var transitionStyle = {};
  814. transitionStyle.transform = this.getTranslate( transX, transY );
  815. this.transition({
  816. to: transitionStyle,
  817. onTransitionEnd: {
  818. transform: this.layoutPosition
  819. },
  820. isCleaning: true
  821. });
  822. };
  823. proto.getTranslate = function( x, y ) {
  824. // flip cooridinates if origin on right or bottom
  825. var isOriginLeft = this.layout._getOption('originLeft');
  826. var isOriginTop = this.layout._getOption('originTop');
  827. x = isOriginLeft ? x : -x;
  828. y = isOriginTop ? y : -y;
  829. return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
  830. };
  831. // non transition + transform support
  832. proto.goTo = function( x, y ) {
  833. this.setPosition( x, y );
  834. this.layoutPosition();
  835. };
  836. proto.moveTo = proto._transitionTo;
  837. proto.setPosition = function( x, y ) {
  838. this.position.x = parseInt( x, 10 );
  839. this.position.y = parseInt( y, 10 );
  840. };
  841. // ----- transition ----- //
  842. /**
  843. * @param {Object} style - CSS
  844. * @param {Function} onTransitionEnd
  845. */
  846. // non transition, just trigger callback
  847. proto._nonTransition = function( args ) {
  848. this.css( args.to );
  849. if ( args.isCleaning ) {
  850. this._removeStyles( args.to );
  851. }
  852. for ( var prop in args.onTransitionEnd ) {
  853. args.onTransitionEnd[ prop ].call( this );
  854. }
  855. };
  856. /**
  857. * proper transition
  858. * @param {Object} args - arguments
  859. * @param {Object} to - style to transition to
  860. * @param {Object} from - style to start transition from
  861. * @param {Boolean} isCleaning - removes transition styles after transition
  862. * @param {Function} onTransitionEnd - callback
  863. */
  864. proto.transition = function( args ) {
  865. // redirect to nonTransition if no transition duration
  866. if ( !parseFloat( this.layout.options.transitionDuration ) ) {
  867. this._nonTransition( args );
  868. return;
  869. }
  870. var _transition = this._transn;
  871. // keep track of onTransitionEnd callback by css property
  872. for ( var prop in args.onTransitionEnd ) {
  873. _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
  874. }
  875. // keep track of properties that are transitioning
  876. for ( prop in args.to ) {
  877. _transition.ingProperties[ prop ] = true;
  878. // keep track of properties to clean up when transition is done
  879. if ( args.isCleaning ) {
  880. _transition.clean[ prop ] = true;
  881. }
  882. }
  883. // set from styles
  884. if ( args.from ) {
  885. this.css( args.from );
  886. // force redraw. http://blog.alexmaccaw.com/css-transitions
  887. var h = this.element.offsetHeight;
  888. // hack for JSHint to hush about unused var
  889. h = null;
  890. }
  891. // enable transition
  892. this.enableTransition( args.to );
  893. // set styles that are transitioning
  894. this.css( args.to );
  895. this.isTransitioning = true;
  896. };
  897. // dash before all cap letters, including first for
  898. // WebkitTransform => -webkit-transform
  899. function toDashedAll( str ) {
  900. return str.replace( /([A-Z])/g, function( $1 ) {
  901. return '-' + $1.toLowerCase();
  902. });
  903. }
  904. var transitionProps = 'opacity,' + toDashedAll( transformProperty );
  905. proto.enableTransition = function(/* style */) {
  906. // HACK changing transitionProperty during a transition
  907. // will cause transition to jump
  908. if ( this.isTransitioning ) {
  909. return;
  910. }
  911. // make `transition: foo, bar, baz` from style object
  912. // HACK un-comment this when enableTransition can work
  913. // while a transition is happening
  914. // var transitionValues = [];
  915. // for ( var prop in style ) {
  916. // // dash-ify camelCased properties like WebkitTransition
  917. // prop = vendorProperties[ prop ] || prop;
  918. // transitionValues.push( toDashedAll( prop ) );
  919. // }
  920. // munge number to millisecond, to match stagger
  921. var duration = this.layout.options.transitionDuration;
  922. duration = typeof duration == 'number' ? duration + 'ms' : duration;
  923. // enable transition styles
  924. this.css({
  925. transitionProperty: transitionProps,
  926. transitionDuration: duration,
  927. transitionDelay: this.staggerDelay || 0
  928. });
  929. // listen for transition end event
  930. this.element.addEventListener( transitionEndEvent, this, false );
  931. };
  932. // ----- events ----- //
  933. proto.onwebkitTransitionEnd = function( event ) {
  934. this.ontransitionend( event );
  935. };
  936. proto.onotransitionend = function( event ) {
  937. this.ontransitionend( event );
  938. };
  939. // properties that I munge to make my life easier
  940. var dashedVendorProperties = {
  941. '-webkit-transform': 'transform'
  942. };
  943. proto.ontransitionend = function( event ) {
  944. // disregard bubbled events from children
  945. if ( event.target !== this.element ) {
  946. return;
  947. }
  948. var _transition = this._transn;
  949. // get property name of transitioned property, convert to prefix-free
  950. var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
  951. // remove property that has completed transitioning
  952. delete _transition.ingProperties[ propertyName ];
  953. // check if any properties are still transitioning
  954. if ( isEmptyObj( _transition.ingProperties ) ) {
  955. // all properties have completed transitioning
  956. this.disableTransition();
  957. }
  958. // clean style
  959. if ( propertyName in _transition.clean ) {
  960. // clean up style
  961. this.element.style[ event.propertyName ] = '';
  962. delete _transition.clean[ propertyName ];
  963. }
  964. // trigger onTransitionEnd callback
  965. if ( propertyName in _transition.onEnd ) {
  966. var onTransitionEnd = _transition.onEnd[ propertyName ];
  967. onTransitionEnd.call( this );
  968. delete _transition.onEnd[ propertyName ];
  969. }
  970. this.emitEvent( 'transitionEnd', [ this ] );
  971. };
  972. proto.disableTransition = function() {
  973. this.removeTransitionStyles();
  974. this.element.removeEventListener( transitionEndEvent, this, false );
  975. this.isTransitioning = false;
  976. };
  977. /**
  978. * removes style property from element
  979. * @param {Object} style
  980. **/
  981. proto._removeStyles = function( style ) {
  982. // clean up transition styles
  983. var cleanStyle = {};
  984. for ( var prop in style ) {
  985. cleanStyle[ prop ] = '';
  986. }
  987. this.css( cleanStyle );
  988. };
  989. var cleanTransitionStyle = {
  990. transitionProperty: '',
  991. transitionDuration: '',
  992. transitionDelay: ''
  993. };
  994. proto.removeTransitionStyles = function() {
  995. // remove transition
  996. this.css( cleanTransitionStyle );
  997. };
  998. // ----- stagger ----- //
  999. proto.stagger = function( delay ) {
  1000. delay = isNaN( delay ) ? 0 : delay;
  1001. this.staggerDelay = delay + 'ms';
  1002. };
  1003. // ----- show/hide/remove ----- //
  1004. // remove element from DOM
  1005. proto.removeElem = function() {
  1006. this.element.parentNode.removeChild( this.element );
  1007. // remove display: none
  1008. this.css({ display: '' });
  1009. this.emitEvent( 'remove', [ this ] );
  1010. };
  1011. proto.remove = function() {
  1012. // just remove element if no transition support or no transition
  1013. if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
  1014. this.removeElem();
  1015. return;
  1016. }
  1017. // start transition
  1018. this.once( 'transitionEnd', function() {
  1019. this.removeElem();
  1020. });
  1021. this.hide();
  1022. };
  1023. proto.reveal = function() {
  1024. delete this.isHidden;
  1025. // remove display: none
  1026. this.css({ display: '' });
  1027. var options = this.layout.options;
  1028. var onTransitionEnd = {};
  1029. var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
  1030. onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
  1031. this.transition({
  1032. from: options.hiddenStyle,
  1033. to: options.visibleStyle,
  1034. isCleaning: true,
  1035. onTransitionEnd: onTransitionEnd
  1036. });
  1037. };
  1038. proto.onRevealTransitionEnd = function() {
  1039. // check if still visible
  1040. // during transition, item may have been hidden
  1041. if ( !this.isHidden ) {
  1042. this.emitEvent('reveal');
  1043. }
  1044. };
  1045. /**
  1046. * get style property use for hide/reveal transition end
  1047. * @param {String} styleProperty - hiddenStyle/visibleStyle
  1048. * @returns {String}
  1049. */
  1050. proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
  1051. var optionStyle = this.layout.options[ styleProperty ];
  1052. // use opacity
  1053. if ( optionStyle.opacity ) {
  1054. return 'opacity';
  1055. }
  1056. // get first property
  1057. for ( var prop in optionStyle ) {
  1058. return prop;
  1059. }
  1060. };
  1061. proto.hide = function() {
  1062. // set flag
  1063. this.isHidden = true;
  1064. // remove display: none
  1065. this.css({ display: '' });
  1066. var options = this.layout.options;
  1067. var onTransitionEnd = {};
  1068. var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
  1069. onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
  1070. this.transition({
  1071. from: options.visibleStyle,
  1072. to: options.hiddenStyle,
  1073. // keep hidden stuff hidden
  1074. isCleaning: true,
  1075. onTransitionEnd: onTransitionEnd
  1076. });
  1077. };
  1078. proto.onHideTransitionEnd = function() {
  1079. // check if still hidden
  1080. // during transition, item may have been un-hidden
  1081. if ( this.isHidden ) {
  1082. this.css({ display: 'none' });
  1083. this.emitEvent('hide');
  1084. }
  1085. };
  1086. proto.destroy = function() {
  1087. this.css({
  1088. position: '',
  1089. left: '',
  1090. right: '',
  1091. top: '',
  1092. bottom: '',
  1093. transition: '',
  1094. transform: ''
  1095. });
  1096. };
  1097. return Item;
  1098. }));
  1099. /*!
  1100. * Outlayer v2.1.0
  1101. * the brains and guts of a layout library
  1102. * MIT license
  1103. */
  1104. ( function( window, factory ) {
  1105. 'use strict';
  1106. // universal module definition
  1107. /* jshint strict: false */ /* globals define, module, require */
  1108. if ( typeof define == 'function' && define.amd ) {
  1109. // AMD - RequireJS
  1110. define( 'outlayer/outlayer',[
  1111. 'ev-emitter/ev-emitter',
  1112. 'get-size/get-size',
  1113. 'fizzy-ui-utils/utils',
  1114. './item'
  1115. ],
  1116. function( EvEmitter, getSize, utils, Item ) {
  1117. return factory( window, EvEmitter, getSize, utils, Item);
  1118. }
  1119. );
  1120. } else if ( typeof module == 'object' && module.exports ) {
  1121. // CommonJS - Browserify, Webpack
  1122. module.exports = factory(
  1123. window,
  1124. require('ev-emitter'),
  1125. require('get-size'),
  1126. require('fizzy-ui-utils'),
  1127. require('./item')
  1128. );
  1129. } else {
  1130. // browser global
  1131. window.Outlayer = factory(
  1132. window,
  1133. window.EvEmitter,
  1134. window.getSize,
  1135. window.fizzyUIUtils,
  1136. window.Outlayer.Item
  1137. );
  1138. }
  1139. }( window, function factory( window, EvEmitter, getSize, utils, Item ) {
  1140. 'use strict';
  1141. // ----- vars ----- //
  1142. var console = window.console;
  1143. var jQuery = window.jQuery;
  1144. var noop = function() {};
  1145. // -------------------------- Outlayer -------------------------- //
  1146. // globally unique identifiers
  1147. var GUID = 0;
  1148. // internal store of all Outlayer intances
  1149. var instances = {};
  1150. /**
  1151. * @param {Element, String} element
  1152. * @param {Object} options
  1153. * @constructor
  1154. */
  1155. function Outlayer( element, options ) {
  1156. var queryElement = utils.getQueryElement( element );
  1157. if ( !queryElement ) {
  1158. if ( console ) {
  1159. console.error( 'Bad element for ' + this.constructor.namespace +
  1160. ': ' + ( queryElement || element ) );
  1161. }
  1162. return;
  1163. }
  1164. this.element = queryElement;
  1165. // add jQuery
  1166. if ( jQuery ) {
  1167. this.$element = jQuery( this.element );
  1168. }
  1169. // options
  1170. this.options = utils.extend( {}, this.constructor.defaults );
  1171. this.option( options );
  1172. // add id for Outlayer.getFromElement
  1173. var id = ++GUID;
  1174. this.element.outlayerGUID = id; // expando
  1175. instances[ id ] = this; // associate via id
  1176. // kick it off
  1177. this._create();
  1178. var isInitLayout = this._getOption('initLayout');
  1179. if ( isInitLayout ) {
  1180. this.layout();
  1181. }
  1182. }
  1183. // settings are for internal use only
  1184. Outlayer.namespace = 'outlayer';
  1185. Outlayer.Item = Item;
  1186. // default options
  1187. Outlayer.defaults = {
  1188. containerStyle: {
  1189. position: 'relative'
  1190. },
  1191. initLayout: true,
  1192. originLeft: true,
  1193. originTop: true,
  1194. resize: true,
  1195. resizeContainer: true,
  1196. // item options
  1197. transitionDuration: '0.4s',
  1198. hiddenStyle: {
  1199. opacity: 0,
  1200. transform: 'scale(0.001)'
  1201. },
  1202. visibleStyle: {
  1203. opacity: 1,
  1204. transform: 'scale(1)'
  1205. }
  1206. };
  1207. var proto = Outlayer.prototype;
  1208. // inherit EvEmitter
  1209. utils.extend( proto, EvEmitter.prototype );
  1210. /**
  1211. * set options
  1212. * @param {Object} opts
  1213. */
  1214. proto.option = function( opts ) {
  1215. utils.extend( this.options, opts );
  1216. };
  1217. /**
  1218. * get backwards compatible option value, check old name
  1219. */
  1220. proto._getOption = function( option ) {
  1221. var oldOption = this.constructor.compatOptions[ option ];
  1222. return oldOption && this.options[ oldOption ] !== undefined ?
  1223. this.options[ oldOption ] : this.options[ option ];
  1224. };
  1225. Outlayer.compatOptions = {
  1226. // currentName: oldName
  1227. initLayout: 'isInitLayout',
  1228. horizontal: 'isHorizontal',
  1229. layoutInstant: 'isLayoutInstant',
  1230. originLeft: 'isOriginLeft',
  1231. originTop: 'isOriginTop',
  1232. resize: 'isResizeBound',
  1233. resizeContainer: 'isResizingContainer'
  1234. };
  1235. proto._create = function() {
  1236. // get items from children
  1237. this.reloadItems();
  1238. // elements that affect layout, but are not laid out
  1239. this.stamps = [];
  1240. this.stamp( this.options.stamp );
  1241. // set container style
  1242. utils.extend( this.element.style, this.options.containerStyle );
  1243. // bind resize method
  1244. var canBindResize = this._getOption('resize');
  1245. if ( canBindResize ) {
  1246. this.bindResize();
  1247. }
  1248. };
  1249. // goes through all children again and gets bricks in proper order
  1250. proto.reloadItems = function() {
  1251. // collection of item elements
  1252. this.items = this._itemize( this.element.children );
  1253. };
  1254. /**
  1255. * turn elements into Outlayer.Items to be used in layout
  1256. * @param {Array or NodeList or HTMLElement} elems
  1257. * @returns {Array} items - collection of new Outlayer Items
  1258. */
  1259. proto._itemize = function( elems ) {
  1260. var itemElems = this._filterFindItemElements( elems );
  1261. var Item = this.constructor.Item;
  1262. // create new Outlayer Items for collection
  1263. var items = [];
  1264. for ( var i=0; i < itemElems.length; i++ ) {
  1265. var elem = itemElems[i];
  1266. var item = new Item( elem, this );
  1267. items.push( item );
  1268. }
  1269. return items;
  1270. };
  1271. /**
  1272. * get item elements to be used in layout
  1273. * @param {Array or NodeList or HTMLElement} elems
  1274. * @returns {Array} items - item elements
  1275. */
  1276. proto._filterFindItemElements = function( elems ) {
  1277. return utils.filterFindElements( elems, this.options.itemSelector );
  1278. };
  1279. /**
  1280. * getter method for getting item elements
  1281. * @returns {Array} elems - collection of item elements
  1282. */
  1283. proto.getItemElements = function() {
  1284. return this.items.map( function( item ) {
  1285. return item.element;
  1286. });
  1287. };
  1288. // ----- init & layout ----- //
  1289. /**
  1290. * lays out all items
  1291. */
  1292. proto.layout = function() {
  1293. this._resetLayout();
  1294. this._manageStamps();
  1295. // don't animate first layout
  1296. var layoutInstant = this._getOption('layoutInstant');
  1297. var isInstant = layoutInstant !== undefined ?
  1298. layoutInstant : !this._isLayoutInited;
  1299. this.layoutItems( this.items, isInstant );
  1300. // flag for initalized
  1301. this._isLayoutInited = true;
  1302. };
  1303. // _init is alias for layout
  1304. proto._init = proto.layout;
  1305. /**
  1306. * logic before any new layout
  1307. */
  1308. proto._resetLayout = function() {
  1309. this.getSize();
  1310. };
  1311. proto.getSize = function() {
  1312. this.size = getSize( this.element );
  1313. };
  1314. /**
  1315. * get measurement from option, for columnWidth, rowHeight, gutter
  1316. * if option is String -> get element from selector string, & get size of element
  1317. * if option is Element -> get size of element
  1318. * else use option as a number
  1319. *
  1320. * @param {String} measurement
  1321. * @param {String} size - width or height
  1322. * @private
  1323. */
  1324. proto._getMeasurement = function( measurement, size ) {
  1325. var option = this.options[ measurement ];
  1326. var elem;
  1327. if ( !option ) {
  1328. // default to 0
  1329. this[ measurement ] = 0;
  1330. } else {
  1331. // use option as an element
  1332. if ( typeof option == 'string' ) {
  1333. elem = this.element.querySelector( option );
  1334. } else if ( option instanceof HTMLElement ) {
  1335. elem = option;
  1336. }
  1337. // use size of element, if element
  1338. this[ measurement ] = elem ? getSize( elem )[ size ] : option;
  1339. }
  1340. };
  1341. /**
  1342. * layout a collection of item elements
  1343. * @api public
  1344. */
  1345. proto.layoutItems = function( items, isInstant ) {
  1346. items = this._getItemsForLayout( items );
  1347. this._layoutItems( items, isInstant );
  1348. this._postLayout();
  1349. };
  1350. /**
  1351. * get the items to be laid out
  1352. * you may want to skip over some items
  1353. * @param {Array} items
  1354. * @returns {Array} items
  1355. */
  1356. proto._getItemsForLayout = function( items ) {
  1357. return items.filter( function( item ) {
  1358. return !item.isIgnored;
  1359. });
  1360. };
  1361. /**
  1362. * layout items
  1363. * @param {Array} items
  1364. * @param {Boolean} isInstant
  1365. */
  1366. proto._layoutItems = function( items, isInstant ) {
  1367. this._emitCompleteOnItems( 'layout', items );
  1368. if ( !items || !items.length ) {
  1369. // no items, emit event with empty array
  1370. return;
  1371. }
  1372. var queue = [];
  1373. items.forEach( function( item ) {
  1374. // get x/y object from method
  1375. var position = this._getItemLayoutPosition( item );
  1376. // enqueue
  1377. position.item = item;
  1378. position.isInstant = isInstant || item.isLayoutInstant;
  1379. queue.push( position );
  1380. }, this );
  1381. this._processLayoutQueue( queue );
  1382. };
  1383. /**
  1384. * get item layout position
  1385. * @param {Outlayer.Item} item
  1386. * @returns {Object} x and y position
  1387. */
  1388. proto._getItemLayoutPosition = function( /* item */ ) {
  1389. return {
  1390. x: 0,
  1391. y: 0
  1392. };
  1393. };
  1394. /**
  1395. * iterate over array and position each item
  1396. * Reason being - separating this logic prevents 'layout invalidation'
  1397. * thx @paul_irish
  1398. * @param {Array} queue
  1399. */
  1400. proto._processLayoutQueue = function( queue ) {
  1401. this.updateStagger();
  1402. queue.forEach( function( obj, i ) {
  1403. this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
  1404. }, this );
  1405. };
  1406. // set stagger from option in milliseconds number
  1407. proto.updateStagger = function() {
  1408. var stagger = this.options.stagger;
  1409. if ( stagger === null || stagger === undefined ) {
  1410. this.stagger = 0;
  1411. return;
  1412. }
  1413. this.stagger = getMilliseconds( stagger );
  1414. return this.stagger;
  1415. };
  1416. /**
  1417. * Sets position of item in DOM
  1418. * @param {Outlayer.Item} item
  1419. * @param {Number} x - horizontal position
  1420. * @param {Number} y - vertical position
  1421. * @param {Boolean} isInstant - disables transitions
  1422. */
  1423. proto._positionItem = function( item, x, y, isInstant, i ) {
  1424. if ( isInstant ) {
  1425. // if not transition, just set CSS
  1426. item.goTo( x, y );
  1427. } else {
  1428. item.stagger( i * this.stagger );
  1429. item.moveTo( x, y );
  1430. }
  1431. };
  1432. /**
  1433. * Any logic you want to do after each layout,
  1434. * i.e. size the container
  1435. */
  1436. proto._postLayout = function() {
  1437. this.resizeContainer();
  1438. };
  1439. proto.resizeContainer = function() {
  1440. var isResizingContainer = this._getOption('resizeContainer');
  1441. if ( !isResizingContainer ) {
  1442. return;
  1443. }
  1444. var size = this._getContainerSize();
  1445. if ( size ) {
  1446. this._setContainerMeasure( size.width, true );
  1447. this._setContainerMeasure( size.height, false );
  1448. }
  1449. };
  1450. /**
  1451. * Sets width or height of container if returned
  1452. * @returns {Object} size
  1453. * @param {Number} width
  1454. * @param {Number} height
  1455. */
  1456. proto._getContainerSize = noop;
  1457. /**
  1458. * @param {Number} measure - size of width or height
  1459. * @param {Boolean} isWidth
  1460. */
  1461. proto._setContainerMeasure = function( measure, isWidth ) {
  1462. if ( measure === undefined ) {
  1463. return;
  1464. }
  1465. var elemSize = this.size;
  1466. // add padding and border width if border box
  1467. if ( elemSize.isBorderBox ) {
  1468. measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
  1469. elemSize.borderLeftWidth + elemSize.borderRightWidth :
  1470. elemSize.paddingBottom + elemSize.paddingTop +
  1471. elemSize.borderTopWidth + elemSize.borderBottomWidth;
  1472. }
  1473. measure = Math.max( measure, 0 );
  1474. this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
  1475. };
  1476. /**
  1477. * emit eventComplete on a collection of items events
  1478. * @param {String} eventName
  1479. * @param {Array} items - Outlayer.Items
  1480. */
  1481. proto._emitCompleteOnItems = function( eventName, items ) {
  1482. var _this = this;
  1483. function onComplete() {
  1484. _this.dispatchEvent( eventName + 'Complete', null, [ items ] );
  1485. }
  1486. var count = items.length;
  1487. if ( !items || !count ) {
  1488. onComplete();
  1489. return;
  1490. }
  1491. var doneCount = 0;
  1492. function tick() {
  1493. doneCount++;
  1494. if ( doneCount == count ) {
  1495. onComplete();
  1496. }
  1497. }
  1498. // bind callback
  1499. items.forEach( function( item ) {
  1500. item.once( eventName, tick );
  1501. });
  1502. };
  1503. /**
  1504. * emits events via EvEmitter and jQuery events
  1505. * @param {String} type - name of event
  1506. * @param {Event} event - original event
  1507. * @param {Array} args - extra arguments
  1508. */
  1509. proto.dispatchEvent = function( type, event, args ) {
  1510. // add original event to arguments
  1511. var emitArgs = event ? [ event ].concat( args ) : args;
  1512. this.emitEvent( type, emitArgs );
  1513. if ( jQuery ) {
  1514. // set this.$element
  1515. this.$element = this.$element || jQuery( this.element );
  1516. if ( event ) {
  1517. // create jQuery event
  1518. var $event = jQuery.Event( event );
  1519. $event.type = type;
  1520. this.$element.trigger( $event, args );
  1521. } else {
  1522. // just trigger with type if no event available
  1523. this.$element.trigger( type, args );
  1524. }
  1525. }
  1526. };
  1527. // -------------------------- ignore & stamps -------------------------- //
  1528. /**
  1529. * keep item in collection, but do not lay it out
  1530. * ignored items do not get skipped in layout
  1531. * @param {Element} elem
  1532. */
  1533. proto.ignore = function( elem ) {
  1534. var item = this.getItem( elem );
  1535. if ( item ) {
  1536. item.isIgnored = true;
  1537. }
  1538. };
  1539. /**
  1540. * return item to layout collection
  1541. * @param {Element} elem
  1542. */
  1543. proto.unignore = function( elem ) {
  1544. var item = this.getItem( elem );
  1545. if ( item ) {
  1546. delete item.isIgnored;
  1547. }
  1548. };
  1549. /**
  1550. * adds elements to stamps
  1551. * @param {NodeList, Array, Element, or String} elems
  1552. */
  1553. proto.stamp = function( elems ) {
  1554. elems = this._find( elems );
  1555. if ( !elems ) {
  1556. return;
  1557. }
  1558. this.stamps = this.stamps.concat( elems );
  1559. // ignore
  1560. elems.forEach( this.ignore, this );
  1561. };
  1562. /**
  1563. * removes elements to stamps
  1564. * @param {NodeList, Array, or Element} elems
  1565. */
  1566. proto.unstamp = function( elems ) {
  1567. elems = this._find( elems );
  1568. if ( !elems ){
  1569. return;
  1570. }
  1571. elems.forEach( function( elem ) {
  1572. // filter out removed stamp elements
  1573. utils.removeFrom( this.stamps, elem );
  1574. this.unignore( elem );
  1575. }, this );
  1576. };
  1577. /**
  1578. * finds child elements
  1579. * @param {NodeList, Array, Element, or String} elems
  1580. * @returns {Array} elems
  1581. */
  1582. proto._find = function( elems ) {
  1583. if ( !elems ) {
  1584. return;
  1585. }
  1586. // if string, use argument as selector string
  1587. if ( typeof elems == 'string' ) {
  1588. elems = this.element.querySelectorAll( elems );
  1589. }
  1590. elems = utils.makeArray( elems );
  1591. return elems;
  1592. };
  1593. proto._manageStamps = function() {
  1594. if ( !this.stamps || !this.stamps.length ) {
  1595. return;
  1596. }
  1597. this._getBoundingRect();
  1598. this.stamps.forEach( this._manageStamp, this );
  1599. };
  1600. // update boundingLeft / Top
  1601. proto._getBoundingRect = function() {
  1602. // get bounding rect for container element
  1603. var boundingRect = this.element.getBoundingClientRect();
  1604. var size = this.size;
  1605. this._boundingRect = {
  1606. left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
  1607. top: boundingRect.top + size.paddingTop + size.borderTopWidth,
  1608. right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
  1609. bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
  1610. };
  1611. };
  1612. /**
  1613. * @param {Element} stamp
  1614. **/
  1615. proto._manageStamp = noop;
  1616. /**
  1617. * get x/y position of element relative to container element
  1618. * @param {Element} elem
  1619. * @returns {Object} offset - has left, top, right, bottom
  1620. */
  1621. proto._getElementOffset = function( elem ) {
  1622. var boundingRect = elem.getBoundingClientRect();
  1623. var thisRect = this._boundingRect;
  1624. var size = getSize( elem );
  1625. var offset = {
  1626. left: boundingRect.left - thisRect.left - size.marginLeft,
  1627. top: boundingRect.top - thisRect.top - size.marginTop,
  1628. right: thisRect.right - boundingRect.right - size.marginRight,
  1629. bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
  1630. };
  1631. return offset;
  1632. };
  1633. // -------------------------- resize -------------------------- //
  1634. // enable event handlers for listeners
  1635. // i.e. resize -> onresize
  1636. proto.handleEvent = utils.handleEvent;
  1637. /**
  1638. * Bind layout to window resizing
  1639. */
  1640. proto.bindResize = function() {
  1641. window.addEventListener( 'resize', this );
  1642. this.isResizeBound = true;
  1643. };
  1644. /**
  1645. * Unbind layout to window resizing
  1646. */
  1647. proto.unbindResize = function() {
  1648. window.removeEventListener( 'resize', this );
  1649. this.isResizeBound = false;
  1650. };
  1651. proto.onresize = function() {
  1652. this.resize();
  1653. };
  1654. utils.debounceMethod( Outlayer, 'onresize', 100 );
  1655. proto.resize = function() {
  1656. // don't trigger if size did not change
  1657. // or if resize was unbound. See #9
  1658. if ( !this.isResizeBound || !this.needsResizeLayout() ) {
  1659. return;
  1660. }
  1661. this.layout();
  1662. };
  1663. /**
  1664. * check if layout is needed post layout
  1665. * @returns Boolean
  1666. */
  1667. proto.needsResizeLayout = function() {
  1668. var size = getSize( this.element );
  1669. // check that this.size and size are there
  1670. // IE8 triggers resize on body size change, so they might not be
  1671. var hasSizes = this.size && size;
  1672. return hasSizes && size.innerWidth !== this.size.innerWidth;
  1673. };
  1674. // -------------------------- methods -------------------------- //
  1675. /**
  1676. * add items to Outlayer instance
  1677. * @param {Array or NodeList or Element} elems
  1678. * @returns {Array} items - Outlayer.Items
  1679. **/
  1680. proto.addItems = function( elems ) {
  1681. var items = this._itemize( elems );
  1682. // add items to collection
  1683. if ( items.length ) {
  1684. this.items = this.items.concat( items );
  1685. }
  1686. return items;
  1687. };
  1688. /**
  1689. * Layout newly-appended item elements
  1690. * @param {Array or NodeList or Element} elems
  1691. */
  1692. proto.appended = function( elems ) {
  1693. var items = this.addItems( elems );
  1694. if ( !items.length ) {
  1695. return;
  1696. }
  1697. // layout and reveal just the new items
  1698. this.layoutItems( items, true );
  1699. this.reveal( items );
  1700. };
  1701. /**
  1702. * Layout prepended elements
  1703. * @param {Array or NodeList or Element} elems
  1704. */
  1705. proto.prepended = function( elems ) {
  1706. var items = this._itemize( elems );
  1707. if ( !items.length ) {
  1708. return;
  1709. }
  1710. // add items to beginning of collection
  1711. var previousItems = this.items.slice(0);
  1712. this.items = items.concat( previousItems );
  1713. // start new layout
  1714. this._resetLayout();
  1715. this._manageStamps();
  1716. // layout new stuff without transition
  1717. this.layoutItems( items, true );
  1718. this.reveal( items );
  1719. // layout previous items
  1720. this.layoutItems( previousItems );
  1721. };
  1722. /**
  1723. * reveal a collection of items
  1724. * @param {Array of Outlayer.Items} items
  1725. */
  1726. proto.reveal = function( items ) {
  1727. this._emitCompleteOnItems( 'reveal', items );
  1728. if ( !items || !items.length ) {
  1729. return;
  1730. }
  1731. var stagger = this.updateStagger();
  1732. items.forEach( function( item, i ) {
  1733. item.stagger( i * stagger );
  1734. item.reveal();
  1735. });
  1736. };
  1737. /**
  1738. * hide a collection of items
  1739. * @param {Array of Outlayer.Items} items
  1740. */
  1741. proto.hide = function( items ) {
  1742. this._emitCompleteOnItems( 'hide', items );
  1743. if ( !items || !items.length ) {
  1744. return;
  1745. }
  1746. var stagger = this.updateStagger();
  1747. items.forEach( function( item, i ) {
  1748. item.stagger( i * stagger );
  1749. item.hide();
  1750. });
  1751. };
  1752. /**
  1753. * reveal item elements
  1754. * @param {Array}, {Element}, {NodeList} items
  1755. */
  1756. proto.revealItemElements = function( elems ) {
  1757. var items = this.getItems( elems );
  1758. this.reveal( items );
  1759. };
  1760. /**
  1761. * hide item elements
  1762. * @param {Array}, {Element}, {NodeList} items
  1763. */
  1764. proto.hideItemElements = function( elems ) {
  1765. var items = this.getItems( elems );
  1766. this.hide( items );
  1767. };
  1768. /**
  1769. * get Outlayer.Item, given an Element
  1770. * @param {Element} elem
  1771. * @param {Function} callback
  1772. * @returns {Outlayer.Item} item
  1773. */
  1774. proto.getItem = function( elem ) {
  1775. // loop through items to get the one that matches
  1776. for ( var i=0; i < this.items.length; i++ ) {
  1777. var item = this.items[i];
  1778. if ( item.element == elem ) {
  1779. // return item
  1780. return item;
  1781. }
  1782. }
  1783. };
  1784. /**
  1785. * get collection of Outlayer.Items, given Elements
  1786. * @param {Array} elems
  1787. * @returns {Array} items - Outlayer.Items
  1788. */
  1789. proto.getItems = function( elems ) {
  1790. elems = utils.makeArray( elems );
  1791. var items = [];
  1792. elems.forEach( function( elem ) {
  1793. var item = this.getItem( elem );
  1794. if ( item ) {
  1795. items.push( item );
  1796. }
  1797. }, this );
  1798. return items;
  1799. };
  1800. /**
  1801. * remove element(s) from instance and DOM
  1802. * @param {Array or NodeList or Element} elems
  1803. */
  1804. proto.remove = function( elems ) {
  1805. var removeItems = this.getItems( elems );
  1806. this._emitCompleteOnItems( 'remove', removeItems );
  1807. // bail if no items to remove
  1808. if ( !removeItems || !removeItems.length ) {
  1809. return;
  1810. }
  1811. removeItems.forEach( function( item ) {
  1812. item.remove();
  1813. // remove item from collection
  1814. utils.removeFrom( this.items, item );
  1815. }, this );
  1816. };
  1817. // ----- destroy ----- //
  1818. // remove and disable Outlayer instance
  1819. proto.destroy = function() {
  1820. // clean up dynamic styles
  1821. var style = this.element.style;
  1822. style.height = '';
  1823. style.position = '';
  1824. style.width = '';
  1825. // destroy items
  1826. this.items.forEach( function( item ) {
  1827. item.destroy();
  1828. });
  1829. this.unbindResize();
  1830. var id = this.element.outlayerGUID;
  1831. delete instances[ id ]; // remove reference to instance by id
  1832. delete this.element.outlayerGUID;
  1833. // remove data for jQuery
  1834. if ( jQuery ) {
  1835. jQuery.removeData( this.element, this.constructor.namespace );
  1836. }
  1837. };
  1838. // -------------------------- data -------------------------- //
  1839. /**
  1840. * get Outlayer instance from element
  1841. * @param {Element} elem
  1842. * @returns {Outlayer}
  1843. */
  1844. Outlayer.data = function( elem ) {
  1845. elem = utils.getQueryElement( elem );
  1846. var id = elem && elem.outlayerGUID;
  1847. return id && instances[ id ];
  1848. };
  1849. // -------------------------- create Outlayer class -------------------------- //
  1850. /**
  1851. * create a layout class
  1852. * @param {String} namespace
  1853. */
  1854. Outlayer.create = function( namespace, options ) {
  1855. // sub-class Outlayer
  1856. var Layout = subclass( Outlayer );
  1857. // apply new options and compatOptions
  1858. Layout.defaults = utils.extend( {}, Outlayer.defaults );
  1859. utils.extend( Layout.defaults, options );
  1860. Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions );
  1861. Layout.namespace = namespace;
  1862. Layout.data = Outlayer.data;
  1863. // sub-class Item
  1864. Layout.Item = subclass( Item );
  1865. // -------------------------- declarative -------------------------- //
  1866. utils.htmlInit( Layout, namespace );
  1867. // -------------------------- jQuery bridge -------------------------- //
  1868. // make into jQuery plugin
  1869. if ( jQuery && jQuery.bridget ) {
  1870. jQuery.bridget( namespace, Layout );
  1871. }
  1872. return Layout;
  1873. };
  1874. function subclass( Parent ) {
  1875. function SubClass() {
  1876. Parent.apply( this, arguments );
  1877. }
  1878. SubClass.prototype = Object.create( Parent.prototype );
  1879. SubClass.prototype.constructor = SubClass;
  1880. return SubClass;
  1881. }
  1882. // ----- helpers ----- //
  1883. // how many milliseconds are in each unit
  1884. var msUnits = {
  1885. ms: 1,
  1886. s: 1000
  1887. };
  1888. // munge time-like parameter into millisecond number
  1889. // '0.4s' -> 40
  1890. function getMilliseconds( time ) {
  1891. if ( typeof time == 'number' ) {
  1892. return time;
  1893. }
  1894. var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
  1895. var num = matches && matches[1];
  1896. var unit = matches && matches[2];
  1897. if ( !num.length ) {
  1898. return 0;
  1899. }
  1900. num = parseFloat( num );
  1901. var mult = msUnits[ unit ] || 1;
  1902. return num * mult;
  1903. }
  1904. // ----- fin ----- //
  1905. // back in global
  1906. Outlayer.Item = Item;
  1907. return Outlayer;
  1908. }));
  1909. /*!
  1910. * Masonry v4.2.0
  1911. * Cascading grid layout library
  1912. * http://masonry.desandro.com
  1913. * MIT License
  1914. * by David DeSandro
  1915. */
  1916. ( function( window, factory ) {
  1917. // universal module definition
  1918. /* jshint strict: false */ /*globals define, module, require */
  1919. if ( typeof define == 'function' && define.amd ) {
  1920. // AMD
  1921. define( [
  1922. 'outlayer/outlayer',
  1923. 'get-size/get-size'
  1924. ],
  1925. factory );
  1926. } else if ( typeof module == 'object' && module.exports ) {
  1927. // CommonJS
  1928. module.exports = factory(
  1929. require('outlayer'),
  1930. require('get-size')
  1931. );
  1932. } else {
  1933. // browser global
  1934. window.Masonry = factory(
  1935. window.Outlayer,
  1936. window.getSize
  1937. );
  1938. }
  1939. }( window, function factory( Outlayer, getSize ) {
  1940. // -------------------------- masonryDefinition -------------------------- //
  1941. // create an Outlayer layout class
  1942. var Masonry = Outlayer.create('masonry');
  1943. // isFitWidth -> fitWidth
  1944. Masonry.compatOptions.fitWidth = 'isFitWidth';
  1945. var proto = Masonry.prototype;
  1946. proto._resetLayout = function() {
  1947. this.getSize();
  1948. this._getMeasurement( 'columnWidth', 'outerWidth' );
  1949. this._getMeasurement( 'gutter', 'outerWidth' );
  1950. this.measureColumns();
  1951. // reset column Y
  1952. this.colYs = [];
  1953. for ( var i=0; i < this.cols; i++ ) {
  1954. this.colYs.push( 0 );
  1955. }
  1956. this.maxY = 0;
  1957. this.horizontalColIndex = 0;
  1958. };
  1959. proto.measureColumns = function() {
  1960. this.getContainerWidth();
  1961. // if columnWidth is 0, default to outerWidth of first item
  1962. if ( !this.columnWidth ) {
  1963. var firstItem = this.items[0];
  1964. var firstItemElem = firstItem && firstItem.element;
  1965. // columnWidth fall back to item of first element
  1966. this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
  1967. // if first elem has no width, default to size of container
  1968. this.containerWidth;
  1969. }
  1970. var columnWidth = this.columnWidth += this.gutter;
  1971. // calculate columns
  1972. var containerWidth = this.containerWidth + this.gutter;
  1973. var cols = containerWidth / columnWidth;
  1974. // fix rounding errors, typically with gutters
  1975. var excess = columnWidth - containerWidth % columnWidth;
  1976. // if overshoot is less than a pixel, round up, otherwise floor it
  1977. var mathMethod = excess && excess < 1 ? 'round' : 'floor';
  1978. cols = Math[ mathMethod ]( cols );
  1979. this.cols = Math.max( cols, 1 );
  1980. };
  1981. proto.getContainerWidth = function() {
  1982. // container is parent if fit width
  1983. var isFitWidth = this._getOption('fitWidth');
  1984. var container = isFitWidth ? this.element.parentNode : this.element;
  1985. // check that this.size and size are there
  1986. // IE8 triggers resize on body size change, so they might not be
  1987. var size = getSize( container );
  1988. this.containerWidth = size && size.innerWidth;
  1989. };
  1990. proto._getItemLayoutPosition = function( item ) {
  1991. item.getSize();
  1992. // how many columns does this brick span
  1993. var remainder = item.size.outerWidth % this.columnWidth;
  1994. var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
  1995. // round if off by 1 pixel, otherwise use ceil
  1996. var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
  1997. colSpan = Math.min( colSpan, this.cols );
  1998. // use horizontal or top column position
  1999. var colPosMethod = this.options.horizontalOrder ?
  2000. '_getHorizontalColPosition' : '_getTopColPosition';
  2001. var colPosition = this[ colPosMethod ]( colSpan, item );
  2002. // position the brick
  2003. var position = {
  2004. x: this.columnWidth * colPosition.col,
  2005. y: colPosition.y
  2006. };
  2007. // apply setHeight to necessary columns
  2008. var setHeight = colPosition.y + item.size.outerHeight;
  2009. var setMax = colSpan + colPosition.col;
  2010. for ( var i = colPosition.col; i < setMax; i++ ) {
  2011. this.colYs[i] = setHeight;
  2012. }
  2013. return position;
  2014. };
  2015. proto._getTopColPosition = function( colSpan ) {
  2016. var colGroup = this._getTopColGroup( colSpan );
  2017. // get the minimum Y value from the columns
  2018. var minimumY = Math.min.apply( Math, colGroup );
  2019. return {
  2020. col: colGroup.indexOf( minimumY ),
  2021. y: minimumY,
  2022. };
  2023. };
  2024. /**
  2025. * @param {Number} colSpan - number of columns the element spans
  2026. * @returns {Array} colGroup
  2027. */
  2028. proto._getTopColGroup = function( colSpan ) {
  2029. if ( colSpan < 2 ) {
  2030. // if brick spans only one column, use all the column Ys
  2031. return this.colYs;
  2032. }
  2033. var colGroup = [];
  2034. // how many different places could this brick fit horizontally
  2035. var groupCount = this.cols + 1 - colSpan;
  2036. // for each group potential horizontal position
  2037. for ( var i = 0; i < groupCount; i++ ) {
  2038. colGroup[i] = this._getColGroupY( i, colSpan );
  2039. }
  2040. return colGroup;
  2041. };
  2042. proto._getColGroupY = function( col, colSpan ) {
  2043. if ( colSpan < 2 ) {
  2044. return this.colYs[ col ];
  2045. }
  2046. // make an array of colY values for that one group
  2047. var groupColYs = this.colYs.slice( col, col + colSpan );
  2048. // and get the max value of the array
  2049. return Math.max.apply( Math, groupColYs );
  2050. };
  2051. // get column position based on horizontal index. #873
  2052. proto._getHorizontalColPosition = function( colSpan, item ) {
  2053. var col = this.horizontalColIndex % this.cols;
  2054. var isOver = colSpan > 1 && col + colSpan > this.cols;
  2055. // shift to next row if item can't fit on current row
  2056. col = isOver ? 0 : col;
  2057. // don't let zero-size items take up space
  2058. var hasSize = item.size.outerWidth && item.size.outerHeight;
  2059. this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
  2060. return {
  2061. col: col,
  2062. y: this._getColGroupY( col, colSpan ),
  2063. };
  2064. };
  2065. proto._manageStamp = function( stamp ) {
  2066. var stampSize = getSize( stamp );
  2067. var offset = this._getElementOffset( stamp );
  2068. // get the columns that this stamp affects
  2069. var isOriginLeft = this._getOption('originLeft');
  2070. var firstX = isOriginLeft ? offset.left : offset.right;
  2071. var lastX = firstX + stampSize.outerWidth;
  2072. var firstCol = Math.floor( firstX / this.columnWidth );
  2073. firstCol = Math.max( 0, firstCol );
  2074. var lastCol = Math.floor( lastX / this.columnWidth );
  2075. // lastCol should not go over if multiple of columnWidth #425
  2076. lastCol -= lastX % this.columnWidth ? 0 : 1;
  2077. lastCol = Math.min( this.cols - 1, lastCol );
  2078. // set colYs to bottom of the stamp
  2079. var isOriginTop = this._getOption('originTop');
  2080. var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
  2081. stampSize.outerHeight;
  2082. for ( var i = firstCol; i <= lastCol; i++ ) {
  2083. this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
  2084. }
  2085. };
  2086. proto._getContainerSize = function() {
  2087. this.maxY = Math.max.apply( Math, this.colYs );
  2088. var size = {
  2089. height: this.maxY
  2090. };
  2091. if ( this._getOption('fitWidth') ) {
  2092. size.width = this._getContainerFitWidth();
  2093. }
  2094. return size;
  2095. };
  2096. proto._getContainerFitWidth = function() {
  2097. var unusedCols = 0;
  2098. // count unused columns
  2099. var i = this.cols;
  2100. while ( --i ) {
  2101. if ( this.colYs[i] !== 0 ) {
  2102. break;
  2103. }
  2104. unusedCols++;
  2105. }
  2106. // fit container to columns that have been used
  2107. return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
  2108. };
  2109. proto.needsResizeLayout = function() {
  2110. var previousWidth = this.containerWidth;
  2111. this.getContainerWidth();
  2112. return previousWidth != this.containerWidth;
  2113. };
  2114. return Masonry;
  2115. }));