/** * Navigation Plugin * @version 2.0.0 * @author Artus Kolanowski * @license The MIT License (MIT) */ ;(function($, window, document, undefined) { 'use strict'; /** * Creates the navigation plugin. * @class The Navigation Plugin * @param {Owl} carousel - The Owl Carousel. */ var Navigation = function(carousel) { /** * Reference to the core. * @protected * @type {Owl} */ this._core = carousel; /** * Indicates whether the plugin is initialized or not. * @protected * @type {Boolean} */ this._initialized = false; /** * The current paging indexes. * @protected * @type {Array} */ this._pages = []; /** * All DOM elements of the user interface. * @protected * @type {Object} */ this._controls = {}; /** * Markup for an indicator. * @protected * @type {Array.<String>} */ this._templates = []; /** * The carousel element. * @type {jQuery} */ this.$element = this._core.$element; /** * Overridden methods of the carousel. * @protected * @type {Object} */ this._overrides = { next: this._core.next, prev: this._core.prev, to: this._core.to }; /** * All event handlers. * @protected * @type {Object} */ this._handlers = { 'prepared.owl.carousel': $.proxy(function(e) { if (this._core.settings.dotsData) { this._templates.push($(e.content).find('[data-dot]').andSelf('[data-dot]').attr('data-dot')); } }, this), 'add.owl.carousel': $.proxy(function(e) { if (this._core.settings.dotsData) { this._templates.splice(e.position, 0, $(e.content).find('[data-dot]').andSelf('[data-dot]').attr('data-dot')); } }, this), 'remove.owl.carousel prepared.owl.carousel': $.proxy(function(e) { if (this._core.settings.dotsData) { this._templates.splice(e.position, 1); } }, this), 'change.owl.carousel': $.proxy(function(e) { if (e.property.name == 'position') { if (!this._core.state.revert && !this._core.settings.loop && this._core.settings.navRewind) { var current = this._core.current(), maximum = this._core.maximum(), minimum = this._core.minimum(); e.data = e.property.value > maximum ? current >= maximum ? minimum : maximum : e.property.value < minimum ? maximum : e.property.value; } } }, this), 'changed.owl.carousel': $.proxy(function(e) { if (e.property.name == 'position') { this.draw(); } }, this), 'refreshed.owl.carousel': $.proxy(function() { if (!this._initialized) { this.initialize(); this._initialized = true; } this._core.trigger('refresh', null, 'navigation'); this.update(); this.draw(); this._core.trigger('refreshed', null, 'navigation'); }, this) }; // set default options this._core.options = $.extend({}, Navigation.Defaults, this._core.options); // register event handlers this.$element.on(this._handlers); } /** * Default options. * @public * @todo Rename `slideBy` to `navBy` */ Navigation.Defaults = { nav: false, navRewind: true, navText: [ 'prev', 'next' ], navSpeed: false, navElement: 'div', navContainer: false, navContainerClass: 'owl-nav', navClass: [ 'owl-prev', 'owl-next' ], slideBy: 1, dotClass: 'owl-dot', dotsClass: 'owl-dots', dots: true, dotsEach: false, dotData: false, dotsSpeed: false, dotsContainer: false, controlsClass: 'owl-controls' } /** * Initializes the layout of the plugin and extends the carousel. * @protected */ Navigation.prototype.initialize = function() { var $container, override, options = this._core.settings; // create the indicator template if (!options.dotsData) { this._templates = [ $('<div>') .addClass(options.dotClass) .append($('<span>')) .prop('outerHTML') ]; } // create controls container if needed if (!options.navContainer || !options.dotsContainer) { this._controls.$container = $('<div>') .addClass(options.controlsClass) .appendTo(this.$element); } // create DOM structure for absolute navigation this._controls.$indicators = options.dotsContainer ? $(options.dotsContainer) : $('<div>').hide().addClass(options.dotsClass).appendTo(this._controls.$container); this._controls.$indicators.on('click', 'div', $.proxy(function(e) { var index = $(e.target).parent().is(this._controls.$indicators) ? $(e.target).index() : $(e.target).parent().index(); e.preventDefault(); this.to(index, options.dotsSpeed); }, this)); // create DOM structure for relative navigation $container = options.navContainer ? $(options.navContainer) : $('<div>').addClass(options.navContainerClass).prependTo(this._controls.$container); this._controls.$next = $('<' + options.navElement + '>'); this._controls.$previous = this._controls.$next.clone(); this._controls.$previous .addClass(options.navClass[0]) .html(options.navText[0]) .hide() .prependTo($container) .on('click', $.proxy(function(e) { this.prev(options.navSpeed); }, this)); this._controls.$next .addClass(options.navClass[1]) .html(options.navText[1]) .hide() .appendTo($container) .on('click', $.proxy(function(e) { this.next(options.navSpeed); }, this)); // override public methods of the carousel for (override in this._overrides) { this._core[override] = $.proxy(this[override], this); } } /** * Destroys the plugin. * @protected */ Navigation.prototype.destroy = function() { var handler, control, property, override; for (handler in this._handlers) { this.$element.off(handler, this._handlers[handler]); } for (control in this._controls) { this._controls[control].remove(); } for (override in this.overides) { this._core[override] = this._overrides[override]; } for (property in Object.getOwnPropertyNames(this)) { typeof this[property] != 'function' && (this[property] = null); } } /** * Updates the internal state. * @protected */ Navigation.prototype.update = function() { var i, j, k, options = this._core.settings, lower = this._core.clones().length / 2, upper = lower + this._core.items().length, size = options.center || options.autoWidth || options.dotData ? 1 : options.dotsEach || options.items; if (options.slideBy !== 'page') { options.slideBy = Math.min(options.slideBy, options.items); } if (options.dots || options.slideBy == 'page') { this._pages = []; for (i = lower, j = 0, k = 0; i < upper; i++) { if (j >= size || j === 0) { this._pages.push({ start: i - lower, end: i - lower + size - 1 }); j = 0, ++k; } j += this._core.mergers(this._core.relative(i)); } } } /** * Draws the user interface. * @todo The option `dotData` wont work. * @protected */ Navigation.prototype.draw = function() { var difference, i, html = '', options = this._core.settings, $items = this._core.$stage.children(), index = this._core.relative(this._core.current()); if (options.nav && !options.loop && !options.navRewind) { this._controls.$previous.toggleClass('disabled', index <= 0); this._controls.$next.toggleClass('disabled', index >= this._core.maximum()); } this._controls.$previous.toggle(options.nav); this._controls.$next.toggle(options.nav); if (options.dots) { difference = this._pages.length - this._controls.$indicators.children().length; if (options.dotData && difference !== 0) { for (i = 0; i < this._controls.$indicators.children().length; i++) { html += this._templates[this._core.relative(i)]; } this._controls.$indicators.html(html); } else if (difference > 0) { html = new Array(difference + 1).join(this._templates[0]); this._controls.$indicators.append(html); } else if (difference < 0) { this._controls.$indicators.children().slice(difference).remove(); } this._controls.$indicators.find('.active').removeClass('active'); this._controls.$indicators.children().eq($.inArray(this.current(), this._pages)).addClass('active'); } this._controls.$indicators.toggle(options.dots); } /** * Extends event data. * @protected * @param {Event} event - The event object which gets thrown. */ Navigation.prototype.onTrigger = function(event) { var settings = this._core.settings; event.page = { index: $.inArray(this.current(), this._pages), count: this._pages.length, size: settings && (settings.center || settings.autoWidth || settings.dotData ? 1 : settings.dotsEach || settings.items) }; } /** * Gets the current page position of the carousel. * @protected * @returns {Number} */ Navigation.prototype.current = function() { var index = this._core.relative(this._core.current()); return $.grep(this._pages, function(o) { return o.start <= index && o.end >= index; }).pop(); } /** * Gets the current succesor/predecessor position. * @protected * @returns {Number} */ Navigation.prototype.getPosition = function(successor) { var position, length, options = this._core.settings; if (options.slideBy == 'page') { position = $.inArray(this.current(), this._pages); length = this._pages.length; successor ? ++position : --position; position = this._pages[((position % length) + length) % length].start; } else { position = this._core.relative(this._core.current()); length = this._core.items().length; successor ? position += options.slideBy : position -= options.slideBy; } return position; } /** * Slides to the next item or page. * @public * @param {Number} [speed=false] - The time in milliseconds for the transition. */ Navigation.prototype.next = function(speed) { $.proxy(this._overrides.to, this._core)(this.getPosition(true), speed); } /** * Slides to the previous item or page. * @public * @param {Number} [speed=false] - The time in milliseconds for the transition. */ Navigation.prototype.prev = function(speed) { $.proxy(this._overrides.to, this._core)(this.getPosition(false), speed); } /** * Slides to the specified item or page. * @public * @param {Number} position - The position of the item or page. * @param {Number} [speed] - The time in milliseconds for the transition. * @param {Boolean} [standard=false] - Whether to use the standard behaviour or not. */ Navigation.prototype.to = function(position, speed, standard) { var length; if (!standard) { length = this._pages.length; $.proxy(this._overrides.to, this._core)(this._pages[((position % length) + length) % length].start, speed); } else { $.proxy(this._overrides.to, this._core)(position, speed); } } $.fn.owlCarousel.Constructor.Plugins.Navigation = Navigation; })(window.Zepto || window.jQuery, window, document); |