/** * Owl carousel * @version 2.3.4 * @author Bartosz Wojciechowski * @author David Deutsch * @license The MIT License (MIT) * @todo Lazy Load Icon * @todo prevent animationend bubling * @todo itemsScaleUp * @todo Test Zepto * @todo stagePadding calculate wrong active classes */ ;(function($, window, document, undefined) { /** * Creates a carousel. * @class The Owl Carousel. * @public * @param {HTMLElement|jQuery} element - The element to create the carousel for. * @param {Object} [options] - The options */ function Owl(element, options) { /** * Current settings for the carousel. * @public */ this.settings = null; /** * Current options set by the caller including defaults. * @public */ this.options = $.extend({}, Owl.Defaults, options); /** * Plugin element. * @public */ this.$element = $(element); /** * Proxied event handlers. * @protected */ this._handlers = {}; /** * References to the running plugins of this carousel. * @protected */ this._plugins = {}; /** * Currently suppressed events to prevent them from being retriggered. * @protected */ this._supress = {}; /** * Absolute current position. * @protected */ this._current = null; /** * Animation speed in milliseconds. * @protected */ this._speed = null; /** * Coordinates of all items in pixel. * @todo The name of this member is missleading. * @protected */ this._coordinates = []; /** * Current breakpoint. * @todo Real media queries would be nice. * @protected */ this._breakpoint = null; /** * Current width of the plugin element. */ this._width = null; /** * All real items. * @protected */ this._items = []; /** * All cloned items. * @protected */ this._clones = []; /** * Merge values of all items. * @todo Maybe this could be part of a plugin. * @protected */ this._mergers = []; /** * Widths of all items. */ this._widths = []; /** * Invalidated parts within the update process. * @protected */ this._invalidated = {}; /** * Ordered list of workers for the update process. * @protected */ this._pipe = []; /** * Current state information for the drag operation. * @todo #261 * @protected */ this._drag = { time: null, target: null, pointer: null, stage: { start: null, current: null }, direction: null }; /** * Current state information and their tags. * @type {Object} * @protected */ this._states = { current: {}, tags: { 'initializing': [ 'busy' ], 'animating': [ 'busy' ], 'dragging': [ 'interacting' ] } }; $.each([ 'onResize', 'onThrottledResize' ], $.proxy(function(i, handler) { this._handlers[handler] = $.proxy(this[handler], this); }, this)); $.each(Owl.Plugins, $.proxy(function(key, plugin) { this._plugins[key.charAt(0).toLowerCase() + key.slice(1)] = new plugin(this); }, this)); $.each(Owl.Workers, $.proxy(function(priority, worker) { this._pipe.push({ 'filter': worker.filter, 'run': $.proxy(worker.run, this) }); }, this)); this.setup(); this.initialize(); } /** * Default options for the carousel. * @public */ Owl.Defaults = { items: 3, loop: false, center: false, rewind: false, checkVisibility: true, mouseDrag: true, touchDrag: true, pullDrag: true, freeDrag: false, margin: 0, stagePadding: 0, merge: false, mergeFit: true, autoWidth: false, startPosition: 0, rtl: false, smartSpeed: 250, fluidSpeed: false, dragEndSpeed: false, responsive: {}, responsiveRefreshRate: 200, responsiveBaseElement: window, fallbackEasing: 'swing', slideTransition: '', info: false, nestedItemSelector: false, itemElement: 'div', stageElement: 'div', refreshClass: 'owl-refresh', loadedClass: 'owl-loaded', loadingClass: 'owl-loading', rtlClass: 'owl-rtl', responsiveClass: 'owl-responsive', dragClass: 'owl-drag', itemClass: 'owl-item', stageClass: 'owl-stage', stageOuterClass: 'owl-stage-outer', grabClass: 'owl-grab' }; /** * Enumeration for width. * @public * @readonly * @enum {String} */ Owl.Width = { Default: 'default', Inner: 'inner', Outer: 'outer' }; /** * Enumeration for types. * @public * @readonly * @enum {String} */ Owl.Type = { Event: 'event', State: 'state' }; /** * Contains all registered plugins. * @public */ Owl.Plugins = {}; /** * List of workers involved in the update process. */ Owl.Workers = [ { filter: [ 'width', 'settings' ], run: function() { this._width = this.$element.width(); } }, { filter: [ 'width', 'items', 'settings' ], run: function(cache) { cache.current = this._items && this._items[this.relative(this._current)]; } }, { filter: [ 'items', 'settings' ], run: function() { this.$stage.children('.cloned').remove(); } }, { filter: [ 'width', 'items', 'settings' ], run: function(cache) { var margin = this.settings.margin || '', grid = !this.settings.autoWidth, rtl = this.settings.rtl, css = { 'width': 'auto', 'margin-left': rtl ? margin : '', 'margin-right': rtl ? '' : margin }; !grid && this.$stage.children().css(css); cache.css = css; } }, { filter: [ 'width', 'items', 'settings' ], run: function(cache) { var width = (this.width() / this.settings.items).toFixed(3) - this.settings.margin, merge = null, iterator = this._items.length, grid = !this.settings.autoWidth, widths = []; cache.items = { merge: false, width: width }; while (iterator--) { merge = this._mergers[iterator]; merge = this.settings.mergeFit && Math.min(merge, this.settings.items) || merge; cache.items.merge = merge > 1 || cache.items.merge; widths[iterator] = !grid ? this._items[iterator].width() : width * merge; } this._widths = widths; } }, { filter: [ 'items', 'settings' ], run: function() { var clones = [], items = this._items, settings = this.settings, // TODO: Should be computed from number of min width items in stage view = Math.max(settings.items * 2, 4), size = Math.ceil(items.length / 2) * 2, repeat = settings.loop && items.length ? settings.rewind ? view : Math.max(view, size) : 0, append = '', prepend = ''; repeat /= 2; while (repeat > 0) { // Switch to only using appended clones clones.push(this.normalize(clones.length / 2, true)); append = append + items[clones[clones.length - 1]][0].outerHTML; clones.push(this.normalize(items.length - 1 - (clones.length - 1) / 2, true)); prepend = items[clones[clones.length - 1]][0].outerHTML + prepend; repeat -= 1; } this._clones = clones; $(append).addClass('cloned').appendTo(this.$stage); $(prepend).addClass('cloned').prependTo(this.$stage); } }, { filter: [ 'width', 'items', 'settings' ], run: function() { var rtl = this.settings.rtl ? 1 : -1, size = this._clones.length + this._items.length, iterator = -1, previous = 0, current = 0, coordinates = []; while (++iterator < size) { previous = coordinates[iterator - 1] || 0; current = this._widths[this.relative(iterator)] + this.settings.margin; coordinates.push(previous + current * rtl); } this._coordinates = coordinates; } }, { filter: [ 'width', 'items', 'settings' ], run: function() { var padding = this.settings.stagePadding, coordinates = this._coordinates, css = { 'width': Math.ceil(Math.abs(coordinates[coordinates.length - 1])) + padding * 2, 'padding-left': padding || '', 'padding-right': padding || '' }; this.$stage.css(css); } }, { filter: [ 'width', 'items', 'settings' ], run: function(cache) { var iterator = this._coordinates.length, grid = !this.settings.autoWidth, items = this.$stage.children(); if (grid && cache.items.merge) { while (iterator--) { cache.css.width = this._widths[this.relative(iterator)]; items.eq(iterator).css(cache.css); } } else if (grid) { cache.css.width = cache.items.width; items.css(cache.css); } } }, { filter: [ 'items' ], run: function() { this._coordinates.length < 1 && this.$stage.removeAttr('style'); } }, { filter: [ 'width', 'items', 'settings' ], run: function(cache) { cache.current = cache.current ? this.$stage.children().index(cache.current) : 0; cache.current = Math.max(this.minimum(), Math.min(this.maximum(), cache.current)); this.reset(cache.current); } }, { filter: [ 'position' ], run: function() { this.animate(this.coordinates(this._current)); } }, { filter: [ 'width', 'position', 'items', 'settings' ], run: function() { var rtl = this.settings.rtl ? 1 : -1, padding = this.settings.stagePadding * 2, begin = this.coordinates(this.current()) + padding, end = begin + this.width() * rtl, inner, outer, matches = [], i, n; for (i = 0, n = this._coordinates.length; i < n; i++) { inner = this._coordinates[i - 1] || 0; outer = Math.abs(this._coordinates[i]) + padding * rtl; if ((this.op(inner, '<=', begin) && (this.op(inner, '>', end))) || (this.op(outer, '<', begin) && this.op(outer, '>', end))) { matches.push(i); } } this.$stage.children('.active').removeClass('active'); this.$stage.children(':eq(' + matches.join('), :eq(') + ')').addClass('active'); this.$stage.children('.center').removeClass('center'); if (this.settings.center) { this.$stage.children().eq(this.current()).addClass('center'); } } } ]; /** * Create the stage DOM element */ Owl.prototype.initializeStage = function() { this.$stage = this.$element.find('.' + this.settings.stageClass); // if the stage is already in the DOM, grab it and skip stage initialization if (this.$stage.length) { return; } this.$element.addClass(this.options.loadingClass); // create stage this.$stage = $('<' + this.settings.stageElement + '>', { "class": this.settings.stageClass }).wrap( $( '
', { "class": this.settings.stageOuterClass })); // append stage this.$element.append(this.$stage.parent()); }; /** * Create item DOM elements */ Owl.prototype.initializeItems = function() { var $items = this.$element.find('.owl-item'); // if the items are already in the DOM, grab them and skip item initialization if ($items.length) { this._items = $items.get().map(function(item) { return $(item); }); this._mergers = this._items.map(function() { return 1; }); this.refresh(); return; } // append content this.replace(this.$element.children().not(this.$stage.parent())); // check visibility if (this.isVisible()) { // update view this.refresh(); } else { // invalidate width this.invalidate('width'); } this.$element .removeClass(this.options.loadingClass) .addClass(this.options.loadedClass); }; /** * Initializes the carousel. * @protected */ Owl.prototype.initialize = function() { this.enter('initializing'); this.trigger('initialize'); this.$element.toggleClass(this.settings.rtlClass, this.settings.rtl); if (this.settings.autoWidth && !this.is('pre-loading')) { var imgs, nestedSelector, width; imgs = this.$element.find('img'); nestedSelector = this.settings.nestedItemSelector ? '.' + this.settings.nestedItemSelector : undefined; width = this.$element.children(nestedSelector).width(); if (imgs.length && width <= 0) { this.preloadAutoWidthImages(imgs); } } this.initializeStage(); this.initializeItems(); // register event handlers this.registerEventHandlers(); this.leave('initializing'); this.trigger('initialized'); }; /** * @returns {Boolean} visibility of $element * if you know the carousel will always be visible you can set `checkVisibility` to `false` to * prevent the expensive browser layout forced reflow the $element.is(':visible') does */ Owl.prototype.isVisible = function() { return this.settings.checkVisibility ? this.$element.is(':visible') : true; }; /** * Setups the current settings. * @todo Remove responsive classes. Why should adaptive designs be brought into IE8? * @todo Support for media queries by using `matchMedia` would be nice. * @public */ Owl.prototype.setup = function() { var viewport = this.viewport(), overwrites = this.options.responsive, match = -1, settings = null; if (!overwrites) { settings = $.extend({}, this.options); } else { $.each(overwrites, function(breakpoint) { if (breakpoint <= viewport && breakpoint > match) { match = Number(breakpoint); } }); settings = $.extend({}, this.options, overwrites[match]); if (typeof settings.stagePadding === 'function') { settings.stagePadding = settings.stagePadding(); } delete settings.responsive; // responsive class if (settings.responsiveClass) { this.$element.attr('class', this.$element.attr('class').replace(new RegExp('(' + this.options.responsiveClass + '-)\\S+\\s', 'g'), '$1' + match) ); } } this.trigger('change', { property: { name: 'settings', value: settings } }); this._breakpoint = match; this.settings = settings; this.invalidate('settings'); this.trigger('changed', { property: { name: 'settings', value: this.settings } }); }; /** * Updates option logic if necessery. * @protected */ Owl.prototype.optionsLogic = function() { if (this.settings.autoWidth) { this.settings.stagePadding = false; this.settings.merge = false; } }; /** * Prepares an item before add. * @todo Rename event parameter `content` to `item`. * @protected * @returns {jQuery|HTMLElement} - The item container. */ Owl.prototype.prepare = function(item) { var event = this.trigger('prepare', { content: item }); if (!event.data) { event.data = $('<' + this.settings.itemElement + '/>') .addClass(this.options.itemClass).append(item) } this.trigger('prepared', { content: event.data }); return event.data; }; /** * Updates the view. * @public */ Owl.prototype.update = function() { var i = 0, n = this._pipe.length, filter = $.proxy(function(p) { return this[p] }, this._invalidated), cache = {}; while (i < n) { if (this._invalidated.all || $.grep(this._pipe[i].filter, filter).length > 0) { this._pipe[i].run(cache); } i++; } this._invalidated = {}; !this.is('valid') && this.enter('valid'); }; /** * Gets the width of the view. * @public * @param {Owl.Width} [dimension=Owl.Width.Default] - The dimension to return. * @returns {Number} - The width of the view in pixel. */ Owl.prototype.width = function(dimension) { dimension = dimension || Owl.Width.Default; switch (dimension) { case Owl.Width.Inner: case Owl.Width.Outer: return this._width; default: return this._width - this.settings.stagePadding * 2 + this.settings.margin; } }; /** * Refreshes the carousel primarily for adaptive purposes. * @public */ Owl.prototype.refresh = function() { this.enter('refreshing'); this.trigger('refresh'); this.setup(); this.optionsLogic(); this.$element.addClass(this.options.refreshClass); this.update(); this.$element.removeClass(this.options.refreshClass); this.leave('refreshing'); this.trigger('refreshed'); }; /** * Checks window `resize` event. * @protected */ Owl.prototype.onThrottledResize = function() { window.clearTimeout(this.resizeTimer); this.resizeTimer = window.setTimeout(this._handlers.onResize, this.settings.responsiveRefreshRate); }; /** * Checks window `resize` event. * @protected */ Owl.prototype.onResize = function() { if (!this._items.length) { return false; } if (this._width === this.$element.width()) { return false; } if (!this.isVisible()) { return false; } this.enter('resizing'); if (this.trigger('resize').isDefaultPrevented()) { this.leave('resizing'); return false; } this.invalidate('width'); this.refresh(); this.leave('resizing'); this.trigger('resized'); }; /** * Registers event handlers. * @todo Check `msPointerEnabled` * @todo #261 * @protected */ Owl.prototype.registerEventHandlers = function() { if ($.support.transition) { this.$stage.on($.support.transition.end + '.owl.core', $.proxy(this.onTransitionEnd, this)); } if (this.settings.responsive !== false) { this.on(window, 'resize', this._handlers.onThrottledResize); } if (this.settings.mouseDrag) { this.$element.addClass(this.options.dragClass); this.$stage.on('mousedown.owl.core', $.proxy(this.onDragStart, this)); this.$stage.on('dragstart.owl.core selectstart.owl.core', function() { return false }); } if (this.settings.touchDrag){ this.$stage.on('touchstart.owl.core', $.proxy(this.onDragStart, this)); this.$stage.on('touchcancel.owl.core', $.proxy(this.onDragEnd, this)); } }; /** * Handles `touchstart` and `mousedown` events. * @todo Horizontal swipe threshold as option * @todo #261 * @protected * @param {Event} event - The event arguments. */ Owl.prototype.onDragStart = function(event) { var stage = null; if (event.which === 3) { return; } if ($.support.transform) { stage = this.$stage.css('transform').replace(/.*\(|\)| /g, '').split(','); stage = { x: stage[stage.length === 16 ? 12 : 4], y: stage[stage.length === 16 ? 13 : 5] }; } else { stage = this.$stage.position(); stage = { x: this.settings.rtl ? stage.left + this.$stage.width() - this.width() + this.settings.margin : stage.left, y: stage.top }; } if (this.is('animating')) { $.support.transform ? this.animate(stage.x) : this.$stage.stop() this.invalidate('position'); } this.$element.toggleClass(this.options.grabClass, event.type === 'mousedown'); this.speed(0); this._drag.time = new Date().getTime(); this._drag.target = $(event.target); this._drag.stage.start = stage; this._drag.stage.current = stage; this._drag.pointer = this.pointer(event); $(document).on('mouseup.owl.core touchend.owl.core', $.proxy(this.onDragEnd, this)); $(document).one('mousemove.owl.core touchmove.owl.core', $.proxy(function(event) { var delta = this.difference(this._drag.pointer, this.pointer(event)); $(document).on('mousemove.owl.core touchmove.owl.core', $.proxy(this.onDragMove, this)); if (Math.abs(delta.x) < Math.abs(delta.y) && this.is('valid')) { return; } event.preventDefault(); this.enter('dragging'); this.trigger('drag'); }, this)); }; /** * Handles the `touchmove` and `mousemove` events. * @todo #261 * @protected * @param {Event} event - The event arguments. */ Owl.prototype.onDragMove = function(event) { var minimum = null, maximum = null, pull = null, delta = this.difference(this._drag.pointer, this.pointer(event)), stage = this.difference(this._drag.stage.start, delta); if (!this.is('dragging')) { return; } event.preventDefault(); if (this.settings.loop) { minimum = this.coordinates(this.minimum()); maximum = this.coordinates(this.maximum() + 1) - minimum; stage.x = (((stage.x - minimum) % maximum + maximum) % maximum) + minimum; } else { minimum = this.settings.rtl ? this.coordinates(this.maximum()) : this.coordinates(this.minimum()); maximum = this.settings.rtl ? this.coordinates(this.minimum()) : this.coordinates(this.maximum()); pull = this.settings.pullDrag ? -1 * delta.x / 5 : 0; stage.x = Math.max(Math.min(stage.x, minimum + pull), maximum + pull); } this._drag.stage.current = stage; this.animate(stage.x); }; /** * Handles the `touchend` and `mouseup` events. * @todo #261 * @todo Threshold for click event * @protected * @param {Event} event - The event arguments. */ Owl.prototype.onDragEnd = function(event) { var delta = this.difference(this._drag.pointer, this.pointer(event)), stage = this._drag.stage.current, direction = delta.x > 0 ^ this.settings.rtl ? 'left' : 'right'; $(document).off('.owl.core'); this.$element.removeClass(this.options.grabClass); if (delta.x !== 0 && this.is('dragging') || !this.is('valid')) { this.speed(this.settings.dragEndSpeed || this.settings.smartSpeed); this.current(this.closest(stage.x, delta.x !== 0 ? direction : this._drag.direction)); this.invalidate('position'); this.update(); this._drag.direction = direction; if (Math.abs(delta.x) > 3 || new Date().getTime() - this._drag.time > 300) { this._drag.target.one('click.owl.core', function() { return false; }); } } if (!this.is('dragging')) { return; } this.leave('dragging'); this.trigger('dragged'); }; /** * Gets absolute position of the closest item for a coordinate. * @todo Setting `freeDrag` makes `closest` not reusable. See #165. * @protected * @param {Number} coordinate - The coordinate in pixel. * @param {String} direction - The direction to check for the closest item. Ether `left` or `right`. * @return {Number} - The absolute position of the closest item. */ Owl.prototype.closest = function(coordinate, direction) { var position = -1, pull = 30, width = this.width(), coordinates = this.coordinates(); if (!this.settings.freeDrag) { // check closest item $.each(coordinates, $.proxy(function(index, value) { // on a left pull, check on current index if (direction === 'left' && coordinate > value - pull && coordinate < value + pull) { position = index; // on a right pull, check on previous index // to do so, subtract width from value and set position = index + 1 } else if (direction === 'right' && coordinate > value - width - pull && coordinate < value - width + pull) { position = index + 1; } else if (this.op(coordinate, '<', value) && this.op(coordinate, '>', coordinates[index + 1] !== undefined ? coordinates[index + 1] : value - width)) { position = direction === 'left' ? index + 1 : index; } return position === -1; }, this)); } if (!this.settings.loop) { // non loop boundries if (this.op(coordinate, '>', coordinates[this.minimum()])) { position = coordinate = this.minimum(); } else if (this.op(coordinate, '<', coordinates[this.maximum()])) { position = coordinate = this.maximum(); } } return position; }; /** * Animates the stage. * @todo #270 * @public * @param {Number} coordinate - The coordinate in pixels. */ Owl.prototype.animate = function(coordinate) { var animate = this.speed() > 0; this.is('animating') && this.onTransitionEnd(); if (animate) { this.enter('animating'); this.trigger('translate'); } if ($.support.transform3d && $.support.transition) { this.$stage.css({ transform: 'translate3d(' + coordinate + 'px,0px,0px)', transition: (this.speed() / 1000) + 's' + ( this.settings.slideTransition ? ' ' + this.settings.slideTransition : '' ) }); } else if (animate) { this.$stage.animate({ left: coordinate + 'px' }, this.speed(), this.settings.fallbackEasing, $.proxy(this.onTransitionEnd, this)); } else { this.$stage.css({ left: coordinate + 'px' }); } }; /** * Checks whether the carousel is in a specific state or not. * @param {String} state - The state to check. * @returns {Boolean} - The flag which indicates if the carousel is busy. */ Owl.prototype.is = function(state) { return this._states.current[state] && this._states.current[state] > 0; }; /** * Sets the absolute position of the current item. * @public * @param {Number} [position] - The new absolute position or nothing to leave it unchanged. * @returns {Number} - The absolute position of the current item. */ Owl.prototype.current = function(position) { if (position === undefined) { return this._current; } if (this._items.length === 0) { return undefined; } position = this.normalize(position); if (this._current !== position) { var event = this.trigger('change', { property: { name: 'position', value: position } }); if (event.data !== undefined) { position = this.normalize(event.data); } this._current = position; this.invalidate('position'); this.trigger('changed', { property: { name: 'position', value: this._current } }); } return this._current; }; /** * Invalidates the given part of the update routine. * @param {String} [part] - The part to invalidate. * @returns {Array.