typeit - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

dist/typeit.es.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.3.0
+ *   Version: v5.4.0
  *   URL: https://typeitjs.com
@@ -17,2 +17,3 @@ *   License: GPL-2.0
   cursor: true,
+  cursorChar: "|",
   cursorSpeed: 1000,
@@ -294,3 +295,3 @@ breakLines: true,
 
-      this.element.insertAdjacentHTML("beforeend", "<span style=\"" + this.style + visibilityStyle + "\" class=\"ti-cursor\">|</span>");
+      this.element.insertAdjacentHTML("beforeend", "<span style=\"" + this.style + visibilityStyle + "\" class=\"ti-cursor\">" + this.options.cursorChar + "</span>");
     }
@@ -297,0 +298,0 @@

dist/typeit.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.3.0
+ *   Version: v5.4.0
  *   URL: https://typeitjs.com
@@ -23,2 +23,3 @@ *   License: GPL-2.0
   cursor: true,
+  cursorChar: "|",
   cursorSpeed: 1000,
@@ -300,3 +301,3 @@ breakLines: true,
 
-      this.element.insertAdjacentHTML("beforeend", "<span style=\"" + this.style + visibilityStyle + "\" class=\"ti-cursor\">|</span>");
+      this.element.insertAdjacentHTML("beforeend", "<span style=\"" + this.style + visibilityStyle + "\" class=\"ti-cursor\">" + this.options.cursorChar + "</span>");
     }
@@ -303,0 +304,0 @@

dist/typeit.min.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.3.0
+ *   Version: v5.4.0
  *   URL: https://typeitjs.com
@@ -11,2 +11,17 @@ *   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";window.TypeItDefaults={strings:[],speed:100,deleteSpeed:void 0,lifeLike:!0,cursor:!0,cursorSpeed:1e3,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,autoStart:!0,callback:function(){}};var e="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},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=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}}(),n=function(){function e(i,n,s){t(this,e),this.timeouts=[],this.id=n,this.queue=[],this.hasStarted=!1,this.isFrozen=!1,this.isComplete=!1,this.isInTag=!1,this.stringsToDelete="",this.style="display:inline;position:relative;font:inherit;color:inherit;",this.element=i,this.setOptions(s,window.TypeItDefaults,!1),this.init()}return i(e,[{key:"init",value:function(){this.checkElement(),this.options.strings=this.toArray(this.options.strings),this.options.strings=this.removeComments(this.options.strings),this.options.strings.length>=1&&""===this.options.strings[0]||(this.element.innerHTML='\n        <span style="'+this.style+'" class="ti-container"></span>\n      ',this.element.setAttribute("data-typeitid",this.id),this.elementContainer=this.element.querySelector("span"),this.options.startDelete&&(this.insert(this.stringsToDelete),this.queue.push([this.delete]),this.insertSplitPause(1)),this.cursor(),this.generateQueue(),this.kickoff())}},{key:"removeComments",value:function(e){return e.map(function(e){return e.replace(/<\!--.*?-->/g,"")})}},{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){e.queueUpString(t),i+1<e.options.strings.length&&(e.options.breakLines?(e.queue.push([e.break]),e.insertSplitPause(e.queue.length)):(e.queueUpDeletions(t),e.insertSplitPause(e.queue.length,t.length)))})}},{key:"queueUpDeletions",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:"queueUpString",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){e=this.toArray(e);if(document.implementation.createHTMLDocument().body.innerHTML=e,t&&(e=(e=this.rake(e))[0]),this.options.html&&e[0].startsWith("<")&&!e[0].startsWith("</")){var i=e[0].match(/\<(.*?)\>/),n=document.implementation.createHTMLDocument();n.body.innerHTML="<"+i[1]+"></"+i[1]+">",this.queue.push([this.type,n.body.children[0]])}else this.queue.push([this.type,e[0]]);e.splice(0,1),e.length&&this.queueUpString(e,!1)}}},{key:"insertSplitPause",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=this.options.nextStringDelay/2;this.queue.splice(e,0,[this.pause,i]),this.queue.splice(e-t,0,[this.pause,i])}},{key:"kickoff",value:function(){if(this.options.autoStart)return this.hasStarted=!0,void this.next();if(this.isVisible())return this.hasStarted=!0,void this.next();var e=this;window.addEventListener("scroll",function t(i){e.isVisible()&&!e.hasStarted&&(e.hasStarted=!0,e.next(),i.currentTarget.removeEventListener(i.type,t))})}},{key:"isVisible",value:function(){var e=this.element.getBoundingClientRect(),t=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,i=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;return!(e.right>i||e.bottom>t)&&!(e.top<0||e.left<0)}},{key:"cursor",value:function(){var e="visibility: hidden;";if(this.options.cursor){var t=document.createElement("style");t.id=this.id;var 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          ";t.appendChild(document.createTextNode(i)),document.head.appendChild(t),e=""}this.element.insertAdjacentHTML("beforeend",'<span style="'+this.style+e+'" class="ti-cursor">|</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.elementContainer.innerHTML=this.elementContainer.innerHTML.split("").join("")}},{key:"toArray",value:function(e){return e.constructor===Array?e.slice(0):e.split("<br>")}},{key:"checkElement",value:function(){!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(e){var t=this;setTimeout(function(){t.next()},void 0===e?this.options.nextStringDelay:e)}},{key:"rake",value:function(e){var t=this;return e.map(function(e){if(e=e.split(""),t.options.html)for(var i=[],n=void 0,s=!1,o=0;o<e.length;o++)"<"!==e[o]&&"&"!==e[o]||(i[0]=o,s="&"===e[o]),(">"===e[o]||";"===e[o]&&s)&&(i[1]=o,o=0,n=e.slice(i[0],i[1]+1).join(""),e.splice(i[0],i[1]-i[0]+1,n),s=!1);return 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()):e.startsWith("</")?(t.isInTag=!1,void t.next()):(t.insert(e,t.isInTag),void t.next())},this.typePace)}},{key:"removeHelperElements",value:function(){var e=this,t=this.element.querySelectorAll(".ti-container, .ti-cursor");[].forEach.call(t,function(t){e.element.removeChild(t)})}},{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={};null===t&&(t=this.options);for(var s in t)n[s]=t[s];for(var o in e)n[o]=e[o];this.options=n,i&&this.next()}},{key:"randomInRange",value:function(e,t){return Math.abs(Math.random()*(e+t-(e-t))+(e-t))}},{key:"setPace",value:function(){var e=this.options.speed,t=void 0!==this.options.deleteSpeed?this.options.deleteSpeed:this.options.speed/3,i=e/2,n=t/2;this.typePace=this.options.lifeLike?this.randomInRange(e,i):e,this.deletePace=this.options.lifeLike?this.randomInRange(t,n):t}},{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.elementContainer.innerHTML.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.elementContainer.innerHTML.indexOf("></")>-1)for(var r=e.elementContainer.innerHTML.indexOf("></")-2;r>=0;r--)if("<"===i[r]){i.splice(r,i.length-r);break}e.elementContainer.innerHTML=i.join(""),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.elementContainer.innerHTML="",this.next()}},{key:"next",value:function(){var e=this;if(!this.isFrozen){if(this.queue.length>0){var t=this.queue[0];return this.queue.shift(),void t[0].call(this,t[1])}this.options.callback(),this.options.loop?(this.queueUpDeletions(this.elementContainer.innerHTML),this.generateQueue([this.pause,this.options.loopDelay/2]),setTimeout(function(){e.next()},this.options.loopDelay/2)):this.isComplete=!0}}}]),e}();return function(){function s(i,n){t(this,s),this.id=this.generateHash(),this.instances=[],this.elements=[],this.args=n,"object"===(void 0===i?"undefined":e(i))&&(void 0===i.length?this.elements.push(i):this.elements=i),"string"==typeof i&&(this.elements=document.querySelectorAll(i)),this.createInstances()}return i(s,[{key:"generateHash",value:function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}},{key:"createInstances",value:function(){var e=this;[].slice.call(this.elements).forEach(function(t){e.instances.push(new n(t,e.id,e.args))})}},{key:"pushAction",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.instances.forEach(function(i){i.queue.push([i[e],t]),!0===i.isComplete&&i.next()})}},{key:"type",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return this.instances.forEach(function(t){t.queueUpString(e),!0===t.isComplete&&t.next()}),this}},{key:"delete",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.pushAction("delete",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:"pause",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.pushAction("pause",e),this}},{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)}),e&&t.element.removeChild(t.element.querySelector(".ti-cursor"))}),this.instances=[]}},{key:"empty",value:function(){return this.pushAction("empty"),this}},{key:"break",value:function(){return this.pushAction("break"),this}},{key:"options",value:function(e){return this.pushAction("setOptions",e),this}},{key:"isComplete",get:function(){return this.instances[0].isComplete}}]),s}()});
+!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";window.TypeItDefaults={strings:[],speed:100,deleteSpeed:void 0,lifeLike:!0,cursor:!0,cursorChar:"|",cursorSpeed:1e3,breakLines:!0,startDelay:250,startDelete:!1,nextStringDelay:750,loop:!1,loopDelay:750,html:!0,autoStart:!0,callback:function(){}};var e="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},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=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}}(),n=function(){function e(i,n,s){t(this,e),this.timeouts=[],this.id=n,this.queue=[],this.hasStarted=!1,this.isFrozen=!1,this.isComplete=!1,this.isInTag=!1,this.stringsToDelete="",this.style="display:inline;position:relative;font:inherit;color:inherit;",this.element=i,this.setOptions(s,window.TypeItDefaults,!1),this.init()}return i(e,[{key:"init",value:function(){this.checkElement(),this.options.strings=this.toArray(this.options.strings),this.options.strings=this.removeComments(this.options.strings),this.options.strings.length>=1&&""===this.options.strings[0]||(this.element.innerHTML='\n        <span style="'+this.style+'" class="ti-container"></span>\n      ',this.element.setAttribute("data-typeitid",this.id),this.elementContainer=this.element.querySelector("span"),this.options.startDelete&&(this.insert(this.stringsToDelete),this.queue.push([this.delete]),this.insertSplitPause(1)),this.cursor(),this.generateQueue(),this.kickoff())}},{key:"removeComments",value:function(e){return e.map(function(e){return e.replace(/<\!--.*?-->/g,"")})}},{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){e.queueUpString(t),i+1<e.options.strings.length&&(e.options.breakLines?(e.queue.push([e.break]),e.insertSplitPause(e.queue.length)):(e.queueUpDeletions(t),e.insertSplitPause(e.queue.length,t.length)))})}},{key:"queueUpDeletions",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:"queueUpString",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){if(e=this.toArray(e),document.implementation.createHTMLDocument().body.innerHTML=e,t&&(e=(e=this.rake(e))[0]),this.options.html&&e[0].startsWith("<")&&!e[0].startsWith("</")){var i=e[0].match(/\<(.*?)\>/),n=document.implementation.createHTMLDocument();n.body.innerHTML="<"+i[1]+"></"+i[1]+">",this.queue.push([this.type,n.body.children[0]])}else this.queue.push([this.type,e[0]]);e.splice(0,1),e.length&&this.queueUpString(e,!1)}}},{key:"insertSplitPause",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=this.options.nextStringDelay/2;this.queue.splice(e,0,[this.pause,i]),this.queue.splice(e-t,0,[this.pause,i])}},{key:"kickoff",value:function(){if(this.options.autoStart)return this.hasStarted=!0,void this.next();if(this.isVisible())return this.hasStarted=!0,void this.next();var e=this;window.addEventListener("scroll",function t(i){e.isVisible()&&!e.hasStarted&&(e.hasStarted=!0,e.next(),i.currentTarget.removeEventListener(i.type,t))})}},{key:"isVisible",value:function(){var e=this.element.getBoundingClientRect(),t=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,i=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;return!(e.right>i||e.bottom>t)&&!(e.top<0||e.left<0)}},{key:"cursor",value:function(){var e="visibility: hidden;";if(this.options.cursor){var t=document.createElement("style");t.id=this.id;var 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          ";t.appendChild(document.createTextNode(i)),document.head.appendChild(t),e=""}this.element.insertAdjacentHTML("beforeend",'<span style="'+this.style+e+'" 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.elementContainer.innerHTML=this.elementContainer.innerHTML.split("").join("")}},{key:"toArray",value:function(e){return e.constructor===Array?e.slice(0):e.split("<br>")}},{key:"checkElement",value:function(){!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(e){var t=this;setTimeout(function(){t.next()},void 0===e?this.options.nextStringDelay:e)}},{key:"rake",value:function(e){var t=this;return e.map(function(e){if(e=e.split(""),t.options.html)for(var i=[],n=void 0,s=!1,o=0;o<e.length;o++)"<"!==e[o]&&"&"!==e[o]||(i[0]=o,s="&"===e[o]),(">"===e[o]||";"===e[o]&&s)&&(i[1]=o,o=0,n=e.slice(i[0],i[1]+1).join(""),e.splice(i[0],i[1]-i[0]+1,n),s=!1);return 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()):e.startsWith("</")?(t.isInTag=!1,void t.next()):(t.insert(e,t.isInTag),void t.next())},this.typePace)}
+/**
+     * Removes helper elements with certain classes from the TypeIt element.
+     */},{key:"removeHelperElements",value:function(){var e=this,t=this.element.querySelectorAll(".ti-container, .ti-cursor");[].forEach.call(t,function(t){e.element.removeChild(t)})}},{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={};null===t&&(t=this.options);for(var s in t)n[s]=t[s];for(var o in e)n[o]=e[o];this.options=n,i&&this.next()}},{key:"randomInRange",value:function(e,t){return Math.abs(Math.random()*(e+t-(e-t))+(e-t))}},{key:"setPace",value:function(){var e=this.options.speed,t=void 0!==this.options.deleteSpeed?this.options.deleteSpeed:this.options.speed/3,i=e/2,n=t/2;this.typePace=this.options.lifeLike?this.randomInRange(e,i):e,this.deletePace=this.options.lifeLike?this.randomInRange(t,n):t}},{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.elementContainer.innerHTML.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.elementContainer.innerHTML.indexOf("></")>-1)for(var r=e.elementContainer.innerHTML.indexOf("></")-2;r>=0;r--)if("<"===i[r]){i.splice(r,i.length-r);break}e.elementContainer.innerHTML=i.join(""),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.elementContainer.innerHTML="",this.next()}},{key:"next",value:function(){var e=this;if(!this.isFrozen){if(this.queue.length>0){var t=this.queue[0];return this.queue.shift(),void t[0].call(this,t[1])}this.options.callback(),this.options.loop?(this.queueUpDeletions(this.elementContainer.innerHTML),this.generateQueue([this.pause,this.options.loopDelay/2]),setTimeout(function(){e.next()},this.options.loopDelay/2)):this.isComplete=!0}}}]),e}();return function(){function s(i,n){t(this,s),this.id=this.generateHash(),this.instances=[],this.elements=[],this.args=n,"object"===(void 0===i?"undefined":e(i))&&(void 0===i.length?this.elements.push(i):this.elements=i),"string"==typeof i&&(this.elements=document.querySelectorAll(i)),this.createInstances()}return i(s,[{key:"generateHash",value:function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}},{key:"createInstances",value:function(){var e=this;[].slice.call(this.elements).forEach(function(t){e.instances.push(new n(t,e.id,e.args))})}},{key:"pushAction",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.instances.forEach(function(i){i.queue.push([i[e],t]),!0===i.isComplete&&i.next()})}
+/**
+     * If used after typing has started, will append strings to the end of the existing queue. If used when typing is paused, will restart it.
+     *
+     * @param  {string} string The string to be typed.
+     * @return {object} TypeIt instance
+     */},{key:"type",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return this.instances.forEach(function(t){t.queueUpString(e),!0===t.isComplete&&t.next()}),this}
+/**
+     * If null is passed, will delete whatever's currently in the element.
+     *
+     * @param  { number } numCharacters Number of characters to delete.
+     * @return { TypeIt }
+     */},{key:"delete",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.pushAction("delete",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:"pause",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return this.pushAction("pause",e),this}},{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)}),e&&t.element.removeChild(t.element.querySelector(".ti-cursor"))}),this.instances=[]}},{key:"empty",value:function(){return this.pushAction("empty"),this}},{key:"break",value:function(){return this.pushAction("break"),this}},{key:"options",value:function(e){return this.pushAction("setOptions",e),this}},{key:"isComplete",get:function(){return this.instances[0].isComplete}}]),s}()});

package.json

 {
   "name": "typeit",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "The most versatile animated typing utility on the planet.",
@@ -20,3 +20,4 @@ "author": "Alex MacArthur <[e-mail]> (https://macarthur.me)",
     "serve": "concurrently --kill-others \"rollup -c -w\" \"node serve.js\"",
-    "test": "jest tests"
+    "test": "jest tests",
+    "postinstall": "node ./notice.js"
   },
@@ -23,0 +24,0 @@ "keywords": [

README.md

 # TypeIt
-
 The Most Versatile JavaScript Animated Typing Utility on the Planet
@@ -19,3 +18,2 @@
 ## Overview
-
 TypeIt is the most versatile JavaScript animated typing 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.
@@ -25,3 +23,3 @@
 
-### Some of the Perks
+### Key Features
 * Choose to start typing only when your container element becomes visible on the screen.
@@ -37,3 +35,3 @@ * Loop your string(s) continuously.
 ### Demos
-See some more examples and try out the sandbox (here)[https://typeitjs.com].
+See some more examples and try out the sandbox [here](https://typeitjs.com).
 
@@ -43,50 +41,97 @@ ## Choose a License
 * Personal or Open Source - [FREE](#setup)
-* Single Commercial License - [Purchase Here](https://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)
-* Extended Commercial License - [Purchase Here](https://www.uplabs.com/posts/typeit-a-jquery-animated-typing-plugin)
+* Single Commercial License - [Purchase Here](https://typeitjs.com#license)
+* Extended Commercial License - [Purchase Here](https://typeitjs.com#license)
 
-## Usage
+## Installation
 
 ### 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 install typeit` and import into your project with `import TypeIt from 'typeit'`.
+* <strong>Build It Yourself: </strong> If, for some weird reason, you want to clone the repository and build the code yourself, first run `yarn install` and then `yarn run build`. The compiled source files will be in the `/dist` directory.
 
-* <strong><a href="https://cdnjs.com/libraries/typeit">CDN:</a></strong> Include this on your page:
+### Load the Script
+Either load it via `script` tag, or import.
+
+```html
+<script src="typeit.min.js"></script>
 ```
-https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js
+  or
+```js
+import TypeIt from 'typeit';
 ```
-* <strong><a href="https://www.npmjs.com/package/typeit">npm / yarn:</a></strong> Install with `npm install typeit` or `yarn install typeit` and import into your project with `import TypeIt from 'typeit'`.
-* <strong>Build It Yourself: </strong> If, for some weird reason, you want to clone the repository and build the code yourself, first run `yarn install` and then `yarn run build`. The compiled source files will be in the `/dist` directory.
 
-### Hook It Up
+### Create an Element to Be Typed Into
+If you want to have 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.
 
-1. Load TypeIt into your page or application.
+```html
+<span class="type-it"></span>
+```
 
-  ```html
-  <script src="typeit.min.js"></script>
-  ```
-  or
-  ```js
-  import TypeIt from 'typeit';
-  ```
+## Usage
+Create a new TypeIt instance, pass a reference to element, and define your [options](#options).
 
-2. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. For more on that, see the <a href="https://typeitjs.com/docs">full documentation</a>.)
+```js
+// The simplest example
+new TypeIt('.type-it', {
+    strings: 'This is my string!'
+});
+```
 
-  ```html
-  <span class="type-it"></span>
-  ```
+### Defining Strings
 
-You're ready to start typing!
+#### In Your HTML
+As a fallback for users without JavaScript, you may define strings in your HTML element.
 
-### Create an Instance
+```html
+<span class="type-it">Here is a string.</span>
+```
 
-At its simplest use, just create a new TypeIt instance, pass an empty element, and define your [options](#options).
+#### Using the type() Method
+See more on that in the [Companion Functions](#companion-functions) section.
 
-Example:
+### 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!']
-  });
+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
 
+#### Handing 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
@@ -108,15 +153,15 @@ 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.
 #### Chaining on Initializing
-You may use these functions to generate a queue of typing events immediately upon creating the instance.
+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!');
+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!');
 ```
@@ -141,3 +186,2 @@
 }, 3000);
-
 ```
@@ -154,3 +198,2 @@
 });
-
 ```
@@ -191,2 +234,3 @@
 | cursorSpeed    | (number in milliseconds) The blinking speed of the cursor.  | 1000  |
+| cursorChar    | (string) The character used for the cursor. HTML works too! | '|' |
 | 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  |
@@ -202,16 +246,15 @@ | nextStringDelay    | (number in milliseconds) The amount of time (milliseconds) between typing the next string when multiple strings are defined.  | 750  |
 #### 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;
+window.TypeItDefaults.speed = 50;
 
-    //-- This and all following instances will now have a default speed of 50.
-    new TypeIt('#id', {
-        strings: 'A string!'
-    });
+//-- This and all following instances will now have a default speed of 50.
+new TypeIt('#id', {
+  strings: 'A string!'
+});
 ```
 
 ## CodePen Examples
-I have a few CodePen examples that illustrate to do a few interesting implementations of TypeIt.
+I have a few CodePen examples that illustrate how to do some interesting things with TypeIt.
 
@@ -223,7 +266,5 @@ * [TypeIt as a React Component](https://codepen.io/alexmacarthur/pen/gXNyBJ)
 ## Contribute
-
 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.
 
 ## License
-
 [GPL-2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE) © Alex MacArthur

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85972

increased by3.02%

Number of package files

7

increased by16.67%

Lines of code

1330

increased by1.37%

Number of lines in readme file

261

increased by18.64%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

No dependency changes