Socket
Socket
Sign inDemoInstall

typeit

Package Overview
Dependencies
0
Maintainers
1
Versions
117
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.10.7 to 6.0.0

8

dist/typeit.min.js
/*!
*
*
* typeit - The most versatile animated typing utility on the planet.
* Author: Alex MacArthur <alex@macarthur.me> (https://macarthur.me)
* Version: v5.10.7
* Version: v6.0.0
* URL: https://typeitjs.com
* License: GPL-2.0
*
*
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.TypeIt=t()}(this,function(){"use strict";function e(e){var t=e.getBoundingClientRect();return!(t.right>window.innerWidth||t.bottom>window.innerHeight)&&!(t.top<0||t.left<0)}function t(e,t){return Math.abs(Math.random()*(e+t-(e-t))+(e-t))}function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",i=document.createElement("style");i.id=t,i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}function n(e,t){return 0===e.indexOf(t)}function s(e){return Array.isArray(e)?e.slice(0):e.split("<br>")}window.TypeItDefaults={strings:[],speed:100,deleteSpeed:null,lifeLike:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:!1,html:!0,autoStart:!0,callback:!1,beforeString:!1,afterString:!1,beforeStep:!1,afterStep:!1,afterComplete:!1};var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},h=function(){function o(e,t,i,n,s){r(this,o),this.id=t,this.typeit=s,this.autoInit=n,this.element=e,this.timeouts=[],this.hasStarted=!1,this.isFrozen=!1,this.isComplete=!1,this.hasBeenDestroyed=!1,this.queue=[],this.isInTag=!1,this.stringsToDelete="",this.inlineStyles={base:"display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;"},this.setOptions(i,window.TypeItDefaults,!1),this.prepareTargetElement(),this.prepareDelay("nextStringDelay"),this.prepareDelay("loopDelay"),this.prepareDOM(),this.prepareStrings(),this.options.startDelete&&this.stringsToDelete&&(this.insert(this.stringsToDelete),this.queue.push([this.delete]),this.insertSplitPause(1)),this.generateQueue(),this.options.strings.length&&this.options.strings[0]&&this.autoInit&&this.init()}return a(o,[{key:"prepareStrings",value:function(){this.options.strings=s(this.options.strings).map(function(e){return e.replace(/<\!--.*?-->/g,"")})}},{key:"prepareDOM",value:function(){this.element.innerHTML='\n <span style="'+this.inlineStyles.base+'" class="ti-wrapper">\n <span style="'+this.inlineStyles.base+'" class="ti-container"></span>\n </span>\n ',this.element.setAttribute("data-typeitid",this.id),this.elementContainer=this.element.querySelector(".ti-container"),this.elementWrapper=this.element.querySelector(".ti-wrapper"),i("\n ."+this.elementContainer.className+":before {\n content: '.';\n display: inline-block;\n width: 0;\n visibility: hidden;\n }\n ")}},{key:"reset",value:function(){return new o(this.element,this.id,this.options,this.autoInit,this.typeit)}},{key:"contents",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return null===e?this.options.html?this.elementContainer.innerHTML:this.elementContainer.innerText:(this.elementContainer[this.options.html?"innerHTML":"innerText"]=e,e)}},{key:"prepareDelay",value:function(e){var t=this.options[e];if(t){var i=Array.isArray(t),n=i?null:t/2;this.options[e]={before:i?t[0]:n,after:i?t[1]:n,total:i?t[0]+t[1]:t}}}},{key:"generateQueue",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;t=null===t?[this.pause,this.options.startDelay]:t,this.queue.push(t),this.options.strings.forEach(function(t,i){if(e.queueString(t),i+1!==e.options.strings.length){if(e.options.breakLines)return e.queue.push([e.break]),void e.insertSplitPause(e.queue.length);e.queueDeletions(t),e.insertSplitPause(e.queue.length,t.length)}})}},{key:"queueDeletions",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t="string"==typeof e?e.length:e,i=0;i<t;i++)this.queue.push([this.delete,1])}},{key:"queueString",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){if(e=s(e),document.implementation.createHTMLDocument("").body.innerHTML=e,t&&(e=this.rake(e)[0]),this.options.html&&n(e[0],"<")&&!n(e[0],"</")){var i=e[0].match(/\<(.*?)\>/),o=document.implementation.createHTMLDocument("");o.body.innerHTML="<"+i[1]+"></"+i[1]+">",this.queue.push([this.type,o.body.children[0]])}else this.queue.push([this.type,e[0]]);e.splice(0,1),t&&this.queue[this.queue.length-1].push("first-of-string"),e.length?this.queueString(e,!1):this.queue[this.queue.length-1].push("last-of-string")}}},{key:"insertSplitPause",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.queue.splice(e,0,[this.pause,this.options.nextStringDelay.before]),this.queue.splice(e-t,0,[this.pause,this.options.nextStringDelay.after])}},{key:"init",value:function(){if(!this.hasStarted){if(this.cursor(),this.options.autoStart)return this.hasStarted=!0,void this.next();if(e(this.element))return this.hasStarted=!0,void this.next();var t=this;window.addEventListener("scroll",function i(n){e(t.element)&&!t.hasStarted&&(t.hasStarted=!0,t.next(),n.currentTarget.removeEventListener(n.type,i))})}}},{key:"cursor",value:function(){var e="visibility: hidden;";this.options.cursor&&(i("\n @keyframes blink-"+this.id+" {\n 0% {opacity: 0}\n 49% {opacity: 0}\n 50% {opacity: 1}\n }\n\n [data-typeitid='"+this.id+"'] .ti-cursor {\n animation: blink-"+this.id+" "+this.options.cursorSpeed/1e3+"s infinite;\n }\n ",this.id),e=""),this.elementWrapper.insertAdjacentHTML("beforeend",'<span style="'+this.inlineStyles.base+e+'left: -.25ch;" class="ti-cursor">'+this.options.cursorChar+"</span>")}},{key:"insert",value:function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1]?this.elementContainer.lastChild.insertAdjacentHTML("beforeend",e):this.elementContainer.insertAdjacentHTML("beforeend",e),this.contents(this.contents().split("").join(""))}},{key:"prepareTargetElement",value:function(){var e=this;[].slice.call(this.element.childNodes).forEach(function(t){void 0!==t.classList&&t.classList.contains("ti-container")&&(e.element.innerHTML="")}),!this.options.startDelete&&this.element.innerHTML.length>0?this.options.strings=this.element.innerHTML.trim():this.stringsToDelete=this.element.innerHTML}},{key:"break",value:function(){this.insert("<br>"),this.next()}},{key:"pause",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];setTimeout(function(){e.next()},t||this.options.nextStringDelay.total)}},{key:"rake",value:function(e){var t=this;return e.map(function(e){return e=e.split(""),t.options.html?function(e){for(var t=[],i=void 0,n=!1,s=0;s<e.length;s++)"<"!==e[s]&&"&"!==e[s]||(t[0]=s,n="&"===e[s]),(">"===e[s]||";"===e[s]&&n)&&(t[1]=s,s=0,i=e.slice(t[0],t[1]+1).join(""),e.splice(t[0],t[1]-t[0]+1,i),n=!1);return e}(e):e})}},{key:"type",value:function(e){var t=this;this.setPace(),this.timeouts[0]=setTimeout(function(){return"string"!=typeof e?(e.innerHTML="",t.elementContainer.appendChild(e),t.isInTag=!0,void t.next()):n(e,"</")?(t.isInTag=!1,void t.next()):(t.insert(e,t.isInTag),void t.next())},this.typePace)}},{key:"setOptions",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n={};for(var s in null===t&&(t=this.options),t)n[s]=t[s];for(var o in e)n[o]=e[o];this.options=n,i&&this.next()}},{key:"setPace",value:function(){var e=this.options.speed,i=null!==this.options.deleteSpeed?this.options.deleteSpeed:this.options.speed/3,n=e/2,s=i/2;this.typePace=this.options.lifeLike?t(e,n):e,this.deletePace=this.options.lifeLike?t(i,s):i}},{key:"delete",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.timeouts[1]=setTimeout(function(){e.setPace();for(var i=e.contents().split(""),n=i.length-1;n>-1;n--){if(">"!==i[n]&&";"!==i[n]||!e.options.html){i.pop();break}for(var s=n;s>-1;s--){if("<br>"===i.slice(s-3,s+1).join("")){i.splice(s-3,4);break}if("&"===i[s]){i.splice(s,n-s+1);break}if("<"===i[s]&&">"!==i[s-1]){if(";"===i[s-1])for(var o=s-1;o>-1;o--)if("&"===i[o]){i.splice(o,s-o);break}i.splice(s-1,1);break}}break}if(e.options.html&&e.contents().indexOf("></")>-1)for(var r=e.contents().indexOf("></")-2;r>=0;r--)if("<"===i[r]){i.splice(r,i.length-r);break}e.contents(i.join("").replace(/<[^\/>][^>]*><\/[^>]+>/,"")),null===t&&e.queue.unshift([e.delete,i.length]),t>1&&e.queue.unshift([e.delete,t-1]),e.next()},this.deletePace)}},{key:"empty",value:function(){this.contents(""),this.next()}},{key:"next",value:function(){var e=this;if(!this.isFrozen){if(this.queue.length>0)return this.step=this.queue.shift(),"first-of-string"===this.step[2]&&this.options.beforeString&&this.options.beforeString(this.step,this.queue,this.typeit),this.options.beforeStep&&this.options.beforeStep(this.step,this.queue,this.typeit),this.step[0].call(this,this.step[1],this.step[2]),"last-of-string"===this.step[2]&&this.options.afterString&&this.options.afterString(this.step,this.queue,this.typeit),void(this.options.afterStep&&this.options.afterStep(this.step,this.queue,this.typeit));if(this.options.callback&&this.options.callback(),this.options.afterComplete&&this.options.afterComplete(this.typeit),this.options.loop){var t=this.options.loopDelay?this.options.loopDelay:this.options.nextStringDelay;return this.queueDeletions(this.contents()),this.generateQueue([this.pause,t.before]),void setTimeout(function(){e.next()},t.after)}this.isComplete=!0}}}]),o}(),l=function(){function e(t,i){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];r(this,e),this.id=Math.random().toString(36).substring(2,15),this.instances=[],this.elements=[],this.args=i,this.autoInit=n,"object"===(void 0===t?"undefined":o(t))&&(void 0===t.length?this.elements.push(t):this.elements=t),"string"==typeof t&&(this.elements=document.querySelectorAll(t)),this.generateInstances()}return a(e,[{key:"generateInstances",value:function(){var e=this;[].slice.call(this.elements).forEach(function(t){e.instances.push(new h(t,e.id,e.args,e.autoInit,e))})}},{key:"queueUp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.init(!0),this.instances.forEach(function(i){i.queue.push([i[e],t]),!0===i.isComplete&&i.next(),i.isComplete=!1})}}]),e}();return function(e){function t(e,i){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return r(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,i,n))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,l),a(t,[{key:"type",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return this.init(!0),this.instances.forEach(function(t){t.queueString(e),!0===t.isComplete&&t.next(),t.isComplete=!1}),this}},{key:"delete",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.queueUp("delete",e),this}},{key:"pause",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.queueUp("pause",e),this}},{key:"empty",value:function(){return this.queueUp("empty"),this}},{key:"break",value:function(){return this.queueUp("break"),this}},{key:"options",value:function(e){return this.queueUp("setOptions",e),this}},{key:"freeze",value:function(){this.instances.forEach(function(e){e.isFrozen=!0})}},{key:"unfreeze",value:function(){this.instances.forEach(function(e){e.isFrozen&&(e.isFrozen=!1,e.next())})}},{key:"destroy",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.instances.forEach(function(t){t.timeouts.forEach(function(e){clearTimeout(e)}),t.timeouts=[],e&&t.options.cursor&&t.elementWrapper.removeChild(t.elementWrapper.querySelector(".ti-cursor")),t.hasBeenDestroyed=!0})}},{key:"reset",value:function(){this.instances=this.instances.map(function(e){return e.reset()})}},{key:"init",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.instances.forEach(function(t){e?t.autoInit&&t.init():t.init()})}},{key:"isComplete",get:function(){return!!this.instances.length&&this.instances[0].isComplete}},{key:"hasBeenDestroyed",get:function(){return!!this.instances.length&&this.instances[0].hasBeenDestroyed}},{key:"hasStarted",get:function(){return!!this.instances.length&&this.instances[0].hasStarted}},{key:"isFrozen",get:function(){return!!this.instances.length&&this.instances[0].isFrozen}}]),t}()});
!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()}(window,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:null,html:!0,waitUntilVisible:!1,beforeString:!1,afterString:!1,beforeStep:!1,afterStep:!1,afterComplete:!1};function r(t){var e=t.getBoundingClientRect();return!(e.right>window.innerWidth||e.bottom>window.innerHeight)&&!(e.top<0||e.left<0)}function o(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=document.createElement("style");n.id=e,n.appendChild(document.createTextNode(t)),document.head.appendChild(n)}var u=function(t,e){for(var n=Object(t),i=1;i<arguments.length;i++){var r=arguments[i];if(null!=r)for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},a=function(t){return["textarea","input"].indexOf(t.tagName.toLowerCase())>-1},l=function(t){return Array.isArray(t)?t.slice(0):t.split("<br>")};function c(t){return(c="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 f="{%}";var h=function(t){var e=function(t){var e=(new DOMParser).parseFromString(t,"text/html"),n=[].slice.call(e.body.querySelectorAll("*"));return(n=n.filter(function(e){return!(e.outerHTML.indexOf("></")>-1&&(t=t.replace(e.outerHTML,""),1))})).forEach(function(e){var n=e.outerHTML.slice(0,-1);t=t.replace(new RegExp("".concat(n,"/?>"),"i"),f)}),{string:t,nodes:n}}(t),n=e.string,i=e.nodes,r=n.split(""),o=[];return r.forEach(function(t,e){if(r.slice(e,e+3).join("")===f){var n=e,s=i.shift(),u=s.innerHTML.split(""),a=[].slice.call(s.attributes).map(function(t){return{name:t.name,value:t.nodeValue}});u.length?u.forEach(function(t,i){o.push({tag:s.tagName,attributes:a,content:t,isFirstCharacter:n===e,isLastCharacter:i+1===u.length}),n++}):o.push({tag:s.tagName,attributes:a,content:null})}else o.push(t)}),o=function(t){for(var e=!0;e;)t.some(function(e,n){return!("object"!==c(e)||!e.isLastCharacter&&null!==e.content||"%}"!==t.slice(n+1,n+3).join("")||(t.splice(n+1,2),0))})||(e=!1);return t}(o)},p=function(t){var e=t.tag,n=t.attributes,i=void 0===n?[]:n,r=t.content,o=void 0===r?"":r,s=document.createElement(e);return void 0!==i&&i.forEach(function(t){s.setAttribute(t.name,t.value)}),o&&(s.innerHTML=o),s.outerHTML},d=function(t){arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t.value="":[].slice.call(t.childNodes).forEach(function(e){void 0!==e.classList&&e.classList.contains("ti-wrapper")&&(t.innerHTML="")})};function y(t){return(y="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 v(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function g(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var b=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.executed=[],this.waiting=e,!e.length&&n&&this.add(n)}var e,n,i;return e=t,(n=[{key:"add",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return this.waiting[e?"unshift":"push"](t),this}},{key:"delete",value:function(t){return this.waiting.splice(t,1),this}},{key:"reset",value:function(){return this.waiting=v(this.executed).concat(v(this.waiting)),this.executed=[],this}}])&&g(e.prototype,n),i&&g(e,i),t}();function m(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function w(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var S="display:inline;position:relative;font:inherit;color:inherit;line-height:inherit;",k=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.element,r=e.id,o=e.options,s=e.queue,c=void 0===s?[]:s;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.status={started:!1,complete:!1,frozen:!1,destroyed:!1},this.timeouts=[],this.id=r,this.$e=n,this.isInput=a(n),this.opts=u({},i,o),this.opts.strings=l(this.opts.strings),this.opts.html=!this.isInput&&this.opts.html,this.queue=new b(c,[this.pause,this.opts.startDelay]),d(n,this.isInput),this.prepareDelay("nextStringDelay"),this.prepareDelay("loopDelay");var f=this.$e.innerHTML;this.prepDOM(),this.handleHardCoded(f),this.opts.strings=this.opts.strings.map(function(t){return t.replace(/<\!--.*?-->/g,"")}),!this.opts.strings.length||this.queue.waiting.length>1||this.generateQueue()}var e,n,c;return e=t,(n=[{key:"reset",value:function(){return this.queue.reset(),new t({element:this.$e,id:this.id,options:this.opts,queue:this.queue.waiting})}},{key:"init",value:function(){var t=this;if(!this.status.started){if(this.cursor(),!this.opts.waitUntilVisible||r(this.$e))return this.status.started=!0,this.fire();window.addEventListener("scroll",function e(){r(t.$e)&&!t.status.started&&(t.fire(),window.removeEventListener("scroll",e))})}}},{key:"fire",value:function(){for(var t=this,e=this.queue.waiting.slice(),n=Promise.resolve(),i=function(i){var r=e[i],o=[r,t.queue,t];n=n.then(function(){return new Promise(function(e,n){if(t.status.frozen)return n();var i,s;(t.setPace(),r[2]&&r[2].isFirst&&t.opts.beforeString)&&(i=t.opts).beforeString.apply(i,o);t.opts.beforeStep&&(s=t.opts).beforeStep.apply(s,o);r[0].call(t,r[1],r[2]).then(function(){var n,i,s=t.queue.waiting.shift();if(r[2]&&r[2].isPhantom)return e();r[2]&&r[2].isLast&&t.opts.afterString&&(n=t.opts).afterString.apply(n,o);t.opts.afterStep&&(i=t.opts).afterStep.apply(i,o);return t.queue.executed.push(s),e()})})})},r=0;r<e.length;r++)i(r);n.then(function(){if(t.opts.loop){var e=t.opts.loopDelay?t.opts.loopDelay:t.opts.nextStringDelay;t.wait(function(){t.loopify(e),t.fire()},e.after)}t.status.completed=!0,t.opts.afterComplete&&t.opts.afterComplete(t)}).catch(function(){})}},{key:"loopify",value:function(t){var e=this;this.queue.reset().delete(0).add([this.pause,t.before],!0),this.getNoderized().forEach(function(t){e.queue.add([e.delete,null,{isPhantom:!0}],!0)})}},{key:"prepDOM",value:function(){this.isInput||(this.$e.innerHTML='\n <span style="'.concat(S,'" class="ti-wrapper">\n <span style="').concat(S,'" class="ti-container"></span>\n </span>\n '),this.$e.setAttribute("data-typeit-id",this.id),this.$eContainer=this.$e.querySelector(".ti-container"),this.$eWrapper=this.$e.querySelector(".ti-wrapper"),s("\n .".concat(this.$eContainer.className,":before {\n content: '.';\n display: inline-block;\n width: 0;\n visibility: hidden;\n }\n ")))}},{key:"setContents",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";this.isInput?this.$e.value=t:this.$eContainer[this.opts.html?"innerHTML":"innerText"]=t}},{key:"getRaw",value:function(){return this.isInput?this.$e.value:this.opts.html?this.$eContainer.innerHTML:this.$eContainer.innerText}},{key:"getNoderized",value:function(){return this.maybeNoderize(this.getRaw())}},{key:"prepareDelay",value:function(t){var e=this.opts[t];if(e){var n=Array.isArray(e),i=n?null:e/2;this.opts[t]={before:n?e[0]:i,after:n?e[1]:i,total:n?e[0]+e[1]:e}}}},{key:"generateQueue",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;e&&this.queue.add(e),this.opts.strings.forEach(function(e,n){t.queueString(e);var i=t.queue.waiting.length;if(n+1!==t.opts.strings.length){if(t.opts.breakLines)return t.queue.add([t.type,"<br>"]),void t.addSplitPause(i);t.queueDeletions(e),t.addSplitPause(i,e.length)}})}},{key:"queueDeletions",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e="string"==typeof t?this.maybeNoderize(t).length:t,n=0;n<e;n++)this.queue.add([this.delete])}},{key:"maybeNoderize",value:function(t){return this.opts.html?h(t):t.split("")}},{key:"queueString",value:function(t){var e=this,n=(t=this.maybeNoderize(t)).length;t.forEach(function(t,i){var r=[e.type,t];0===i&&r.push({isFirst:!0}),i+1===n&&r.push({isLast:!0}),e.queue.add(r)})}},{key:"addSplitPause",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.queue.waiting.splice(t,0,[this.pause,this.opts.nextStringDelay.before]),this.queue.waiting.splice(t+e+1,0,[this.pause,this.opts.nextStringDelay.after])}},{key:"cursor",value:function(){if(!this.isInput){var t="visibility: hidden;";this.opts.cursor&&(s("\n @keyframes blink-".concat(this.id," {\n 0% {opacity: 0}\n 49% {opacity: 0}\n 50% {opacity: 1}\n }\n\n [data-typeit-id='").concat(this.id,"'] .ti-cursor {\n animation: blink-").concat(this.id," ").concat(this.opts.cursorSpeed/1e3,"s infinite;\n }\n "),this.id),t=""),this.$eWrapper.insertAdjacentHTML("beforeend",'<span style="'.concat(S).concat(t,'left: -.25ch;" class="ti-cursor">').concat(this.opts.cursorChar,"</span>"))}}},{key:"insert",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.isInput?this.$e.value="".concat(this.$e.value).concat(t):((e?this.$eContainer.lastChild:this.$eContainer).insertAdjacentHTML("beforeend",t),this.setContents(this.getRaw().split("").join("")))}},{key:"handleHardCoded",value:function(t){return!!t.length&&(this.opts.startDelete?(this.insert(t),this.queue.add([this.delete,!0]),void this.addSplitPause(1)):void(this.opts.strings=m(l(t.trim())).concat(m(this.opts.strings))))}},{key:"wait",value:function(t,e){this.timeouts.push(setTimeout(t,e))}},{key:"setPace",value:function(){var t=this.opts.speed,e=null!==this.opts.deleteSpeed?this.opts.deleteSpeed:this.opts.speed/3,n=t/2,i=e/2;this.typePace=this.opts.lifeLike?o(t,n):t,this.deletePace=this.opts.lifeLike?o(e,i):e}},{key:"pause",value: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)})}},{key:"type",value:function(t){var e=this;return new Promise(function(n,i){e.wait(function(){return"string"==typeof t?(e.insert(t),n()):t.isFirstCharacter||null===t.content?(e.insert(p({tag:t.tag,attributes:t.attributes,content:t.content})),n()):(e.insert(t.content,!0),n())},e.typePace)})}},{key:"empty",value:function(){var t=this;return new Promise(function(e){return t.setContents(""),e()})}},{key:"delete",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return new Promise(function(n,i){t.wait(function(){var i=t.getNoderized();return i.splice(-1,1),i=function(t){return(t=t.map(function(e,n){if("object"===y(e)&&(e.isFirstCharacter||null===e.content)){for(var i=n,r=[e.content],o=!1;!o;){var s=t[++i];void 0!==s&&r.push(s.content),(void 0===s||s.isLastCharacter)&&(o=!0)}return p({tag:e.tag,attributes:e.attributes,content:r.join("")})}return e})).filter(function(t){return"object"!==y(t)})}(i),t.setContents(i.join("")),e&&i.length>0?t.delete(!0).then(function(){return n()}):n()},t.deletePace)})}},{key:"setOptions",value:function(t){var e=this;return new Promise(function(n){return e.opts=u({},e.opts,t),n()})}}])&&w(e.prototype,n),c&&w(e,c),t}(),q=function(t){return"string"==typeof t?t=document.querySelectorAll(t):t instanceof NodeList||(t=[t]),[].slice.call(t)};function C(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}n.d(e,"default",function(){return j});var j=function(){function t(e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.instances=q(e).map(function(t){return new k({element:t,id:Math.random().toString(36).substring(2,15),options:n,queue:[]})})}var e,n,i;return e=t,(n=[{key:"each",value:function(t){var e=this;this.instances.forEach(function(n){t.call(e,n)})}},{key:"queueUp",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;this.each(function(r){for(var o="string"!=typeof t,s=o?t:r[t],u=o?e:n,a=0;a<i;a++)r.queue.add([s,u])})}},{key:"is",value:function(t){return e=this.instances,n=t,i=!0,!!e.length&&e.filter(function(t){return t.status[n]===i}).length===e.length;var e,n,i}},{key:"freeze",value:function(){this.each(function(t){t.status.frozen=!0})}},{key:"unfreeze",value:function(){this.each(function(t){t.status.frozen&&(t.status.frozen=!1,t.fire())})}},{key:"type",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return this.each(function(e){return e.queueString(t)}),this}},{key:"delete",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.queueUp("delete",null===t,null===t?1:t),this}},{key:"pause",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.queueUp("pause",t),this}},{key:"break",value:function(){return this.queueUp("type","<br>"),this}},{key:"options",value:function(t){return this.queueUp("setOptions",t),this}},{key:"exec",value:function(t){return this.queueUp(t),this}},{key:"destroy",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.each(function(e){e.timeouts.forEach(function(t){clearTimeout(t)}),e.timeouts=[];var n=e.isInput?null:e.$eWrapper.querySelector(".ti-cursor");t&&e.opts.cursor&&null!==n&&e.$eWrapper.removeChild(n),e.status.destroyed=!0})}},{key:"empty",value:function(){return this.queueUp("empty"),this}},{key:"reset",value:function(){return this.destroy(),this.instances=this.instances.map(function(t){return t.reset()}),this}},{key:"go",value:function(){return this.each(function(t){t.init()}),this}}])&&C(e.prototype,n),i&&C(e,i),t}()}]).default});

@@ -1,3 +0,7 @@

console.log('\x1b[35m%s\x1b[0m', ' _____ _____ _ \r\n|_ _| |_ _| | \r\n | |_ _ _ __ ___ | | | |_ \r\n | | | | | \'_ \\ \/ _ \\| | | __|\r\n | | |_| | |_) | __\/| |_| |_ \r\n \\_\/\\__, | .__\/ \\___\\___\/ \\__|\r\n __\/ | | \r\n |___\/|_| \n');
console.log('Thanks for using TypeIt! If you\'re using TypeIt commercially, please purchase a license at https://typeitjs.com.\n');
console.log(
"\x1b[35m%s\x1b[0m",
" _____ _____ _ \r\n|_ _| |_ _| | \r\n | |_ _ _ __ ___ | | | |_ \r\n | | | | | '_ \\ / _ \\| | | __|\r\n | | |_| | |_) | __/| |_| |_ \r\n \\_/\\__, | .__/ \\___\\___/ \\__|\r\n __/ | | \r\n |___/|_| \n"
);
console.log(
"Thanks for using TypeIt! If you're using TypeIt commercially, please purchase a license at https://typeitjs.com.\n"
);
{
"name": "typeit",
"version": "5.10.7",
"version": "6.0.0",
"description": "The most versatile animated typing utility on the planet.",

@@ -11,4 +11,4 @@ "author": "Alex MacArthur <alex@macarthur.me> (https://macarthur.me)",

"homepage": "https://typeitjs.com",
"main": "dist/typeit.js",
"module": "dist/typeit.es.js",
"main": "dist/typeit.min.js",
"module": "dist/typeit.min.js",
"files": [

@@ -18,6 +18,8 @@ "dist/"

"scripts": {
"build": "rollup -c && prettier src/* --write && prettier tests/* --write",
"watch": "rollup -c -w",
"serve": "concurrently --kill-others \"rollup -c -w\" \"node serve.js\"",
"test": "jest tests",
"build": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js && prettier src/* --write && prettier __tests__/* --write",
"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js && prettier src/* --write && prettier __tests__/* --write",
"serve": "concurrently --kill-others \"npm run watch\" \"node serve.js\"",
"analyze": "node_modules/webpack/bin/webpack.js --profile --json > stats.json",
"prettify-and-add": "prettier \"./**/*.js\" --write && git add -A",
"test": "jest",
"postinstall": "node ./notice.js"

@@ -35,2 +37,5 @@ },

],
"pre-commit": [
"prettify-and-add"
],
"repository": {

@@ -41,15 +46,16 @@ "type": "git",

"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"concurrently": "^3.5.1",
"express": "^4.16.2",
"jest-cli": "^21.2.1",
"prettier": "^1.8.2",
"regenerator-runtime": "^0.11.0",
"rollup": "^0.57.1",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-uglify": "^3.0.0"
"pre-commit": "^1.2.2",
"prettier": "^1.15.3",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
}
}

@@ -8,16 +8,4 @@ # TypeIt

## Table of Contents
* [Overview](#overview)
* [Choose a License](#choose-a-license)
* [Usage](#usage)
* [API](#api)
* [Options](#options)
* [Callback Methods](#callback-methods)
* [CodePen Examples](#codepen-examples)
* [Contribute](#contribute)
* [Need Help?](#need-help)
* [License](#license)
## Overview
TypeIt is the most versatile JavaScript typewriter effect utility on the planet. With simple, straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.
TypeIt is the most versatile JavaScript typewriter effect utility on the planet. With simple yet flexible configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.

@@ -31,3 +19,3 @@ For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete reign over speed changes, line breaks, deletions, and pauses.

* Use a single TypeIt instance to target several different elements on a page.
* Handle HTML tags (including those with classes, ID's, etc.) and entities with ease.
* Handle HTML tags (preserving attributes) with ease.
* Use companion functions to chain individual commands together to fine tune your typing.

@@ -37,6 +25,3 @@ * Ready to be included via JS module, or as a separate script loaded on your page.

### Demos
See some more examples and try out the sandbox [here](https://typeitjs.com).
## Choose a License
## License Options
Using TypeIt for an open source or personal project is completely free. To use it in a commercial project, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it.

@@ -47,328 +32,8 @@ * Personal or Open Source - [FREE](#setup)

## Installation
### Demos
See some more examples and try out the sandbox at [https://typeitjs.com](https://typeitjs.com).
### Get the Code
* <strong><a href="https://www.jsdelivr.com/package/npm/typeit">CDN:</a></strong> Include this on your page: <em>https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js</em>
* <strong><a href="https://www.npmjs.com/package/typeit">npm / yarn:</a></strong> Install with `npm install typeit` or `yarn add typeit` and import into your project with `import TypeIt from 'typeit'`.
* <strong><a href="https://github.com/alexmacarthur/typeit">Clone the Repo:</a></strong> The compiled source files will be in the `/dist` directory.
### Documenation
All of TypeIt's documentation can be found at [https://typeitjs.com/docs](https://typeitjs.com/docs).
### Load the Script
Either load it via `script` tag, or import.
```html
<script src="typeit.min.js"></script>
```
or
```js
import TypeIt from 'typeit';
```
### Create an Element to Be Typed Into
If you want a fallback for users without JavaScript, you can put a string or strings right into this element. For more on that, see the [Defining Strings](#defining-strings) section.
```html
<span class="type-it"></span>
```
## Usage
Out of the box, a fresh instance of TypeIt accepts three arguments:
* element: The element where text will be typed. This can be a DOM node, or a string reference to an element, class, or ID.
* options: An object that determines how the instance will behave. [More about setting options here.](#options)
* autoInit: A boolean that determines if TypeIt will initialize immediately, or wait until the `.init()` method is called on it later. [More on `autoInit` here.](#creating-an-inactive-instance)
Create a new TypeIt instance, pass a reference to element, and define your [options](#options).
```js
// The simplest example
new TypeIt('.type-it', {
strings: 'This is my string!'
});
```
### Defining Strings
#### In the Options Object
The most common way to define strings to type is to pass them via the option object's `string` property, either as a string or array of strings.
#### In Your HTML
As a fallback for users without JavaScript, you can define strings in your HTML element.
```html
<span class="type-it">Here is a string.</span>
```
#### Using the type() Method
Or, you can create a base instance, and define your strings using the `type()` method. See more on that in the [Companion Functions](#companion-functions) section.
### Typing Multiple Strings
To define multiple strings, either use `<br>` tag to separate them in your target element, or pass an array into the instance you create.
```html
<span class="type-it">Here is a string. <br>And here is another!</span>
```
```js
new TypeIt('.type-it', {
strings: ['Enter your string here!', 'Another string!']
});
```
By default, multiple strings will break lines (breakLines: true). However, you can also set them to delete and replace each other.
```js
new TypeIt('.type-it', {
strings: ['Enter your string here!', 'Another string!'],
breakLines: false
});
```
## API
### Handling HTML
TypeIt is fully prepared to handle HTML in your strings, so it's easy to style a portion of what you type, or just do something like bold a couple of words.
#### HTML Elements
Tags must be one level deep and be inline elements.
```js
new TypeIt('.typeit-box', {
strings: '<h1 class="your-class">This is a string!</h1>',
});
```
#### HTML Entities
ASCII HTML entities must begin with & and end with ;
```js
new TypeIt('.typeit-box', {
strings: '<h1 class="your-class">I really &hearts; Life cereal.<h1>',
});
```
### Companion Functions
To control a typewriter effect to the smallest character, pause, speed, or more, there companion functions available. Simply chain them together on an instance of TypeIt, and your chain will execute. You'll be able to create a dynamic, realistic narrative with just a few lines of code that looks something like this:
```js
new TypeIt('#element', {
speed: 50
}).type('I want to type this.').pause(500).type('And type some more!');
```
| Function | Arguments | Description
| ------------- | ------------- | ------------- |
| type() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. If instance has already begun, will add the typing action to the end of the queue. |
| delete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the specified number of characters. If left empty, will delete all of what's been typed. |
| empty() | (none) | Will instantly delete everything that has already been typed.
| pause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds.|
| break() | (none) | Will break the typing to a new line.|
| options() | (JSON) Options you'd like to update | Will redefine your options on the fly. This will only work for updating the `speed`, `lifeLike`, and `html` options.|
| freeze() | none | Will pause/freeze an instance.
| unfreeze() | none | Will resume an instance.
| reset() | none | Will reset an instance back to its starting position, as if nothing ever happened. This method is **not** chainable.
| destroy() | (bool) Whether you want to remove the cursor after destroying. Default is `true`.| Destroys the instance on whatever elements to which it's attached. Destroying an instance will not remove the text itself -- it'll just kill the activity of the instance. This method is **not** chainable.
### Chaining on Initializing
You may use these functions to generate a queue of typing events immediately upon creating the instance. This is probably the more common way of using these methods.
```js
new TypeIt('.type-it', {
speed: 900,
lifeLike: false,
autoStart: false
})
.type('I am typing slowly,')
.options({speed: 100})
.type('but now I am typing pretty fasst')
.delete(2)
.type('t!');
```
### Pausing/Resuming Typing
Additionally, you may use these functions to manipulate an instance after it's been created. A common use case for this is pausing and resuming an instance.
```js
var instance = new TypeIt('#element', {
strings: "This is what I'm choosing to type right now."
});
//-- Pause after one second.
setTimeout(() => {
instance.freeze();
}, 1000);
//-- Resume after three seconds.
setTimeout(() => {
instance.unfreeze();
}, 3000);
```
### Respond to User Action
This is also helpful if you want your typing to respond to user action of any sort.
```js
var instance = new TypeIt('#element');
document.querySelector('button').addEventListener('click', (event) => {
instance.type('You just clicked a button!');
});
```
### Tack on Strings Later
You can also use the `type()` function to add more strings onto the queue at a later time. If the instance has already finished, the string will be added to the queue and typed when it's time.
```js
var instance = new TypeIt('#element', {
strings: "What I'm first going to type."
});
instance.type("I just decided to add this on too, but it won't be typed until the active queue has finished.");
```
### Creating an Inactive Instance
Sometimes, you might want to create an instance, but not trigger it until a later time. To this, set `autoInit` to `false` by passing it as the third argument of your TypeIt instance.
```js
var myInstance = new TypeIt('#element', {
strings: "This won't start typing automatically."
}, false);
myInstance.init(); //-- Now it's initialized!
```
### Check for Instance States
There are several properties attached to each instance of TypeIt that reveal current states.
#### Is my instance complete?
Use the `isComplete` property:
```js
var instance = new TypeIt('#element', { /* options... */ });
if(instance.isComplete) {
//-- Do something.
}
```
#### Has my instance been destroyed?
Use the `hasBeenDestroyed` property:
```js
var instance = new TypeIt('#element', { /* options... */ });
if(instance.hasBeenDestroyed) {
//-- Do something.
}
```
#### Is my instance frozen?
Use the `isFrozen` property:
```js
var instance = new TypeIt('#element', { /* options... */ });
if(instance.isFrozen) {
//-- Do something.
}
```
#### Has my instance started?
Use the `hasStarted` property.
```js
var instance = new TypeIt('#element', { /* options... */ }, false);
if(!instance.hasStarted) {
//-- Do something.
}
```
## Options
You can modify the options for the plugin by passing in JSON upon instantiation. It'll look something like this:
```js
new TypeIt('#element', {
strings: "Your default string.", // or, ["String #1", "String #2"]
speed: 100
})
```
| Option | Description | Default Value
| ------------- | ------------- | ------------- |
| strings | (string or array) The string(s) to be typed. | 'Your default string.' |
| speed | (number in millseconds) The typing speed. | 100 |
| deleteSpeed | (number in millseconds) The deletion speed. If left null, will be 1/3 of the type speed. | null |
| lifeLike | (boolean) Will make the typing pace irregular, as if a real person is doing it. | true |
| cursor | (boolean) Show a blinking cursor at the end of the string(s). | true |
| cursorSpeed | (number in milliseconds) The blinking speed of the cursor. | 1000 |
| cursorChar | (string) The character used for the cursor. HTML works too! | pipe |
| breakLines | (boolean) Choose whether you want multiple strings to be printed on top of each other (`breakLines: true`), or if you want each string to be deleted and replaced by the next one (`breakLines: false`). | true |
| nextStringDelay | (number in milliseconds or array) The amount of time (milliseconds) between typing strings when multiple are defined. You may either pass a number in milliseconds, or an array of values. The first value will be used as the delay before a new string starts, and the second value will be used as the delay after a string has just ended. For example, passing `[1000, 2000]` will tell TypeIt to pause 1000ms before typing a new string, and wait 2000ms after a string has just completed. This would be equivalent to `instance.type('String 1').pause(2000).delete().pause(1000).type('String 2')`. If a number is passed, that value will be halved. | 750 |
| autoStart | (boolean) Determines if the instance will typing automatically on page load, or only when the target element becomes visible in the viewport. If you don't want instances far down on the page to begin until they're visible, set this option to `false.` | true |
| startDelete | (boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. | false |
| startDelay | (number in milliseconds) The amount of time before the plugin begins typing after initalizing. | 250 |
| loop | (boolean) Have your string or strings continuously loop after completing. | false |
| loopDelay | (number in milliseconds or array) The amount of time between looping over a string or set of strings again. This option behaves identically to `nextStringDelay`. If an array is passed, the first value will be the time before typing begins again (after the set of strings has been deleted), and the second value will be the time immediately after the set of strings has finished typing, before they're deleted to restart. If left undefined, the `nextStringDelay` option will be used. | false |
| html | (boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally. | true |
#### Changing Option Defaults
If you're creating several instances of TypeIt on a page, and don't wish to repeatedly set an option of the same value for each of them, you can redefine the default options beforehand. Change the default value(s) before creating any instances, and you'll be set.
```js
window.TypeItDefaults.speed = 50;
//-- This and all following instances will now have a default speed of 50.
new TypeIt('#id', {
strings: 'A string!'
});
```
## Callback Methods
Along all of these options, there are several callback method options you may use to trigger JavaScript at different points in time.
```js
new TypeIt('#id', {
strings: 'A string!'
afterString: function(step, queue, instance) {
//-- Execute your code here.
}
});
```
### Passed Arguments
Most callback methods will be passed the following arguments.
| Argument | Description
| ------------- | -------------
| step | Each character, deletion, pause, line break, etc. are "steps" in a queue of actions that are run with each instance. Each step is an array with the method that's called, an argument for the method, and a tag if it's the first or last character in a string that's been queued to be typed. So, a typical step will look something like this: `[Function type, 'm']`.
| queue | This is the rest of the queue that is yet to be typed. Each step in the queue is yet to be typed. Any steps that have already been typed will have been removed at this point.
| instance | The instance of TypeIt itself.
### Available Methods
Remember, each of these methods is passed as an option into your instance when you create it:
```js
new TypeIt('#id', {
afterString: function (step, queue, instance) {},
afterComplete: function (instance) {}
});
```
| Method | Description | Included Arguments
| ------------- | ------------- | ------------- |
| beforeString() | Before a new string is about to be typed. For example, if you pass two strings in an array when you set up TypeIt, this callback method will execute twice. | step, queue, instance |
| beforeStep() | Before each step in the queue is executed (including individual pauses, deletions, and new characters). | step, queue, instance
| afterString() | After a string is typed. | step, queue, instance
| afterStep() | After each step in the queue is executed. | step, queue, instance
| afterComplete() | After the entire instance is complete. This runs when all of the steps in the queue have been executed. So, technically, if you let the instance run out of steps and then add new steps later, this method could run more than once. | instance
## CodePen Examples
I have a few CodePen examples that illustrate how to do some interesting things with TypeIt.
* [TypeIt as a React Component](https://codepen.io/alexmacarthur/pen/gXNyBJ)
* [Cute Rainbow Effect Using a Callback Method](https://codepen.io/alexmacarthur/pen/jzybpB)
* [Chained Typing Animations](https://codepen.io/alexmacarthur/pen/MOPQvp)
* ['Fill in the Blank' Effect](https://codepen.io/alexmacarthur/pen/pdXLRG)
## Contribute

@@ -375,0 +40,0 @@ Please do! The code is available on Github. Check out the [CONTRIBUTING.md](https://github.com/alexmacarthur/typeit/blob/master/CONTRIBUTING.md) file to see how to get started.

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc