owl.carousel.js 79 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148
  1. /**
  2. * Owl carousel
  3. * @version 2.0.0
  4. * @author Bartosz Wojciechowski
  5. * @license The MIT License (MIT)
  6. * @todo Lazy Load Icon
  7. * @todo prevent animationend bubling
  8. * @todo itemsScaleUp
  9. * @todo Test Zepto
  10. * @todo stagePadding calculate wrong active classes
  11. */
  12. ;(function($, window, document, undefined) {
  13. /**
  14. * Creates a carousel.
  15. * @class The Owl Carousel.
  16. * @public
  17. * @param {HTMLElement|jQuery} element - The element to create the carousel for.
  18. * @param {Object} [options] - The options
  19. */
  20. function Owl(element, options) {
  21. /**
  22. * Current settings for the carousel.
  23. * @public
  24. */
  25. this.settings = null;
  26. /**
  27. * Current options set by the caller including defaults.
  28. * @public
  29. */
  30. this.options = $.extend({}, Owl.Defaults, options);
  31. /**
  32. * Plugin element.
  33. * @public
  34. */
  35. this.$element = $(element);
  36. /**
  37. * Proxied event handlers.
  38. * @protected
  39. */
  40. this._handlers = {};
  41. /**
  42. * References to the running plugins of this carousel.
  43. * @protected
  44. */
  45. this._plugins = {};
  46. /**
  47. * Currently suppressed events to prevent them from beeing retriggered.
  48. * @protected
  49. */
  50. this._supress = {};
  51. /**
  52. * Absolute current position.
  53. * @protected
  54. */
  55. this._current = null;
  56. /**
  57. * Animation speed in milliseconds.
  58. * @protected
  59. */
  60. this._speed = null;
  61. /**
  62. * Coordinates of all items in pixel.
  63. * @todo The name of this member is missleading.
  64. * @protected
  65. */
  66. this._coordinates = [];
  67. /**
  68. * Current breakpoint.
  69. * @todo Real media queries would be nice.
  70. * @protected
  71. */
  72. this._breakpoint = null;
  73. /**
  74. * Current width of the plugin element.
  75. */
  76. this._width = null;
  77. /**
  78. * All real items.
  79. * @protected
  80. */
  81. this._items = [];
  82. /**
  83. * All cloned items.
  84. * @protected
  85. */
  86. this._clones = [];
  87. /**
  88. * Merge values of all items.
  89. * @todo Maybe this could be part of a plugin.
  90. * @protected
  91. */
  92. this._mergers = [];
  93. /**
  94. * Widths of all items.
  95. */
  96. this._widths = [];
  97. /**
  98. * Invalidated parts within the update process.
  99. * @protected
  100. */
  101. this._invalidated = {};
  102. /**
  103. * Ordered list of workers for the update process.
  104. * @protected
  105. */
  106. this._pipe = [];
  107. /**
  108. * Current state information for the drag operation.
  109. * @todo #261
  110. * @protected
  111. */
  112. this._drag = {
  113. time: null,
  114. target: null,
  115. pointer: null,
  116. stage: {
  117. start: null,
  118. current: null
  119. },
  120. direction: null
  121. };
  122. /**
  123. * Current state information and their tags.
  124. * @type {Object}
  125. * @protected
  126. */
  127. this._states = {
  128. current: {},
  129. tags: {
  130. 'initializing': [ 'busy' ],
  131. 'animating': [ 'busy' ],
  132. 'dragging': [ 'interacting' ]
  133. }
  134. };
  135. $.each([ 'onResize', 'onThrottledResize' ], $.proxy(function(i, handler) {
  136. this._handlers[handler] = $.proxy(this[handler], this);
  137. }, this));
  138. $.each(Owl.Plugins, $.proxy(function(key, plugin) {
  139. this._plugins[key.charAt(0).toLowerCase() + key.slice(1)]
  140. = new plugin(this);
  141. }, this));
  142. $.each(Owl.Workers, $.proxy(function(priority, worker) {
  143. this._pipe.push({
  144. 'filter': worker.filter,
  145. 'run': $.proxy(worker.run, this)
  146. });
  147. }, this));
  148. this.setup();
  149. this.initialize();
  150. }
  151. /**
  152. * Default options for the carousel.
  153. * @public
  154. */
  155. Owl.Defaults = {
  156. items: 3,
  157. loop: false,
  158. center: false,
  159. rewind: false,
  160. mouseDrag: true,
  161. touchDrag: true,
  162. pullDrag: true,
  163. freeDrag: false,
  164. margin: 0,
  165. stagePadding: 0,
  166. merge: false,
  167. mergeFit: true,
  168. autoWidth: false,
  169. startPosition: 0,
  170. rtl: false,
  171. smartSpeed: 250,
  172. fluidSpeed: false,
  173. dragEndSpeed: false,
  174. responsive: {},
  175. responsiveRefreshRate: 200,
  176. responsiveBaseElement: window,
  177. fallbackEasing: 'swing',
  178. info: false,
  179. nestedItemSelector: false,
  180. itemElement: 'div',
  181. stageElement: 'div',
  182. refreshClass: 'owl-refresh',
  183. loadedClass: 'owl-loaded',
  184. loadingClass: 'owl-loading',
  185. rtlClass: 'owl-rtl',
  186. responsiveClass: 'owl-responsive',
  187. dragClass: 'owl-drag',
  188. itemClass: 'owl-item',
  189. stageClass: 'owl-stage',
  190. stageOuterClass: 'owl-stage-outer',
  191. grabClass: 'owl-grab'
  192. };
  193. /**
  194. * Enumeration for width.
  195. * @public
  196. * @readonly
  197. * @enum {String}
  198. */
  199. Owl.Width = {
  200. Default: 'default',
  201. Inner: 'inner',
  202. Outer: 'outer'
  203. };
  204. /**
  205. * Enumeration for types.
  206. * @public
  207. * @readonly
  208. * @enum {String}
  209. */
  210. Owl.Type = {
  211. Event: 'event',
  212. State: 'state'
  213. };
  214. /**
  215. * Contains all registered plugins.
  216. * @public
  217. */
  218. Owl.Plugins = {};
  219. /**
  220. * List of workers involved in the update process.
  221. */
  222. Owl.Workers = [ {
  223. filter: [ 'width', 'settings' ],
  224. run: function() {
  225. this._width = this.$element.width();
  226. }
  227. }, {
  228. filter: [ 'width', 'items', 'settings' ],
  229. run: function(cache) {
  230. cache.current = this._items && this._items[this.relative(this._current)];
  231. }
  232. }, {
  233. filter: [ 'items', 'settings' ],
  234. run: function() {
  235. this.$stage.children('.cloned').remove();
  236. }
  237. }, {
  238. filter: [ 'width', 'items', 'settings' ],
  239. run: function(cache) {
  240. var margin = this.settings.margin || '',
  241. grid = !this.settings.autoWidth,
  242. rtl = this.settings.rtl,
  243. css = {
  244. 'width': 'auto',
  245. 'margin-left': rtl ? margin : '',
  246. 'margin-right': rtl ? '' : margin
  247. };
  248. !grid && this.$stage.children().css(css);
  249. cache.css = css;
  250. }
  251. }, {
  252. filter: [ 'width', 'items', 'settings' ],
  253. run: function(cache) {
  254. var width = (this.width() / this.settings.items).toFixed(3) - this.settings.margin,
  255. merge = null,
  256. iterator = this._items.length,
  257. grid = !this.settings.autoWidth,
  258. widths = [];
  259. cache.items = {
  260. merge: false,
  261. width: width
  262. };
  263. while (iterator--) {
  264. merge = this._mergers[iterator];
  265. merge = this.settings.mergeFit && Math.min(merge, this.settings.items) || merge;
  266. cache.items.merge = merge > 1 || cache.items.merge;
  267. widths[iterator] = !grid ? this._items[iterator].width() : width * merge;
  268. }
  269. this._widths = widths;
  270. }
  271. }, {
  272. filter: [ 'items', 'settings' ],
  273. run: function() {
  274. var clones = [],
  275. items = this._items,
  276. settings = this.settings,
  277. view = Math.max(settings.items * 2, 4),
  278. size = Math.ceil(items.length / 2) * 2,
  279. repeat = settings.loop && items.length ? settings.rewind ? view : Math.max(view, size) : 0,
  280. append = '',
  281. prepend = '';
  282. repeat /= 2;
  283. while (repeat--) {
  284. clones.push(this.normalize(clones.length / 2, true));
  285. append = append + items[clones[clones.length - 1]][0].outerHTML;
  286. clones.push(this.normalize(items.length - 1 - (clones.length - 1) / 2, true));
  287. prepend = items[clones[clones.length - 1]][0].outerHTML + prepend;
  288. }
  289. this._clones = clones;
  290. $(append).addClass('cloned').appendTo(this.$stage);
  291. $(prepend).addClass('cloned').prependTo(this.$stage);
  292. }
  293. }, {
  294. filter: [ 'width', 'items', 'settings' ],
  295. run: function() {
  296. var rtl = this.settings.rtl ? 1 : -1,
  297. size = this._clones.length + this._items.length,
  298. iterator = -1,
  299. previous = 0,
  300. current = 0,
  301. coordinates = [];
  302. while (++iterator < size) {
  303. previous = coordinates[iterator - 1] || 0;
  304. current = this._widths[this.relative(iterator)] + this.settings.margin;
  305. coordinates.push(previous + current * rtl);
  306. }
  307. this._coordinates = coordinates;
  308. }
  309. }, {
  310. filter: [ 'width', 'items', 'settings' ],
  311. run: function() {
  312. var padding = this.settings.stagePadding,
  313. coordinates = this._coordinates,
  314. css = {
  315. 'width': Math.ceil(Math.abs(coordinates[coordinates.length - 1])) + padding * 2,
  316. 'padding-left': padding || '',
  317. 'padding-right': padding || ''
  318. };
  319. this.$stage.css(css);
  320. }
  321. }, {
  322. filter: [ 'width', 'items', 'settings' ],
  323. run: function(cache) {
  324. var iterator = this._coordinates.length,
  325. grid = !this.settings.autoWidth,
  326. items = this.$stage.children();
  327. if (grid && cache.items.merge) {
  328. while (iterator--) {
  329. cache.css.width = this._widths[this.relative(iterator)];
  330. items.eq(iterator).css(cache.css);
  331. }
  332. } else if (grid) {
  333. cache.css.width = cache.items.width;
  334. items.css(cache.css);
  335. }
  336. }
  337. }, {
  338. filter: [ 'items' ],
  339. run: function() {
  340. this._coordinates.length < 1 && this.$stage.removeAttr('style');
  341. }
  342. }, {
  343. filter: [ 'width', 'items', 'settings' ],
  344. run: function(cache) {
  345. cache.current = cache.current ? this.$stage.children().index(cache.current) : 0;
  346. cache.current = Math.max(this.minimum(), Math.min(this.maximum(), cache.current));
  347. this.reset(cache.current);
  348. }
  349. }, {
  350. filter: [ 'position' ],
  351. run: function() {
  352. this.animate(this.coordinates(this._current));
  353. }
  354. }, {
  355. filter: [ 'width', 'position', 'items', 'settings' ],
  356. run: function() {
  357. var rtl = this.settings.rtl ? 1 : -1,
  358. padding = this.settings.stagePadding * 2,
  359. begin = this.coordinates(this.current()) + padding,
  360. end = begin + this.width() * rtl,
  361. inner, outer, matches = [], i, n;
  362. for (i = 0, n = this._coordinates.length; i < n; i++) {
  363. inner = this._coordinates[i - 1] || 0;
  364. outer = Math.abs(this._coordinates[i]) + padding * rtl;
  365. if ((this.op(inner, '<=', begin) && (this.op(inner, '>', end)))
  366. || (this.op(outer, '<', begin) && this.op(outer, '>', end))) {
  367. matches.push(i);
  368. }
  369. }
  370. this.$stage.children('.active').removeClass('active');
  371. this.$stage.children(':eq(' + matches.join('), :eq(') + ')').addClass('active');
  372. if (this.settings.center) {
  373. this.$stage.children('.center').removeClass('center');
  374. this.$stage.children().eq(this.current()).addClass('center');
  375. }
  376. }
  377. } ];
  378. /**
  379. * Initializes the carousel.
  380. * @protected
  381. */
  382. Owl.prototype.initialize = function() {
  383. this.enter('initializing');
  384. this.trigger('initialize');
  385. this.$element.toggleClass(this.settings.rtlClass, this.settings.rtl);
  386. if (this.settings.autoWidth && !this.is('pre-loading')) {
  387. var imgs, nestedSelector, width;
  388. imgs = this.$element.find('img');
  389. nestedSelector = this.settings.nestedItemSelector ? '.' + this.settings.nestedItemSelector : undefined;
  390. width = this.$element.children(nestedSelector).width();
  391. if (imgs.length && width <= 0) {
  392. this.preloadAutoWidthImages(imgs);
  393. }
  394. }
  395. this.$element.addClass(this.options.loadingClass);
  396. // create stage
  397. this.$stage = $('<' + this.settings.stageElement + ' class="' + this.settings.stageClass + '"/>')
  398. .wrap('<div class="' + this.settings.stageOuterClass + '"/>');
  399. // append stage
  400. this.$element.append(this.$stage.parent());
  401. // append content
  402. this.replace(this.$element.children().not(this.$stage.parent()));
  403. // check visibility
  404. if (this.$element.is(':visible')) {
  405. // update view
  406. this.refresh();
  407. } else {
  408. // invalidate width
  409. this.invalidate('width');
  410. }
  411. this.$element
  412. .removeClass(this.options.loadingClass)
  413. .addClass(this.options.loadedClass);
  414. // register event handlers
  415. this.registerEventHandlers();
  416. this.leave('initializing');
  417. this.trigger('initialized');
  418. };
  419. /**
  420. * Setups the current settings.
  421. * @todo Remove responsive classes. Why should adaptive designs be brought into IE8?
  422. * @todo Support for media queries by using `matchMedia` would be nice.
  423. * @public
  424. */
  425. Owl.prototype.setup = function() {
  426. var viewport = this.viewport(),
  427. overwrites = this.options.responsive,
  428. match = -1,
  429. settings = null;
  430. if (!overwrites) {
  431. settings = $.extend({}, this.options);
  432. } else {
  433. $.each(overwrites, function(breakpoint) {
  434. if (breakpoint <= viewport && breakpoint > match) {
  435. match = Number(breakpoint);
  436. }
  437. });
  438. settings = $.extend({}, this.options, overwrites[match]);
  439. delete settings.responsive;
  440. // responsive class
  441. if (settings.responsiveClass) {
  442. this.$element.attr('class',
  443. this.$element.attr('class').replace(new RegExp('(' + this.options.responsiveClass + '-)\\S+\\s', 'g'), '$1' + match)
  444. );
  445. }
  446. }
  447. if (this.settings === null || this._breakpoint !== match) {
  448. this.trigger('change', { property: { name: 'settings', value: settings } });
  449. this._breakpoint = match;
  450. this.settings = settings;
  451. this.invalidate('settings');
  452. this.trigger('changed', { property: { name: 'settings', value: this.settings } });
  453. }
  454. };
  455. /**
  456. * Updates option logic if necessery.
  457. * @protected
  458. */
  459. Owl.prototype.optionsLogic = function() {
  460. if (this.settings.autoWidth) {
  461. this.settings.stagePadding = false;
  462. this.settings.merge = false;
  463. }
  464. };
  465. /**
  466. * Prepares an item before add.
  467. * @todo Rename event parameter `content` to `item`.
  468. * @protected
  469. * @returns {jQuery|HTMLElement} - The item container.
  470. */
  471. Owl.prototype.prepare = function(item) {
  472. var event = this.trigger('prepare', { content: item });
  473. if (!event.data) {
  474. event.data = $('<' + this.settings.itemElement + '/>')
  475. .addClass(this.options.itemClass).append(item)
  476. }
  477. this.trigger('prepared', { content: event.data });
  478. return event.data;
  479. };
  480. /**
  481. * Updates the view.
  482. * @public
  483. */
  484. Owl.prototype.update = function() {
  485. var i = 0,
  486. n = this._pipe.length,
  487. filter = $.proxy(function(p) { return this[p] }, this._invalidated),
  488. cache = {};
  489. while (i < n) {
  490. if (this._invalidated.all || $.grep(this._pipe[i].filter, filter).length > 0) {
  491. this._pipe[i].run(cache);
  492. }
  493. i++;
  494. }
  495. this._invalidated = {};
  496. !this.is('valid') && this.enter('valid');
  497. };
  498. /**
  499. * Gets the width of the view.
  500. * @public
  501. * @param {Owl.Width} [dimension=Owl.Width.Default] - The dimension to return.
  502. * @returns {Number} - The width of the view in pixel.
  503. */
  504. Owl.prototype.width = function(dimension) {
  505. dimension = dimension || Owl.Width.Default;
  506. switch (dimension) {
  507. case Owl.Width.Inner:
  508. case Owl.Width.Outer:
  509. return this._width;
  510. default:
  511. return this._width - this.settings.stagePadding * 2 + this.settings.margin;
  512. }
  513. };
  514. /**
  515. * Refreshes the carousel primarily for adaptive purposes.
  516. * @public
  517. */
  518. Owl.prototype.refresh = function() {
  519. this.enter('refreshing');
  520. this.trigger('refresh');
  521. this.setup();
  522. this.optionsLogic();
  523. this.$element.addClass(this.options.refreshClass);
  524. this.update();
  525. this.$element.removeClass(this.options.refreshClass);
  526. this.leave('refreshing');
  527. this.trigger('refreshed');
  528. };
  529. /**
  530. * Checks window `resize` event.
  531. * @protected
  532. */
  533. Owl.prototype.onThrottledResize = function() {
  534. window.clearTimeout(this.resizeTimer);
  535. this.resizeTimer = window.setTimeout(this._handlers.onResize, this.settings.responsiveRefreshRate);
  536. };
  537. /**
  538. * Checks window `resize` event.
  539. * @protected
  540. */
  541. Owl.prototype.onResize = function() {
  542. if (!this._items.length) {
  543. return false;
  544. }
  545. if (this._width === this.$element.width()) {
  546. return false;
  547. }
  548. if (!this.$element.is(':visible')) {
  549. return false;
  550. }
  551. this.enter('resizing');
  552. if (this.trigger('resize').isDefaultPrevented()) {
  553. this.leave('resizing');
  554. return false;
  555. }
  556. this.invalidate('width');
  557. this.refresh();
  558. this.leave('resizing');
  559. this.trigger('resized');
  560. };
  561. /**
  562. * Registers event handlers.
  563. * @todo Check `msPointerEnabled`
  564. * @todo #261
  565. * @protected
  566. */
  567. Owl.prototype.registerEventHandlers = function() {
  568. if ($.support.transition) {
  569. this.$stage.on($.support.transition.end + '.owl.core', $.proxy(this.onTransitionEnd, this));
  570. }
  571. if (this.settings.responsive !== false) {
  572. this.on(window, 'resize', this._handlers.onThrottledResize);
  573. }
  574. if (this.settings.mouseDrag) {
  575. this.$element.addClass(this.options.dragClass);
  576. this.$stage.on('mousedown.owl.core', $.proxy(this.onDragStart, this));
  577. this.$stage.on('dragstart.owl.core selectstart.owl.core', function() { return false });
  578. }
  579. if (this.settings.touchDrag){
  580. this.$stage.on('touchstart.owl.core', $.proxy(this.onDragStart, this));
  581. this.$stage.on('touchcancel.owl.core', $.proxy(this.onDragEnd, this));
  582. }
  583. };
  584. /**
  585. * Handles `touchstart` and `mousedown` events.
  586. * @todo Horizontal swipe threshold as option
  587. * @todo #261
  588. * @protected
  589. * @param {Event} event - The event arguments.
  590. */
  591. Owl.prototype.onDragStart = function(event) {
  592. var stage = null;
  593. if (event.which === 3) {
  594. return;
  595. }
  596. if ($.support.transform) {
  597. stage = this.$stage.css('transform').replace(/.*\(|\)| /g, '').split(',');
  598. stage = {
  599. x: stage[stage.length === 16 ? 12 : 4],
  600. y: stage[stage.length === 16 ? 13 : 5]
  601. };
  602. } else {
  603. stage = this.$stage.position();
  604. stage = {
  605. x: this.settings.rtl ?
  606. stage.left + this.$stage.width() - this.width() + this.settings.margin :
  607. stage.left,
  608. y: stage.top
  609. };
  610. }
  611. if (this.is('animating')) {
  612. $.support.transform ? this.animate(stage.x) : this.$stage.stop()
  613. this.invalidate('position');
  614. }
  615. this.$element.toggleClass(this.options.grabClass, event.type === 'mousedown');
  616. this.speed(0);
  617. this._drag.time = new Date().getTime();
  618. this._drag.target = $(event.target);
  619. this._drag.stage.start = stage;
  620. this._drag.stage.current = stage;
  621. this._drag.pointer = this.pointer(event);
  622. $(document).on('mouseup.owl.core touchend.owl.core', $.proxy(this.onDragEnd, this));
  623. $(document).one('mousemove.owl.core touchmove.owl.core', $.proxy(function(event) {
  624. var delta = this.difference(this._drag.pointer, this.pointer(event));
  625. $(document).on('mousemove.owl.core touchmove.owl.core', $.proxy(this.onDragMove, this));
  626. if (Math.abs(delta.x) < Math.abs(delta.y) && this.is('valid')) {
  627. return;
  628. }
  629. event.preventDefault();
  630. this.enter('dragging');
  631. this.trigger('drag');
  632. }, this));
  633. };
  634. /**
  635. * Handles the `touchmove` and `mousemove` events.
  636. * @todo #261
  637. * @protected
  638. * @param {Event} event - The event arguments.
  639. */
  640. Owl.prototype.onDragMove = function(event) {
  641. var minimum = null,
  642. maximum = null,
  643. pull = null,
  644. delta = this.difference(this._drag.pointer, this.pointer(event)),
  645. stage = this.difference(this._drag.stage.start, delta);
  646. if (!this.is('dragging')) {
  647. return;
  648. }
  649. event.preventDefault();
  650. if (this.settings.loop) {
  651. minimum = this.coordinates(this.minimum());
  652. maximum = this.coordinates(this.maximum() + 1) - minimum;
  653. stage.x = (((stage.x - minimum) % maximum + maximum) % maximum) + minimum;
  654. } else {
  655. minimum = this.settings.rtl ? this.coordinates(this.maximum()) : this.coordinates(this.minimum());
  656. maximum = this.settings.rtl ? this.coordinates(this.minimum()) : this.coordinates(this.maximum());
  657. pull = this.settings.pullDrag ? -1 * delta.x / 5 : 0;
  658. stage.x = Math.max(Math.min(stage.x, minimum + pull), maximum + pull);
  659. }
  660. this._drag.stage.current = stage;
  661. this.animate(stage.x);
  662. };
  663. /**
  664. * Handles the `touchend` and `mouseup` events.
  665. * @todo #261
  666. * @todo Threshold for click event
  667. * @protected
  668. * @param {Event} event - The event arguments.
  669. */
  670. Owl.prototype.onDragEnd = function(event) {
  671. var delta = this.difference(this._drag.pointer, this.pointer(event)),
  672. stage = this._drag.stage.current,
  673. direction = delta.x > 0 ^ this.settings.rtl ? 'left' : 'right';
  674. $(document).off('.owl.core');
  675. this.$element.removeClass(this.options.grabClass);
  676. if (delta.x !== 0 && this.is('dragging') || !this.is('valid')) {
  677. this.speed(this.settings.dragEndSpeed || this.settings.smartSpeed);
  678. this.current(this.closest(stage.x, delta.x !== 0 ? direction : this._drag.direction));
  679. this.invalidate('position');
  680. this.update();
  681. this._drag.direction = direction;
  682. if (Math.abs(delta.x) > 3 || new Date().getTime() - this._drag.time > 300) {
  683. this._drag.target.one('click.owl.core', function() { return false; });
  684. }
  685. }
  686. if (!this.is('dragging')) {
  687. return;
  688. }
  689. this.leave('dragging');
  690. this.trigger('dragged');
  691. };
  692. /**
  693. * Gets absolute position of the closest item for a coordinate.
  694. * @todo Setting `freeDrag` makes `closest` not reusable. See #165.
  695. * @protected
  696. * @param {Number} coordinate - The coordinate in pixel.
  697. * @param {String} direction - The direction to check for the closest item. Ether `left` or `right`.
  698. * @return {Number} - The absolute position of the closest item.
  699. */
  700. Owl.prototype.closest = function(coordinate, direction) {
  701. var position = -1,
  702. pull = 30,
  703. width = this.width(),
  704. coordinates = this.coordinates();
  705. if (!this.settings.freeDrag) {
  706. // check closest item
  707. $.each(coordinates, $.proxy(function(index, value) {
  708. if (coordinate > value - pull && coordinate < value + pull) {
  709. position = index;
  710. } else if (this.op(coordinate, '<', value)
  711. && this.op(coordinate, '>', coordinates[index + 1] || value - width)) {
  712. position = direction === 'left' ? index + 1 : index;
  713. }
  714. return position === -1;
  715. }, this));
  716. }
  717. if (!this.settings.loop) {
  718. // non loop boundries
  719. if (this.op(coordinate, '>', coordinates[this.minimum()])) {
  720. position = coordinate = this.minimum();
  721. } else if (this.op(coordinate, '<', coordinates[this.maximum()])) {
  722. position = coordinate = this.maximum();
  723. }
  724. }
  725. return position;
  726. };
  727. /**
  728. * Animates the stage.
  729. * @todo #270
  730. * @public
  731. * @param {Number} coordinate - The coordinate in pixels.
  732. */
  733. Owl.prototype.animate = function(coordinate) {
  734. var animate = this.speed() > 0;
  735. this.is('animating') && this.onTransitionEnd();
  736. if (animate) {
  737. this.enter('animating');
  738. this.trigger('translate');
  739. }
  740. if ($.support.transform3d && $.support.transition) {
  741. this.$stage.css({
  742. transform: 'translate3d(' + coordinate + 'px,0px,0px)',
  743. transition: (this.speed() / 1000) + 's'
  744. });
  745. } else if (animate) {
  746. this.$stage.animate({
  747. left: coordinate + 'px'
  748. }, this.speed(), this.settings.fallbackEasing, $.proxy(this.onTransitionEnd, this));
  749. } else {
  750. this.$stage.css({
  751. left: coordinate + 'px'
  752. });
  753. }
  754. };
  755. /**
  756. * Checks whether the carousel is in a specific state or not.
  757. * @param {String} state - The state to check.
  758. * @returns {Boolean} - The flag which indicates if the carousel is busy.
  759. */
  760. Owl.prototype.is = function(state) {
  761. return this._states.current[state] && this._states.current[state] > 0;
  762. };
  763. /**
  764. * Sets the absolute position of the current item.
  765. * @public
  766. * @param {Number} [position] - The new absolute position or nothing to leave it unchanged.
  767. * @returns {Number} - The absolute position of the current item.
  768. */
  769. Owl.prototype.current = function(position) {
  770. if (position === undefined) {
  771. return this._current;
  772. }
  773. if (this._items.length === 0) {
  774. return undefined;
  775. }
  776. position = this.normalize(position);
  777. if (this._current !== position) {
  778. var event = this.trigger('change', { property: { name: 'position', value: position } });
  779. if (event.data !== undefined) {
  780. position = this.normalize(event.data);
  781. }
  782. this._current = position;
  783. this.invalidate('position');
  784. this.trigger('changed', { property: { name: 'position', value: this._current } });
  785. }
  786. return this._current;
  787. };
  788. /**
  789. * Invalidates the given part of the update routine.
  790. * @param {String} [part] - The part to invalidate.
  791. * @returns {Array.<String>} - The invalidated parts.
  792. */
  793. Owl.prototype.invalidate = function(part) {
  794. if ($.type(part) === 'string') {
  795. this._invalidated[part] = true;
  796. this.is('valid') && this.leave('valid');
  797. }
  798. return $.map(this._invalidated, function(v, i) { return i });
  799. };
  800. /**
  801. * Resets the absolute position of the current item.
  802. * @public
  803. * @param {Number} position - The absolute position of the new item.
  804. */
  805. Owl.prototype.reset = function(position) {
  806. position = this.normalize(position);
  807. if (position === undefined) {
  808. return;
  809. }
  810. this._speed = 0;
  811. this._current = position;
  812. this.suppress([ 'translate', 'translated' ]);
  813. this.animate(this.coordinates(position));
  814. this.release([ 'translate', 'translated' ]);
  815. };
  816. /**
  817. * Normalizes an absolute or a relative position of an item.
  818. * @public
  819. * @param {Number} position - The absolute or relative position to normalize.
  820. * @param {Boolean} [relative=false] - Whether the given position is relative or not.
  821. * @returns {Number} - The normalized position.
  822. */
  823. Owl.prototype.normalize = function(position, relative) {
  824. var n = this._items.length,
  825. m = relative ? 0 : this._clones.length;
  826. if (!$.isNumeric(position) || n < 1) {
  827. position = undefined;
  828. } else if (position < 0 || position >= n + m) {
  829. position = ((position - m / 2) % n + n) % n + m / 2;
  830. }
  831. return position;
  832. };
  833. /**
  834. * Converts an absolute position of an item into a relative one.
  835. * @public
  836. * @param {Number} position - The absolute position to convert.
  837. * @returns {Number} - The converted position.
  838. */
  839. Owl.prototype.relative = function(position) {
  840. position -= this._clones.length / 2;
  841. return this.normalize(position, true);
  842. };
  843. /**
  844. * Gets the maximum position for the current item.
  845. * @public
  846. * @param {Boolean} [relative=false] - Whether to return an absolute position or a relative position.
  847. * @returns {Number}
  848. */
  849. Owl.prototype.maximum = function(relative) {
  850. var settings = this.settings,
  851. maximum = this._coordinates.length,
  852. boundary = Math.abs(this._coordinates[maximum - 1]) - this._width,
  853. i = -1, j;
  854. if (settings.loop) {
  855. maximum = this._clones.length / 2 + this._items.length - 1;
  856. } else if (settings.autoWidth || settings.merge) {
  857. // binary search
  858. while (maximum - i > 1) {
  859. Math.abs(this._coordinates[j = maximum + i >> 1]) < boundary
  860. ? i = j : maximum = j;
  861. }
  862. } else if (settings.center) {
  863. maximum = this._items.length - 1;
  864. } else {
  865. maximum = this._items.length - settings.items;
  866. }
  867. if (relative) {
  868. maximum -= this._clones.length / 2;
  869. }
  870. return Math.max(maximum, 0);
  871. };
  872. /**
  873. * Gets the minimum position for the current item.
  874. * @public
  875. * @param {Boolean} [relative=false] - Whether to return an absolute position or a relative position.
  876. * @returns {Number}
  877. */
  878. Owl.prototype.minimum = function(relative) {
  879. return relative ? 0 : this._clones.length / 2;
  880. };
  881. /**
  882. * Gets an item at the specified relative position.
  883. * @public
  884. * @param {Number} [position] - The relative position of the item.
  885. * @return {jQuery|Array.<jQuery>} - The item at the given position or all items if no position was given.
  886. */
  887. Owl.prototype.items = function(position) {
  888. if (position === undefined) {
  889. return this._items.slice();
  890. }
  891. position = this.normalize(position, true);
  892. return this._items[position];
  893. };
  894. /**
  895. * Gets an item at the specified relative position.
  896. * @public
  897. * @param {Number} [position] - The relative position of the item.
  898. * @return {jQuery|Array.<jQuery>} - The item at the given position or all items if no position was given.
  899. */
  900. Owl.prototype.mergers = function(position) {
  901. if (position === undefined) {
  902. return this._mergers.slice();
  903. }
  904. position = this.normalize(position, true);
  905. return this._mergers[position];
  906. };
  907. /**
  908. * Gets the absolute positions of clones for an item.
  909. * @public
  910. * @param {Number} [position] - The relative position of the item.
  911. * @returns {Array.<Number>} - The absolute positions of clones for the item or all if no position was given.
  912. */
  913. Owl.prototype.clones = function(position) {
  914. var odd = this._clones.length / 2,
  915. even = odd + this._items.length,
  916. map = function(index) { return index % 2 === 0 ? even + index / 2 : odd - (index + 1) / 2 };
  917. if (position === undefined) {
  918. return $.map(this._clones, function(v, i) { return map(i) });
  919. }
  920. return $.map(this._clones, function(v, i) { return v === position ? map(i) : null });
  921. };
  922. /**
  923. * Sets the current animation speed.
  924. * @public
  925. * @param {Number} [speed] - The animation speed in milliseconds or nothing to leave it unchanged.
  926. * @returns {Number} - The current animation speed in milliseconds.
  927. */
  928. Owl.prototype.speed = function(speed) {
  929. if (speed !== undefined) {
  930. this._speed = speed;
  931. }
  932. return this._speed;
  933. };
  934. /**
  935. * Gets the coordinate of an item.
  936. * @todo The name of this method is missleanding.
  937. * @public
  938. * @param {Number} position - The absolute position of the item within `minimum()` and `maximum()`.
  939. * @returns {Number|Array.<Number>} - The coordinate of the item in pixel or all coordinates.
  940. */
  941. Owl.prototype.coordinates = function(position) {
  942. var coordinate = null;
  943. if (position === undefined) {
  944. return $.map(this._coordinates, $.proxy(function(coordinate, index) {
  945. return this.coordinates(index);
  946. }, this));
  947. }
  948. if (this.settings.center) {
  949. coordinate = this._coordinates[position];
  950. coordinate += (this.width() - coordinate + (this._coordinates[position - 1] || 0)) / 2 * (this.settings.rtl ? -1 : 1);
  951. } else {
  952. coordinate = this._coordinates[position - 1] || 0;
  953. }
  954. return coordinate;
  955. };
  956. /**
  957. * Calculates the speed for a translation.
  958. * @protected
  959. * @param {Number} from - The absolute position of the start item.
  960. * @param {Number} to - The absolute position of the target item.
  961. * @param {Number} [factor=undefined] - The time factor in milliseconds.
  962. * @returns {Number} - The time in milliseconds for the translation.
  963. */
  964. Owl.prototype.duration = function(from, to, factor) {
  965. return Math.min(Math.max(Math.abs(to - from), 1), 6) * Math.abs((factor || this.settings.smartSpeed));
  966. };
  967. /**
  968. * Slides to the specified item.
  969. * @public
  970. * @param {Number} position - The position of the item.
  971. * @param {Number} [speed] - The time in milliseconds for the transition.
  972. */
  973. Owl.prototype.to = function(position, speed) {
  974. var current = this.current(),
  975. revert = null,
  976. distance = position - this.relative(current),
  977. direction = (distance > 0) - (distance < 0),
  978. items = this._items.length,
  979. minimum = this.minimum(),
  980. maximum = this.maximum();
  981. if (this.settings.loop) {
  982. if (!this.settings.rewind && Math.abs(distance) > items / 2) {
  983. distance += direction * -1 * items;
  984. }
  985. position = current + distance;
  986. revert = ((position - minimum) % items + items) % items + minimum;
  987. if (revert !== position && revert - distance <= maximum && revert - distance > 0) {
  988. current = revert - distance;
  989. position = revert;
  990. this.reset(current);
  991. }
  992. } else if (this.settings.rewind) {
  993. maximum += 1;
  994. position = (position % maximum + maximum) % maximum;
  995. } else {
  996. position = Math.max(minimum, Math.min(maximum, position));
  997. }
  998. this.speed(this.duration(current, position, speed));
  999. this.current(position);
  1000. if (this.$element.is(':visible')) {
  1001. this.update();
  1002. }
  1003. };
  1004. /**
  1005. * Slides to the next item.
  1006. * @public
  1007. * @param {Number} [speed] - The time in milliseconds for the transition.
  1008. */
  1009. Owl.prototype.next = function(speed) {
  1010. speed = speed || false;
  1011. this.to(this.relative(this.current()) + 1, speed);
  1012. };
  1013. /**
  1014. * Slides to the previous item.
  1015. * @public
  1016. * @param {Number} [speed] - The time in milliseconds for the transition.
  1017. */
  1018. Owl.prototype.prev = function(speed) {
  1019. speed = speed || false;
  1020. this.to(this.relative(this.current()) - 1, speed);
  1021. };
  1022. /**
  1023. * Handles the end of an animation.
  1024. * @protected
  1025. * @param {Event} event - The event arguments.
  1026. */
  1027. Owl.prototype.onTransitionEnd = function(event) {
  1028. // if css2 animation then event object is undefined
  1029. if (event !== undefined) {
  1030. event.stopPropagation();
  1031. // Catch only owl-stage transitionEnd event
  1032. if ((event.target || event.srcElement || event.originalTarget) !== this.$stage.get(0)) {
  1033. return false;
  1034. }
  1035. }
  1036. this.leave('animating');
  1037. this.trigger('translated');
  1038. };
  1039. /**
  1040. * Gets viewport width.
  1041. * @protected
  1042. * @return {Number} - The width in pixel.
  1043. */
  1044. Owl.prototype.viewport = function() {
  1045. var width;
  1046. if (this.options.responsiveBaseElement !== window) {
  1047. width = $(this.options.responsiveBaseElement).width();
  1048. } else if (window.innerWidth) {
  1049. width = window.innerWidth;
  1050. } else if (document.documentElement && document.documentElement.clientWidth) {
  1051. width = document.documentElement.clientWidth;
  1052. } else {
  1053. throw 'Can not detect viewport width.';
  1054. }
  1055. return width;
  1056. };
  1057. /**
  1058. * Replaces the current content.
  1059. * @public
  1060. * @param {HTMLElement|jQuery|String} content - The new content.
  1061. */
  1062. Owl.prototype.replace = function(content) {
  1063. this.$stage.empty();
  1064. this._items = [];
  1065. if (content) {
  1066. content = (content instanceof jQuery) ? content : $(content);
  1067. }
  1068. if (this.settings.nestedItemSelector) {
  1069. content = content.find('.' + this.settings.nestedItemSelector);
  1070. }
  1071. content.filter(function() {
  1072. return this.nodeType === 1;
  1073. }).each($.proxy(function(index, item) {
  1074. item = this.prepare(item);
  1075. this.$stage.append(item);
  1076. this._items.push(item);
  1077. this._mergers.push(item.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
  1078. }, this));
  1079. this.reset($.isNumeric(this.settings.startPosition) ? this.settings.startPosition : 0);
  1080. this.invalidate('items');
  1081. };
  1082. /**
  1083. * Adds an item.
  1084. * @todo Use `item` instead of `content` for the event arguments.
  1085. * @public
  1086. * @param {HTMLElement|jQuery|String} content - The item content to add.
  1087. * @param {Number} [position] - The relative position at which to insert the item otherwise the item will be added to the end.
  1088. */
  1089. Owl.prototype.add = function(content, position) {
  1090. var current = this.relative(this._current);
  1091. position = position === undefined ? this._items.length : this.normalize(position, true);
  1092. content = content instanceof jQuery ? content : $(content);
  1093. this.trigger('add', { content: content, position: position });
  1094. content = this.prepare(content);
  1095. if (this._items.length === 0 || position === this._items.length) {
  1096. this._items.length === 0 && this.$stage.append(content);
  1097. this._items.length !== 0 && this._items[position - 1].after(content);
  1098. this._items.push(content);
  1099. this._mergers.push(content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
  1100. } else {
  1101. this._items[position].before(content);
  1102. this._items.splice(position, 0, content);
  1103. this._mergers.splice(position, 0, content.find('[data-merge]').andSelf('[data-merge]').attr('data-merge') * 1 || 1);
  1104. }
  1105. this._items[current] && this.reset(this._items[current].index());
  1106. this.invalidate('items');
  1107. this.trigger('added', { content: content, position: position });
  1108. };
  1109. /**
  1110. * Removes an item by its position.
  1111. * @todo Use `item` instead of `content` for the event arguments.
  1112. * @public
  1113. * @param {Number} position - The relative position of the item to remove.
  1114. */
  1115. Owl.prototype.remove = function(position) {
  1116. position = this.normalize(position, true);
  1117. if (position === undefined) {
  1118. return;
  1119. }
  1120. this.trigger('remove', { content: this._items[position], position: position });
  1121. this._items[position].remove();
  1122. this._items.splice(position, 1);
  1123. this._mergers.splice(position, 1);
  1124. this.invalidate('items');
  1125. this.trigger('removed', { content: null, position: position });
  1126. };
  1127. /**
  1128. * Preloads images with auto width.
  1129. * @todo Replace by a more generic approach
  1130. * @protected
  1131. */
  1132. Owl.prototype.preloadAutoWidthImages = function(images) {
  1133. images.each($.proxy(function(i, element) {
  1134. this.enter('pre-loading');
  1135. element = $(element);
  1136. $(new Image()).one('load', $.proxy(function(e) {
  1137. element.attr('src', e.target.src);
  1138. element.css('opacity', 1);
  1139. this.leave('pre-loading');
  1140. !this.is('pre-loading') && !this.is('initializing') && this.refresh();
  1141. }, this)).attr('src', element.attr('src') || element.attr('data-src') || element.attr('data-src-retina'));
  1142. }, this));
  1143. };
  1144. /**
  1145. * Destroys the carousel.
  1146. * @public
  1147. */
  1148. Owl.prototype.destroy = function() {
  1149. this.$element.off('.owl.core');
  1150. this.$stage.off('.owl.core');
  1151. $(document).off('.owl.core');
  1152. if (this.settings.responsive !== false) {
  1153. window.clearTimeout(this.resizeTimer);
  1154. this.off(window, 'resize', this._handlers.onThrottledResize);
  1155. }
  1156. for (var i in this._plugins) {
  1157. this._plugins[i].destroy();
  1158. }
  1159. this.$stage.children('.cloned').remove();
  1160. this.$stage.unwrap();
  1161. this.$stage.children().contents().unwrap();
  1162. this.$stage.children().unwrap();
  1163. this.$element
  1164. .removeClass(this.options.refreshClass)
  1165. .removeClass(this.options.loadingClass)
  1166. .removeClass(this.options.loadedClass)
  1167. .removeClass(this.options.rtlClass)
  1168. .removeClass(this.options.dragClass)
  1169. .removeClass(this.options.grabClass)
  1170. .attr('class', this.$element.attr('class').replace(new RegExp(this.options.responsiveClass + '-\\S+\\s', 'g'), ''))
  1171. .removeData('owl.carousel');
  1172. };
  1173. /**
  1174. * Operators to calculate right-to-left and left-to-right.
  1175. * @protected
  1176. * @param {Number} [a] - The left side operand.
  1177. * @param {String} [o] - The operator.
  1178. * @param {Number} [b] - The right side operand.
  1179. */
  1180. Owl.prototype.op = function(a, o, b) {
  1181. var rtl = this.settings.rtl;
  1182. switch (o) {
  1183. case '<':
  1184. return rtl ? a > b : a < b;
  1185. case '>':
  1186. return rtl ? a < b : a > b;
  1187. case '>=':
  1188. return rtl ? a <= b : a >= b;
  1189. case '<=':
  1190. return rtl ? a >= b : a <= b;
  1191. default:
  1192. break;
  1193. }
  1194. };
  1195. /**
  1196. * Attaches to an internal event.
  1197. * @protected
  1198. * @param {HTMLElement} element - The event source.
  1199. * @param {String} event - The event name.
  1200. * @param {Function} listener - The event handler to attach.
  1201. * @param {Boolean} capture - Wether the event should be handled at the capturing phase or not.
  1202. */
  1203. Owl.prototype.on = function(element, event, listener, capture) {
  1204. if (element.addEventListener) {
  1205. element.addEventListener(event, listener, capture);
  1206. } else if (element.attachEvent) {
  1207. element.attachEvent('on' + event, listener);
  1208. }
  1209. };
  1210. /**
  1211. * Detaches from an internal event.
  1212. * @protected
  1213. * @param {HTMLElement} element - The event source.
  1214. * @param {String} event - The event name.
  1215. * @param {Function} listener - The attached event handler to detach.
  1216. * @param {Boolean} capture - Wether the attached event handler was registered as a capturing listener or not.
  1217. */
  1218. Owl.prototype.off = function(element, event, listener, capture) {
  1219. if (element.removeEventListener) {
  1220. element.removeEventListener(event, listener, capture);
  1221. } else if (element.detachEvent) {
  1222. element.detachEvent('on' + event, listener);
  1223. }
  1224. };
  1225. /**
  1226. * Triggers a public event.
  1227. * @todo Remove `status`, `relatedTarget` should be used instead.
  1228. * @protected
  1229. * @param {String} name - The event name.
  1230. * @param {*} [data=null] - The event data.
  1231. * @param {String} [namespace=carousel] - The event namespace.
  1232. * @param {String} [state] - The state which is associated with the event.
  1233. * @param {Boolean} [enter=false] - Indicates if the call enters the specified state or not.
  1234. * @returns {Event} - The event arguments.
  1235. */
  1236. Owl.prototype.trigger = function(name, data, namespace, state, enter) {
  1237. var status = {
  1238. item: { count: this._items.length, index: this.current() }
  1239. }, handler = $.camelCase(
  1240. $.grep([ 'on', name, namespace ], function(v) { return v })
  1241. .join('-').toLowerCase()
  1242. ), event = $.Event(
  1243. [ name, 'owl', namespace || 'carousel' ].join('.').toLowerCase(),
  1244. $.extend({ relatedTarget: this }, status, data)
  1245. );
  1246. if (!this._supress[name]) {
  1247. $.each(this._plugins, function(name, plugin) {
  1248. if (plugin.onTrigger) {
  1249. plugin.onTrigger(event);
  1250. }
  1251. });
  1252. this.register({ type: Owl.Type.Event, name: name });
  1253. this.$element.trigger(event);
  1254. if (this.settings && typeof this.settings[handler] === 'function') {
  1255. this.settings[handler].call(this, event);
  1256. }
  1257. }
  1258. return event;
  1259. };
  1260. /**
  1261. * Enters a state.
  1262. * @param name - The state name.
  1263. */
  1264. Owl.prototype.enter = function(name) {
  1265. $.each([ name ].concat(this._states.tags[name] || []), $.proxy(function(i, name) {
  1266. if (this._states.current[name] === undefined) {
  1267. this._states.current[name] = 0;
  1268. }
  1269. this._states.current[name]++;
  1270. }, this));
  1271. };
  1272. /**
  1273. * Leaves a state.
  1274. * @param name - The state name.
  1275. */
  1276. Owl.prototype.leave = function(name) {
  1277. $.each([ name ].concat(this._states.tags[name] || []), $.proxy(function(i, name) {
  1278. this._states.current[name]--;
  1279. }, this));
  1280. };
  1281. /**
  1282. * Registers an event or state.
  1283. * @public
  1284. * @param {Object} object - The event or state to register.
  1285. */
  1286. Owl.prototype.register = function(object) {
  1287. if (object.type === Owl.Type.Event) {
  1288. if (!$.event.special[object.name]) {
  1289. $.event.special[object.name] = {};
  1290. }
  1291. if (!$.event.special[object.name].owl) {
  1292. var _default = $.event.special[object.name]._default;
  1293. $.event.special[object.name]._default = function(e) {
  1294. if (_default && _default.apply && (!e.namespace || e.namespace.indexOf('owl') === -1)) {
  1295. return _default.apply(this, arguments);
  1296. }
  1297. return e.namespace && e.namespace.indexOf('owl') > -1;
  1298. };
  1299. $.event.special[object.name].owl = true;
  1300. }
  1301. } else if (object.type === Owl.Type.State) {
  1302. if (!this._states.tags[object.name]) {
  1303. this._states.tags[object.name] = object.tags;
  1304. } else {
  1305. this._states.tags[object.name] = this._states.tags[object.name].concat(object.tags);
  1306. }
  1307. this._states.tags[object.name] = $.grep(this._states.tags[object.name], $.proxy(function(tag, i) {
  1308. return $.inArray(tag, this._states.tags[object.name]) === i;
  1309. }, this));
  1310. }
  1311. };
  1312. /**
  1313. * Suppresses events.
  1314. * @protected
  1315. * @param {Array.<String>} events - The events to suppress.
  1316. */
  1317. Owl.prototype.suppress = function(events) {
  1318. $.each(events, $.proxy(function(index, event) {
  1319. this._supress[event] = true;
  1320. }, this));
  1321. };
  1322. /**
  1323. * Releases suppressed events.
  1324. * @protected
  1325. * @param {Array.<String>} events - The events to release.
  1326. */
  1327. Owl.prototype.release = function(events) {
  1328. $.each(events, $.proxy(function(index, event) {
  1329. delete this._supress[event];
  1330. }, this));
  1331. };
  1332. /**
  1333. * Gets unified pointer coordinates from event.
  1334. * @todo #261
  1335. * @protected
  1336. * @param {Event} - The `mousedown` or `touchstart` event.
  1337. * @returns {Object} - Contains `x` and `y` coordinates of current pointer position.
  1338. */
  1339. Owl.prototype.pointer = function(event) {
  1340. var result = { x: null, y: null };
  1341. event = event.originalEvent || event || window.event;
  1342. event = event.touches && event.touches.length ?
  1343. event.touches[0] : event.changedTouches && event.changedTouches.length ?
  1344. event.changedTouches[0] : event;
  1345. if (event.pageX) {
  1346. result.x = event.pageX;
  1347. result.y = event.pageY;
  1348. } else {
  1349. result.x = event.clientX;
  1350. result.y = event.clientY;
  1351. }
  1352. return result;
  1353. };
  1354. /**
  1355. * Gets the difference of two vectors.
  1356. * @todo #261
  1357. * @protected
  1358. * @param {Object} - The first vector.
  1359. * @param {Object} - The second vector.
  1360. * @returns {Object} - The difference.
  1361. */
  1362. Owl.prototype.difference = function(first, second) {
  1363. return {
  1364. x: first.x - second.x,
  1365. y: first.y - second.y
  1366. };
  1367. };
  1368. /**
  1369. * The jQuery Plugin for the Owl Carousel
  1370. * @todo Navigation plugin `next` and `prev`
  1371. * @public
  1372. */
  1373. $.fn.owlCarousel = function(option) {
  1374. var args = Array.prototype.slice.call(arguments, 1);
  1375. return this.each(function() {
  1376. var $this = $(this),
  1377. data = $this.data('owl.carousel');
  1378. if (!data) {
  1379. data = new Owl(this, typeof option == 'object' && option);
  1380. $this.data('owl.carousel', data);
  1381. $.each([
  1382. 'next', 'prev', 'to', 'destroy', 'refresh', 'replace', 'add', 'remove'
  1383. ], function(i, event) {
  1384. data.register({ type: Owl.Type.Event, name: event });
  1385. data.$element.on(event + '.owl.carousel.core', $.proxy(function(e) {
  1386. if (e.namespace && e.relatedTarget !== this) {
  1387. this.suppress([ event ]);
  1388. data[event].apply(this, [].slice.call(arguments, 1));
  1389. this.release([ event ]);
  1390. }
  1391. }, data));
  1392. });
  1393. }
  1394. if (typeof option == 'string' && option.charAt(0) !== '_') {
  1395. data[option].apply(data, args);
  1396. }
  1397. });
  1398. };
  1399. /**
  1400. * The constructor for the jQuery Plugin
  1401. * @public
  1402. */
  1403. $.fn.owlCarousel.Constructor = Owl;
  1404. })(window.Zepto || window.jQuery, window, document);
  1405. /**
  1406. * AutoRefresh Plugin
  1407. * @version 2.0.0
  1408. * @author Artus Kolanowski
  1409. * @license The MIT License (MIT)
  1410. */
  1411. ;(function($, window, document, undefined) {
  1412. /**
  1413. * Creates the auto refresh plugin.
  1414. * @class The Auto Refresh Plugin
  1415. * @param {Owl} carousel - The Owl Carousel
  1416. */
  1417. var AutoRefresh = function(carousel) {
  1418. /**
  1419. * Reference to the core.
  1420. * @protected
  1421. * @type {Owl}
  1422. */
  1423. this._core = carousel;
  1424. /**
  1425. * Refresh interval.
  1426. * @protected
  1427. * @type {number}
  1428. */
  1429. this._interval = null;
  1430. /**
  1431. * Whether the element is currently visible or not.
  1432. * @protected
  1433. * @type {Boolean}
  1434. */
  1435. this._visible = null;
  1436. /**
  1437. * All event handlers.
  1438. * @protected
  1439. * @type {Object}
  1440. */
  1441. this._handlers = {
  1442. 'initialized.owl.carousel': $.proxy(function(e) {
  1443. if (e.namespace && this._core.settings.autoRefresh) {
  1444. this.watch();
  1445. }
  1446. }, this)
  1447. };
  1448. // set default options
  1449. this._core.options = $.extend({}, AutoRefresh.Defaults, this._core.options);
  1450. // register event handlers
  1451. this._core.$element.on(this._handlers);
  1452. };
  1453. /**
  1454. * Default options.
  1455. * @public
  1456. */
  1457. AutoRefresh.Defaults = {
  1458. autoRefresh: true,
  1459. autoRefreshInterval: 500
  1460. };
  1461. /**
  1462. * Watches the element.
  1463. */
  1464. AutoRefresh.prototype.watch = function() {
  1465. if (this._interval) {
  1466. return;
  1467. }
  1468. this._visible = this._core.$element.is(':visible');
  1469. this._interval = window.setInterval($.proxy(this.refresh, this), this._core.settings.autoRefreshInterval);
  1470. };
  1471. /**
  1472. * Refreshes the element.
  1473. */
  1474. AutoRefresh.prototype.refresh = function() {
  1475. if (this._core.$element.is(':visible') === this._visible) {
  1476. return;
  1477. }
  1478. this._visible = !this._visible;
  1479. this._core.$element.toggleClass('owl-hidden', !this._visible);
  1480. this._visible && (this._core.invalidate('width') && this._core.refresh());
  1481. };
  1482. /**
  1483. * Destroys the plugin.
  1484. */
  1485. AutoRefresh.prototype.destroy = function() {
  1486. var handler, property;
  1487. window.clearInterval(this._interval);
  1488. for (handler in this._handlers) {
  1489. this._core.$element.off(handler, this._handlers[handler]);
  1490. }
  1491. for (property in Object.getOwnPropertyNames(this)) {
  1492. typeof this[property] != 'function' && (this[property] = null);
  1493. }
  1494. };
  1495. $.fn.owlCarousel.Constructor.Plugins.AutoRefresh = AutoRefresh;
  1496. })(window.Zepto || window.jQuery, window, document);
  1497. /**
  1498. * Lazy Plugin
  1499. * @version 2.0.0
  1500. * @author Bartosz Wojciechowski
  1501. * @license The MIT License (MIT)
  1502. */
  1503. ;(function($, window, document, undefined) {
  1504. /**
  1505. * Creates the lazy plugin.
  1506. * @class The Lazy Plugin
  1507. * @param {Owl} carousel - The Owl Carousel
  1508. */
  1509. var Lazy = function(carousel) {
  1510. /**
  1511. * Reference to the core.
  1512. * @protected
  1513. * @type {Owl}
  1514. */
  1515. this._core = carousel;
  1516. /**
  1517. * Already loaded items.
  1518. * @protected
  1519. * @type {Array.<jQuery>}
  1520. */
  1521. this._loaded = [];
  1522. /**
  1523. * Event handlers.
  1524. * @protected
  1525. * @type {Object}
  1526. */
  1527. this._handlers = {
  1528. 'initialized.owl.carousel change.owl.carousel': $.proxy(function(e) {
  1529. if (!e.namespace) {
  1530. return;
  1531. }
  1532. if (!this._core.settings || !this._core.settings.lazyLoad) {
  1533. return;
  1534. }
  1535. if ((e.property && e.property.name == 'position') || e.type == 'initialized') {
  1536. var settings = this._core.settings,
  1537. n = (settings.center && Math.ceil(settings.items / 2) || settings.items),
  1538. i = ((settings.center && n * -1) || 0),
  1539. position = ((e.property && e.property.value) || this._core.current()) + i,
  1540. clones = this._core.clones().length,
  1541. load = $.proxy(function(i, v) { this.load(v) }, this);
  1542. while (i++ < n) {
  1543. this.load(clones / 2 + this._core.relative(position));
  1544. clones && $.each(this._core.clones(this._core.relative(position)), load);
  1545. position++;
  1546. }
  1547. }
  1548. }, this)
  1549. };
  1550. // set the default options
  1551. this._core.options = $.extend({}, Lazy.Defaults, this._core.options);
  1552. // register event handler
  1553. this._core.$element.on(this._handlers);
  1554. }
  1555. /**
  1556. * Default options.
  1557. * @public
  1558. */
  1559. Lazy.Defaults = {
  1560. lazyLoad: false
  1561. }
  1562. /**
  1563. * Loads all resources of an item at the specified position.
  1564. * @param {Number} position - The absolute position of the item.
  1565. * @protected
  1566. */
  1567. Lazy.prototype.load = function(position) {
  1568. var $item = this._core.$stage.children().eq(position),
  1569. $elements = $item && $item.find('.owl-lazy');
  1570. if (!$elements || $.inArray($item.get(0), this._loaded) > -1) {
  1571. return;
  1572. }
  1573. $elements.each($.proxy(function(index, element) {
  1574. var $element = $(element), image,
  1575. url = (window.devicePixelRatio > 1 && $element.attr('data-src-retina')) || $element.attr('data-src');
  1576. this._core.trigger('load', { element: $element, url: url }, 'lazy');
  1577. if ($element.is('img')) {
  1578. $element.one('load.owl.lazy', $.proxy(function() {
  1579. $element.css('opacity', 1);
  1580. this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
  1581. }, this)).attr('src', url);
  1582. } else {
  1583. image = new Image();
  1584. image.onload = $.proxy(function() {
  1585. $element.css({
  1586. 'background-image': 'url(' + url + ')',
  1587. 'opacity': '1'
  1588. });
  1589. this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
  1590. }, this);
  1591. image.src = url;
  1592. }
  1593. }, this));
  1594. this._loaded.push($item.get(0));
  1595. }
  1596. /**
  1597. * Destroys the plugin.
  1598. * @public
  1599. */
  1600. Lazy.prototype.destroy = function() {
  1601. var handler, property;
  1602. for (handler in this.handlers) {
  1603. this._core.$element.off(handler, this.handlers[handler]);
  1604. }
  1605. for (property in Object.getOwnPropertyNames(this)) {
  1606. typeof this[property] != 'function' && (this[property] = null);
  1607. }
  1608. };
  1609. $.fn.owlCarousel.Constructor.Plugins.Lazy = Lazy;
  1610. })(window.Zepto || window.jQuery, window, document);
  1611. /**
  1612. * AutoHeight Plugin
  1613. * @version 2.0.0
  1614. * @author Bartosz Wojciechowski
  1615. * @license The MIT License (MIT)
  1616. */
  1617. ;(function($, window, document, undefined) {
  1618. /**
  1619. * Creates the auto height plugin.
  1620. * @class The Auto Height Plugin
  1621. * @param {Owl} carousel - The Owl Carousel
  1622. */
  1623. var AutoHeight = function(carousel) {
  1624. /**
  1625. * Reference to the core.
  1626. * @protected
  1627. * @type {Owl}
  1628. */
  1629. this._core = carousel;
  1630. /**
  1631. * All event handlers.
  1632. * @protected
  1633. * @type {Object}
  1634. */
  1635. this._handlers = {
  1636. 'initialized.owl.carousel refreshed.owl.carousel': $.proxy(function(e) {
  1637. if (e.namespace && this._core.settings.autoHeight) {
  1638. this.update();
  1639. }
  1640. }, this),
  1641. 'changed.owl.carousel': $.proxy(function(e) {
  1642. if (e.namespace && this._core.settings.autoHeight && e.property.name == 'position'){
  1643. this.update();
  1644. }
  1645. }, this),
  1646. 'loaded.owl.lazy': $.proxy(function(e) {
  1647. if (e.namespace && this._core.settings.autoHeight
  1648. && e.element.closest('.' + this._core.settings.itemClass).index() === this._core.current()) {
  1649. this.update();
  1650. }
  1651. }, this)
  1652. };
  1653. // set default options
  1654. this._core.options = $.extend({}, AutoHeight.Defaults, this._core.options);
  1655. // register event handlers
  1656. this._core.$element.on(this._handlers);
  1657. };
  1658. /**
  1659. * Default options.
  1660. * @public
  1661. */
  1662. AutoHeight.Defaults = {
  1663. autoHeight: false,
  1664. autoHeightClass: 'owl-height'
  1665. };
  1666. /**
  1667. * Updates the view.
  1668. */
  1669. AutoHeight.prototype.update = function() {
  1670. var start = this._core._current,
  1671. end = start + this._core.settings.items,
  1672. visible = this._core.$stage.children().toArray().slice(start, end);
  1673. heights = [],
  1674. maxheight = 0;
  1675. $.each(visible, function(index, item) {
  1676. heights.push($(item).height());
  1677. });
  1678. maxheight = Math.max.apply(null, heights);
  1679. this._core.$stage.parent()
  1680. .height(maxheight)
  1681. .addClass(this._core.settings.autoHeightClass);
  1682. };
  1683. AutoHeight.prototype.destroy = function() {
  1684. var handler, property;
  1685. for (handler in this._handlers) {
  1686. this._core.$element.off(handler, this._handlers[handler]);
  1687. }
  1688. for (property in Object.getOwnPropertyNames(this)) {
  1689. typeof this[property] != 'function' && (this[property] = null);
  1690. }
  1691. };
  1692. $.fn.owlCarousel.Constructor.Plugins.AutoHeight = AutoHeight;
  1693. })(window.Zepto || window.jQuery, window, document);
  1694. /**
  1695. * Video Plugin
  1696. * @version 2.0.0
  1697. * @author Bartosz Wojciechowski
  1698. * @license The MIT License (MIT)
  1699. */
  1700. ;(function($, window, document, undefined) {
  1701. /**
  1702. * Creates the video plugin.
  1703. * @class The Video Plugin
  1704. * @param {Owl} carousel - The Owl Carousel
  1705. */
  1706. var Video = function(carousel) {
  1707. /**
  1708. * Reference to the core.
  1709. * @protected
  1710. * @type {Owl}
  1711. */
  1712. this._core = carousel;
  1713. /**
  1714. * Cache all video URLs.
  1715. * @protected
  1716. * @type {Object}
  1717. */
  1718. this._videos = {};
  1719. /**
  1720. * Current playing item.
  1721. * @protected
  1722. * @type {jQuery}
  1723. */
  1724. this._playing = null;
  1725. /**
  1726. * All event handlers.
  1727. * @todo The cloned content removale is too late
  1728. * @protected
  1729. * @type {Object}
  1730. */
  1731. this._handlers = {
  1732. 'initialized.owl.carousel': $.proxy(function(e) {
  1733. if (e.namespace) {
  1734. this._core.register({ type: 'state', name: 'playing', tags: [ 'interacting' ] });
  1735. }
  1736. }, this),
  1737. 'resize.owl.carousel': $.proxy(function(e) {
  1738. if (e.namespace && this._core.settings.video && this.isInFullScreen()) {
  1739. e.preventDefault();
  1740. }
  1741. }, this),
  1742. 'refreshed.owl.carousel': $.proxy(function(e) {
  1743. if (e.namespace && this._core.is('resizing')) {
  1744. this._core.$stage.find('.cloned .owl-video-frame').remove();
  1745. }
  1746. }, this),
  1747. 'changed.owl.carousel': $.proxy(function(e) {
  1748. if (e.namespace && e.property.name === 'position' && this._playing) {
  1749. this.stop();
  1750. }
  1751. }, this),
  1752. 'prepared.owl.carousel': $.proxy(function(e) {
  1753. if (!e.namespace) {
  1754. return;
  1755. }
  1756. var $element = $(e.content).find('.owl-video');
  1757. if ($element.length) {
  1758. $element.css('display', 'none');
  1759. this.fetch($element, $(e.content));
  1760. }
  1761. }, this)
  1762. };
  1763. // set default options
  1764. this._core.options = $.extend({}, Video.Defaults, this._core.options);
  1765. // register event handlers
  1766. this._core.$element.on(this._handlers);
  1767. this._core.$element.on('click.owl.video', '.owl-video-play-icon', $.proxy(function(e) {
  1768. this.play(e);
  1769. }, this));
  1770. };
  1771. /**
  1772. * Default options.
  1773. * @public
  1774. */
  1775. Video.Defaults = {
  1776. video: false,
  1777. videoHeight: false,
  1778. videoWidth: false
  1779. };
  1780. /**
  1781. * Gets the video ID and the type (YouTube/Vimeo only).
  1782. * @protected
  1783. * @param {jQuery} target - The target containing the video data.
  1784. * @param {jQuery} item - The item containing the video.
  1785. */
  1786. Video.prototype.fetch = function(target, item) {
  1787. var type = target.attr('data-vimeo-id') ? 'vimeo' : 'youtube',
  1788. id = target.attr('data-vimeo-id') || target.attr('data-youtube-id'),
  1789. width = target.attr('data-width') || this._core.settings.videoWidth,
  1790. height = target.attr('data-height') || this._core.settings.videoHeight,
  1791. url = target.attr('href');
  1792. if (url) {
  1793. id = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
  1794. if (id[3].indexOf('youtu') > -1) {
  1795. type = 'youtube';
  1796. } else if (id[3].indexOf('vimeo') > -1) {
  1797. type = 'vimeo';
  1798. } else {
  1799. throw new Error('Video URL not supported.');
  1800. }
  1801. id = id[6];
  1802. } else {
  1803. throw new Error('Missing video URL.');
  1804. }
  1805. this._videos[url] = {
  1806. type: type,
  1807. id: id,
  1808. width: width,
  1809. height: height
  1810. };
  1811. item.attr('data-video', url);
  1812. this.thumbnail(target, this._videos[url]);
  1813. };
  1814. /**
  1815. * Creates video thumbnail.
  1816. * @protected
  1817. * @param {jQuery} target - The target containing the video data.
  1818. * @param {Object} info - The video info object.
  1819. * @see `fetch`
  1820. */
  1821. Video.prototype.thumbnail = function(target, video) {
  1822. var tnLink,
  1823. icon,
  1824. path,
  1825. dimensions = video.width && video.height ? 'style="width:' + video.width + 'px;height:' + video.height + 'px;"' : '',
  1826. customTn = target.find('img'),
  1827. srcType = 'src',
  1828. lazyClass = '',
  1829. settings = this._core.settings,
  1830. create = function(path) {
  1831. icon = '<div class="owl-video-play-icon"></div>';
  1832. if (settings.lazyLoad) {
  1833. tnLink = '<div class="owl-video-tn ' + lazyClass + '" ' + srcType + '="' + path + '"></div>';
  1834. } else {
  1835. tnLink = '<div class="owl-video-tn" style="opacity:1;background-image:url(' + path + ')"></div>';
  1836. }
  1837. target.after(tnLink);
  1838. target.after(icon);
  1839. };
  1840. // wrap video content into owl-video-wrapper div
  1841. target.wrap('<div class="owl-video-wrapper"' + dimensions + '></div>');
  1842. if (this._core.settings.lazyLoad) {
  1843. srcType = 'data-src';
  1844. lazyClass = 'owl-lazy';
  1845. }
  1846. // custom thumbnail
  1847. if (customTn.length) {
  1848. create(customTn.attr(srcType));
  1849. customTn.remove();
  1850. return false;
  1851. }
  1852. if (video.type === 'youtube') {
  1853. path = "http://img.youtube.com/vi/" + video.id + "/hqdefault.jpg";
  1854. create(path);
  1855. } else if (video.type === 'vimeo') {
  1856. $.ajax({
  1857. type: 'GET',
  1858. url: 'http://vimeo.com/api/v2/video/' + video.id + '.json',
  1859. jsonp: 'callback',
  1860. dataType: 'jsonp',
  1861. success: function(data) {
  1862. path = data[0].thumbnail_large;
  1863. create(path);
  1864. }
  1865. });
  1866. }
  1867. };
  1868. /**
  1869. * Stops the current video.
  1870. * @public
  1871. */
  1872. Video.prototype.stop = function() {
  1873. this._core.trigger('stop', null, 'video');
  1874. this._playing.find('.owl-video-frame').remove();
  1875. this._playing.removeClass('owl-video-playing');
  1876. this._playing = null;
  1877. this._core.leave('playing');
  1878. this._core.trigger('stopped', null, 'video');
  1879. };
  1880. /**
  1881. * Starts the current video.
  1882. * @public
  1883. * @param {Event} event - The event arguments.
  1884. */
  1885. Video.prototype.play = function(event) {
  1886. var target = $(event.target),
  1887. item = target.closest('.' + this._core.settings.itemClass),
  1888. video = this._videos[item.attr('data-video')],
  1889. width = video.width || '100%',
  1890. height = video.height || this._core.$stage.height(),
  1891. html;
  1892. if (this._playing) {
  1893. return;
  1894. }
  1895. this._core.enter('playing');
  1896. this._core.trigger('play', null, 'video');
  1897. item = this._core.items(this._core.relative(item.index()));
  1898. this._core.reset(item.index());
  1899. if (video.type === 'youtube') {
  1900. html = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' +
  1901. video.id + '?autoplay=1&v=' + video.id + '" frameborder="0" allowfullscreen></iframe>';
  1902. } else if (video.type === 'vimeo') {
  1903. html = '<iframe src="http://player.vimeo.com/video/' + video.id +
  1904. '?autoplay=1" width="' + width + '" height="' + height +
  1905. '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  1906. }
  1907. $('<div class="owl-video-frame">' + html + '</div>').insertAfter(item.find('.owl-video'));
  1908. this._playing = item.addClass('owl-video-playing');
  1909. };
  1910. /**
  1911. * Checks whether an video is currently in full screen mode or not.
  1912. * @todo Bad style because looks like a readonly method but changes members.
  1913. * @protected
  1914. * @returns {Boolean}
  1915. */
  1916. Video.prototype.isInFullScreen = function() {
  1917. var element = document.fullscreenElement || document.mozFullScreenElement ||
  1918. document.webkitFullscreenElement;
  1919. return element && $(element).parent().hasClass('owl-video-frame');
  1920. };
  1921. /**
  1922. * Destroys the plugin.
  1923. */
  1924. Video.prototype.destroy = function() {
  1925. var handler, property;
  1926. this._core.$element.off('click.owl.video');
  1927. for (handler in this._handlers) {
  1928. this._core.$element.off(handler, this._handlers[handler]);
  1929. }
  1930. for (property in Object.getOwnPropertyNames(this)) {
  1931. typeof this[property] != 'function' && (this[property] = null);
  1932. }
  1933. };
  1934. $.fn.owlCarousel.Constructor.Plugins.Video = Video;
  1935. })(window.Zepto || window.jQuery, window, document);
  1936. /**
  1937. * Animate Plugin
  1938. * @version 2.0.0
  1939. * @author Bartosz Wojciechowski
  1940. * @license The MIT License (MIT)
  1941. */
  1942. ;(function($, window, document, undefined) {
  1943. /**
  1944. * Creates the animate plugin.
  1945. * @class The Navigation Plugin
  1946. * @param {Owl} scope - The Owl Carousel
  1947. */
  1948. var Animate = function(scope) {
  1949. this.core = scope;
  1950. this.core.options = $.extend({}, Animate.Defaults, this.core.options);
  1951. this.swapping = true;
  1952. this.previous = undefined;
  1953. this.next = undefined;
  1954. this.handlers = {
  1955. 'change.owl.carousel': $.proxy(function(e) {
  1956. if (e.namespace && e.property.name == 'position') {
  1957. this.previous = this.core.current();
  1958. this.next = e.property.value;
  1959. }
  1960. }, this),
  1961. 'drag.owl.carousel dragged.owl.carousel translated.owl.carousel': $.proxy(function(e) {
  1962. if (e.namespace) {
  1963. this.swapping = e.type == 'translated';
  1964. }
  1965. }, this),
  1966. 'translate.owl.carousel': $.proxy(function(e) {
  1967. if (e.namespace && this.swapping && (this.core.options.animateOut || this.core.options.animateIn)) {
  1968. this.swap();
  1969. }
  1970. }, this)
  1971. };
  1972. this.core.$element.on(this.handlers);
  1973. };
  1974. /**
  1975. * Default options.
  1976. * @public
  1977. */
  1978. Animate.Defaults = {
  1979. animateOut: false,
  1980. animateIn: false
  1981. };
  1982. /**
  1983. * Toggles the animation classes whenever an translations starts.
  1984. * @protected
  1985. * @returns {Boolean|undefined}
  1986. */
  1987. Animate.prototype.swap = function() {
  1988. if (this.core.settings.items !== 1) {
  1989. return;
  1990. }
  1991. if (!$.support.animation || !$.support.transition) {
  1992. return;
  1993. }
  1994. this.core.speed(0);
  1995. var left,
  1996. clear = $.proxy(this.clear, this),
  1997. previous = this.core.$stage.children().eq(this.previous),
  1998. next = this.core.$stage.children().eq(this.next),
  1999. incoming = this.core.settings.animateIn,
  2000. outgoing = this.core.settings.animateOut;
  2001. if (this.core.current() === this.previous) {
  2002. return;
  2003. }
  2004. if (outgoing) {
  2005. left = this.core.coordinates(this.previous) - this.core.coordinates(this.next);
  2006. previous.one($.support.animation.end, clear)
  2007. .css( { 'left': left + 'px' } )
  2008. .addClass('animated owl-animated-out')
  2009. .addClass(outgoing);
  2010. }
  2011. if (incoming) {
  2012. next.one($.support.animation.end, clear)
  2013. .addClass('animated owl-animated-in')
  2014. .addClass(incoming);
  2015. }
  2016. };
  2017. Animate.prototype.clear = function(e) {
  2018. $(e.target).css( { 'left': '' } )
  2019. .removeClass('animated owl-animated-out owl-animated-in')
  2020. .removeClass(this.core.settings.animateIn)
  2021. .removeClass(this.core.settings.animateOut);
  2022. this.core.onTransitionEnd();
  2023. };
  2024. /**
  2025. * Destroys the plugin.
  2026. * @public
  2027. */
  2028. Animate.prototype.destroy = function() {
  2029. var handler, property;
  2030. for (handler in this.handlers) {
  2031. this.core.$element.off(handler, this.handlers[handler]);
  2032. }
  2033. for (property in Object.getOwnPropertyNames(this)) {
  2034. typeof this[property] != 'function' && (this[property] = null);
  2035. }
  2036. };
  2037. $.fn.owlCarousel.Constructor.Plugins.Animate = Animate;
  2038. })(window.Zepto || window.jQuery, window, document);
  2039. /**
  2040. * Autoplay Plugin
  2041. * @version 2.0.0
  2042. * @author Bartosz Wojciechowski
  2043. * @author Artus Kolanowski
  2044. * @license The MIT License (MIT)
  2045. */
  2046. ;(function($, window, document, undefined) {
  2047. /**
  2048. * Creates the autoplay plugin.
  2049. * @class The Autoplay Plugin
  2050. * @param {Owl} scope - The Owl Carousel
  2051. */
  2052. var Autoplay = function(carousel) {
  2053. /**
  2054. * Reference to the core.
  2055. * @protected
  2056. * @type {Owl}
  2057. */
  2058. this._core = carousel;
  2059. /**
  2060. * The autoplay interval.
  2061. * @type {Number}
  2062. */
  2063. this._interval = null;
  2064. /**
  2065. * Indicates whenever the autoplay is paused.
  2066. * @type {Boolean}
  2067. */
  2068. this._paused = false;
  2069. /**
  2070. * All event handlers.
  2071. * @protected
  2072. * @type {Object}
  2073. */
  2074. this._handlers = {
  2075. 'changed.owl.carousel': $.proxy(function(e) {
  2076. if (e.namespace && e.property.name === 'settings') {
  2077. if (this._core.settings.autoplay) {
  2078. this.play();
  2079. } else {
  2080. this.stop();
  2081. }
  2082. }
  2083. }, this),
  2084. 'initialized.owl.carousel': $.proxy(function(e) {
  2085. if (e.namespace && this._core.settings.autoplay) {
  2086. this.play();
  2087. }
  2088. }, this),
  2089. 'play.owl.autoplay': $.proxy(function(e, t, s) {
  2090. if (e.namespace) {
  2091. this.play(t, s);
  2092. }
  2093. }, this),
  2094. 'stop.owl.autoplay': $.proxy(function(e) {
  2095. if (e.namespace) {
  2096. this.stop();
  2097. }
  2098. }, this),
  2099. 'mouseover.owl.autoplay': $.proxy(function() {
  2100. if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
  2101. this.pause();
  2102. }
  2103. }, this),
  2104. 'mouseleave.owl.autoplay': $.proxy(function() {
  2105. if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
  2106. this.play();
  2107. }
  2108. }, this)
  2109. };
  2110. // register event handlers
  2111. this._core.$element.on(this._handlers);
  2112. // set default options
  2113. this._core.options = $.extend({}, Autoplay.Defaults, this._core.options);
  2114. };
  2115. /**
  2116. * Default options.
  2117. * @public
  2118. */
  2119. Autoplay.Defaults = {
  2120. autoplay: false,
  2121. autoplayTimeout: 5000,
  2122. autoplayHoverPause: false,
  2123. autoplaySpeed: false
  2124. };
  2125. /**
  2126. * Starts the autoplay.
  2127. * @public
  2128. * @param {Number} [timeout] - The interval before the next animation starts.
  2129. * @param {Number} [speed] - The animation speed for the animations.
  2130. */
  2131. Autoplay.prototype.play = function(timeout, speed) {
  2132. this._paused = false;
  2133. if (this._core.is('rotating')) {
  2134. return;
  2135. }
  2136. this._core.enter('rotating');
  2137. this._interval = window.setInterval($.proxy(function() {
  2138. if (this._paused || this._core.is('busy') || this._core.is('interacting') || document.hidden) {
  2139. return;
  2140. }
  2141. this._core.next(speed || this._core.settings.autoplaySpeed);
  2142. }, this), timeout || this._core.settings.autoplayTimeout);
  2143. };
  2144. /**
  2145. * Stops the autoplay.
  2146. * @public
  2147. */
  2148. Autoplay.prototype.stop = function() {
  2149. if (!this._core.is('rotating')) {
  2150. return;
  2151. }
  2152. window.clearInterval(this._interval);
  2153. this._core.leave('rotating');
  2154. };
  2155. /**
  2156. * Stops the autoplay.
  2157. * @public
  2158. */
  2159. Autoplay.prototype.pause = function() {
  2160. if (!this._core.is('rotating')) {
  2161. return;
  2162. }
  2163. this._paused = true;
  2164. };
  2165. /**
  2166. * Destroys the plugin.
  2167. */
  2168. Autoplay.prototype.destroy = function() {
  2169. var handler, property;
  2170. this.stop();
  2171. for (handler in this._handlers) {
  2172. this._core.$element.off(handler, this._handlers[handler]);
  2173. }
  2174. for (property in Object.getOwnPropertyNames(this)) {
  2175. typeof this[property] != 'function' && (this[property] = null);
  2176. }
  2177. };
  2178. $.fn.owlCarousel.Constructor.Plugins.autoplay = Autoplay;
  2179. })(window.Zepto || window.jQuery, window, document);
  2180. /**
  2181. * Navigation Plugin
  2182. * @version 2.0.0
  2183. * @author Artus Kolanowski
  2184. * @license The MIT License (MIT)
  2185. */
  2186. ;(function($, window, document, undefined) {
  2187. 'use strict';
  2188. /**
  2189. * Creates the navigation plugin.
  2190. * @class The Navigation Plugin
  2191. * @param {Owl} carousel - The Owl Carousel.
  2192. */
  2193. var Navigation = function(carousel) {
  2194. /**
  2195. * Reference to the core.
  2196. * @protected
  2197. * @type {Owl}
  2198. */
  2199. this._core = carousel;
  2200. /**
  2201. * Indicates whether the plugin is initialized or not.
  2202. * @protected
  2203. * @type {Boolean}
  2204. */
  2205. this._initialized = false;
  2206. /**
  2207. * The current paging indexes.
  2208. * @protected
  2209. * @type {Array}
  2210. */
  2211. this._pages = [];
  2212. /**
  2213. * All DOM elements of the user interface.
  2214. * @protected
  2215. * @type {Object}
  2216. */
  2217. this._controls = {};
  2218. /**
  2219. * Markup for an indicator.
  2220. * @protected
  2221. * @type {Array.<String>}
  2222. */
  2223. this._templates = [];
  2224. /**
  2225. * The carousel element.
  2226. * @type {jQuery}
  2227. */
  2228. this.$element = this._core.$element;
  2229. /**
  2230. * Overridden methods of the carousel.
  2231. * @protected
  2232. * @type {Object}
  2233. */
  2234. this._overrides = {
  2235. next: this._core.next,
  2236. prev: this._core.prev,
  2237. to: this._core.to
  2238. };
  2239. /**
  2240. * All event handlers.
  2241. * @protected
  2242. * @type {Object}
  2243. */
  2244. this._handlers = {
  2245. 'prepared.owl.carousel': $.proxy(function(e) {
  2246. if (e.namespace && this._core.settings.dotsData) {
  2247. this._templates.push('<div class="' + this._core.settings.dotClass + '">' +
  2248. $(e.content).find('[data-dot]').andSelf('[data-dot]').attr('data-dot') + '</div>');
  2249. }
  2250. }, this),
  2251. 'added.owl.carousel': $.proxy(function(e) {
  2252. if (e.namespace && this._core.settings.dotsData) {
  2253. this._templates.splice(e.position, 0, this._templates.pop());
  2254. }
  2255. }, this),
  2256. 'remove.owl.carousel': $.proxy(function(e) {
  2257. if (e.namespace && this._core.settings.dotsData) {
  2258. this._templates.splice(e.position, 1);
  2259. }
  2260. }, this),
  2261. 'changed.owl.carousel': $.proxy(function(e) {
  2262. if (e.namespace && e.property.name == 'position') {
  2263. this.draw();
  2264. }
  2265. }, this),
  2266. 'initialized.owl.carousel': $.proxy(function(e) {
  2267. if (e.namespace && !this._initialized) {
  2268. this._core.trigger('initialize', null, 'navigation');
  2269. this.initialize();
  2270. this.update();
  2271. this.draw();
  2272. this._initialized = true;
  2273. this._core.trigger('initialized', null, 'navigation');
  2274. }
  2275. }, this),
  2276. 'refreshed.owl.carousel': $.proxy(function(e) {
  2277. if (e.namespace && this._initialized) {
  2278. this._core.trigger('refresh', null, 'navigation');
  2279. this.update();
  2280. this.draw();
  2281. this._core.trigger('refreshed', null, 'navigation');
  2282. }
  2283. }, this)
  2284. };
  2285. // set default options
  2286. this._core.options = $.extend({}, Navigation.Defaults, this._core.options);
  2287. // register event handlers
  2288. this.$element.on(this._handlers);
  2289. };
  2290. /**
  2291. * Default options.
  2292. * @public
  2293. * @todo Rename `slideBy` to `navBy`
  2294. */
  2295. Navigation.Defaults = {
  2296. nav: false,
  2297. navText: [ 'prev', 'next' ],
  2298. navSpeed: false,
  2299. navElement: 'div',
  2300. navContainer: false,
  2301. navContainerClass: 'owl-nav',
  2302. navClass: [ 'owl-prev', 'owl-next' ],
  2303. slideBy: 1,
  2304. dotClass: 'owl-dot',
  2305. dotsClass: 'owl-dots',
  2306. dots: true,
  2307. dotsEach: false,
  2308. dotsData: false,
  2309. dotsSpeed: false,
  2310. dotsContainer: false
  2311. };
  2312. /**
  2313. * Initializes the layout of the plugin and extends the carousel.
  2314. * @protected
  2315. */
  2316. Navigation.prototype.initialize = function() {
  2317. var override,
  2318. settings = this._core.settings;
  2319. // create DOM structure for relative navigation
  2320. this._controls.$relative = (settings.navContainer ? $(settings.navContainer)
  2321. : $('<div>').addClass(settings.navContainerClass).appendTo(this.$element)).addClass('disabled');
  2322. this._controls.$previous = $('<' + settings.navElement + '>')
  2323. .addClass(settings.navClass[0])
  2324. .html(settings.navText[0])
  2325. .prependTo(this._controls.$relative)
  2326. .on('click', $.proxy(function(e) {
  2327. this.prev(settings.navSpeed);
  2328. }, this));
  2329. this._controls.$next = $('<' + settings.navElement + '>')
  2330. .addClass(settings.navClass[1])
  2331. .html(settings.navText[1])
  2332. .appendTo(this._controls.$relative)
  2333. .on('click', $.proxy(function(e) {
  2334. this.next(settings.navSpeed);
  2335. }, this));
  2336. // create DOM structure for absolute navigation
  2337. if (!settings.dotsData) {
  2338. this._templates = [ $('<div>')
  2339. .addClass(settings.dotClass)
  2340. .append($('<span>'))
  2341. .prop('outerHTML') ];
  2342. }
  2343. this._controls.$absolute = (settings.dotsContainer ? $(settings.dotsContainer)
  2344. : $('<div>').addClass(settings.dotsClass).appendTo(this.$element)).addClass('disabled');
  2345. this._controls.$absolute.on('click', 'div', $.proxy(function(e) {
  2346. var index = $(e.target).parent().is(this._controls.$absolute)
  2347. ? $(e.target).index() : $(e.target).parent().index();
  2348. e.preventDefault();
  2349. this.to(index, settings.dotsSpeed);
  2350. }, this));
  2351. // override public methods of the carousel
  2352. for (override in this._overrides) {
  2353. this._core[override] = $.proxy(this[override], this);
  2354. }
  2355. };
  2356. /**
  2357. * Destroys the plugin.
  2358. * @protected
  2359. */
  2360. Navigation.prototype.destroy = function() {
  2361. var handler, control, property, override;
  2362. for (handler in this._handlers) {
  2363. this.$element.off(handler, this._handlers[handler]);
  2364. }
  2365. for (control in this._controls) {
  2366. this._controls[control].remove();
  2367. }
  2368. for (override in this.overides) {
  2369. this._core[override] = this._overrides[override];
  2370. }
  2371. for (property in Object.getOwnPropertyNames(this)) {
  2372. typeof this[property] != 'function' && (this[property] = null);
  2373. }
  2374. };
  2375. /**
  2376. * Updates the internal state.
  2377. * @protected
  2378. */
  2379. Navigation.prototype.update = function() {
  2380. var i, j, k,
  2381. lower = this._core.clones().length / 2,
  2382. upper = lower + this._core.items().length,
  2383. maximum = this._core.maximum(true),
  2384. settings = this._core.settings,
  2385. size = settings.center || settings.autoWidth || settings.dotsData
  2386. ? 1 : settings.dotsEach || settings.items;
  2387. if (settings.slideBy !== 'page') {
  2388. settings.slideBy = Math.min(settings.slideBy, settings.items);
  2389. }
  2390. if (settings.dots || settings.slideBy == 'page') {
  2391. this._pages = [];
  2392. for (i = lower, j = 0, k = 0; i < upper; i++) {
  2393. if (j >= size || j === 0) {
  2394. this._pages.push({
  2395. start: Math.min(maximum, i - lower),
  2396. end: i - lower + size - 1
  2397. });
  2398. if (Math.min(maximum, i - lower) === maximum) {
  2399. break;
  2400. }
  2401. j = 0, ++k;
  2402. }
  2403. j += this._core.mergers(this._core.relative(i));
  2404. }
  2405. }
  2406. };
  2407. /**
  2408. * Draws the user interface.
  2409. * @todo The option `dotsData` wont work.
  2410. * @protected
  2411. */
  2412. Navigation.prototype.draw = function() {
  2413. var difference,
  2414. settings = this._core.settings,
  2415. disabled = this._core.items().length <= settings.items,
  2416. index = this._core.relative(this._core.current()),
  2417. loop = settings.loop || settings.rewind;
  2418. this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);
  2419. if (settings.nav) {
  2420. this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
  2421. this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
  2422. }
  2423. this._controls.$absolute.toggleClass('disabled', !settings.dots || disabled);
  2424. if (settings.dots) {
  2425. difference = this._pages.length - this._controls.$absolute.children().length;
  2426. if (settings.dotsData && difference !== 0) {
  2427. this._controls.$absolute.html(this._templates.join(''));
  2428. } else if (difference > 0) {
  2429. this._controls.$absolute.append(new Array(difference + 1).join(this._templates[0]));
  2430. } else if (difference < 0) {
  2431. this._controls.$absolute.children().slice(difference).remove();
  2432. }
  2433. this._controls.$absolute.find('.active').removeClass('active');
  2434. this._controls.$absolute.children().eq($.inArray(this.current(), this._pages)).addClass('active');
  2435. }
  2436. };
  2437. /**
  2438. * Extends event data.
  2439. * @protected
  2440. * @param {Event} event - The event object which gets thrown.
  2441. */
  2442. Navigation.prototype.onTrigger = function(event) {
  2443. var settings = this._core.settings;
  2444. event.page = {
  2445. index: $.inArray(this.current(), this._pages),
  2446. count: this._pages.length,
  2447. size: settings && (settings.center || settings.autoWidth || settings.dotsData
  2448. ? 1 : settings.dotsEach || settings.items)
  2449. };
  2450. };
  2451. /**
  2452. * Gets the current page position of the carousel.
  2453. * @protected
  2454. * @returns {Number}
  2455. */
  2456. Navigation.prototype.current = function() {
  2457. var current = this._core.relative(this._core.current());
  2458. return $.grep(this._pages, $.proxy(function(page, index) {
  2459. return page.start <= current && page.end >= current;
  2460. }, this)).pop();
  2461. };
  2462. /**
  2463. * Gets the current succesor/predecessor position.
  2464. * @protected
  2465. * @returns {Number}
  2466. */
  2467. Navigation.prototype.getPosition = function(successor) {
  2468. var position, length,
  2469. settings = this._core.settings;
  2470. if (settings.slideBy == 'page') {
  2471. position = $.inArray(this.current(), this._pages);
  2472. length = this._pages.length;
  2473. successor ? ++position : --position;
  2474. position = this._pages[((position % length) + length) % length].start;
  2475. } else {
  2476. position = this._core.relative(this._core.current());
  2477. length = this._core.items().length;
  2478. successor ? position += settings.slideBy : position -= settings.slideBy;
  2479. }
  2480. return position;
  2481. };
  2482. /**
  2483. * Slides to the next item or page.
  2484. * @public
  2485. * @param {Number} [speed=false] - The time in milliseconds for the transition.
  2486. */
  2487. Navigation.prototype.next = function(speed) {
  2488. $.proxy(this._overrides.to, this._core)(this.getPosition(true), speed);
  2489. };
  2490. /**
  2491. * Slides to the previous item or page.
  2492. * @public
  2493. * @param {Number} [speed=false] - The time in milliseconds for the transition.
  2494. */
  2495. Navigation.prototype.prev = function(speed) {
  2496. $.proxy(this._overrides.to, this._core)(this.getPosition(false), speed);
  2497. };
  2498. /**
  2499. * Slides to the specified item or page.
  2500. * @public
  2501. * @param {Number} position - The position of the item or page.
  2502. * @param {Number} [speed] - The time in milliseconds for the transition.
  2503. * @param {Boolean} [standard=false] - Whether to use the standard behaviour or not.
  2504. */
  2505. Navigation.prototype.to = function(position, speed, standard) {
  2506. var length;
  2507. if (!standard) {
  2508. length = this._pages.length;
  2509. $.proxy(this._overrides.to, this._core)(this._pages[((position % length) + length) % length].start, speed);
  2510. } else {
  2511. $.proxy(this._overrides.to, this._core)(position, speed);
  2512. }
  2513. };
  2514. $.fn.owlCarousel.Constructor.Plugins.Navigation = Navigation;
  2515. })(window.Zepto || window.jQuery, window, document);
  2516. /**
  2517. * Hash Plugin
  2518. * @version 2.0.0
  2519. * @author Artus Kolanowski
  2520. * @license The MIT License (MIT)
  2521. */
  2522. ;(function($, window, document, undefined) {
  2523. 'use strict';
  2524. /**
  2525. * Creates the hash plugin.
  2526. * @class The Hash Plugin
  2527. * @param {Owl} carousel - The Owl Carousel
  2528. */
  2529. var Hash = function(carousel) {
  2530. /**
  2531. * Reference to the core.
  2532. * @protected
  2533. * @type {Owl}
  2534. */
  2535. this._core = carousel;
  2536. /**
  2537. * Hash index for the items.
  2538. * @protected
  2539. * @type {Object}
  2540. */
  2541. this._hashes = {};
  2542. /**
  2543. * The carousel element.
  2544. * @type {jQuery}
  2545. */
  2546. this.$element = this._core.$element;
  2547. /**
  2548. * All event handlers.
  2549. * @protected
  2550. * @type {Object}
  2551. */
  2552. this._handlers = {
  2553. 'initialized.owl.carousel': $.proxy(function(e) {
  2554. if (e.namespace && this._core.settings.startPosition === 'URLHash') {
  2555. $(window).trigger('hashchange.owl.navigation');
  2556. }
  2557. }, this),
  2558. 'prepared.owl.carousel': $.proxy(function(e) {
  2559. if (e.namespace) {
  2560. var hash = $(e.content).find('[data-hash]').andSelf('[data-hash]').attr('data-hash');
  2561. if (!hash) {
  2562. return;
  2563. }
  2564. this._hashes[hash] = e.content;
  2565. }
  2566. }, this),
  2567. 'changed.owl.carousel': $.proxy(function(e) {
  2568. if (e.namespace && e.property.name === 'position') {
  2569. var current = this._core.items(this._core.relative(this._core.current())),
  2570. hash = $.map(this._hashes, function(item, hash) {
  2571. return item === current ? hash : null;
  2572. }).join();
  2573. if (!hash || window.location.hash.slice(1) === hash) {
  2574. return;
  2575. }
  2576. window.location.hash = hash;
  2577. }
  2578. }, this)
  2579. };
  2580. // set default options
  2581. this._core.options = $.extend({}, Hash.Defaults, this._core.options);
  2582. // register the event handlers
  2583. this.$element.on(this._handlers);
  2584. // register event listener for hash navigation
  2585. $(window).on('hashchange.owl.navigation', $.proxy(function(e) {
  2586. var hash = window.location.hash.substring(1),
  2587. items = this._core.$stage.children(),
  2588. position = this._hashes[hash] && items.index(this._hashes[hash]);
  2589. if (position === undefined || position === this._core.current()) {
  2590. return;
  2591. }
  2592. this._core.to(this._core.relative(position), false, true);
  2593. }, this));
  2594. };
  2595. /**
  2596. * Default options.
  2597. * @public
  2598. */
  2599. Hash.Defaults = {
  2600. URLhashListener: false
  2601. };
  2602. /**
  2603. * Destroys the plugin.
  2604. * @public
  2605. */
  2606. Hash.prototype.destroy = function() {
  2607. var handler, property;
  2608. $(window).off('hashchange.owl.navigation');
  2609. for (handler in this._handlers) {
  2610. this._core.$element.off(handler, this._handlers[handler]);
  2611. }
  2612. for (property in Object.getOwnPropertyNames(this)) {
  2613. typeof this[property] != 'function' && (this[property] = null);
  2614. }
  2615. };
  2616. $.fn.owlCarousel.Constructor.Plugins.Hash = Hash;
  2617. })(window.Zepto || window.jQuery, window, document);
  2618. /**
  2619. * Support Plugin
  2620. *
  2621. * @version 2.0.0
  2622. * @author Vivid Planet Software GmbH
  2623. * @author Artus Kolanowski
  2624. * @license The MIT License (MIT)
  2625. */
  2626. ;(function($, window, document, undefined) {
  2627. var style = $('<support>').get(0).style,
  2628. prefixes = 'Webkit Moz O ms'.split(' '),
  2629. events = {
  2630. transition: {
  2631. end: {
  2632. WebkitTransition: 'webkitTransitionEnd',
  2633. MozTransition: 'transitionend',
  2634. OTransition: 'oTransitionEnd',
  2635. transition: 'transitionend'
  2636. }
  2637. },
  2638. animation: {
  2639. end: {
  2640. WebkitAnimation: 'webkitAnimationEnd',
  2641. MozAnimation: 'animationend',
  2642. OAnimation: 'oAnimationEnd',
  2643. animation: 'animationend'
  2644. }
  2645. }
  2646. },
  2647. tests = {
  2648. csstransforms: function() {
  2649. return !!test('transform');
  2650. },
  2651. csstransforms3d: function() {
  2652. return !!test('perspective');
  2653. },
  2654. csstransitions: function() {
  2655. return !!test('transition');
  2656. },
  2657. cssanimations: function() {
  2658. return !!test('animation');
  2659. }
  2660. };
  2661. function test(property, prefixed) {
  2662. var result = false,
  2663. upper = property.charAt(0).toUpperCase() + property.slice(1);
  2664. $.each((property + ' ' + prefixes.join(upper + ' ') + upper).split(' '), function(i, property) {
  2665. if (style[property] !== undefined) {
  2666. result = prefixed ? property : true;
  2667. return false;
  2668. }
  2669. });
  2670. return result;
  2671. }
  2672. function prefixed(property) {
  2673. return test(property, true);
  2674. }
  2675. if (tests.csstransitions()) {
  2676. /* jshint -W053 */
  2677. $.support.transition = new String(prefixed('transition'))
  2678. $.support.transition.end = events.transition.end[ $.support.transition ];
  2679. }
  2680. if (tests.cssanimations()) {
  2681. /* jshint -W053 */
  2682. $.support.animation = new String(prefixed('animation'))
  2683. $.support.animation.end = events.animation.end[ $.support.animation ];
  2684. }
  2685. if (tests.csstransforms()) {
  2686. /* jshint -W053 */
  2687. $.support.transform = new String(prefixed('transform'));
  2688. $.support.transform3d = tests.csstransforms3d();
  2689. }
  2690. })(window.Zepto || window.jQuery, window, document);