Migrated to typewriterjs library for text animation.

pierluigizagaria · Sep 6, 2020 · 52b9704 · 52b9704
1 parent fd550cc
commit 52b9704
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 20 deletions.
diff --git a/js/popup.js b/js/popup.js
@@ -1,18 +1,6 @@
 let texts = ["what's up?","What's up?"]
-let lastWrite
 
-function typeWriter(selector, text, callback) {
-    let i = 0
-    if (lastWrite) clearInterval(lastWrite)
-    lastWrite = setInterval(() => {
-        if (i < (text.length)) {
-            document.querySelector(selector).innerHTML = text.substring(0, ++i) + '<span class="text-cursor" aria-hidden="true"></span>';
-        } else if (typeof fnCallback == 'function') {
-            clearInterval(lastWrite)
-            callback()
-        }
-    }, 50)
-}
+var typewriter = new Typewriter(document.getElementById('text'));
 
 function toggle() {
     let state = document.querySelector("input").checked
@@ -21,12 +9,13 @@ function toggle() {
 }
 
 function showText(state){
-    typeWriter('#text', state ? texts[1] : texts[0])
+    new Typewriter(document.getElementById('text'), {delay: 50})
+        .typeString(state ? texts[1] : texts[0])
+        .start()
 }
 
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelector('input').addEventListener('click', toggle);
-
     chrome.storage.sync.get(['enabled'], (options) => {
         showText(options.enabled)
         document.querySelector('input').checked = options.enabled

diff --git a/js/typewriter.js b/js/typewriter.js
diff --git a/manifest.json b/manifest.json
@@ -30,9 +30,7 @@
     {
       "matches": ["https://web.whatsapp.com/*"],
       "run_at": "document_idle",
-      "js": [
-        "js/content.js"
-      ]
+      "js": ["js/content.js"]
     }
   ]
 }
diff --git a/popup.html b/popup.html
@@ -3,17 +3,18 @@
 <head>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fredoka+One">
     <link rel="stylesheet" href="css/popup.css">
-    <script src="js/popup.js"></script>
 </head>
 <body>
     <section class="container">
         <div class="text-wrap">
-            <h1 id="text"></h1>
+            <div id="text"></div>
         </div>
         <label class="switch">
             <input type="checkbox" checked>
             <span class="slider round"></span>
         </label>
     </section>
+    <script src="js/typewriter.js"></script>
+    <script src="js/popup.js"></script>
 </body>
 </html>