Fix loopDelay weirdness, allow same functionality as nextStringDelay.

alexmacarthur · May 3, 2018 · d59e8e0 · d59e8e0
1 parent dc6fc18
commit d59e8e0
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -299,12 +299,12 @@ new TypeIt('#element', {
 | 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 the next string when multiple strings 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 ends. 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. | 750 |
+| 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) The amount of time between looping over a string or set of strings again.  | 750  |
+| 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

diff --git a/dist/typeit.es.js b/dist/typeit.es.js
@@ -2,7 +2,7 @@
  *
  *   typeit - The most versatile animated typing utility on the planet.
  *   Author: Alex MacArthur <[email protected]> (https://macarthur.me)
- *   Version: v5.9.0
+ *   Version: v5.10.0
  *   URL: https://typeitjs.com
  *   License: GPL-2.0
  *
@@ -81,7 +81,7 @@ window.TypeItDefaults = {
   startDelete: false,
   nextStringDelay: 750,
   loop: false,
-  loopDelay: 750,
+  loopDelay: false,
   html: true,
   autoStart: true,
   callback: false,
@@ -140,21 +140,15 @@ var Instance = function () {
     this.style = "display:inline;position:relative;font:inherit;color:inherit;";
     this.element = element;
     this.setOptions(options, window.TypeItDefaults, false);
-    this.checkElement();
-    this.setNextStringDelay();
+    this.prepareTargetElement();
+    this.prepareDelay("nextStringDelay");
+    this.prepareDelay("loopDelay");
 
-    this.options.strings = toArray(this.options.strings);
-    this.options.strings = removeComments(this.options.strings);
-
-    //-- We don't have anything. Get out of here.
-    if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
+    if (!this.prepareStrings()) {
       return;
     }
 
-    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.prepareDOM();
 
     if (this.options.startDelete) {
       this.insert(this.stringsToDelete);
@@ -170,11 +164,41 @@ var Instance = function () {
   }
 
   /**
-   * Reset the instance to new status.
+   * Prepares strings for processing.
    */
 
 
   createClass(Instance, [{
+    key: "prepareStrings",
+    value: function prepareStrings() {
+      this.options.strings = toArray(this.options.strings);
+      this.options.strings = removeComments(this.options.strings);
+
+      //-- We don't have anything. Get out of here.
+      if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
+        return false;
+      }
+
+      return true;
+    }
+
+    /**
+     * Performs DOM-related work to prepare for typing.
+     */
+
+  }, {
+    key: "prepareDOM",
+    value: function prepareDOM() {
+      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");
+    }
+
+    /**
+     * Reset the instance to new status.
+     */
+
+  }, {
     key: "reset",
     value: function reset() {
       return new Instance(this.element, this.id, this.options, this.typeit);
@@ -196,33 +220,24 @@ var Instance = function () {
         return this.options.html ? this.elementContainer.innerHTML : this.elementContainer.innerText;
       }
 
-      //-- Reset the contents of the element.
-      if (this.options.html) {
-        this.elementContainer.innerHTML = content;
-      } else {
-        this.elementContainer.innerText = content;
-      }
+      this.elementContainer[this.options.html ? "innerHTML" : "innerText"] = content;
 
       return content;
     }
-
-    /**
-     * Based on options, set the before and after values for the delay that is inserted when typing new strings.
-     */
-
   }, {
-    key: "setNextStringDelay",
-    value: function setNextStringDelay() {
-      var isArray = Array.isArray(this.options.nextStringDelay);
+    key: "prepareDelay",
+    value: function prepareDelay(delayType) {
+      var delay = this.options[delayType];
+
+      if (!delay) return;
 
-      var halfDelay = !isArray ? this.options.nextStringDelay / 2 : null;
+      var isArray = Array.isArray(delay);
+      var halfDelay = !isArray ? delay / 2 : null;
 
-      this.options.nextStringDelay = {
-        before: isArray ? this.options.nextStringDelay[0] : halfDelay,
-        after: isArray ? this.options.nextStringDelay[1] : halfDelay,
-        total: isArray ? this.options.nextStringDelay.reduce(function (accumulator, currentValue) {
-          return accumulator + currentValue;
-        }) : this.options.nextStringDelay
+      this.options[delayType] = {
+        before: isArray ? delay[0] : halfDelay,
+        after: isArray ? delay[1] : halfDelay,
+        total: isArray ? delay[0] + delay[1] : delay
       };
     }
   }, {
@@ -291,9 +306,10 @@ var Instance = function () {
         string = string[0];
       }
 
+      //-- @todo Improve this check by using regex.
       //-- If an opening HTML tag is found and we're not already printing inside a tag
       if (this.options.html && startsWith(string[0], "<") && !startsWith(string[0], "</")) {
-        //-- Create node of that string name.
+        //-- Create node of that string name, by regexing for the closing tag.
         var matches = string[0].match(/\<(.*?)\>/);
         var _doc = document.implementation.createHTMLDocument("");
         _doc.body.innerHTML = "<" + matches[1] + "></" + matches[1] + ">";
@@ -415,8 +431,8 @@ var Instance = function () {
      */
 
   }, {
-    key: "checkElement",
-    value: function checkElement() {
+    key: "prepareTargetElement",
+    value: function prepareTargetElement() {
       var _this2 = this;
 
       //-- If any of the existing children nodes have .ti-container, clear it out because this is a remnant of a previous instance.
@@ -676,12 +692,13 @@ var Instance = function () {
       }
 
       if (this.options.loop) {
+        var delay = this.options.loopDelay ? this.options.loopDelay : this.options.nextStringDelay;
         this.queueDeletions(this.contents());
-        this.generateQueue([this.pause, this.options.loopDelay / 2]);
+        this.generateQueue([this.pause, delay.before]);
 
         setTimeout(function () {
           _this7.next();
-        }, this.options.loopDelay / 2);
+        }, delay.after);
 
         return;
       }

diff --git a/dist/typeit.js b/dist/typeit.js
@@ -2,7 +2,7 @@
  *
  *   typeit - The most versatile animated typing utility on the planet.
  *   Author: Alex MacArthur <[email protected]> (https://macarthur.me)
- *   Version: v5.9.0
+ *   Version: v5.10.0
  *   URL: https://typeitjs.com
  *   License: GPL-2.0
  *
@@ -87,7 +87,7 @@
     startDelete: false,
     nextStringDelay: 750,
     loop: false,
-    loopDelay: 750,
+    loopDelay: false,
     html: true,
     autoStart: true,
     callback: false,
@@ -146,21 +146,15 @@
       this.style = "display:inline;position:relative;font:inherit;color:inherit;";
       this.element = element;
       this.setOptions(options, window.TypeItDefaults, false);
-      this.checkElement();
-      this.setNextStringDelay();
+      this.prepareTargetElement();
+      this.prepareDelay("nextStringDelay");
+      this.prepareDelay("loopDelay");
 
-      this.options.strings = toArray(this.options.strings);
-      this.options.strings = removeComments(this.options.strings);
-
-      //-- We don't have anything. Get out of here.
-      if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
+      if (!this.prepareStrings()) {
         return;
       }
 
-      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.prepareDOM();
 
       if (this.options.startDelete) {
         this.insert(this.stringsToDelete);
@@ -176,11 +170,41 @@
     }
 
     /**
-     * Reset the instance to new status.
+     * Prepares strings for processing.
      */
 
 
     createClass(Instance, [{
+      key: "prepareStrings",
+      value: function prepareStrings() {
+        this.options.strings = toArray(this.options.strings);
+        this.options.strings = removeComments(this.options.strings);
+
+        //-- We don't have anything. Get out of here.
+        if (this.options.strings.length >= 1 && this.options.strings[0] === "") {
+          return false;
+        }
+
+        return true;
+      }
+
+      /**
+       * Performs DOM-related work to prepare for typing.
+       */
+
+    }, {
+      key: "prepareDOM",
+      value: function prepareDOM() {
+        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");
+      }
+
+      /**
+       * Reset the instance to new status.
+       */
+
+    }, {
       key: "reset",
       value: function reset() {
         return new Instance(this.element, this.id, this.options, this.typeit);
@@ -202,33 +226,24 @@
           return this.options.html ? this.elementContainer.innerHTML : this.elementContainer.innerText;
         }
 
-        //-- Reset the contents of the element.
-        if (this.options.html) {
-          this.elementContainer.innerHTML = content;
-        } else {
-          this.elementContainer.innerText = content;
-        }
+        this.elementContainer[this.options.html ? "innerHTML" : "innerText"] = content;
 
         return content;
       }
-
-      /**
-       * Based on options, set the before and after values for the delay that is inserted when typing new strings.
-       */
-
     }, {
-      key: "setNextStringDelay",
-      value: function setNextStringDelay() {
-        var isArray = Array.isArray(this.options.nextStringDelay);
+      key: "prepareDelay",
+      value: function prepareDelay(delayType) {
+        var delay = this.options[delayType];
+
+        if (!delay) return;
 
-        var halfDelay = !isArray ? this.options.nextStringDelay / 2 : null;
+        var isArray = Array.isArray(delay);
+        var halfDelay = !isArray ? delay / 2 : null;
 
-        this.options.nextStringDelay = {
-          before: isArray ? this.options.nextStringDelay[0] : halfDelay,
-          after: isArray ? this.options.nextStringDelay[1] : halfDelay,
-          total: isArray ? this.options.nextStringDelay.reduce(function (accumulator, currentValue) {
-            return accumulator + currentValue;
-          }) : this.options.nextStringDelay
+        this.options[delayType] = {
+          before: isArray ? delay[0] : halfDelay,
+          after: isArray ? delay[1] : halfDelay,
+          total: isArray ? delay[0] + delay[1] : delay
         };
       }
     }, {
@@ -297,9 +312,10 @@
           string = string[0];
         }
 
+        //-- @todo Improve this check by using regex.
         //-- If an opening HTML tag is found and we're not already printing inside a tag
         if (this.options.html && startsWith(string[0], "<") && !startsWith(string[0], "</")) {
-          //-- Create node of that string name.
+          //-- Create node of that string name, by regexing for the closing tag.
           var matches = string[0].match(/\<(.*?)\>/);
           var _doc = document.implementation.createHTMLDocument("");
           _doc.body.innerHTML = "<" + matches[1] + "></" + matches[1] + ">";
@@ -421,8 +437,8 @@
        */
 
     }, {
-      key: "checkElement",
-      value: function checkElement() {
+      key: "prepareTargetElement",
+      value: function prepareTargetElement() {
         var _this2 = this;
 
         //-- If any of the existing children nodes have .ti-container, clear it out because this is a remnant of a previous instance.
@@ -682,12 +698,13 @@
         }
 
         if (this.options.loop) {
+          var delay = this.options.loopDelay ? this.options.loopDelay : this.options.nextStringDelay;
           this.queueDeletions(this.contents());
-          this.generateQueue([this.pause, this.options.loopDelay / 2]);
+          this.generateQueue([this.pause, delay.before]);
 
           setTimeout(function () {
             _this7.next();
-          }, this.options.loopDelay / 2);
+          }, delay.after);
 
           return;
         }