typ_writing.php
Quell Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example - Type out all strings</title>
</head>
<body>
<div id="typewriter"></div>
<script>
! function(e, t) {
"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("Typewriter", [], t) : "object" == typeof exports ? exports.Typewriter = t() : e.Typewriter = t()
}("undefined" != typeof self ? self : this, (function() {
return function(e) {
var t = {};
function n(r) {
if (t[r]) return t[r].exports;
var o = t[r] = {
i: r,
l: !1,
exports: {}
};
return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
}
return n.m = e, n.c = t, n.d = function(e, t, r) {
n.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: r
})
}, n.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, n.t = function(e, t) {
if (1 & t && (e = n(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var r = Object.create(null);
if (n.r(r), Object.defineProperty(r, "default", {
enumerable: !0,
value: e
}), 2 & t && "string" != typeof e)
for (var o in e) n.d(r, o, function(t) {
return e[t]
}.bind(null, o));
return r
}, n.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return n.d(t, "a", t), t
}, n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, n.p = "", n(n.s = 3)
}([, function(e, t, n) {
(function(t) {
for (var r = n(11), o = "undefined" == typeof window ? t : window, i = ["moz", "webkit"], a = "AnimationFrame", s = o["request" + a], u = o["cancel" + a] || o["cancelRequest" + a], c = 0; !s && c < i.length; c++) s = o[i[c] + "Request" + a], u = o[i[c] + "Cancel" + a] || o[i[c] + "CancelRequest" + a];
if (!s || !u) {
var l = 0,
p = 0,
d = [];
s = function(e) {
if (0 === d.length) {
var t = r(),
n = Math.max(0, 1e3 / 60 - (t - l));
l = n + t, setTimeout((function() {
var e = d.slice(0);
d.length = 0;
for (var t = 0; t < e.length; t++)
if (!e[t].cancelled) try {
e[t].callback(l)
} catch (e) {
setTimeout((function() {
throw e
}), 0)
}
}), Math.round(n))
}
return d.push({
handle: ++p,
callback: e,
cancelled: !1
}), p
}, u = function(e) {
for (var t = 0; t < d.length; t++) d[t].handle === e && (d[t].cancelled = !0)
}
}
e.exports = function(e) {
return s.call(o, e)
}, e.exports.cancel = function() {
u.apply(o, arguments)
}, e.exports.polyfill = function(e) {
e || (e = o), e.requestAnimationFrame = s, e.cancelAnimationFrame = u
}
}).call(this, n(4))
}, , function(e, t, n) {
"use strict";
n.r(t), n.d(t, "default", (function() {
return C
}));
var r = n(1),
o = n.n(r),
i = function(e) {
return new RegExp(/<[a-z][\s\S]*>/i).test(e)
},
a = function(e) {
var t = document.createElement("div");
return t.innerHTML = e, t.childNodes
},
s = function(e, t) {
return Math.floor(Math.random() * (t - e + 1)) + e
},
u = function(e) {
var t = document.createElement("style");
t.appendChild(document.createTextNode(e)), document.head.appendChild(t)
},
c = "TYPE_CHARACTER",
l = "REMOVE_CHARACTER",
p = "REMOVE_ALL",
d = "REMOVE_LAST_VISIBLE_NODE",
f = "PAUSE_FOR",
v = "CALL_FUNCTION",
h = "ADD_HTML_TAG_ELEMENT",
m = "CHANGE_DELETE_SPEED",
y = "CHANGE_DELAY",
g = "CHANGE_CURSOR",
w = "PASTE_STRING",
E = "HTML_TAG",
T = "TEXT_NODE";
function b(e, t) {
var n = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var r = Object.getOwnPropertySymbols(e);
t && (r = r.filter((function(t) {
return Object.getOwnPropertyDescriptor(e, t).enumerable
}))), n.push.apply(n, r)
}
return n
}
function A(e) {
for (var t = 1; t < arguments.length; t++) {
var n = null != arguments[t] ? arguments[t] : {};
t % 2 ? b(Object(n), !0).forEach((function(t) {
O(e, t, n[t])
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : b(Object(n)).forEach((function(t) {
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t))
}))
}
return e
}
function S(e) {
return function(e) {
if (Array.isArray(e)) {
for (var t = 0, n = new Array(e.length); t < e.length; t++) n[t] = e[t];
return n
}
}(e) || function(e) {
if (Symbol.iterator in Object(e) || "[object Arguments]" === Object.prototype.toString.call(e)) return Array.from(e)
}(e) || function() {
throw new TypeError("Invalid attempt to spread non-iterable instance")
}()
}
function _(e, t) {
for (var n = 0; n < t.length; n++) {
var r = t[n];
r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(e, r.key, r)
}
}
function O(e, t, n) {
return t in e ? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[t] = n, e
}
var C = function() {
function e(t, n) {
var u = this;
if (function(e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
}(this, e), O(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")
}
}), O(this, "options", {
strings: null,
cursor: "|",
delay: "natural",
deleteSpeed: "natural",
loop: !1,
autoStart: !1,
devMode: !1,
skipAddStyles: !1,
wrapperClassName: "Typewriter__wrapper",
cursorClassName: "Typewriter__cursor",
stringSplitter: null
}), O(this, "setupWrapperElement", (function() {
u.state.elements.wrapper.className = u.options.wrapperClassName, u.state.elements.cursor.className = u.options.cursorClassName, u.state.elements.cursor.innerHTML = u.options.cursor, u.state.elements.container.innerHTML = "", u.state.elements.container.appendChild(u.state.elements.wrapper), u.state.elements.container.appendChild(u.state.elements.cursor)
})), O(this, "start", (function() {
return u.state.eventLoopPaused = !1, u.runEventLoop(), u
})), O(this, "pause", (function() {
return u.state.eventLoopPaused = !0, u
})), O(this, "stop", (function() {
return u.state.eventLoop && (Object(r.cancel)(u.state.eventLoop), u.state.eventLoop = null), u
})), O(this, "pauseFor", (function(e) {
return u.addEventToQueue(f, {
ms: e
}), u
})), O(this, "typeOutAllStrings", (function() {
return "string" == typeof u.options.strings ? (u.typeString(u.options.strings).pauseFor(1500), u) : (u.options.strings.forEach((function(e) {
u.typeString(e).pauseFor(1500).deleteAll()
})), u)
})), O(this, "typeString", (function(e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
if (i(e)) return u.typeOutHTMLString(e, t);
if (e) {
var n = u.options || {},
r = n.stringSplitter,
o = "function" == typeof r ? r(e) : e.split("");
u.typeCharacters(o, t)
}
return u
})), O(this, "pasteString", (function(e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
return i(e) ? u.typeOutHTMLString(e, t, !0) : (e && u.addEventToQueue(w, {
character: e,
node: t
}), u)
})), O(this, "typeOutHTMLString", (function(e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
n = arguments.length > 2 ? arguments[2] : void 0,
r = a(e);
if (r.length > 0)
for (var o = 0; o < r.length; o++) {
var i = r[o],
s = i.innerHTML;
i && 3 !== i.nodeType ? (i.innerHTML = "", u.addEventToQueue(h, {
node: i,
parentNode: t
}), n ? u.pasteString(s, i) : u.typeString(s, i)) : i.textContent && (n ? u.pasteString(i.textContent, t) : u.typeString(i.textContent, t))
}
return u
})), O(this, "deleteAll", (function() {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "natural";
return u.addEventToQueue(p, {
speed: e
}), u
})), O(this, "changeDeleteSpeed", (function(e) {
if (!e) throw new Error("Must provide new delete speed");
return u.addEventToQueue(m, {
speed: e
}), u
})), O(this, "changeDelay", (function(e) {
if (!e) throw new Error("Must provide new delay");
return u.addEventToQueue(y, {
delay: e
}), u
})), O(this, "changeCursor", (function(e) {
if (!e) throw new Error("Must provide new cursor");
return u.addEventToQueue(g, {
cursor: e
}), u
})), O(this, "deleteChars", (function(e) {
if (!e) throw new Error("Must provide amount of characters to delete");
for (var t = 0; t < e; t++) u.addEventToQueue(l);
return u
})), O(this, "callFunction", (function(e, t) {
if (!e || "function" != typeof e) throw new Error("Callbak must be a function");
return u.addEventToQueue(v, {
cb: e,
thisArg: t
}), u
})), O(this, "typeCharacters", (function(e) {
var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
if (!e || !Array.isArray(e)) throw new Error("Characters must be an array");
return e.forEach((function(e) {
u.addEventToQueue(c, {
character: e,
node: t
})
})), u
})), O(this, "removeCharacters", (function(e) {
if (!e || !Array.isArray(e)) throw new Error("Characters must be an array");
return e.forEach((function() {
u.addEventToQueue(l)
})), u
})), O(this, "addEventToQueue", (function(e, t) {
var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2];
return u.addEventToStateProperty(e, t, n, "eventQueue")
})), O(this, "addReverseCalledEvent", (function(e, t) {
var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
r = u.options.loop;
return r ? u.addEventToStateProperty(e, t, n, "reverseCalledEvents") : u
})), O(this, "addEventToStateProperty", (function(e, t) {
var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
r = arguments.length > 3 ? arguments[3] : void 0,
o = {
eventName: e,
eventArgs: t || {}
};
return u.state[r] = n ? [o].concat(S(u.state[r])) : [].concat(S(u.state[r]), [o]), u
})), O(this, "runEventLoop", (function() {
u.state.lastFrameTime || (u.state.lastFrameTime = Date.now());
var e = Date.now(),
t = e - u.state.lastFrameTime;
if (!u.state.eventQueue.length) {
if (!u.options.loop) return;
u.state.eventQueue = S(u.state.calledEvents), u.state.calledEvents = [], u.options = A({}, u.state.initialOptions)
}
if (u.state.eventLoop = o()(u.runEventLoop), !u.state.eventLoopPaused) {
if (u.state.pauseUntil) {
if (e < u.state.pauseUntil) return;
u.state.pauseUntil = null
}
var n = S(u.state.eventQueue),
r = n.shift(),
i = 0;
if (!(t <= (i = r.eventName === d || r.eventName === l ? "natural" === u.options.deleteSpeed ? s(40, 80) : u.options.deleteSpeed : "natural" === u.options.delay ? s(120, 160) : u.options.delay))) {
var a = r.eventName,
b = r.eventArgs;
switch (u.logInDevMode({
currentEvent: r,
state: u.state,
delay: i
}), a) {
case w:
case c:
var _ = b.character,
O = b.node,
C = document.createTextNode(_);
O ? O.appendChild(C) : u.state.elements.wrapper.appendChild(C), u.state.visibleNodes = [].concat(S(u.state.visibleNodes), [{
type: T,
node: C
}]);
break;
case l:
n.unshift({
eventName: d,
eventArgs: {
removingCharacterNode: !0
}
});
break;
case f:
var N = r.eventArgs.ms;
u.state.pauseUntil = Date.now() + parseInt(N);
break;
case v:
var L = r.eventArgs,
M = L.cb,
D = L.thisArg;
M.call(D, {
elements: u.state.elements
});
break;
case h:
var j = r.eventArgs,
P = j.node,
x = j.parentNode;
x ? x.appendChild(P) : u.state.elements.wrapper.appendChild(P), u.state.visibleNodes = [].concat(S(u.state.visibleNodes), [{
type: E,
node: P,
parentNode: x || u.state.elements.wrapper
}]);
break;
case p:
var k = u.state.visibleNodes,
Q = b.speed,
R = [];
Q && R.push({
eventName: m,
eventArgs: {
speed: Q,
temp: !0
}
});
for (var H = 0, F = k.length; H < F; H++) R.push({
eventName: d,
eventArgs: {
removingCharacterNode: !1
}
});
Q && R.push({
eventName: m,
eventArgs: {
speed: u.options.deleteSpeed,
temp: !0
}
}), n.unshift.apply(n, R);
break;
case d:
var I = r.eventArgs.removingCharacterNode;
if (u.state.visibleNodes.length) {
var U = u.state.visibleNodes.pop(),
q = U.type,
G = U.node;
G.parentNode.removeChild(G), q === E && I && n.unshift({
eventName: d,
eventArgs: {}
})
}
break;
case m:
u.options.deleteSpeed = r.eventArgs.speed;
break;
case y:
u.options.delay = r.eventArgs.delay;
break;
case g:
u.options.cursor = r.eventArgs.cursor, u.state.elements.cursor.innerHTML = r.eventArgs.cursor
}
u.options.loop && (r.eventName === d || r.eventArgs && r.eventArgs.temp || (u.state.calledEvents = [].concat(S(u.state.calledEvents), [r]))), u.state.eventQueue = n, u.state.lastFrameTime = e
}
}
})), !t) throw new Error("No container element was provided");
if ("string" == typeof t) {
var b = document.querySelector(t);
if (!b) throw new Error("Could not find container element");
this.state.elements.container = b
} else this.state.elements.container = t;
n && (this.options = A({}, this.options, {}, n)), this.state.initialOptions = A({}, this.options), this.init()
}
var t, n, b;
return t = e, (n = [{
key: "init",
value: function() {
this.setupWrapperElement(), this.addEventToQueue(g, {
cursor: this.options.cursor
}, !0), this.addEventToQueue(p, null, !0), !window || window.___TYPEWRITER_JS_STYLES_ADDED___ || this.options.skipAddStyles || (u(".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}}"), window.___TYPEWRITER_JS_STYLES_ADDED___ = !0), !0 === this.options.autoStart && this.options.strings && this.typeOutAllStrings().start()
}
}, {
key: "logInDevMode",
value: function(e) {
this.options.devMode && console.log(e)
}
}]) && _(t.prototype, n), b && _(t, b), e
}()
}, function(e, t) {
var n;
n = function() {
return this
}();
try {
n = n || new Function("return this")()
} catch (e) {
"object" == typeof window && (n = window)
}
e.exports = n
}, , , , , , , function(e, t, n) {
(function(t) {
(function() {
var n, r, o, i, a, s;
"undefined" != typeof performance && null !== performance && performance.now ? e.exports = function() {
return performance.now()
} : null != t && t.hrtime ? (e.exports = function() {
return (n() - a) / 1e6
}, r = t.hrtime, i = (n = function() {
var e;
return 1e9 * (e = r())[0] + e[1]
})(), s = 1e9 * t.uptime(), a = i - s) : Date.now ? (e.exports = function() {
return Date.now() - o
}, o = Date.now()) : (e.exports = function() {
return (new Date).getTime() - o
}, o = (new Date).getTime())
}).call(this)
}).call(this, n(12))
}, function(e, t) {
var n, r, o = e.exports = {};
function i() {
throw new Error("setTimeout has not been defined")
}
function a() {
throw new Error("clearTimeout has not been defined")
}
function s(e) {
if (n === setTimeout) return setTimeout(e, 0);
if ((n === i || !n) && setTimeout) return n = setTimeout, setTimeout(e, 0);
try {
return n(e, 0)
} catch (t) {
try {
return n.call(null, e, 0)
} catch (t) {
return n.call(this, e, 0)
}
}
}! function() {
try {
n = "function" == typeof setTimeout ? setTimeout : i
} catch (e) {
n = i
}
try {
r = "function" == typeof clearTimeout ? clearTimeout : a
} catch (e) {
r = a
}
}();
var u, c = [],
l = !1,
p = -1;
function d() {
l && u && (l = !1, u.length ? c = u.concat(c) : p = -1, c.length && f())
}
function f() {
if (!l) {
var e = s(d);
l = !0;
for (var t = c.length; t;) {
for (u = c, c = []; ++p < t;) u && u[p].run();
p = -1, t = c.length
}
u = null, l = !1,
function(e) {
if (r === clearTimeout) return clearTimeout(e);
if ((r === a || !r) && clearTimeout) return r = clearTimeout, clearTimeout(e);
try {
r(e)
} catch (t) {
try {
return r.call(null, e)
} catch (t) {
return r.call(this, e)
}
}
}(e)
}
}
function v(e, t) {
this.fun = e, this.array = t
}
function h() {}
o.nextTick = function(e) {
var t = new Array(arguments.length - 1);
if (arguments.length > 1)
for (var n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
c.push(new v(e, t)), 1 !== c.length || l || s(f)
}, v.prototype.run = function() {
this.fun.apply(null, this.array)
}, o.title = "browser", o.browser = !0, o.env = {}, o.argv = [], o.version = "", o.versions = {}, o.on = h, o.addListener = h, o.once = h, o.off = h, o.removeListener = h, o.removeAllListeners = h, o.emit = h, o.prependListener = h, o.prependOnceListener = h, o.listeners = function(e) {
return []
}, o.binding = function(e) {
throw new Error("process.binding is not supported")
}, o.cwd = function() {
return "/"
}, o.chdir = function(e) {
throw new Error("process.chdir is not supported")
}, o.umask = function() {
return 0
}
}]).default
}));
</script>
<script>
const instance = new Typewriter('#typewriter', {
strings: ['Hello', 'World'],
autoStart: true,
});
</script>
<div id="typewriter1"></div>
<script>
const typewriter = new Typewriter('#typewriter1');
typewriter.typeString('Hello World!')
.callFunction(() => {
console.log('String typed out!');
})
.pauseFor(2500)
.deleteAll()
.callFunction(() => {
console.log('All strings were deleted');
})
.start();
</script>
<div id="typewriter3"></div>
<script>
const typewriter1 = new Typewriter('#typewriter3', {
loop: true,
});
typewriter1.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.typeString('Strings can be removed')
.pauseFor(2500)
.deleteChars(7)
.typeString('<strong>altered!<strong>')
.pauseFor(2500)
.start();
</script>
<div id="typewriter4"></div>
<script>
const typewriter2 = new Typewriter('#typewriter4', {
loop: true,
});
typewriter2.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.pauseFor(500)
.changeCursor('$')
.typeString('This is a new cursor')
.pauseFor(2500)
.start();
</script>
<div id="typewriter5"></div>
<script>
const typewriter3 = new Typewriter('#typewriter5', {
loop: true
});
typewriter3.typeString('<strong>Human: </strong>')
.typeString('Hello how are you?')
.pauseFor(2500)
.typeString('<br/>')
.typeString('<strong>Bot: </strong>')
.typeString('I am fine thanks, how are you?')
.pauseFor(2500)
.typeString('<br/>')
.typeString('<strong>Human: </strong> ')
.typeString('I am great!')
.pauseFor(2500)
.start();
</script>
<div id="typewriter6"></div>
<script>
const instance4 = new Typewriter('#typewriter6', {
loop: true,
});
instance4.typeString('Hello world!')
.pauseFor(1000)
.deleteAll(15)
.typeString('Another message here...')
.pauseFor(1000)
.start();
</script>
<div id="typewriter7"></div>
<script>
const instance8 = new Typewriter('#typewriter7', {
strings: ['Hello', 'World'],
autoStart: true,
loop: true,
});
</script>
<div id="typewriter8"></div>
<script>
const instance9 = new Typewriter('#typewriter8', {
strings: ['<span class="wrapper"><span class="span-1">Hello</span>, <span class="span-2">How</span> <span class="span-3">are</span> <span class="span-4">you</span>?</span>', '<span class="wrapper"><strong>Test</strong></span>'],
autoStart: true,
loop: true,
});
</script>
<div id="typewriter9"></div>
<script>
const instancea = new Typewriter('#typewriter9', {
strings: ['Hello', '<strong>World</strong>'],
autoStart: true,
loop: true,
});
</script>
</body>
</html>