You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.9 KiB
121 lines
2.9 KiB
/** |
|
* Animate Plugin |
|
* @version 2.3.4 |
|
* @author Bartosz Wojciechowski |
|
* @author David Deutsch |
|
* @license The MIT License (MIT) |
|
*/ |
|
;(function($, window, document, undefined) { |
|
|
|
/** |
|
* Creates the animate plugin. |
|
* @class The Navigation Plugin |
|
* @param {Owl} scope - The Owl Carousel |
|
*/ |
|
var Animate = function(scope) { |
|
this.core = scope; |
|
this.core.options = $.extend({}, Animate.Defaults, this.core.options); |
|
this.swapping = true; |
|
this.previous = undefined; |
|
this.next = undefined; |
|
|
|
this.handlers = { |
|
'change.owl.carousel': $.proxy(function(e) { |
|
if (e.namespace && e.property.name == 'position') { |
|
this.previous = this.core.current(); |
|
this.next = e.property.value; |
|
} |
|
}, this), |
|
'drag.owl.carousel dragged.owl.carousel translated.owl.carousel': $.proxy(function(e) { |
|
if (e.namespace) { |
|
this.swapping = e.type == 'translated'; |
|
} |
|
}, this), |
|
'translate.owl.carousel': $.proxy(function(e) { |
|
if (e.namespace && this.swapping && (this.core.options.animateOut || this.core.options.animateIn)) { |
|
this.swap(); |
|
} |
|
}, this) |
|
}; |
|
|
|
this.core.$element.on(this.handlers); |
|
}; |
|
|
|
/** |
|
* Default options. |
|
* @public |
|
*/ |
|
Animate.Defaults = { |
|
animateOut: false, |
|
animateIn: false |
|
}; |
|
|
|
/** |
|
* Toggles the animation classes whenever an translations starts. |
|
* @protected |
|
* @returns {Boolean|undefined} |
|
*/ |
|
Animate.prototype.swap = function() { |
|
|
|
if (this.core.settings.items !== 1) { |
|
return; |
|
} |
|
|
|
if (!$.support.animation || !$.support.transition) { |
|
return; |
|
} |
|
|
|
this.core.speed(0); |
|
|
|
var left, |
|
clear = $.proxy(this.clear, this), |
|
previous = this.core.$stage.children().eq(this.previous), |
|
next = this.core.$stage.children().eq(this.next), |
|
incoming = this.core.settings.animateIn, |
|
outgoing = this.core.settings.animateOut; |
|
|
|
if (this.core.current() === this.previous) { |
|
return; |
|
} |
|
|
|
if (outgoing) { |
|
left = this.core.coordinates(this.previous) - this.core.coordinates(this.next); |
|
previous.one($.support.animation.end, clear) |
|
.css( { 'left': left + 'px' } ) |
|
.addClass('animated owl-animated-out') |
|
.addClass(outgoing); |
|
} |
|
|
|
if (incoming) { |
|
next.one($.support.animation.end, clear) |
|
.addClass('animated owl-animated-in') |
|
.addClass(incoming); |
|
} |
|
}; |
|
|
|
Animate.prototype.clear = function(e) { |
|
$(e.target).css( { 'left': '' } ) |
|
.removeClass('animated owl-animated-out owl-animated-in') |
|
.removeClass(this.core.settings.animateIn) |
|
.removeClass(this.core.settings.animateOut); |
|
this.core.onTransitionEnd(); |
|
}; |
|
|
|
/** |
|
* Destroys the plugin. |
|
* @public |
|
*/ |
|
Animate.prototype.destroy = function() { |
|
var handler, property; |
|
|
|
for (handler in this.handlers) { |
|
this.core.$element.off(handler, this.handlers[handler]); |
|
} |
|
for (property in Object.getOwnPropertyNames(this)) { |
|
typeof this[property] != 'function' && (this[property] = null); |
|
} |
|
}; |
|
|
|
$.fn.owlCarousel.Constructor.Plugins.Animate = Animate; |
|
|
|
})(window.Zepto || window.jQuery, window, document);
|
|
|