Refctor: Updates to formatNumber to match the rest of the scripts

Author: JorchCortez

Dist/Functional/FormatNumbers.js

@@ -1,75 +1,85 @@
-'use strict'
+'use strict';
 
-let FormatNo = (element, locales, number, options) => {
-    let final = Intl.NumberFormat(locales, options).format(number);
-    if (!final) return;
-    element.innerHTML = final;
-}
+class NumberFormatter {
+    constructor(_element) {
+        try {
+            this.element = _element;
+            this.locales = _element.getAttribute("wt-formatnumber-locales");
+            this.style = _element.getAttribute("wt-formatnumber-style");
+            this.currency = _element.getAttribute("wt-formatnumber-currency");
+            this.unit = _element.getAttribute("wt-formatnumber-unit");
+            this.value = _element.textContent;
 
-let GetFormatStyle = (_style, _currency, _unit) => {
-    let _options = null;
+            if (!this.value) throw new Error("Number value is missing in the element.");
 
-    if (_style) {
-        switch (_style) {
-            case 'currency':
-                if (!_currency) return;
-                _options = {
-                    style: _style,
-                    currency: _currency
-                }
-                break;
-            case 'decimal':
-                _options = {
-                    style: _style
-                };
-                break;
-            case 'percent':
-                _options = {
-                    style: _style
-                };
-                break;
-            case 'unit':
-                _options = {
-                    style: _style,
-                    unit: _unit
-                };
-                break;
-            default:
-                return null;
+            this.options = this.getFormatStyle(this.style, this.currency, this.unit);
+            if (!this.options) throw new Error("Invalid format options.");
+            
+            this.formatNumber();
+        } catch (err) {
+            console.error(`Error initializing NumberFormatter: ${err.message}`);
         }
-        return _options
     }
-}
-
-const InitializeFormatNumbers = () => {
-
-    let numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
-
-    if(!numbersToFormat || numbersToFormat.length === 0) return;
-
-    for(let numberContainer of numbersToFormat) {
-        let locales     = numberContainer.getAttribute("wt-formatnumber-locales");
-        let style       = numberContainer.getAttribute("wt-formatnumber-style");
-        let currency    = numberContainer.getAttribute("wt-formatnumber-currency");
-        let unit        = numberContainer.getAttribute("wt-formatnumber-unit");
-        let options     = GetFormatStyle(style, currency, unit);
-        
-        if(!options) return;
 
-        let value = numberContainer.textContent;
+    getFormatStyle(_style, _currency, _unit) {
+        let _options = null;
+        if (_style) {
+            switch (_style) {
+                case 'currency':
+                    if (!_currency) return null;
+                    _options = {
+                        style: _style,
+                        currency: _currency
+                    };
+                    break;
+                case 'decimal':
+                case 'percent':
+                    _options = { style: _style };
+                    break;
+                case 'unit':
+                    if (!_unit) return null;
+                    _options = {
+                        style: _style,
+                        unit: _unit
+                    };
+                    break;
+                default:
+                    return null;
+            }
+            return _options;
+        }
+    }
 
-        if (!value) return;
-    
+    formatNumber() {
         try {
-            FormatNo(numberContainer, locales, value, options);
-        } catch (error) {
-            console.error(`there was an error processing the format, ${error}`);
+            const number = parseFloat(this.value.replace(/,/g, ''));
+            if (isNaN(number)) throw new Error("Invalid number value.");
+
+            const formattedNumber = new Intl.NumberFormat(this.locales, this.options).format(number);
+            if (!formattedNumber) throw new Error("Formatting failed.");
+            
+            this.element.innerHTML = formattedNumber;
+        } catch (err) {
+            console.error(`Error formatting number: ${err.message}`);
         }
     }
 }
 
+const InitializeFormatNumbers = () => {
+    try {
+        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);
+        });
+    } catch (err) {
+        console.error(`Format Number found an Error while initializing: ${err.message}`);
+    }
+};
+
 if (/complete|interactive|loaded/.test(document.readyState)) {
     InitializeFormatNumbers();
-} else { 
-    window.addEventListener('DOMContentLoaded', InitializeFormatNumbers)
-}
+} else {
+    window.addEventListener('DOMContentLoaded', InitializeFormatNumbers);
+}