From b49a513831974cad57a705aed575b564fb93bc6c Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 29 Sep 2020 14:28:27 -0700
Subject: [PATCH] Added multi property support classes and cleaned up some
 code.

---
 src/ignite-template.js | 58 +++++++++++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/ignite-template.js b/src/ignite-template.js
index 6a4d1d7..bb6146b 100644
--- a/src/ignite-template.js
+++ b/src/ignite-template.js
@@ -66,18 +66,35 @@ class IgniteTemplate {
         IgniteRenderingContext.push();
 
         if (name instanceof IgniteProperty) {
-            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
+            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue))));
             var value = (converter != null ? converter(name.value) : name.value);
-            var classes = (value != null ? value.toString().split(" ") : []);
-            classes.forEach((cl) => {
+            (value != null ? value.toString().split(" ") : []).forEach(cl => {
+                if (cl.length > 0) {
+                    this.classes.push(cl);
+                }
+            });
+        } else if (Array.isArray(name) && name.length > 0 && name[0] instanceof IgniteProperty) {
+            //There must be a converter for this to work correctly
+            if (!converter) {
+                throw "Cannot pass an array of properties without using a converter!";
+            }
+
+            //Attack a callback for all the properties
+            name.forEach(prop => {
+                this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues()))));
+                this.callbacks.push(prop.attachOnPush((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues()))));
+                this.callbacks.push(prop.attachOnPop((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues()))));
+            });
+
+            var value = converter(...name.getPropertyValues());
+            (value != null ? value.toString().split(" ") : []).forEach(cl => {
                 if (cl.length > 0) {
                     this.classes.push(cl);
                 }
             });
         } else {
             var value = (converter != null ? converter(name) : name);
-            var classes = (value != null ? value.toString().split(" ") : []);
-            classes.forEach((cl) => {
+            (value != null ? value.toString().split(" ") : []).forEach(cl => {
                 if (cl.length > 0) {
                     this.classes.push(cl);
                 }
@@ -429,7 +446,7 @@ class IgniteTemplate {
         } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
             //There must be a converter for this to work correctly
             if (!converter) {
-                throw "Cannot pass an array of properties without using a converter";
+                throw "Cannot pass an array of properties without using a converter!";
             }
 
             //Attack a callback for all the properties
@@ -686,14 +703,7 @@ class IgniteTemplate {
      * @param {Function} converter Optional converter for the value if needed.
      * @ignore
      */
-    onClassChanged(oldValue, newValue, converter) {
-        if (converter !== null) {
-            IgniteRenderingContext.push();
-            oldValue = converter(oldValue);
-            newValue = converter(newValue);
-            IgniteRenderingContext.pop();
-        }
-
+    onClassChanged(oldValue, newValue) {
         var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
         var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);
 
@@ -918,6 +928,18 @@ class input extends IgniteTemplate {
     }
 }
 
+/**
+ * An ignite template that can be used to construct a textarea element.
+ */
+class textarea extends IgniteTemplate {
+    /** 
+     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
+     */
+    constructor(...children) {
+        super("textarea", children);
+    }
+}
+
 /**
  * An ignite template that can be used to construct a button element.
  */
@@ -1429,12 +1451,7 @@ class slot extends IgniteTemplate {
      * @param {Function} converter
      * @ignore 
      */
-    onClassChanged(oldValue, newValue, converter) {
-        if (converter !== null) {
-            oldValue = converter(oldValue);
-            newValue = converter(newValue);
-        }
-
+    onClassChanged(oldValue, newValue) {
         var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
         var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);
 
@@ -1508,6 +1525,7 @@ export {
     list,
     a,
     input,
+    textarea,
     button,
     h1,
     h2,