typeit - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

dist/typeit.es.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.0.2
+ *   Version: v5.1.0
  *   URL: https://typeitjs.com
@@ -52,3 +52,3 @@ *   License: GPL-2.0
 var Instance = function () {
-  function Instance(element, options) {
+  function Instance(element, id, options) {
     classCallCheck(this, Instance);
@@ -74,3 +74,4 @@
 
-    this.id = "";
+    this.timeouts = [];
+    this.id = id;
     this.queue = [];
@@ -94,2 +95,3 @@ this.queueIndex = 0;
       this.options.strings = this.toArray(this.options.strings);
+      this.options.strings = this.removeComments(this.options.strings);
 
@@ -103,4 +105,3 @@ //-- We don't have anything. Get out of here.
 
-      this.id = this.generateHash();
-      this.element.dataset["typeitid"] = this.id;
+      this.element.setAttribute("data-typeitid", this.id);
       this.elementContainer = this.element.querySelector("span");
@@ -118,2 +119,9 @@
   }, {
+    key: "removeComments",
+    value: function removeComments(arrayOfStrings) {
+      return arrayOfStrings.map(function (string) {
+        return string.replace(/<\!--.*?-->/g, "");
+      });
+    }
+  }, {
     key: "generateQueue",
@@ -193,7 +201,2 @@ value: function generateQueue() {
   }, {
-    key: "generateHash",
-    value: function generateHash() {
-      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-    }
-  }, {
     key: "cursor",
@@ -203,8 +206,8 @@ value: function cursor() {
 
-      var hash = this.generateHash();
-
       var styleBlock = document.createElement("style");
 
-      var styles = "\n          @keyframes blink-" + hash + " {\n            0% {opacity: 0}\n            49%{opacity: 0}\n            50% {opacity: 1}\n          }\n\n          [data-typeitid='" + this.id + "'] .ti-cursor {\n            animation: blink-" + hash + " " + this.options.cursorSpeed / 1000 + "s infinite;\n          }\n        ";
+      styleBlock.id = this.id;
 
+      var styles = "\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 / 1000 + "s infinite;\n          }\n        ";
+
       styleBlock.appendChild(document.createTextNode(styles));
@@ -355,3 +358,3 @@
 
-      this.typingTimeout = setTimeout(function () {
+      this.timeouts[0] = setTimeout(function () {
         //-- Randomize the timeout each time, if that's your thing.
@@ -458,3 +461,3 @@ _this4.setPace(_this4);
 
-      this.deleteTimeout = setTimeout(function () {
+      this.timeouts[1] = setTimeout(function () {
         _this6.setPace();
@@ -570,7 +573,9 @@
 var TypeIt = function () {
-  function TypeIt(element, options) {
+  function TypeIt(element, args) {
     classCallCheck(this, TypeIt);
 
+    this.id = this.generateHash();
+    this.instances = [];
     this.elements = [];
-    this.instances = [];
+    this.args = args;
 
@@ -592,12 +597,17 @@ if ((typeof element === "undefined" ? "undefined" : _typeof(element)) === "object") {
 
-    this.createInstances(options);
+    this.createInstances();
   }
 
   createClass(TypeIt, [{
+    key: "generateHash",
+    value: function generateHash() {
+      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    }
+  }, {
     key: "createInstances",
-    value: function createInstances(options) {
+    value: function createInstances() {
       var _this = this;
 
       [].slice.call(this.elements).forEach(function (element) {
-        _this.instances.push(new Instance(element, options));
+        _this.instances.push(new Instance(element, _this.id, _this.args));
       });
@@ -621,2 +631,19 @@ }
   }, {
+    key: "destroy",
+    value: function destroy() {
+      var removeCursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+      this.instances.forEach(function (instance) {
+        instance.timeouts.forEach(function (timeout) {
+          clearTimeout(timeout);
+        });
+
+        if (removeCursor) {
+          instance.element.removeChild(instance.element.querySelector(".ti-cursor"));
+        }
+      });
+
+      this.instances = [];
+    }
+  }, {
     key: "delete",
@@ -623,0 +650,0 @@ value: function _delete(numCharacters) {

dist/typeit.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.0.2
+ *   Version: v5.1.0
  *   URL: https://typeitjs.com
@@ -58,3 +58,3 @@ *   License: GPL-2.0
 var Instance = function () {
-  function Instance(element, options) {
+  function Instance(element, id, options) {
     classCallCheck(this, Instance);
@@ -80,3 +80,4 @@
 
-    this.id = "";
+    this.timeouts = [];
+    this.id = id;
     this.queue = [];
@@ -100,2 +101,3 @@ this.queueIndex = 0;
       this.options.strings = this.toArray(this.options.strings);
+      this.options.strings = this.removeComments(this.options.strings);
 
@@ -109,4 +111,3 @@ //-- We don't have anything. Get out of here.
 
-      this.id = this.generateHash();
-      this.element.dataset["typeitid"] = this.id;
+      this.element.setAttribute("data-typeitid", this.id);
       this.elementContainer = this.element.querySelector("span");
@@ -124,2 +125,9 @@
   }, {
+    key: "removeComments",
+    value: function removeComments(arrayOfStrings) {
+      return arrayOfStrings.map(function (string) {
+        return string.replace(/<\!--.*?-->/g, "");
+      });
+    }
+  }, {
     key: "generateQueue",
@@ -199,7 +207,2 @@ value: function generateQueue() {
   }, {
-    key: "generateHash",
-    value: function generateHash() {
-      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-    }
-  }, {
     key: "cursor",
@@ -209,8 +212,8 @@ value: function cursor() {
 
-      var hash = this.generateHash();
-
       var styleBlock = document.createElement("style");
 
-      var styles = "\n          @keyframes blink-" + hash + " {\n            0% {opacity: 0}\n            49%{opacity: 0}\n            50% {opacity: 1}\n          }\n\n          [data-typeitid='" + this.id + "'] .ti-cursor {\n            animation: blink-" + hash + " " + this.options.cursorSpeed / 1000 + "s infinite;\n          }\n        ";
+      styleBlock.id = this.id;
 
+      var styles = "\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 / 1000 + "s infinite;\n          }\n        ";
+
       styleBlock.appendChild(document.createTextNode(styles));
@@ -361,3 +364,3 @@
 
-      this.typingTimeout = setTimeout(function () {
+      this.timeouts[0] = setTimeout(function () {
         //-- Randomize the timeout each time, if that's your thing.
@@ -464,3 +467,3 @@ _this4.setPace(_this4);
 
-      this.deleteTimeout = setTimeout(function () {
+      this.timeouts[1] = setTimeout(function () {
         _this6.setPace();
@@ -576,7 +579,9 @@
 var TypeIt = function () {
-  function TypeIt(element, options) {
+  function TypeIt(element, args) {
     classCallCheck(this, TypeIt);
 
+    this.id = this.generateHash();
+    this.instances = [];
     this.elements = [];
-    this.instances = [];
+    this.args = args;
 
@@ -598,12 +603,17 @@ if ((typeof element === "undefined" ? "undefined" : _typeof(element)) === "object") {
 
-    this.createInstances(options);
+    this.createInstances();
   }
 
   createClass(TypeIt, [{
+    key: "generateHash",
+    value: function generateHash() {
+      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    }
+  }, {
     key: "createInstances",
-    value: function createInstances(options) {
+    value: function createInstances() {
       var _this = this;
 
       [].slice.call(this.elements).forEach(function (element) {
-        _this.instances.push(new Instance(element, options));
+        _this.instances.push(new Instance(element, _this.id, _this.args));
       });
@@ -627,2 +637,19 @@ }
   }, {
+    key: "destroy",
+    value: function destroy() {
+      var removeCursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+      this.instances.forEach(function (instance) {
+        instance.timeouts.forEach(function (timeout) {
+          clearTimeout(timeout);
+        });
+
+        if (removeCursor) {
+          instance.element.removeChild(instance.element.querySelector(".ti-cursor"));
+        }
+      });
+
+      this.instances = [];
+    }
+  }, {
     key: "delete",
@@ -629,0 +656,0 @@ value: function _delete(numCharacters) {

dist/typeit.min.js

@@ -5,3 +5,3 @@ /*!
  *   Author: Alex MacArthur <[e-mail]> (https://macarthur.me)
- *   Version: v5.0.2
+ *   Version: v5.1.0
  *   URL: https://typeitjs.com
@@ -11,2 +11,2 @@ *   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";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){t(this,e),this.defaults={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(){}},this.id="",this.queue=[],this.queueIndex=0,this.hasStarted=!1,this.inTag=!1,this.stringsToDelete="",this.style='style="display:inline;position:relative;font:inherit;color:inherit;"',this.element=i,this.setOptions(n,this.defaults,!1),this.init()}return i(e,[{key:"init",value:function(){this.checkElement(),this.options.strings=this.toArray(this.options.strings),this.options.strings.length>=1&&""===this.options.strings[0]||(this.element.innerHTML='<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span '+this.style+' class="ti-container"></span>',this.id=this.generateHash(),this.element.dataset.typeitid=this.id,this.elementContainer=this.element.querySelector("span"),this.options.startDelete&&(this.insert(this.stringsToDelete),this.queue.push([this.delete]),this.insertPauseIntoQueue(1)),this.generateQueue(),this.kickoff())}},{key:"generateQueue",value:function(){for(var e=0;e<this.options.strings.length;e++)this.queue.push([this.type,this.options.strings[e]]),e<this.options.strings.length-1&&(this.queue.push([this.options.breakLines?this.break:this.delete]),this.insertPauseIntoQueue(this.queue.length))}},{key:"insertPauseIntoQueue",value:function(e){var t=this.options.nextStringDelay/2;this.queue.splice(e-1,0,[this.pause,t]),this.queue.splice(e+2,0,[this.pause,t])}},{key:"kickoff",value:function(){if(this.cursor(),this.options.autoStart)this.startQueue();else if(this.isVisible())this.hasStarted=!0,this.startQueue();else{var e=this;window.addEventListener("scroll",function t(i){e.isVisible()&&!e.hasStarted&&(e.hasStarted=!0,e.startQueue(),i.currentTarget.removeEventListener(i.type,t))})}}},{key:"startQueue",value:function(){var e=this;setTimeout(function(){e.executeQueue()},this.options.startDelay)}},{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:"generateHash",value:function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}},{key:"cursor",value:function(){if(this.options.cursor){var e=this.generateHash(),t=document.createElement("style"),i="\n          @keyframes blink-"+e+" {\n            0% {opacity: 0}\n            49%{opacity: 0}\n            50% {opacity: 1}\n          }\n\n          [data-typeitid='"+this.id+"'] .ti-cursor {\n            animation: blink-"+e+" "+this.options.cursorSpeed/1e3+"s infinite;\n          }\n        ";t.appendChild(document.createTextNode(i)),document.head.appendChild(t),this.element.insertAdjacentHTML("beforeend","<span "+this.style+'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.executeQueue()}},{key:"pause",value:function(e){var t=this;e=void 0===e?this.options.nextStringDelay:e,setTimeout(function(){t.executeQueue()},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:"print",value:function(e){this.inTag?(this.insert(e,!0),this.tagCount<this.tagDuration?this.tagCount++:this.inTag=!1):this.insert(e)}},{key:"type",value:function(e){var t=this,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];e=this.toArray(e),i&&(e=(e=this.rake(e))[0]),this.typingTimeout=setTimeout(function(){if(t.setPace(t),t.options.html&&-1!==e[0].indexOf("<")&&-1===e[0].indexOf("</")&&!t.inTag){for(var i=e.length-1;i>=0;i--)-1!==e[i].indexOf("</")&&(t.tagCount=1,t.tagDuration=i);t.inTag=!0;var n=e[0].match(/\<(.*?)\>/),s=document.implementation.createHTMLDocument();s.body.innerHTML="<"+n[1]+"></"+n[1]+">",t.elementContainer.appendChild(s.body.children[0])}else t.print(e[0]);e.splice(0,1),e.length?t.type(e,!1):t.executeQueue()},this.typePace)}},{key:"removeHelperElements",value:function(){var e=this,t=this.element.querySelectorAll(".ti-container, .ti-cursor, .ti-placeholder");[].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.executeQueue()}},{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.deleteTimeout=setTimeout(function(){e.setPace();for(var i=e.elementContainer.innerHTML.split(""),n=null===t?i.length-1:t+1,s=i.length-1;s>-1;s--){if(">"!==i[s]&&";"!==i[s]||!e.options.html){i.pop();break}for(var o=s;o>-1;o--){if("<br>"===i.slice(o-3,o+1).join("")){i.splice(o-3,4);break}if("&"===i[o]){i.splice(o,s-o+1);break}if("<"===i[o]&&">"!==i[o-1]){if(";"===i[o-1])for(var r=o-1;r>-1;r--)if("&"===i[r]){i.splice(r,o-r);break}i.splice(o-1,1);break}}break}if(e.elementContainer.innerHTML.indexOf("></")>-1)for(var u=e.elementContainer.innerHTML.indexOf("></")-2;u>=0;u--)if("<"===i[u]){i.splice(u,i.length-u);break}e.elementContainer.innerHTML=i.join(""),n>(null===t?0:2)?e.delete(null===t?null:t-1):e.executeQueue()},this.deletePace)}},{key:"empty",value:function(){this.elementContainer.innerHTML="",this.executeQueue()}},{key:"executeQueue",value:function(){var e=this;if(this.queueIndex<this.queue.length){var t=this.queue[this.queueIndex];return this.queueIndex++,void(this.isLooping&&1===this.queueIndex?setTimeout(function(){t[0].call(e,t[1])},this.options.loopDelay/2):t[0].call(this,t[1]))}this.options.callback(),this.options.loop&&(this.queueIndex=0,this.isLooping=!0,setTimeout(function(){e.delete()},this.options.loopDelay/2))}}]),e}();return function(){function s(i,n){t(this,s),this.elements=[],this.instances=[],"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(n)}return i(s,[{key:"createInstances",value:function(e){var t=this;[].slice.call(this.elements).forEach(function(i){t.instances.push(new n(i,e))})}},{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])})}},{key:"type",value:function(e){return this.pushAction("type",e),this}},{key:"delete",value:function(e){return this.pushAction("delete",e),this}},{key:"empty",value:function(){return this.pushAction("empty"),this}},{key:"pause",value:function(e){return this.pushAction("pause",e),this}},{key:"break",value:function(){return this.pushAction("break"),this}},{key:"options",value:function(e){return this.pushAction("setOptions",e),this}}]),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";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.defaults={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(){}},this.timeouts=[],this.id=n,this.queue=[],this.queueIndex=0,this.hasStarted=!1,this.inTag=!1,this.stringsToDelete="",this.style='style="display:inline;position:relative;font:inherit;color:inherit;"',this.element=i,this.setOptions(s,this.defaults,!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='<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span '+this.style+' class="ti-container"></span>',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.insertPauseIntoQueue(1)),this.generateQueue(),this.kickoff())}},{key:"removeComments",value:function(e){return e.map(function(e){return e.replace(/<\!--.*?-->/g,"")})}},{key:"generateQueue",value:function(){for(var e=0;e<this.options.strings.length;e++)this.queue.push([this.type,this.options.strings[e]]),e<this.options.strings.length-1&&(this.queue.push([this.options.breakLines?this.break:this.delete]),this.insertPauseIntoQueue(this.queue.length))}},{key:"insertPauseIntoQueue",value:function(e){var t=this.options.nextStringDelay/2;this.queue.splice(e-1,0,[this.pause,t]),this.queue.splice(e+2,0,[this.pause,t])}},{key:"kickoff",value:function(){if(this.cursor(),this.options.autoStart)this.startQueue();else if(this.isVisible())this.hasStarted=!0,this.startQueue();else{var e=this;window.addEventListener("scroll",function t(i){e.isVisible()&&!e.hasStarted&&(e.hasStarted=!0,e.startQueue(),i.currentTarget.removeEventListener(i.type,t))})}}},{key:"startQueue",value:function(){var e=this;setTimeout(function(){e.executeQueue()},this.options.startDelay)}},{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(){if(this.options.cursor){var e=document.createElement("style");e.id=this.id;var t="\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        ";e.appendChild(document.createTextNode(t)),document.head.appendChild(e),this.element.insertAdjacentHTML("beforeend","<span "+this.style+'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.executeQueue()}},{key:"pause",value:function(e){var t=this;e=void 0===e?this.options.nextStringDelay:e,setTimeout(function(){t.executeQueue()},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:"print",value:function(e){this.inTag?(this.insert(e,!0),this.tagCount<this.tagDuration?this.tagCount++:this.inTag=!1):this.insert(e)}},{key:"type",value:function(e){var t=this,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];e=this.toArray(e),i&&(e=(e=this.rake(e))[0]),this.timeouts[0]=setTimeout(function(){if(t.setPace(t),t.options.html&&-1!==e[0].indexOf("<")&&-1===e[0].indexOf("</")&&!t.inTag){for(var i=e.length-1;i>=0;i--)-1!==e[i].indexOf("</")&&(t.tagCount=1,t.tagDuration=i);t.inTag=!0;var n=e[0].match(/\<(.*?)\>/),s=document.implementation.createHTMLDocument();s.body.innerHTML="<"+n[1]+"></"+n[1]+">",t.elementContainer.appendChild(s.body.children[0])}else t.print(e[0]);e.splice(0,1),e.length?t.type(e,!1):t.executeQueue()},this.typePace)}},{key:"removeHelperElements",value:function(){var e=this,t=this.element.querySelectorAll(".ti-container, .ti-cursor, .ti-placeholder");[].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.executeQueue()}},{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=null===t?i.length-1:t+1,s=i.length-1;s>-1;s--){if(">"!==i[s]&&";"!==i[s]||!e.options.html){i.pop();break}for(var o=s;o>-1;o--){if("<br>"===i.slice(o-3,o+1).join("")){i.splice(o-3,4);break}if("&"===i[o]){i.splice(o,s-o+1);break}if("<"===i[o]&&">"!==i[o-1]){if(";"===i[o-1])for(var r=o-1;r>-1;r--)if("&"===i[r]){i.splice(r,o-r);break}i.splice(o-1,1);break}}break}if(e.elementContainer.innerHTML.indexOf("></")>-1)for(var u=e.elementContainer.innerHTML.indexOf("></")-2;u>=0;u--)if("<"===i[u]){i.splice(u,i.length-u);break}e.elementContainer.innerHTML=i.join(""),n>(null===t?0:2)?e.delete(null===t?null:t-1):e.executeQueue()},this.deletePace)}},{key:"empty",value:function(){this.elementContainer.innerHTML="",this.executeQueue()}},{key:"executeQueue",value:function(){var e=this;if(this.queueIndex<this.queue.length){var t=this.queue[this.queueIndex];return this.queueIndex++,void(this.isLooping&&1===this.queueIndex?setTimeout(function(){t[0].call(e,t[1])},this.options.loopDelay/2):t[0].call(this,t[1]))}this.options.callback(),this.options.loop&&(this.queueIndex=0,this.isLooping=!0,setTimeout(function(){e.delete()},this.options.loopDelay/2))}}]),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])})}},{key:"type",value:function(e){return this.pushAction("type",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:"delete",value:function(e){return this.pushAction("delete",e),this}},{key:"empty",value:function(){return this.pushAction("empty"),this}},{key:"pause",value:function(e){return this.pushAction("pause",e),this}},{key:"break",value:function(){return this.pushAction("break"),this}},{key:"options",value:function(e){return this.pushAction("setOptions",e),this}}]),s}()});

package.json

 {
   "name": "typeit",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "The most versatile animated typing utility on the planet.",
@@ -19,3 +19,4 @@ "author": "Alex MacArthur <[e-mail]> (https://macarthur.me)",
     "watch": "rollup -c -w",
-    "serve": "concurrently --kill-others \"rollup -c -w\" \"node serve.js\""
+    "serve": "concurrently --kill-others \"rollup -c -w\" \"node serve.js\"",
+    "test": "jest tests"
   },
@@ -37,2 +38,3 @@ "keywords": [
     "babel-core": "^6.26.0",
+    "babel-jest": "^21.2.0",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -42,3 +44,5 @@ "babel-preset-env": "^1.6.1",
     "express": "^4.16.2",
+    "jest-cli": "^21.2.1",
     "prettier": "^1.8.2",
+    "regenerator-runtime": "^0.11.0",
     "rollup": "^0.52.0",
@@ -45,0 +49,0 @@ "rollup-plugin-babel": "^3.0.2",

README.md

@@ -1,17 +0,17 @@
-<pre>Update: TypeIt is now vanilla JavaScript, and no longer dependent upon jQuery!</pre>
+# TypeIt
 
-# TypeIt: The Most Versatile JavaScript Animated Typing Utility on the Planet
+The Most Versatile JavaScript Animated Typing Utility on the Planet
 
-### Table of Contents
+[![Build Status](https://travis-ci.org/alexmacarthur/typeit.svg?branch=master)](https://travis-ci.org/alexmacarthur/typeit)
+
+## Table of Contents
 - [Overview](#overview)
 - [Choose a License](#choose-a-license)
-- [Setup](#setup)
-- [Simple Usage](#simple-usage)
-- [Advanced Usage (Chaining Companion Functions)](#advanced-usage)
+- [Usage](#Usage)
+- [API](#api)
 - [Options](#options)
-- [Contributions](#contributions)
-- [Documentation (offsite)](https://typeitjs.com/docs)
+- [Contribute](#contribute)
+- [License](#license)
+- [Full Documentation (offsite)](https://typeitjs.com/docs)
 
----
-
 ## Overview
@@ -36,3 +36,3 @@
 
-### Documentation
+### Full Documentation
 View the full documentation for using TypeIt here: <a href="https://typeitjs.com/docs">typeitjs.com/docs</a>.
@@ -46,10 +46,9 @@
 
-## Setup
+## Usage
 
 ### Get the Code
 
-Get it from this repo, or from the following sources:
-
-* <strong><a href="https://cdnjs.com/libraries/typeit">CDN:</a></strong> Include `https://cdnjs.cloudflare.com/ajax/libs/typeit/{ VERSION }/typeit.min.js` on your page.
+* <strong><a href="https://cdnjs.com/libraries/typeit">CDN:</a></strong> Include `https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js` on your page.
 * <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.
 
@@ -61,3 +60,3 @@ ### Hook It Up
   ```html
-  <script src="typeit.js"></script>
+  <script src="typeit.min.js"></script>
   ```
@@ -77,3 +76,3 @@ or
 
-## Simple Usage
+### Simple Usage
 
@@ -90,3 +89,3 @@ At its simplest use, just create a new TypeIt instance, pass an empty element, and define your [options](#options).
 
-## Advanced Usage
+### Advanced Usage
 To control a typewriter effect to the smallest character, pause, speed, or more, there are six 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.
@@ -109,14 +108,7 @@
 
-### Companion Functions
+To view these functions and how they work, see the [API](#api) section.
 
-| Function        | Arguments   | Description
-| ------------- | ------------- | ------------- |
-| type() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. |
-| delete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the specified number of characters. |
-| 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.|
+## API
 
-## Options
+### Options
 
@@ -144,4 +136,38 @@ You can modify the options for the plugin by passing in JSON.
 
-## Contributions
+### Companion Functions
 
+Use these functions to chain typing commands together upon initialization.
+
+| Function        | Arguments   | Description
+| ------------- | ------------- | ------------- |
+| type() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. |
+| delete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the specified number of characters. |
+| 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.|
+
+### Other Handy Functions
+
+#### Destroy an Instance
+
+| Function        | Arguments   | Description
+| ------------- | ------------- | ------------- |
+| 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.
+
+```js
+var instance = new TypeIt('#id', {
+    strings: 'This is my string'
+});
+
+//-- Will preserve the cursor. If you want to destory that too, pass 'false'.
+instance.destroy();
+```
+
+## Contribute
+
 Please do! The code is available on Github. Check out the [CONTRIBUTING.md](CONTRIBUTING.md) file to see how to get started.
+
+## License
+
+[GPL-2.0](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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75815

increased by4.23%

Lines of code

1173

increased by4.45%

Number of lines in readme file

167

increased by18.44%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

12

increased by33.33%

No dependency changes