https://inhispania.com/core/modules/a8e2a155bb/assets/js/owl.navigation.js?rnd=81605

1/**
2 * Navigation Plugin
3 * @version 2.1.0
4 * @author Artus Kolanowski
5 * @author David Deutsch
6 * @license The MIT License (MIT)
7 */
8;(function($, window, document, undefined) {
9	'use strict';
10
11	/**
12	 * Creates the navigation plugin.
13	 * @class The Navigation Plugin
14	 * @param {Owl} carousel - The Owl Carousel.
15	 */
16	var Navigation = function(carousel) {
17		/**
18		 * Reference to the core.
19		 * @protected
20		 * @type {Owl}
21		 */
22		this._core = carousel;
23
24		/**
25		 * Indicates whether the plugin is initialized or not.
26		 * @protected
27		 * @type {Boolean}
28		 */
29		this._initialized = false;
30
31		/**
32		 * The current paging indexes.
33		 * @protected
34		 * @type {Array}
35		 */
36		this._pages = [];
37
38		/**
39		 * All DOM elements of the user interface.
40		 * @protected
41		 * @type {Object}
42		 */
43		this._controls = {};
44
45		/**
46		 * Markup for an indicator.
47		 * @protected
48		 * @type {Array.<String>}
49		 */
50		this._templates = [];
51
52		/**
53		 * The carousel element.
54		 * @type {jQuery}
55		 */
56		this.$element = this._core.$element;
57
58		/**
59		 * Overridden methods of the carousel.
60		 * @protected
61		 * @type {Object}
62		 */
63		this._overrides = {
64			next: this._core.next,
65			prev: this._core.prev,
66			to: this._core.to
67		};
68
69		/**
70		 * All event handlers.
71		 * @protected
72		 * @type {Object}
73		 */
74		this._handlers = {
75			'prepared.owl.carousel': $.proxy(function(e) {
76				if (e.namespace && this._core.settings.dotsData) {
77					this._templates.push('<div class="' + this._core.settings.dotClass + '">' +
78						$(e.content).find('[data-dot]').addBack('[data-dot]').attr('data-dot') + '</div>');
79				}
80			}, this),
81			'added.owl.carousel': $.proxy(function(e) {
82				if (e.namespace && this._core.settings.dotsData) {
83					this._templates.splice(e.position, 0, this._templates.pop());
84				}
85			}, this),
86			'remove.owl.carousel': $.proxy(function(e) {
87				if (e.namespace && this._core.settings.dotsData) {
88					this._templates.splice(e.position, 1);
89				}
90			}, this),
91			'changed.owl.carousel': $.proxy(function(e) {
92				if (e.namespace && e.property.name == 'position') {
93					this.draw();
94				}
95			}, this),
96			'initialized.owl.carousel': $.proxy(function(e) {
97				if (e.namespace && !this._initialized) {
98					this._core.trigger('initialize', null, 'navigation');
99					this.initialize();
100					this.update();
101					this.draw();
102					this._initialized = true;
103					this._core.trigger('initialized', null, 'navigation');
104				}
105			}, this),
106			'refreshed.owl.carousel': $.proxy(function(e) {
107				if (e.namespace && this._initialized) {
108					this._core.trigger('refresh', null, 'navigation');
109					this.update();
110					this.draw();
111					this._core.trigger('refreshed', null, 'navigation');
112				}
113			}, this)
114		};
115
116		// set default options
117		this._core.options = $.extend({}, Navigation.Defaults, this._core.options);
118
119		// register event handlers
120		this.$element.on(this._handlers);
121	};
122
123	/**
124	 * Default options.
125	 * @public
126	 * @todo Rename `slideBy` to `navBy`
127	 */
128	Navigation.Defaults = {
129		nav: false,
130		navText: [ 'prev', 'next' ],
131		navSpeed: false,
132		navElement: 'div',
133		navContainer: false,
134		navContainerClass: 'owl-nav',
135		navClass: [ 'owl-prev', 'owl-next' ],
136		slideBy: 1,
137		dotClass: 'owl-dot',
138		dotsClass: 'owl-dots',
139		dots: true,
140		dotsEach: false,
141		dotsData: false,
142		dotsSpeed: false,
143		dotsContainer: false
144	};
145
146	/**
147	 * Initializes the layout of the plugin and extends the carousel.
148	 * @protected
149	 */
150	Navigation.prototype.initialize = function() {
151		var override,
152			settings = this._core.settings;
153
154		// create DOM structure for relative navigation
155		this._controls.$relative = (settings.navContainer ? $(settings.navContainer)
156			: $('<div>').addClass(settings.navContainerClass).appendTo(this.$element)).addClass('disabled');
157
158		this._controls.$previous = $('<' + settings.navElement + '>')
159			.addClass(settings.navClass[0])
160			.html(settings.navText[0])
161			.prependTo(this._controls.$relative)
162			.on('click', $.proxy(function(e) {
163				this.prev(settings.navSpeed);
164			}, this));
165		this._controls.$next = $('<' + settings.navElement + '>')
166			.addClass(settings.navClass[1])
167			.html(settings.navText[1])
168			.appendTo(this._controls.$relative)
169			.on('click', $.proxy(function(e) {
170				this.next(settings.navSpeed);
171			}, this));
172
173		// create DOM structure for absolute navigation
174		if (!settings.dotsData) {
175			this._templates = [ $('<div>')
176				.addClass(settings.dotClass)
177				.append($('<span>'))
178				.prop('outerHTML') ];
179		}
180
181		this._controls.$absolute = (settings.dotsContainer ? $(settings.dotsContainer)
182			: $('<div>').addClass(settings.dotsClass).appendTo(this.$element)).addClass('disabled');
183
184		this._controls.$absolute.on('click', 'div', $.proxy(function(e) {
185			var index = $(e.target).parent().is(this._controls.$absolute)
186				? $(e.target).index() : $(e.target).parent().index();
187
188			e.preventDefault();
189
190			this.to(index, settings.dotsSpeed);
191		}, this));
192
193		// override public methods of the carousel
194		for (override in this._overrides) {
195			this._core[override] = $.proxy(this[override], this);
196		}
197	};
198
199	/**
200	 * Destroys the plugin.
201	 * @protected
202	 */
203	Navigation.prototype.destroy = function() {
204		var handler, control, property, override;
205
206		for (handler in this._handlers) {
207			this.$element.off(handler, this._handlers[handler]);
208		}
209		for (control in this._controls) {
210			this._controls[control].remove();
211		}
212		for (override in this.overides) {
213			this._core[override] = this._overrides[override];
214		}
215		for (property in Object.getOwnPropertyNames(this)) {
216			typeof this[property] != 'function' && (this[property] = null);
217		}
218	};
219
220	/**
221	 * Updates the internal state.
222	 * @protected
223	 */
224	Navigation.prototype.update = function() {
225		var i, j, k,
226			lower = this._core.clones().length / 2,
227			upper = lower + this._core.items().length,
228			maximum = this._core.maximum(true),
229			settings = this._core.settings,
230			size = settings.center || settings.autoWidth || settings.dotsData
231				? 1 : settings.dotsEach || settings.items;
232
233		if (settings.slideBy !== 'page') {
234			settings.slideBy = Math.min(settings.slideBy, settings.items);
235		}
236
237		if (settings.dots || settings.slideBy == 'page') {
238			this._pages = [];
239
240			for (i = lower, j = 0, k = 0; i < upper; i++) {
241				if (j >= size || j === 0) {
242					this._pages.push({
243						start: Math.min(maximum, i - lower),
244						end: i - lower + size - 1
245					});
246					if (Math.min(maximum, i - lower) === maximum) {
247						break;
248					}
249					j = 0, ++k;
250				}
251				j += this._core.mergers(this._core.relative(i));
252			}
253		}
254	};
255
256	/**
257	 * Draws the user interface.
258	 * @todo The option `dotsData` wont work.
259	 * @protected
260	 */
261	Navigation.prototype.draw = function() {
262		var difference,
263			settings = this._core.settings,
264			disabled = this._core.items().length <= settings.items,
265			index = this._core.relative(this._core.current()),
266			loop = settings.loop || settings.rewind;
267
268		this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);
269
270		if (settings.nav) {
271			this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
272			this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
273		}
274
275		this._controls.$absolute.toggleClass('disabled', !settings.dots || disabled);
276
277		if (settings.dots) {
278			difference = this._pages.length - this._controls.$absolute.children().length;
279
280			if (settings.dotsData && difference !== 0) {
281				this._controls.$absolute.html(this._templates.join(''));
282			} else if (difference > 0) {
283				this._controls.$absolute.append(new Array(difference + 1).join(this._templates[0]));
284			} else if (difference < 0) {
285				this._controls.$absolute.children().slice(difference).remove();
286			}
287
288			this._controls.$absolute.find('.active').removeClass('active');
289			this._controls.$absolute.children().eq($.inArray(this.current(), this._pages)).addClass('active');
290		}
291	};
292
293	/**
294	 * Extends event data.
295	 * @protected
296	 * @param {Event} event - The event object which gets thrown.
297	 */
298	Navigation.prototype.onTrigger = function(event) {
299		var settings = this._core.settings;
300
301		event.page = {
302			index: $.inArray(this.current(), this._pages),
303			count: this._pages.length,
304			size: settings && (settings.center || settings.autoWidth || settings.dotsData
305				? 1 : settings.dotsEach || settings.items)
306		};
307	};
308
309	/**
310	 * Gets the current page position of the carousel.
311	 * @protected
312	 * @returns {Number}
313	 */
314	Navigation.prototype.current = function() {
315		var current = this._core.relative(this._core.current());
316		return $.grep(this._pages, $.proxy(function(page, index) {
317			return page.start <= current && page.end >= current;
318		}, this)).pop();
319	};
320
321	/**
322	 * Gets the current succesor/predecessor position.
323	 * @protected
324	 * @returns {Number}
325	 */
326	Navigation.prototype.getPosition = function(successor) {
327		var position, length,
328			settings = this._core.settings;
329
330		if (settings.slideBy == 'page') {
331			position = $.inArray(this.current(), this._pages);
332			length = this._pages.length;
333			successor ? ++position : --position;

334			position = this._pages[((position % length) + length) % length].start;
335		} else {
336			position = this._core.relative(this._core.current());
337			length = this._core.items().length;
338			successor ? position += settings.slideBy : position -= settings.slideBy;
339		}
340
341		return position;
342	};
343
344	/**
345	 * Slides to the next item or page.
346	 * @public
347	 * @param {Number} [speed=false] - The time in milliseconds for the transition.
348	 */
349	Navigation.prototype.next = function(speed) {
350		$.proxy(this._overrides.to, this._core)(this.getPosition(true), speed);
351	};
352
353	/**
354	 * Slides to the previous item or page.
355	 * @public
356	 * @param {Number} [speed=false] - The time in milliseconds for the transition.
357	 */
358	Navigation.prototype.prev = function(speed) {
359		$.proxy(this._overrides.to, this._core)(this.getPosition(false), speed);
360	};
361
362	/**
363	 * Slides to the specified item or page.
364	 * @public
365	 * @param {Number} position - The position of the item or page.
366	 * @param {Number} [speed] - The time in milliseconds for the transition.
367	 * @param {Boolean} [standard=false] - Whether to use the standard behaviour or not.
368	 */
369	Navigation.prototype.to = function(position, speed, standard) {
370		var length;
371
372		if (!standard && this._pages.length) {
373			length = this._pages.length;
374			$.proxy(this._overrides.to, this._core)(this._pages[((position % length) + length) % length].start, speed);
375		} else {
376			$.proxy(this._overrides.to, this._core)(position, speed);
377		}
378	};
379
380	$.fn.owlCarousel.Constructor.Plugins.Navigation = Navigation;
381
382})(window.Zepto || window.jQuery, window, document);