Refactor: Updated missing scripts to use the class based approach

Author: JorchCortez

Dist/Functional/FormatNumbers.js

@@ -67,11 +67,13 @@ class NumberFormatter {
 
 const InitializeFormatNumbers = () => {
     try {
+        window.trickeries = window.trickeries || [];
         const numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
         if (!numbersToFormat || numbersToFormat.length === 0) throw new Error("No elements found to format.");
 
         numbersToFormat.forEach((numberContainer) => {
-            new NumberFormatter(numberContainer);
+            let instance = new NumberFormatter(numberContainer);
+            window.trickeries.push({'FormatNumber': instance});
         });
     } catch (err) {
         console.error(`Format Number found an Error while initializing: ${err.message}`);

Dist/WebflowOnly/CMSSelect.js

@@ -1,24 +1,59 @@
-'use strict'
+'use strict';
 
-const InitializeCMSSelect = () => {
-
-    const selectElements = document.querySelectorAll('[wt-cmsselect-element^="select-"], [wt-cmsselect-element="select"]');
-    
-    if(!selectElements || selectElements.length === 0) return;
+class CMSSelect {
+    constructor(selectElement) {
+        try {
+            this.selectElement = selectElement;
+            this.attributeValue = this.selectElement.getAttribute('wt-cmsselect-element');
+            this.index = this.attributeValue.replace('select', '');
+            
+            // Fetch the corresponding options
+            this.options = document.querySelectorAll(`[wt-cmsselect-element="target${this.index}"]`);
+            if (!this.options || this.options.length === 0) throw new Error(`No options found for select ${this.index}`);
 
-    for(let select of selectElements){
-        const _sel      = select.getAttribute('wt-cmsselect-element');
-        let index       = _sel.replace('select','');
-        let _opts       = document.querySelectorAll(`[wt-cmsselect-element="target${index}"]`);
+            // Populate the select element
+            this.populateSelect();
+        } catch (err) {
+            console.error(`Error initializing CMSSelect: ${err.message}`);
+        }
+    }
 
-        for(let opt of _opts) {
-            let val     = opt.getAttribute('wt-cmsselect-value');
-            let text    = opt.innerText;
-            
-            if(text && text !== "")
-            select.add( new Option(text, (val ? val : text)))
+    populateSelect() {
+        try {
+            this.options.forEach(opt => {
+                const value = opt.getAttribute('wt-cmsselect-value');
+                const text = opt.innerText;
+                
+                if (text && text.trim() !== "") {
+                    const option = new Option(text, value || text);
+                    this.selectElement.add(option);
+                }
+            });
+        } catch (err) {
+            console.error(`Error populating select: ${err.message}`);
         }
     }
 }
 
-window.addEventListener('DOMContentLoaded', InitializeCMSSelect());
+const InitializeCMSSelect = () => {
+    try {
+        window.trickeries = window.trickeries || [];
+        const selectElements = document.querySelectorAll('[wt-cmsselect-element^="select-"], [wt-cmsselect-element="select"]');
+        
+        if (!selectElements || selectElements.length === 0) throw new Error("No select elements found.");
+
+        selectElements.forEach(selectElement => {
+            const instance = new CMSSelect(selectElement);
+            window.trickeries.push({ 'CMSSelect': instance });
+        });
+    } catch (err) {
+        console.error(`Error during CMSSelect initialization: ${err.message}`);
+    }
+};
+
+// Ensure the script runs when the DOM is fully loaded
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    InitializeCMSSelect();
+} else {
+    window.addEventListener('DOMContentLoaded', InitializeCMSSelect);
+}

Dist/WebflowOnly/MirrorClick.js

@@ -1,22 +1,50 @@
-'use strict'
 
-const InitializeMirrorClick = () => {
+'use strict';
+
+class MirrorClick {
+    constructor(triggerElement) {
+        try {
+            this.triggerElement = triggerElement;
+            this.triggerAttr = triggerElement.getAttribute('wt-mirrorclick-element');
+            this.index = this.triggerAttr.replace('trigger', '');
+            this.targetElement = document.querySelector(`[wt-mirrorclick-element="target${this.index}"]`);
 
-    let triggers = document.querySelectorAll('[wt-mirrorclick-element^="trigger-"], [wt-mirrorclick-element="trigger"]');
-    
-    if(!triggers || triggers.length === 0) return;
+            if (!this.targetElement) throw new Error(`Target element not found for trigger: ${this.index}`);
 
-    for(let trigger of triggers) {
-        let _triggerAttr    = trigger.getAttribute('wt-mirrorclick-element');
-        let _index          = _triggerAttr.replace('trigger','');
-        let _target         = document.querySelector(`[wt-mirrorclick-element="target${_index}"]`);
+            this.bindClickEvent();
+        } catch (err) {
+            console.error(`Error initializing MirrorClick: ${err.message}`);
+        }
+    }
 
-        if(_target) {
-            trigger.addEventListener('click', () => {
-                _target.click();
-            })
+    bindClickEvent() {
+        try {
+            this.triggerElement.addEventListener('click', () => {
+                this.targetElement.click();
+            });
+        } catch (err) {
+            console.error(`Error binding click event for MirrorClick: ${err.message}`);
         }
     }
 }
 
-window.addEventListener('DOMContentLoaded', InitializeMirrorClick());
+const InitializeMirrorClick = () => {
+    try {
+        window.trickeries = window.trickeries || [];
+        const triggers = document.querySelectorAll('[wt-mirrorclick-element^="trigger-"], [wt-mirrorclick-element="trigger"]');
+        if (!triggers || triggers.length === 0) throw new Error("No trigger elements found.");
+
+        triggers.forEach((triggerElement) => {
+            let instance = new MirrorClick(triggerElement);
+            window.trickeries.push({'MirrorClick': instance});
+        });
+    } catch (err) {
+        console.error(`MirrorClick found an error during initialization: ${err.message}`);
+    }
+};
+
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    InitializeMirrorClick();
+} else {
+    window.addEventListener('DOMContentLoaded', InitializeMirrorClick);
+};