From 2da77f51774977d92d0ec84c25593dba547d25c1 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Sun, 23 Aug 2020 22:27:12 -0700
Subject: [PATCH] Added converters for classes, styles, and attributes. Only
 one class can now be defined per function call but this is worth while trade.

---
 src/ignite-template.js | 54 ++++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/ignite-template.js b/src/ignite-template.js
index 9d0c9a9..4884092 100644
--- a/src/ignite-template.js
+++ b/src/ignite-template.js
@@ -35,16 +35,14 @@ class IgniteTemplate {
     /**
      * Adds a single or series of classes to this template
      * to be added once this template is constructed.
-     * @param  {...any} items 
+     * @param {...any} items 
      */
-    class(...items) {
-        for (var i = 0; i < items.length; i++) {
-            if (items[i] instanceof IgniteProperty) {
-                this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
-                this.classes.push(items[i].value);
-            } else {
-                this.classes.push(items[i]);
-            }
+    class(name, converter = null) {
+        if (name instanceof IgniteProperty) {
+            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
+            this.classes.push(converter != null ? converter(name.value) : name.value);
+        } else {
+            this.classes.push(converter != null ? converter(name) : name);
         }
 
         return this;
@@ -55,12 +53,12 @@ class IgniteTemplate {
      * @param {string} name 
      * @param {any} value 
      */
-    attribute(name, value) {
+    attribute(name, value, converter = null) {
         if (value instanceof IgniteProperty) {
-            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
-            this.attributes[name] = value.value;
+            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
+            this.attributes[name] = converter != null ? converter(value.value) : value.value;
         } else {
-            this.attributes[name] = value;
+            this.attributes[name] = converter != null ? converter(value) : value;
         }
 
         return this;
@@ -212,12 +210,12 @@ class IgniteTemplate {
      * @param {String} value 
      * @param {Boolean} priority
      */
-    style(name, value, priority = null) {
+    style(name, value, priority = null, converter = null) {
         if (value instanceof IgniteProperty) {
-            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
-            this.styles[name] = { name: name, value: value.value, priority: priority };
+            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name, converter)));
+            this.styles[name] = { name: name, value: (converter != null ? converter(value.value) : value.value), priority: priority };
         } else {
-            this.styles[name] = { name: name, value: value, priority: priority };
+            this.styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
         }
 
         return this;
@@ -257,7 +255,7 @@ class IgniteTemplate {
 
         //Set the classes on this element
         for (var i = 0; i < this.classes.length; i++) {
-            if (this.classes[i] !== null && this.classes[i] !== undefined) {
+            if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") {
                 this.element.classList.add(this.classes[i]);
             }
         }
@@ -360,7 +358,12 @@ class IgniteTemplate {
      * @param {any} oldValue 
      * @param {any} newValue 
      */
-    onClassChanged(oldValue, newValue) {
+    onClassChanged(oldValue, newValue, converter) {
+        if (converter !== null) {
+            oldValue = converter(oldValue);
+            newValue = converter(newValue);
+        }
+
         if (this.element) {
             if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
                 this.element.classList.remove(oldValue);
@@ -387,7 +390,11 @@ class IgniteTemplate {
      * @param {any} newValue 
      * @param {string} attributeName 
      */
-    onAttributeChanged(oldValue, newValue, attributeName) {
+    onAttributeChanged(oldValue, newValue, attributeName, converter) {
+        if (converter !== null) {
+            newValue = converter(newValue);
+        }
+
         if (this.element) {
             if (newValue == null || newValue == undefined) {
                 this.element.removeAttribute(attributeName);
@@ -463,11 +470,12 @@ class IgniteTemplate {
      * @param {any} newValue 
      * @param {any} style 
      */
-    onCssValueChanged(oldValue, newValue, name) {
+    onCssValueChanged(oldValue, newValue, name, converter) {
         if (this.element) {
-            this.element.style.setProperty(name, newValue, this.styles[name].priority);
-            this.styles[name].value = newValue;
+            this.element.style.setProperty(name, (converter != null ? converter(newValue) : newValue), this.styles[name].priority);
         }
+
+        this.styles[name].value = (converter != null ? converter(newValue) : newValue);
     }
 }