vue-typewriter-effect
Version:
Vue 3 wrapper for typewriter-effect
406 lines (405 loc) • 19.7 kB
JavaScript
import { defineComponent as de, onMounted as fe, h as ve } from "vue";
var me = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function he(f) {
return f && f.__esModule && Object.prototype.hasOwnProperty.call(f, "default") ? f.default : f;
}
var G = {}, ge = {
get exports() {
return G;
},
set exports(f) {
G = f;
}
};
(function(f, te) {
(function(V, F) {
f.exports = F();
})(typeof self < "u" ? self : me, () => (() => {
var V = { 75: function(s) {
(function() {
var c, d, N, v, A, h;
typeof performance < "u" && performance !== null && performance.now ? s.exports = function() {
return performance.now();
} : typeof process < "u" && process !== null && process.hrtime ? (s.exports = function() {
return (c() - A) / 1e6;
}, d = process.hrtime, v = (c = function() {
var g;
return 1e9 * (g = d())[0] + g[1];
})(), h = 1e9 * process.uptime(), A = v - h) : Date.now ? (s.exports = function() {
return Date.now() - N;
}, N = Date.now()) : (s.exports = function() {
return new Date().getTime() - N;
}, N = new Date().getTime());
}).call(this);
}, 4087: (s, c, d) => {
for (var N = d(75), v = typeof window > "u" ? d.g : window, A = ["moz", "webkit"], h = "AnimationFrame", g = v["request" + h], w = v["cancel" + h] || v["cancelRequest" + h], C = 0; !g && C < A.length; C++)
g = v[A[C] + "Request" + h], w = v[A[C] + "Cancel" + h] || v[A[C] + "CancelRequest" + h];
if (!g || !w) {
var M = 0, R = 0, E = [];
g = function(y) {
if (E.length === 0) {
var S = N(), j = Math.max(0, 16.666666666666668 - (S - M));
M = j + S, setTimeout(function() {
var D = E.slice(0);
E.length = 0;
for (var _ = 0; _ < D.length; _++)
if (!D[_].cancelled)
try {
D[_].callback(M);
} catch (x) {
setTimeout(function() {
throw x;
}, 0);
}
}, Math.round(j));
}
return E.push({ handle: ++R, callback: y, cancelled: !1 }), R;
}, w = function(y) {
for (var S = 0; S < E.length; S++)
E[S].handle === y && (E[S].cancelled = !0);
};
}
s.exports = function(y) {
return g.call(v, y);
}, s.exports.cancel = function() {
w.apply(v, arguments);
}, s.exports.polyfill = function(y) {
y || (y = v), y.requestAnimationFrame = g, y.cancelAnimationFrame = w;
};
} }, F = {};
function b(s) {
var c = F[s];
if (c !== void 0)
return c.exports;
var d = F[s] = { exports: {} };
return V[s].call(d.exports, d, d.exports, b), d.exports;
}
b.n = (s) => {
var c = s && s.__esModule ? () => s.default : () => s;
return b.d(c, { a: c }), c;
}, b.d = (s, c) => {
for (var d in c)
b.o(c, d) && !b.o(s, d) && Object.defineProperty(s, d, { enumerable: !0, get: c[d] });
}, b.g = function() {
if (typeof globalThis == "object")
return globalThis;
try {
return this || new Function("return this")();
} catch {
if (typeof window == "object")
return window;
}
}(), b.o = (s, c) => Object.prototype.hasOwnProperty.call(s, c);
var z = {};
return (() => {
b.d(z, { default: () => re });
var s = b(4087), c = b.n(s);
const d = function(o) {
return new RegExp(/<[a-z][\s\S]*>/i).test(o);
}, N = function(o) {
var n = document.createElement("div");
return n.innerHTML = o, n.childNodes;
}, v = function(o, n) {
return Math.floor(Math.random() * (n - o + 1)) + o;
};
var A = "TYPE_CHARACTER", h = "REMOVE_CHARACTER", g = "REMOVE_ALL", w = "REMOVE_LAST_VISIBLE_NODE", C = "PAUSE_FOR", M = "CALL_FUNCTION", R = "ADD_HTML_TAG_ELEMENT", E = "CHANGE_DELETE_SPEED", y = "CHANGE_DELAY", S = "CHANGE_CURSOR", j = "PASTE_STRING", D = "HTML_TAG";
function _(o, n) {
var a = Object.keys(o);
if (Object.getOwnPropertySymbols) {
var r = Object.getOwnPropertySymbols(o);
n && (r = r.filter(function(L) {
return Object.getOwnPropertyDescriptor(o, L).enumerable;
})), a.push.apply(a, r);
}
return a;
}
function x(o) {
for (var n = 1; n < arguments.length; n++) {
var a = arguments[n] != null ? arguments[n] : {};
n % 2 ? _(Object(a), !0).forEach(function(r) {
l(o, r, a[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(a)) : _(Object(a)).forEach(function(r) {
Object.defineProperty(o, r, Object.getOwnPropertyDescriptor(a, r));
});
}
return o;
}
function O(o) {
return function(n) {
if (Array.isArray(n))
return I(n);
}(o) || function(n) {
if (typeof Symbol < "u" && n[Symbol.iterator] != null || n["@@iterator"] != null)
return Array.from(n);
}(o) || function(n, a) {
if (n) {
if (typeof n == "string")
return I(n, a);
var r = Object.prototype.toString.call(n).slice(8, -1);
return r === "Object" && n.constructor && (r = n.constructor.name), r === "Map" || r === "Set" ? Array.from(n) : r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? I(n, a) : void 0;
}
}(o) || function() {
throw new TypeError(`Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
}();
}
function I(o, n) {
(n == null || n > o.length) && (n = o.length);
for (var a = 0, r = new Array(n); a < n; a++)
r[a] = o[a];
return r;
}
function ne(o, n) {
for (var a = 0; a < n.length; a++) {
var r = n[a];
r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(o, r.key, r);
}
}
function l(o, n, a) {
return n in o ? Object.defineProperty(o, n, { value: a, enumerable: !0, configurable: !0, writable: !0 }) : o[n] = a, o;
}
const re = function() {
function o(r, L) {
var e = this;
if (function(t, i) {
if (!(t instanceof i))
throw new TypeError("Cannot call a class as a function");
}(this, o), l(this, "state", { cursorAnimation: null, lastFrameTime: null, pauseUntil: null, eventQueue: [], eventLoop: null, eventLoopPaused: !1, reverseCalledEvents: [], calledEvents: [], visibleNodes: [], initialOptions: null, elements: { container: null, wrapper: document.createElement("span"), cursor: document.createElement("span") } }), l(this, "options", { strings: null, cursor: "|", delay: "natural", pauseFor: 1500, deleteSpeed: "natural", loop: !1, autoStart: !1, devMode: !1, skipAddStyles: !1, wrapperClassName: "Typewriter__wrapper", cursorClassName: "Typewriter__cursor", stringSplitter: null, onCreateTextNode: null, onRemoveNode: null }), l(this, "setupWrapperElement", function() {
e.state.elements.container && (e.state.elements.wrapper.className = e.options.wrapperClassName, e.state.elements.cursor.className = e.options.cursorClassName, e.state.elements.cursor.innerHTML = e.options.cursor, e.state.elements.container.innerHTML = "", e.state.elements.container.appendChild(e.state.elements.wrapper), e.state.elements.container.appendChild(e.state.elements.cursor));
}), l(this, "start", function() {
return e.state.eventLoopPaused = !1, e.runEventLoop(), e;
}), l(this, "pause", function() {
return e.state.eventLoopPaused = !0, e;
}), l(this, "stop", function() {
return e.state.eventLoop && ((0, s.cancel)(e.state.eventLoop), e.state.eventLoop = null), e;
}), l(this, "pauseFor", function(t) {
return e.addEventToQueue(C, { ms: t }), e;
}), l(this, "typeOutAllStrings", function() {
return typeof e.options.strings == "string" ? (e.typeString(e.options.strings).pauseFor(e.options.pauseFor), e) : (e.options.strings.forEach(function(t) {
e.typeString(t).pauseFor(e.options.pauseFor).deleteAll(e.options.deleteSpeed);
}), e);
}), l(this, "typeString", function(t) {
var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
if (d(t))
return e.typeOutHTMLString(t, i);
if (t) {
var m = e.options || {}, p = m.stringSplitter, u = typeof p == "function" ? p(t) : t.split("");
e.typeCharacters(u, i);
}
return e;
}), l(this, "pasteString", function(t) {
var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
return d(t) ? e.typeOutHTMLString(t, i, !0) : (t && e.addEventToQueue(j, { character: t, node: i }), e);
}), l(this, "typeOutHTMLString", function(t) {
var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null, m = arguments.length > 2 ? arguments[2] : void 0, p = N(t);
if (p.length > 0)
for (var u = 0; u < p.length; u++) {
var T = p[u], P = T.innerHTML;
T && T.nodeType !== 3 ? (T.innerHTML = "", e.addEventToQueue(R, { node: T, parentNode: i }), m ? e.pasteString(P, T) : e.typeString(P, T)) : T.textContent && (m ? e.pasteString(T.textContent, i) : e.typeString(T.textContent, i));
}
return e;
}), l(this, "deleteAll", function() {
var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "natural";
return e.addEventToQueue(g, { speed: t }), e;
}), l(this, "changeDeleteSpeed", function(t) {
if (!t)
throw new Error("Must provide new delete speed");
return e.addEventToQueue(E, { speed: t }), e;
}), l(this, "changeDelay", function(t) {
if (!t)
throw new Error("Must provide new delay");
return e.addEventToQueue(y, { delay: t }), e;
}), l(this, "changeCursor", function(t) {
if (!t)
throw new Error("Must provide new cursor");
return e.addEventToQueue(S, { cursor: t }), e;
}), l(this, "deleteChars", function(t) {
if (!t)
throw new Error("Must provide amount of characters to delete");
for (var i = 0; i < t; i++)
e.addEventToQueue(h);
return e;
}), l(this, "callFunction", function(t, i) {
if (!t || typeof t != "function")
throw new Error("Callbak must be a function");
return e.addEventToQueue(M, { cb: t, thisArg: i }), e;
}), l(this, "typeCharacters", function(t) {
var i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
if (!t || !Array.isArray(t))
throw new Error("Characters must be an array");
return t.forEach(function(m) {
e.addEventToQueue(A, { character: m, node: i });
}), e;
}), l(this, "removeCharacters", function(t) {
if (!t || !Array.isArray(t))
throw new Error("Characters must be an array");
return t.forEach(function() {
e.addEventToQueue(h);
}), e;
}), l(this, "addEventToQueue", function(t, i) {
var m = arguments.length > 2 && arguments[2] !== void 0 && arguments[2];
return e.addEventToStateProperty(t, i, m, "eventQueue");
}), l(this, "addReverseCalledEvent", function(t, i) {
var m = arguments.length > 2 && arguments[2] !== void 0 && arguments[2], p = e.options.loop;
return p ? e.addEventToStateProperty(t, i, m, "reverseCalledEvents") : e;
}), l(this, "addEventToStateProperty", function(t, i) {
var m = arguments.length > 2 && arguments[2] !== void 0 && arguments[2], p = arguments.length > 3 ? arguments[3] : void 0, u = { eventName: t, eventArgs: i || {} };
return e.state[p] = m ? [u].concat(O(e.state[p])) : [].concat(O(e.state[p]), [u]), e;
}), l(this, "runEventLoop", function() {
e.state.lastFrameTime || (e.state.lastFrameTime = Date.now());
var t = Date.now(), i = t - e.state.lastFrameTime;
if (!e.state.eventQueue.length) {
if (!e.options.loop)
return;
e.state.eventQueue = O(e.state.calledEvents), e.state.calledEvents = [], e.options = x({}, e.state.initialOptions);
}
if (e.state.eventLoop = c()(e.runEventLoop), !e.state.eventLoopPaused) {
if (e.state.pauseUntil) {
if (t < e.state.pauseUntil)
return;
e.state.pauseUntil = null;
}
var m, p = O(e.state.eventQueue), u = p.shift();
if (!(i <= (m = u.eventName === w || u.eventName === h ? e.options.deleteSpeed === "natural" ? v(40, 80) : e.options.deleteSpeed : e.options.delay === "natural" ? v(120, 160) : e.options.delay))) {
var T = u.eventName, P = u.eventArgs;
switch (e.logInDevMode({ currentEvent: u, state: e.state, delay: m }), T) {
case j:
case A:
var U = P.character, $ = P.node, X = document.createTextNode(U), k = X;
e.options.onCreateTextNode && typeof e.options.onCreateTextNode == "function" && (k = e.options.onCreateTextNode(U, X)), k && ($ ? $.appendChild(k) : e.state.elements.wrapper.appendChild(k)), e.state.visibleNodes = [].concat(O(e.state.visibleNodes), [{ type: "TEXT_NODE", character: U, node: k }]);
break;
case h:
p.unshift({ eventName: w, eventArgs: { removingCharacterNode: !0 } });
break;
case C:
var oe = u.eventArgs.ms;
e.state.pauseUntil = Date.now() + parseInt(oe);
break;
case M:
var K = u.eventArgs, ae = K.cb, se = K.thisArg;
ae.call(se, { elements: e.state.elements });
break;
case R:
var Z = u.eventArgs, q = Z.node, W = Z.parentNode;
W ? W.appendChild(q) : e.state.elements.wrapper.appendChild(q), e.state.visibleNodes = [].concat(O(e.state.visibleNodes), [{ type: D, node: q, parentNode: W || e.state.elements.wrapper }]);
break;
case g:
var ie = e.state.visibleNodes, Y = P.speed, H = [];
Y && H.push({ eventName: E, eventArgs: { speed: Y, temp: !0 } });
for (var ee = 0, ue = ie.length; ee < ue; ee++)
H.push({ eventName: w, eventArgs: { removingCharacterNode: !1 } });
Y && H.push({ eventName: E, eventArgs: { speed: e.options.deleteSpeed, temp: !0 } }), p.unshift.apply(p, H);
break;
case w:
var le = u.eventArgs.removingCharacterNode;
if (e.state.visibleNodes.length) {
var B = e.state.visibleNodes.pop(), pe = B.type, Q = B.node, ce = B.character;
e.options.onRemoveNode && typeof e.options.onRemoveNode == "function" && e.options.onRemoveNode({ node: Q, character: ce }), Q && Q.parentNode.removeChild(Q), pe === D && le && p.unshift({ eventName: w, eventArgs: {} });
}
break;
case E:
e.options.deleteSpeed = u.eventArgs.speed;
break;
case y:
e.options.delay = u.eventArgs.delay;
break;
case S:
e.options.cursor = u.eventArgs.cursor, e.state.elements.cursor.innerHTML = u.eventArgs.cursor;
}
e.options.loop && (u.eventName === w || u.eventArgs && u.eventArgs.temp || (e.state.calledEvents = [].concat(O(e.state.calledEvents), [u]))), e.state.eventQueue = p, e.state.lastFrameTime = t;
}
}
}), r)
if (typeof r == "string") {
var J = document.querySelector(r);
if (!J)
throw new Error("Could not find container element");
this.state.elements.container = J;
} else
this.state.elements.container = r;
L && (this.options = x(x({}, this.options), L)), this.state.initialOptions = x({}, this.options), this.init();
}
var n, a;
return n = o, (a = [{ key: "init", value: function() {
var r, L;
this.setupWrapperElement(), this.addEventToQueue(S, { cursor: this.options.cursor }, !0), this.addEventToQueue(g, null, !0), !window || window.___TYPEWRITER_JS_STYLES_ADDED___ || this.options.skipAddStyles || (r = ".Typewriter__cursor{-webkit-animation:Typewriter-cursor 1s infinite;animation:Typewriter-cursor 1s infinite;margin-left:1px}@-webkit-keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}", (L = document.createElement("style")).appendChild(document.createTextNode(r)), document.head.appendChild(L), window.___TYPEWRITER_JS_STYLES_ADDED___ = !0), this.options.autoStart === !0 && this.options.strings && this.typeOutAllStrings().start();
} }, { key: "logInDevMode", value: function(r) {
this.options.devMode && console.log(r);
} }]) && ne(n.prototype, a), Object.defineProperty(n, "prototype", { writable: !1 }), o;
}();
})(), z.default;
})());
})(ge);
const ye = /* @__PURE__ */ he(G), Ee = de({
name: "TypeWriter",
props: {
element: {
type: String,
default: "span"
},
strings: {
type: Array,
default: () => ["Hello", "World"]
},
cursor: {
type: String,
default: "|"
},
delay: {
type: [Number, String],
default: "natural"
},
deleteSpeed: {
type: [Number, String],
default: "natural"
},
loop: {
type: Boolean,
default: !0
},
autoStart: {
type: Boolean,
default: !0
},
pauseFor: {
type: Number,
default: 1500
},
devMode: {
type: Boolean,
default: !1
},
skipAddStyles: {
type: Boolean,
default: !1
},
wrapperClassName: {
type: String,
default: "Typewriter__wrapper"
},
cursorClassName: {
type: String,
default: "Typewriter__cursor"
},
stringSplitter: {
type: Function,
default: (f) => f.split("")
},
onCreateTextNode: {
type: Function,
default: null
},
onRemoveNode: {
type: Function,
default: null
}
},
setup(f) {
return fe(() => {
new ye("#typewriter", { ...f }).start();
}), () => ve(f.element, { id: "typewriter" }, `${f.strings[0]}`);
}
});
export {
Ee as default
};