-
Notifications
You must be signed in to change notification settings - Fork 7
/
morphist.js
95 lines (84 loc) · 2.76 KB
/
morphist.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/*!
* Morphist - Generic Rotating Plugin for jQuery
* https://github.com/MrSaints/Morphist
*
* Built on jQuery Boilerplate
* http:https://jqueryboilerplate.com/
*
* Copyright 2015 Ian Lai and other contributors
* Released under the MIT license
* http:https://ian.mit-license.org/
*/
/*eslint-env browser */
/*global jQuery:false */
/*eslint-disable no-underscore-dangle */
(function ($) {
"use strict";
var pluginName = "Morphist",
defaults = {
animateIn: "bounceIn",
animateOut: "rollOut",
speed: 2000,
complete: $.noop
};
function Plugin (element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._init();
}
Plugin.prototype = {
_init: function () {
this.children = this.element.children();
this.element.addClass("morphist");
this.index = 0;
this.loop();
},
loop: function () {
var $that = this;
this._animateIn();
this.timeout = setTimeout(function () {
var elem = $that._animateOut();
$that._attachOutListener(elem);
}, this.settings.speed);
if ($.isFunction(this.settings.complete)) {
this.settings.complete.call(this);
}
},
_attachOutListener: function ($elem) {
var $that = this;
$elem.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd" +
"oanimationend animationend", function () {
if ($elem.hasClass("mis-out")) {
$elem.removeClass();
$that.index = ++$that.index % $that.children.length;
$that.loop();
}
});
},
stop: function () {
clearTimeout(this.timeout);
},
_animateIn: function () {
return this.children.eq(this.index)
.addClass("animated mis-in " + this.settings.animateIn);
},
_animateOut: function () {
var element = this.children.eq(this.index);
element.removeClass();
if (this.settings.animateIn === this.settings.animateOut) {
/*eslint-disable */
element[0].offsetWidth;
/*eslint-enable */
}
return element.addClass("animated mis-out " + this.settings.animateOut);
}
};
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery);