519 lines
23 KiB
JavaScript
519 lines
23 KiB
JavaScript
/*!
|
|
*
|
|
* TypeIt - The most versatile animated typing utility on the planet.
|
|
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
|
|
* Version: v6.1.1
|
|
* License: GPL-2.0
|
|
* URL: https://typeitjs.com
|
|
*
|
|
*/
|
|
! function(t, e) {
|
|
"object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.TypeIt = e() : t.TypeIt = e()
|
|
}(this, (function() {
|
|
return function(t) {
|
|
var e = {};
|
|
|
|
function n(i) {
|
|
if (e[i]) return e[i].exports;
|
|
var r = e[i] = {
|
|
i: i,
|
|
l: !1,
|
|
exports: {}
|
|
};
|
|
return t[i].call(r.exports, r, r.exports, n), r.l = !0, r.exports
|
|
}
|
|
return n.m = t, n.c = e, n.d = function(t, e, i) {
|
|
n.o(t, e) || Object.defineProperty(t, e, {
|
|
enumerable: !0,
|
|
get: i
|
|
})
|
|
}, n.r = function(t) {
|
|
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
|
|
value: "Module"
|
|
}), Object.defineProperty(t, "__esModule", {
|
|
value: !0
|
|
})
|
|
}, n.t = function(t, e) {
|
|
if (1 & e && (t = n(t)), 8 & e) return t;
|
|
if (4 & e && "object" == typeof t && t && t.__esModule) return t;
|
|
var i = Object.create(null);
|
|
if (n.r(i), Object.defineProperty(i, "default", {
|
|
enumerable: !0,
|
|
value: t
|
|
}), 2 & e && "string" != typeof t)
|
|
for (var r in t) n.d(i, r, function(e) {
|
|
return t[e]
|
|
}.bind(null, r));
|
|
return i
|
|
}, n.n = function(t) {
|
|
var e = t && t.__esModule ? function() {
|
|
return t.default
|
|
} : function() {
|
|
return t
|
|
};
|
|
return n.d(e, "a", e), e
|
|
}, n.o = function(t, e) {
|
|
return Object.prototype.hasOwnProperty.call(t, e)
|
|
}, n.p = "", n(n.s = 0)
|
|
}([function(t, e, n) {
|
|
"use strict";
|
|
n.r(e);
|
|
var i = {
|
|
strings: [],
|
|
speed: 100,
|
|
cursor: !0,
|
|
cursorChar: "|",
|
|
cursorSpeed: 1e3,
|
|
deleteSpeed: null,
|
|
lifeLike: !0,
|
|
breakLines: !0,
|
|
startDelay: 250,
|
|
startDelete: !1,
|
|
nextStringDelay: 750,
|
|
loop: !1,
|
|
loopDelay: 750,
|
|
html: !0,
|
|
waitUntilVisible: !1,
|
|
beforeString: function() {},
|
|
afterString: function() {},
|
|
beforeStep: function() {},
|
|
afterStep: function() {},
|
|
afterComplete: function() {}
|
|
},
|
|
r = function() {
|
|
var t = this,
|
|
e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [],
|
|
n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
|
|
this.insert = function(e, n) {
|
|
t.waiting.splice(e, 0, n)
|
|
}, this.add = function(e) {
|
|
var n = arguments.length > 1 && void 0 !== arguments[1] && arguments[1];
|
|
return Array.isArray(e[0]) ? (t.waiting = t.waiting.concat(e), t) : (t.waiting[n ? "unshift" : "push"](e), t)
|
|
}, this.delete = function(e) {
|
|
return t.waiting.splice(e, 1), t
|
|
}, this.reset = function() {
|
|
return t.waiting = t.executed.concat(t.waiting), t.executed = [], t
|
|
}, this.executed = [], this.waiting = e, !e.length && n && this.add(n)
|
|
},
|
|
o = function(t) {
|
|
return document.createElement(t)
|
|
};
|
|
|
|
function u(t, e) {
|
|
return Math.abs(Math.random() * (t + e - (t - e)) + (t - e))
|
|
}
|
|
|
|
function s(t) {
|
|
var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "",
|
|
n = o("style");
|
|
n.id = e, n.appendChild(document.createTextNode(t)), document.head.appendChild(n)
|
|
}
|
|
var a = function(t) {
|
|
return ["textarea", "input"].indexOf(t.tagName.toLowerCase()) > -1
|
|
},
|
|
c = function(t) {
|
|
return Array.isArray(t) ? t : [t]
|
|
},
|
|
f = function(t) {
|
|
return [].slice.call(t)
|
|
},
|
|
l = function(t, e) {
|
|
var n = t.nextSibling;
|
|
return !!n && !n.isEqualNode(e)
|
|
};
|
|
|
|
function p(t) {
|
|
return (p = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
|
|
return typeof t
|
|
} : function(t) {
|
|
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
|
|
})(t)
|
|
}
|
|
var h = function(t, e) {
|
|
var n = e;
|
|
if (a(t)) t.value = "".concat(t.value).concat(n);
|
|
else {
|
|
var i = f(t.childNodes).filter((function(t) {
|
|
return t.classList && t.classList.contains("ti-cursor")
|
|
}));
|
|
if (i = i.length ? i[0] : null, "object" === p(e) && !(e instanceof HTMLElement)) {
|
|
var r = e.ancestorTree.slice(0).reverse().join(" "),
|
|
u = f(t.querySelectorAll("".concat(r))),
|
|
s = u[u.length - 1];
|
|
if (s && function(t, e) {
|
|
if (!t) return !1;
|
|
for (var n = !1, i = [], r = t; !n;) i.push(l(r, e)), (r = r.parentNode) && !r.hasAttribute("data-typeit-id") || (n = !0);
|
|
return !i.some((function(t) {
|
|
return t
|
|
}))
|
|
}(s, i)) t = s, n = e.content;
|
|
else if (n = function(t) {
|
|
var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [],
|
|
n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "",
|
|
i = o(t);
|
|
return e.forEach((function(t) {
|
|
i.setAttribute(t.name, t.value)
|
|
})), i.innerHTML = n, i
|
|
}(e.ancestorTree[0], e.attributes, e.content), e.ancestorTree.length > 1) {
|
|
var c = f(t.querySelectorAll(e.ancestorTree[1]));
|
|
t = c[c.length - 1]
|
|
}
|
|
}
|
|
n = "object" === p(n) ? n : document.createTextNode(n), t.insertBefore(n, i && t.hasAttribute("data-typeit-id") ? i : null)
|
|
}
|
|
},
|
|
d = function(t) {
|
|
var e = [];
|
|
return e.concat.apply(e, t)
|
|
},
|
|
y = function(t) {
|
|
var e = document.implementation.createHTMLDocument("");
|
|
return e.body.innerHTML = t, e.body
|
|
},
|
|
v = function(t) {
|
|
return f(t.childNodes).map((function(t) {
|
|
return 3 === t.nodeType ? t.nodeValue.split("") : t
|
|
}))
|
|
},
|
|
m = function(t, e, n) {
|
|
return {
|
|
ancestorTree: e,
|
|
attributes: (i = t, f(i.attributes).map((function(t) {
|
|
return {
|
|
name: t.name,
|
|
value: t.nodeValue
|
|
}
|
|
}))),
|
|
content: n
|
|
};
|
|
var i
|
|
},
|
|
g = function(t, e) {
|
|
var n = m(t, e, ""),
|
|
i = v(t).map((function(n, i) {
|
|
return Array.isArray(n) ? n.map((function(n, i) {
|
|
return m(t, e, n)
|
|
})) : n
|
|
}));
|
|
return i.unshift(n), d(i)
|
|
},
|
|
b = function(t) {
|
|
return t instanceof HTMLElement && "BR" !== t.tagName
|
|
},
|
|
S = function t(e) {
|
|
var n = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
|
|
i = e.map((function(t) {
|
|
if (b(t)) {
|
|
if (!n) return f(t.childNodes);
|
|
for (var e = t.parentNode, i = [t.tagName];
|
|
["BODY", "HTML"].indexOf(e.tagName) < 0;) i.push(e.tagName), e = e.parentNode;
|
|
return g(t, i)
|
|
}
|
|
return t
|
|
}));
|
|
return (i = d(i)).some((function(t) {
|
|
return b(t)
|
|
})) ? t(i, n) : i
|
|
};
|
|
|
|
function w(t) {
|
|
var e = y(t),
|
|
n = v(e);
|
|
return S(n)
|
|
}
|
|
|
|
function q(t) {
|
|
return !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1] ? w(t) : t.split("")
|
|
}
|
|
var x = function(t, e) {
|
|
e ? t.value = "" : t.querySelector(".ti-cursor") && (t.innerHTML = "")
|
|
},
|
|
T = function(t, e) {
|
|
var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
|
|
i = !Array.isArray(t),
|
|
r = t.length;
|
|
return (t = i ? new Array(t).fill(0) : t).map((function(t, o) {
|
|
if (i) return e;
|
|
var u = [e, t];
|
|
return n && (0 === o && u.push({
|
|
isFirst: !0
|
|
}), o + 1 === r && u.push({
|
|
isLast: !0
|
|
})), u
|
|
}))
|
|
},
|
|
A = function(t) {
|
|
t.parentNode.removeChild(t)
|
|
},
|
|
N = function(t) {
|
|
return 3 !== t.nodeType && "BR" !== t.tagName && !t.firstChild
|
|
},
|
|
L = function(t) {
|
|
return t.some((function(t) {
|
|
return N(t)
|
|
}))
|
|
},
|
|
M = function(t) {
|
|
for (var e = f(t.querySelectorAll("*")), n = L(e); e.length && n;) {
|
|
var i = !1;
|
|
e.forEach((function(t) {
|
|
N(t) && (A(t), i = !0)
|
|
})), i && (e = f(t.querySelectorAll("*"))), n = L(e)
|
|
}
|
|
return e
|
|
},
|
|
D = function(t) {
|
|
return Array.isArray(t) || (t = [t / 2, t / 2]), {
|
|
before: t[0],
|
|
after: t[1],
|
|
total: t[0] + t[1]
|
|
}
|
|
},
|
|
$ = function(t, e, n) {
|
|
var i = (e = null !== e ? e : t / 3) / 2;
|
|
return n ? [u(t, t / 2), u(e, i)] : [t, e]
|
|
};
|
|
|
|
function j(t) {
|
|
return (j = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
|
|
return typeof t
|
|
} : function(t) {
|
|
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
|
|
})(t)
|
|
}
|
|
|
|
function E() {
|
|
var t = this,
|
|
e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
|
n = e.typeIt,
|
|
u = e.element,
|
|
l = e.id,
|
|
p = e.options,
|
|
d = e.queue,
|
|
v = void 0 === d ? [] : d,
|
|
m = e.isAReset,
|
|
g = void 0 !== m && m,
|
|
b = function() {
|
|
var e = f(t.$e.childNodes).filter((function(t) {
|
|
return !t.isEqualNode(L)
|
|
}));
|
|
return S(e, !1)
|
|
},
|
|
N = function(e) {
|
|
var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 1,
|
|
i = t.opts.nextStringDelay;
|
|
t.queue.insert(e, [t.pause, i.before]), t.queue.insert(e + n + 1, [t.pause, i.after])
|
|
};
|
|
this.wait = function(t, e) {
|
|
this.timeouts.push(setTimeout(t, e))
|
|
};
|
|
this.pause = function() {
|
|
var t = this,
|
|
e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0];
|
|
return new Promise((function(n, i) {
|
|
t.wait((function() {
|
|
return n()
|
|
}), e || t.opts.nextStringDelay.total)
|
|
}))
|
|
}, this.reset = function() {
|
|
return this.queue.reset(), new E({
|
|
typeIt: n,
|
|
element: this.$e,
|
|
id: l,
|
|
options: this.opts,
|
|
queue: this.queue.waiting,
|
|
isAReset: !0
|
|
})
|
|
}, this.init = function() {
|
|
var e = this;
|
|
if (!this.status.started) {
|
|
if (!O && t.opts.cursor && (s("@keyframes blink-".concat(l, " { 0% {opacity: 0} 49% {opacity: 0} 50% {opacity: 1} }[data-typeit-id='").concat(l, "'] .ti-cursor { animation: blink-").concat(l, " ").concat(t.opts.cursorSpeed / 1e3, "s infinite; }"), l), (L = o("span")).innerHTML = y(t.opts.cursorChar).innerHTML, L.className = "ti-cursor", L.setAttribute("style", "display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"), t.$e.appendChild(L)), !this.opts.waitUntilVisible) return this.status.started = !0, this.fire();
|
|
new IntersectionObserver((function(t, n) {
|
|
t.forEach((function(t) {
|
|
t.isIntersecting && (e.fire(), n.unobserve(e.$e))
|
|
}))
|
|
}), {
|
|
threshold: 1
|
|
}).observe(this.$e)
|
|
}
|
|
}, this.fire = function() {
|
|
for (var e = this, i = this.queue.waiting.slice(), r = Promise.resolve(), o = function(t) {
|
|
var o = i[t],
|
|
u = [o, e.queue, n];
|
|
r = r.then((function() {
|
|
return new Promise((function(t, n) {
|
|
var i, r;
|
|
if (e.status.frozen) return n();
|
|
(e.pace = $(e.opts.speed, e.opts.deleteSpeed, e.opts.lifeLike), o[2] && o[2].isFirst) && (r = e.opts).beforeString.apply(r, u);
|
|
(i = e.opts).beforeStep.apply(i, u), o[0].call(e, o[1], o[2]).then((function() {
|
|
var n, i, r = e.queue.waiting.shift();
|
|
if (o[2] && o[2].isPhantom) return t();
|
|
o[2] && o[2].isLast && (i = e.opts).afterString.apply(i, u);
|
|
return (n = e.opts).afterStep.apply(n, u), e.queue.executed.push(r), t()
|
|
}))
|
|
}))
|
|
}))
|
|
}, u = 0; u < i.length; u++) o(u);
|
|
r.then((function() {
|
|
if (e.opts.loop) {
|
|
var i = e.opts.loopDelay ? e.opts.loopDelay : e.opts.nextStringDelay;
|
|
e.wait((function() {
|
|
! function(e) {
|
|
t.queue.reset().delete(0).add([t.pause, e.before], !0);
|
|
for (var n = 0; n < b().length; n++) t.queue.add([t.delete, null, {
|
|
isPhantom: !0
|
|
}], !0)
|
|
}(i), e.fire()
|
|
}), i.after)
|
|
}
|
|
e.status.completed = !0, e.opts.afterComplete(n)
|
|
})).catch((function() {}))
|
|
}, this.type = function(t) {
|
|
var e = this;
|
|
return "object" !== j(t) || t.content ? new Promise((function(n) {
|
|
e.wait((function() {
|
|
return h(e.$e, t), n()
|
|
}), e.pace[0])
|
|
})) : (h(this.$e, t), Promise.resolve())
|
|
}, this.empty = function() {
|
|
var t = this;
|
|
return new Promise((function(e) {
|
|
return O ? t.$e.value = "" : f(t.$e.childNodes).forEach((function(t) {
|
|
L.isEqualNode(t) || A(t)
|
|
})), e()
|
|
}))
|
|
}, this.delete = function() {
|
|
var t = this,
|
|
e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0];
|
|
return new Promise((function(n) {
|
|
t.wait((function() {
|
|
var i = b();
|
|
return i.length && A(i[i.length - 1]), M(t.$e), e && i.length - 1 > 0 ? t.delete(!0).then((function() {
|
|
return n()
|
|
})) : n()
|
|
}), t.pace[1])
|
|
}))
|
|
}, this.setOptions = function(t) {
|
|
var e = this;
|
|
return new Promise((function(n) {
|
|
return e.opts = Object.assign({}, e.opts, t), n()
|
|
}))
|
|
};
|
|
var L = null,
|
|
O = a(u);
|
|
this.status = {
|
|
started: !1,
|
|
complete: !1,
|
|
frozen: !1,
|
|
destroyed: !1
|
|
}, this.$e = u, this.timeouts = [], this.opts = Object.assign({}, i, p), this.opts.html = !O && this.opts.html, this.opts.nextStringDelay = D(this.opts.nextStringDelay), this.opts.loopDelay = D(this.opts.loopDelay), this.queue = new r(v, [this.pause, this.opts.startDelay]), this.$e.setAttribute("data-typeit-id", l), s("[data-typeit-id]:before {content: '.'; display: inline-block; width: 0; visibility: hidden;}"), x(u, O);
|
|
var P = c(this.opts.strings);
|
|
P = function(e) {
|
|
var n = t.$e.innerHTML;
|
|
return n ? (t.$e.innerHTML = "", t.opts.startDelete ? (w(n).forEach((function(e) {
|
|
h(t.$e, e)
|
|
})), t.queue.add([t.delete, !0]), N(1), e) : [n.trim()].concat(e)) : e
|
|
}(P), this.opts.strings = P.map((function(t) {
|
|
return t.replace(/<\!--.*?-->/g, "")
|
|
})), this.opts.strings.length && !g && t.opts.strings.forEach((function(e, n) {
|
|
var i = q(e, t.opts.html);
|
|
t.queue.add(T(i, t.type, !0));
|
|
var r = t.queue.waiting.length;
|
|
if (n + 1 !== t.opts.strings.length) {
|
|
if (t.opts.breakLines) return t.queue.add([t.type, o("BR")]), void N(r);
|
|
t.queue.add(T(i, t.delete)), N(r, e.length)
|
|
}
|
|
}))
|
|
}
|
|
var O = function(t, e, n) {
|
|
return !!t.length && !t.some((function(t) {
|
|
return t.status[e] !== n
|
|
}))
|
|
},
|
|
P = function(t) {
|
|
return "string" == typeof t ? t = document.querySelectorAll(t) : t.forEach || (t = [t]), f(t)
|
|
};
|
|
|
|
function C(t, e) {
|
|
var n = this;
|
|
this.instances = P(t).map((function(t) {
|
|
return new E({
|
|
typeIt: n,
|
|
element: t,
|
|
id: Math.random().toString(36).substring(2, 15),
|
|
options: e,
|
|
queue: [],
|
|
isAReset: !1
|
|
})
|
|
}));
|
|
var i = function(t) {
|
|
n.instances.forEach((function(e) {
|
|
t.call(n, e)
|
|
}))
|
|
},
|
|
r = function(t) {
|
|
var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
|
|
r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 1;
|
|
i((function(i) {
|
|
var o = "string" != typeof t,
|
|
u = o ? t : i[t],
|
|
s = T(r, [u, o ? n : e]);
|
|
i.queue.add(s)
|
|
}))
|
|
};
|
|
this.is = function(t) {
|
|
return O(this.instances, t, !0)
|
|
}, this.freeze = function() {
|
|
i((function(t) {
|
|
t.status.frozen = !0
|
|
}))
|
|
}, this.unfreeze = function() {
|
|
i((function(t) {
|
|
t.status.frozen && (t.status.frozen = !1, t.fire())
|
|
}))
|
|
}, this.type = function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "";
|
|
return i((function(e) {
|
|
var n = q(t, e.opts.html);
|
|
e.queue.add(T(n, e.type, !0))
|
|
})), this
|
|
}, this.delete = function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
|
|
return r("delete", null === t, null === t ? 1 : t), this
|
|
}, this.pause = function() {
|
|
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
|
|
return r("pause", t), this
|
|
}, this.break = function() {
|
|
return r("type", o("BR")), this
|
|
}, this.options = function(t) {
|
|
return r("setOptions", t), this
|
|
}, this.exec = function(t) {
|
|
return r(t), this
|
|
}, this.destroy = function() {
|
|
var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
|
|
this.instances = this.instances.map((function(e) {
|
|
if (e.timeouts.forEach((function(t) {
|
|
clearTimeout(t)
|
|
})), e.timeouts = [], t) {
|
|
var n = e.isInput ? null : e.$e.querySelector(".ti-cursor");
|
|
n && e.$e.removeChild(n)
|
|
}
|
|
return e.status.destroyed = !0, e
|
|
}))
|
|
}, this.empty = function() {
|
|
return r("empty"), this
|
|
}, this.reset = function() {
|
|
return this.destroy(), this.instances = this.instances.map((function(t) {
|
|
return t.reset()
|
|
})), this
|
|
}, this.go = function() {
|
|
return i((function(t) {
|
|
t.init()
|
|
})), this
|
|
}
|
|
}
|
|
n.d(e, "default", (function() {
|
|
return C
|
|
}))
|
|
}]).default
|
|
})); |