/
morphext.js
93 lines (81 loc) · 2.71 KB
/
morphext.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
/*!
* Morphext - Text Rotating Plugin for jQuery
* https://github.com/MrSaints/Morphext
*
* Built on jQuery Boilerplate
* http://jqueryboilerplate.com/
*
* Copyright 2014 Ian Lai and other contributors
* Released under the MIT license
* http://ian.mit-license.org/
*/
/*eslint-env browser */
/*global jQuery:false */
/*eslint-disable no-underscore-dangle */
(function ($) {
"use strict";
var pluginName = "Morphext",
defaults = {
animation: "bounceIn",
letters: false,
separator: ",",
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 () {
var $that = this;
this.phrases = [];
this.element.addClass("morphext");
$.each(this.element.text().split(this.settings.separator), function (key, value) {
$that.phrases.push(value.trim());
});
this.index = -1;
this.animate();
this.start();
},
animate: function () {
if ((this.index + 1) === this.phrases.length) {
this.index = -1;
}
++this.index;
if (this.settings.letters) {
var $that = this;
this.element[0].innerHTML = "";
$.each(this.phrases[this.index].split(""), function(key, value) {
value = value === " " ? " " : value;
setTimeout(function () {
$that.element.append("<span class=\"animated " + $that.settings.animation + "\">" + value + "</span>");
}, key * 100);
});
} else {
this.element[0].innerHTML = "<span class=\"animated " + this.settings.animation + "\">" + this.phrases[this.index] + "</span>";
}
if ($.isFunction(this.settings.complete)) {
this.settings.complete.call(this);
}
},
start: function () {
var $that = this;
this._interval = setInterval(function () {
$that.animate();
}, this.settings.speed);
},
stop: function () {
this._interval = clearInterval(this._interval);
}
};
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery);