WIP, appending strings during typing or after last string finished

assets/demos.js

@@ -118,6 +118,19 @@ document.addEventListener('DOMContentLoaded', function () {
     backSpeed: 0,
     loop: true,
   });
+
+  const typed7 = new Typed('#typed7', {
+    strings: ['First string...'],
+    typeSpeed: 40,
+    backSpeed: 0,
+    shouldBackspace: true,
+  });
+
+  document.querySelector('.add-string').addEventListener('click', function () {
+    const val = document.getElementById('add-dynamically-value').value;
+    console.log('Adding string' + val);
+    typed7.append(val);
+  });
 });
 
 function prettyLog(str) {

index.html

@@ -161,6 +161,26 @@ <h2 id="bulk">Bulk Typing</h2>
   });
     </code>
   </pre>
+
+      <hr />
+
+      <h2 id="add-dynamically">Adding Strings Dynamically</h2>
+      <input type="text" id="add-dynamically-value" style="padding: 10px" />
+      <button type="button" class="add-string">Add String</button>
+      <div class="type-wrap" style="height: 50px">
+        <span id="typed7" style="white-space: pre"></span>
+      </div>
+
+      <pre>
+    <code class="javascript">
+  var typed6 = new Typed('#typed7', {
+    strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
+    typeSpeed: 40,
+    backSpeed: 0,
+    loop: true
+  });
+    </code>
+  </pre>
     </div>
 
     <script type="text/javascript">

src/defaults.js

@@ -47,6 +47,11 @@ const defaults = {
    */
   backDelay: 700,
 
+  /**
+   * @property {boolean} shouldBackspace Backspace or just keep typing the next string
+   */
+  shouldBackspace: true,
+
   /**
    * @property {boolean} fadeOut Fade out instead of backspace
    * @property {string} fadeOutClass css class for fade animation

src/initializer.js

@@ -59,6 +59,8 @@ export default class Initializer {
     // amount of time to wait before backspacing
     self.backDelay = self.options.backDelay;
 
+    self.shouldBackspace = self.options.shouldBackspace;
+
     // Fade out instead of backspace
     self.fadeOut = self.options.fadeOut;
     self.fadeOutClass = self.options.fadeOutClass;

src/typed.js

@@ -82,16 +82,39 @@ export default class Typed {
     }
   }
 
+  append(string) {
+    const prevString = this.strings[this.strings.length - 1];
+    this.strings.push(string);
+    this.sequence = this.strings.map((_, i) => i);
+
+    // If typing isn't done yet, it will continue with any appended strings
+    if (!this.typingComplete) return;
+
+    // If typing has completed already, we need to start it up again from where it left off
+    if (this.shouldBackspace) {
+      this.timeout = setTimeout(() => {
+        this.backspace(prevString, prevString.length - 1);
+      }, this.backDelay);
+    } else {
+      this.timeout = setTimeout(() => {
+        this.arrayPos++;
+        this.typewrite(this.strings[this.sequence[this.arrayPos]], 0);
+      }, this.backDelay);
+    }
+  }
+
   /**
    * Begins the typing animation
    * @private
    */
   begin() {
     this.options.onBegin(this);
     this.typingComplete = false;
-    this.shuffleStringsIfNeeded(this);
+    this.shuffleStringsIfNeeded();
     this.insertCursor();
+
     if (this.bindInputFocusEvents) this.bindFocusEvents();
+
     this.timeout = setTimeout(() => {
       // If the strPos is 0, we're starting from the beginning of a string
       // else, we're starting with a previous string that needs to be backspaced first
@@ -201,11 +224,18 @@ export default class Typed {
       this.toggleBlinking(false);
       this.options.preStringTyped(this.arrayPos, this);
     }
-    // start typing each new char into existing string
-    // curString: arg, this.el.html: original text inside element
-    curStrPos += numChars;
-    const nextString = curString.substring(0, curStrPos);
-    this.replaceText(nextString);
+
+    if (this.shouldBackspace) {
+      // start typing each new char into existing string
+      // curString: arg, this.el.html: original text inside element
+      curStrPos += numChars;
+      const nextString = curString.substring(0, curStrPos);
+      this.replaceText(nextString);
+    } else {
+      const nextString = curString.substring(curStrPos, curStrPos + numChars);
+      curStrPos += numChars;
+      this.replaceText(nextString);
+    }
     // loop the function
     this.typewrite(curString, curStrPos);
   }
@@ -221,17 +251,25 @@ export default class Typed {
     this.options.onStringTyped(this.arrayPos, this);
     this.toggleBlinking(true);
     // is this the final string
-    if (this.arrayPos === this.strings.length - 1) {
+    if (this.isFinalString()) {
       // callback that occurs on the last typed string
       this.complete();
       // quit if we wont loop back
       if (this.loop === false || this.curLoop === this.loopCount) {
         return;
       }
     }
-    this.timeout = setTimeout(() => {
-      this.backspace(curString, curStrPos);
-    }, this.backDelay);
+
+    if (this.shouldBackspace) {
+      this.timeout = setTimeout(() => {
+        this.backspace(curString, curStrPos);
+      }, this.backDelay);
+    } else {
+      this.timeout = setTimeout(() => {
+        this.arrayPos++;
+        this.typewrite(this.strings[this.sequence[this.arrayPos]], 0);
+      }, this.backDelay);
+    }
   }
 
   /**
@@ -278,23 +316,42 @@ export default class Typed {
         // loop the function
         this.backspace(curString, curStrPos);
       } else if (curStrPos <= this.stopNum) {
-        // if the stop number has been reached, increase
-        // array position to next string
-        this.arrayPos++;
-        // When looping, begin at the beginning after backspace complete
-        if (this.arrayPos === this.strings.length) {
-          this.arrayPos = 0;
-          this.options.onLastStringBackspaced();
-          this.shuffleStringsIfNeeded();
-          this.begin();
+        // if the stop number has been reached, we're either done backspacing,
+        // or we need to continue to the next string
+
+        if (this.isFinalString()) {
+          this.lastStringBackspaced();
         } else {
+          this.arrayPos++;
           this.typewrite(this.strings[this.sequence[this.arrayPos]], curStrPos);
         }
       }
       // humanized value for typing
     }, humanize);
   }
 
+  /**
+   * Are we on the last string in the array?
+   * @private
+   */
+  isFinalString() {
+    return this.arrayPos === this.strings.length - 1;
+  }
+
+  /**
+   * Do stuff after the last string is backspaced
+   * @private
+   */
+  lastStringBackspaced() {
+    this.arrayPos = 0;
+    this.options.onLastStringBackspaced();
+
+    if (this.loop) {
+      this.shuffleStringsIfNeeded();
+      this.begin();
+    }
+  }
+
   /**
    * Full animation is complete
    * @private
@@ -385,13 +442,19 @@ export default class Typed {
    * @private
    */
   replaceText(str) {
+    // let currentElContent = this.getCurrentElContent(this);
+
     if (this.attr) {
       this.el.setAttribute(this.attr, str);
     } else {
       if (this.isInput) {
         this.el.value = str;
       } else if (this.contentType === 'html') {
-        this.el.innerHTML = str;
+        if (this.shouldBackspace) {
+          this.el.innerHTML = str;
+        } else {
+          this.el.innerHTML += str;
+        }
       } else {
         this.el.textContent = str;
       }

typed.d.ts

@@ -36,13 +36,15 @@ export default class Typed {
     strPos: number;
     arrayPos: number;
     curLoop: number;
+    append(string: any): void;
+    sequence: any;
+    timeout: any;
     /**
      * Begins the typing animation
      * @private
      */
     private begin;
     typingComplete: boolean;
-    timeout: any;
     /**
      * Called for each character typed
      * @param {string} curString the current string in the strings array
@@ -73,6 +75,16 @@ export default class Typed {
      */
     private backspace;
     stopNum: number;
+    /**
+     * Are we on the last string in the array?
+     * @private
+     */
+    private isFinalString;
+    /**
+     * Do stuff after the last string is backspaced
+     * @private
+     */
+    private lastStringBackspaced;
     /**
      * Full animation is complete
      * @private
@@ -104,7 +116,6 @@ export default class Typed {
      * @private
      */
     private shuffleStringsIfNeeded;
-    sequence: any;
     /**
      * Adds a CSS class to fade out current string
      * @private