Allow array of delay values to be passed for nextStringDelay option.

README.md

@@ -3,6 +3,7 @@ The Most Versatile JavaScript Animated Typing Utility on the Planet
 
 [![Build Status](https://travis-ci.org/alexmacarthur/typeit.svg?branch=master)](https://travis-ci.org/alexmacarthur/typeit)
 [![npm downloads](https://img.shields.io/npm/dm/typeit.svg?style=flat-square)](http://npm-stat.com/charts.html?package=typeit)
+[![](https://data.jsdelivr.com/v1/package/npm/typeit/badge)](https://www.jsdelivr.com/package/npm/typeit)
 
 ## Table of Contents
 * [Overview](#overview)
@@ -226,7 +227,7 @@ You can modify the options for the plugin by passing in JSON upon instantiation.
 | 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) The amount of time (milliseconds) between typing the next string when multiple strings are defined.  | 750  |
+| 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 |
 | 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  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typeit",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "The most versatile animated typing utility on the planet.",
   "author": "Alex MacArthur <alex@macarthur.me> (https://macarthur.me)",
   "license": "GPL-2.0",

src/instance.js

@@ -12,11 +12,30 @@ export default class Instance {
     this.stringsToDelete = "";
     this.style = "display:inline;position:relative;font:inherit;color:inherit;";
     this.element = element;
-
     this.setOptions(options, window.TypeItDefaults, false);
+    this.setNextStringDelay();
     this.init();
   }
 
+  /**
+   * Based on options, set the before and after values for the delay that is inserted when typing new strings.
+   */
+  setNextStringDelay() {
+    let isArray = Array.isArray(this.options.nextStringDelay);
+
+    let halfDelay = !isArray ? this.options.nextStringDelay / 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((accumulator, currentValue) => {
+            return accumulator + currentValue;
+          })
+        : this.options.nextStringDelay
+    };
+  }
+
   init() {
     this.checkElement();
 
@@ -140,11 +159,13 @@ export default class Instance {
    * @return {void}
    */
   insertSplitPause(startPosition, numberOfActionsToWrap = 1) {
-    let halfDelay = this.options.nextStringDelay / 2;
-    this.queue.splice(startPosition, 0, [this.pause, halfDelay]);
+    this.queue.splice(startPosition, 0, [
+      this.pause,
+      this.options.nextStringDelay.before
+    ]);
     this.queue.splice(startPosition - numberOfActionsToWrap, 0, [
       this.pause,
-      halfDelay
+      this.options.nextStringDelay.after
     ]);
   }
 
@@ -272,20 +293,21 @@ export default class Instance {
   checkElement() {
     if (!this.options.startDelete && this.element.innerHTML.length > 0) {
       this.options.strings = this.element.innerHTML.trim();
-    } else {
-      this.stringsToDelete = this.element.innerHTML;
+      return;
     }
+
+    this.stringsToDelete = this.element.innerHTML;
   }
 
   break() {
     this.insert("<br>");
     this.next();
   }
 
-  pause(time) {
+  pause(time = null) {
     setTimeout(() => {
       this.next();
-    }, time === undefined ? this.options.nextStringDelay : time);
+    }, time === null ? this.options.nextStringDelay.total : time);
   }
 
   /*

tests/typing.test.js

@@ -109,6 +109,35 @@ test("Can type new string after completion.", () => {
   expect(typedString).toEqual("Ham over turkey. Obviously.");
 });
 
+test("Generates correct pauses.", () => {
+  document.body.innerHTML = `<div>'
+      <span id="element"></span>
+    </div>`;
+
+  const instance1 = new TypeIt("#element", {
+    nextStringDelay: 500,
+    strings: ["Free markets...", "win."]
+  });
+
+  let nextStringDelay = instance1.instances[0].options.nextStringDelay;
+
+  expect(typeof nextStringDelay).toBe("object");
+  expect(nextStringDelay.before).toBe(250);
+  expect(nextStringDelay.after).toBe(250);
+  expect(nextStringDelay.total).toBe(500);
+
+  const instance2 = new TypeIt("#element", {
+    nextStringDelay: [150, 400],
+    strings: ["Free markets...", "win."]
+  });
+
+  nextStringDelay = instance2.instances[0].options.nextStringDelay;
+
+  expect(nextStringDelay.before).toBe(150);
+  expect(nextStringDelay.after).toBe(400);
+  expect(nextStringDelay.total).toBe(550);
+});
+
 test("Wraps pauses correctly when replacing lines.", () => {
   document.body.innerHTML = `<div>'
       <span id="element"></span>
@@ -118,14 +147,18 @@ test("Wraps pauses correctly when replacing lines.", () => {
     strings: ["Free markets...", "win."],
     breakLines: false
   });
+
   const firstInstance = instance.instances[0];
-  const pause = firstInstance.options.nextStringDelay / 2;
 
   expect(firstInstance.queue[15][0].name).toBe("pause");
-  expect(firstInstance.queue[15][1]).toBe(pause);
+  expect(firstInstance.queue[15][1]).toBe(
+    firstInstance.options.nextStringDelay.before
+  );
 
   expect(firstInstance.queue[31][0].name).toBe("pause");
-  expect(firstInstance.queue[31][1]).toBe(pause);
+  expect(firstInstance.queue[31][1]).toBe(
+    firstInstance.options.nextStringDelay.after
+  );
 });
 
 test("Wraps pauses correctly when breaking lines.", () => {