refactor: Updated read time to a class based script

Author: JorchCortez

Dist/Functional/CopyToClipboard.js

@@ -38,7 +38,7 @@ const initializeCopyToClipboard = () => {
     const triggers = document.querySelectorAll('[wt-copycb-element="container"]');
     triggers.forEach(trigger => {
         let instance = new CopyToClipboard(trigger);
-        window.trickeries.push({'copyToClipboard': instance});
+        window.trickeries.push({'CopyToClipboard': instance});
     });
 }
 

Dist/Functional/FormCheck.js

@@ -117,7 +117,7 @@ const initializeFormCheck = () => {
     const forms = document.querySelectorAll('[wt-formcheck-element="form"]');
     forms.forEach(form => {
         let instance = new FormCheck(form);
-        window.trickeries.push({'formCheck': instance});
+        window.trickeries.push({'FormCheck': instance});
     });
 }
 

Dist/Functional/ReadTime.js

@@ -1,48 +1,46 @@
 'use strict'
 
-const SetReadTime = () => {
-    const timeDisplays   = document.querySelectorAll('[wt-readtime-element="display"]');
-    const container     = document.querySelector('[wt-readtime-element="article"]'); 
-
-    let valid = true;
-    let err = []
-
-    if(!timeDisplays || timeDisplays.length === 0) {
-        err.push(`%c display element is missing`);
-        valid = false;
-    }
-    if(!container){
-        err.push(`%c article element is missing`);
-        valid = false;
+class ReadTime {
+    constructor(_container) {
+        this.articleContainer   = _container;
+        this.timeDisplays       = document.querySelectorAll('[wt-readtime-element="display"]');
+        this.text               = this.articleContainer ? this.articleContainer.innerText : "";
+        this.words              = this.text.trim().split(/\s+/).length;
+        this.wpm                = this.articleContainer.getAttribute("wt-readtime-words") || 225;
+        this.suffix             = this.articleContainer.getAttribute('wt-readtime-suffix') || "";
+        this.smallsuffix        = this.articleContainer.getAttribute('wt-readtime-smallsuffix') || "";
+        this.rawTime            = this.words / this.wpm;
+        this.init();
     }
 
-    if (!valid) {
-        console.log("%cThanks for using Webflow Trickery","color: blue; font-size: 18px; padding: 8px; font-weight:500");            
-        console.log("%cIt seems like you're missing an element that is required for the integration.","color: red; font-size: 12px; padding: 8px; font-weight:500");
-        for(let e of err){
-            console.log(e,"color: red; font-size: 12px; padding: 8px; font-weight:500")
-        }
-        return;
+    init = () => {
+        if(this.timeDisplays && this.timeDisplays.length > 0) this.SetReadTime();
     }
 
-    const text          = container.innerText;
-    const words         = text.trim().split(/\s+/).length;
-    const wpm           = container.getAttribute("wt-readtime-words") || 225;
-    const suffix        = container.getAttribute('wt-readtime-suffix');
-    const smallsuffix   = container.getAttribute('wt-readtime-smallsuffix');
-    const rawTime       = words / wpm;
-
-    for(let display of timeDisplays) {
-        if(rawTime < 1 ) { 
-            display.innerText = smallsuffix ? smallsuffix : "less than a minute.";
-        }
-        else if(rawTime == 1 ) { 
-            display.innerText = "a minute.";
-        }
-        else {
-            display.innerText = suffix ? `${Math.ceil(rawTime)} ${suffix}` : `${Math.ceil(rawTime)} minutes.`;
+    SetReadTime = () => {
+        for(let _display of this.timeDisplays) {
+            if(this.rawTime < 1 )
+                _display.innerText = this.smallsuffix ? this.smallsuffix : "less than a minute.";
+            else if(this.rawTime == 1 )
+                _display.innerText = "a minute.";
+            else
+                _display.innerText = this.suffix ? `${Math.ceil(this.rawTime)} ${this.suffix}` : `${Math.ceil(this.rawTime)} minutes.`;
         }
     }
 }
 
-window.addEventListener('DOMContentLoaded', SetReadTime());
+const InitializeReadTime = () => {
+    window.trickeries = window.trickeries || [];
+    let articleContainers = document.querySelectorAll('[wt-readtime-element="article"]');
+    if(!articleContainers || articleContainers.length === 0) return;
+    articleContainers.forEach(article => {
+        let instance = new ReadTime(article);
+        window.trickeries.push({'ReadTime': instance});
+    });
+}
+
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    InitializeReadTime();
+} else {
+    window.addEventListener('DOMContentLoaded',InitializeReadTime )
+}