- autoStart, onStart, onFinish, onTask options

- more examples

examples.html

@@ -17,6 +17,11 @@ <h1></h1>
 
     <p></p>
 
+    <h2>Chained TypeWriters</h2>
+    <p id="node1"></p>
+    <p id="node2"></p>
+    <p id="node3"></p>
+
     <script src="dist/typewriter.js"></script>
     <script>
         // Custom Cursor
@@ -43,6 +48,39 @@ <h1></h1>
             className: "myTypeWriter"
         });
         tw3.write('This one has a custom class name and the styles are injected, so the CSS file is not needed.');
+
+
+        // Chained Instances
+        const node1 = document.querySelector('#node1');
+        const node2 = document.querySelector('#node2');
+        const node3 = document.querySelector('#node3');
+
+        const typeWriter1 = new TypeWriter(node1, {
+            autoStart: false,
+            keepBlinking: false,
+            onFinish: (node, params)=>{
+                typeWriter2.start()
+            },
+            onStart: (node, params)=>{
+                console.log(node, params);
+            },
+            onTask: (task, node, params)=>{
+                console.log(task, node, params);
+            },
+        });
+        const typeWriter2 = new TypeWriter(node2, {
+            autoStart: false,
+            keepBlinking: false,
+            onFinish: ()=>{typeWriter3.start()}
+        });
+        const typeWriter3 = new TypeWriter(node3, {
+            autoStart: false,
+            keepBlinking: false
+        });
+
+        typeWriter1.write('This is the first typewriter writing..').start();
+        typeWriter2.write('..this is the second one..');
+        typeWriter3.write('..and this is the third.');
     </script>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anag0/typewriter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "TypeWriter effect in javascript",
   "main": "dist/typewriter.js",
   "scripts": {

readme.md

@@ -1,6 +1,7 @@
 # TypeWriter javascript effect
 
 A super simple and very small TypeWriter javascript library, only about ~2KB
+[Live example](https://ernestmarcinko.com/typewriter/)
 
 ## Installation
 Use npm or yarn to install TypeWriter with a single command
@@ -48,6 +49,7 @@ typeWriter.wait(2000)
 | pauseMin | Integer | 170 | Mininum wait time before the next character |
 | pauseMax | Integer | 230 | Maximum wait time before the next character |
 | keepBlinking | Bool | true | Should the cursor remain after the text is printed |
+| autoStart | Bool | true | Should the tasks start right away. If false then use the ``start()`` method to start the tasks |
 | className | String | typewriter | The class name to be used for the element |
 | injectStyles | Bool | true | Should the typewriter CSS be injected to the header |
 
@@ -61,6 +63,29 @@ typeWriter.wait(2000)
 | wipe | - | Deletes everything from the target node innerHTML property |
 | config | ``Object`` Configuration key => value pairs | Changes the configuration |
 
+## Callback functions
+These are added via the arguments (options).
+
+```javascript
+const typeWriter = new TypeWriter(node, {
+    onFinish: (node, params)=>{
+        console.log(node, params);
+    },
+    onStart: (node, params)=>{
+        console.log(node, params);
+    },
+    onTask: (task, node, params)=>{
+        console.log(task, node, params);
+    },
+});
+``` 
+
+| Name | Arguments | Description |
+| --- | --- | --- |
+| onStart | ``Element`` The Node, ``Object`` Options | Executes when the ``start()`` function is triggered |
+| onFinish | ``Element`` The Node, ``Object`` Options | Executes when no more tasks left in the queue |
+| onTask | ``Object`` Task, ``Element`` The Node, ``Object`` Options | Executes when a task is about to be executed from the queue |
+
 ## Examples
 
 ### Basic Usage
@@ -116,12 +141,43 @@ const typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {
 
 You can also specify a custom wrapper class name:
 
-In that case the ``injectStyles`` option has to be false:
-
 ```javascript
 const typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {
     className: "myCustomTypewriter"
 });
 ```  
 
-If injectStyles is enabled, the className is automatically changed within the injected styles.
+If injectStyles is enabled, the className is automatically changed within the injected styles.
+
+### Chaining multiple TypeWriters via callbacks
+
+Using the ``onFinish`` and ``autoStart`` options you can chain the typewriter scripts together, so the next one is always started after the previous one finishes.
+
+```javascript
+const node1 = document.querySelector('#node1');
+const node2 = document.querySelector('#node2');
+const node3 = document.querySelector('#node3');
+
+const typeWriter1 = new TypeWriter(node1, {
+    autoStart: false,
+    keepBlinking: false,
+    onFinish: (node, params)=>{
+        typeWriter2.start()
+    },
+});
+const typeWriter2 = new TypeWriter(node2, {
+    autoStart: false,
+    keepBlinking: false,
+    onFinish: ()=>{
+        typeWriter3.start()
+    }
+});
+const typeWriter3 = new TypeWriter(node3, {
+    autoStart: false,
+    keepBlinking: false
+});
+
+typeWriter1.write('This is the first typewriter writing..').start();
+typeWriter2.write('..this is the second one..');
+typeWriter3.write('..and this is the third.');
+``` 

src/typewriter.js

@@ -1,16 +1,21 @@
 class TypeWriter {
     #defaults = {
-        pauseMin: 170,
-        pauseMax: 230,
+        pauseMin: 100,
+        pauseMax: 170,
         keepBlinking: true,
         className: 'typewriter',
         cursor: '|',
-        injectStyles: true
+        injectStyles: true,
+        autoStart: true,
+        onStart: null,
+        onFinish: null,
+        onTask: null
     };
     #params;
     #node;
     #tasks = [];
     #executing = false;
+    #firstStart = true;
     static #injectedStyles = {};
 
     constructor(node, params) {
@@ -19,7 +24,6 @@ class TypeWriter {
         if ( this.#params.injectStyles ) {
             this.#injectStyles();
         }
-        this.#node.classList.add(this.#params.className);
         this.#node.dataset['cursor'] = this.#params.cursor;
     }
 
@@ -31,7 +35,9 @@ class TypeWriter {
                 'char': c
             })
         });
-        this.#start();
+        if ( this.#params.autoStart ) {
+            this.start();
+        }
         return this;
     }
 
@@ -42,7 +48,9 @@ class TypeWriter {
                 'all': false
             });
         }
-        this.#start();
+        if ( this.#params.autoStart ) {
+            this.start();
+        }
         return this;
     }
 
@@ -51,7 +59,9 @@ class TypeWriter {
             'type': 'wait',
             't': t
         });
-        this.#start();
+        if ( this.#params.autoStart ) {
+            this.start();
+        }
         return this;
     }
 
@@ -60,7 +70,9 @@ class TypeWriter {
             'type': 'delete',
             'all': true
         });
-        this.#start();
+        if ( this.#params.autoStart ) {
+            this.start();
+        }
         return this;
     }
 
@@ -72,6 +84,17 @@ class TypeWriter {
         return this;
     }
 
+    start() {
+        if ( this.#firstStart ) {
+            this.#node.classList.add(this.#params.className);
+            this.#firstStart = false;
+        }
+        if ( !this.#executing ) {
+            this.#params.onStart?.(this.#node, this.#params);
+            this.#execute();
+        }
+    }
+
     #injectStyles() {
         if ( !TypeWriter.#injectedStyles[this.#params.className] ) {
             const str = `
@@ -83,18 +106,14 @@ class TypeWriter {
         }
     }
 
-    #start() {
-        if ( !this.#executing ) {
-            this.#execute();
-        }
-    }
-
     #execute() {
         if ( this.#tasks.length > 0 ) {
             this.#executing = true;
             const task = this.#tasks.shift();
             let pause = this.#randomInt(this.#params.pauseMin, this.#params.pauseMax)
 
+            this.#params.onTask?.(task, this.#node, this.#params);
+
             if ( task.type == 'write' ) {
                 setTimeout(()=>{
                     this.#add(task.char);
@@ -133,6 +152,8 @@ class TypeWriter {
     }
 
     #finish() {
+        this.#params.onFinish?.(this.#node, this.#params);
+
         if ( !this.#params.keepBlinking ) {
             this.#node.classList.add('noblink');
         }