Row accordian now uses new converter to simplify css classes and make everything more readable.

src/components/main-app.js

@@ -17,6 +17,7 @@ class MainApp extends IgniteElement {
                 new div(
                     new RowAccordian()
                         .property("title", "Defining a new component/element")
+                        .property("show", true)
                         .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
                     new RowAccordian()
                         .property("title", "Defining a new component/element")

src/components/row-accordian.js

@@ -9,7 +9,7 @@ class RowAccordian extends IgniteElement {
     get properties() {
         return {
             title: "Title of this row",
-            show: false
+            show: false,
         };
     }
 
@@ -35,13 +35,13 @@ class RowAccordian extends IgniteElement {
                 overflow: hidden;
             }
 
-            row-accordian > div.false > div {
+            row-accordian > div.hide > div {
                 transition: 1.5s;
                 margin-top: -100vh;
                 opacity: 0;
             }
 
-            row-accordian > div.true > div {
+            row-accordian > div > div {
                 margin-top: 0;
                 opacity: 1;
             }
@@ -57,7 +57,7 @@ class RowAccordian extends IgniteElement {
                     new div(
                         new slot(this)
                     )
-                ).class(this.show)
+                ).class(this.show, (value) => { return value ? null : "hide" })
             );
     }
 }

src/ignite-html/ignite-element.js

@@ -36,6 +36,7 @@ class IgniteElement extends HTMLElement {
     createProperties() {
         var props = this.properties;
 
+        if (props != null) {
             var keys = Object.keys(props);
             for (var i = 0; i < keys.length; i++) {
                 let prop = new IgniteProperty(props[keys[i]]);
@@ -58,6 +59,7 @@ class IgniteElement extends HTMLElement {
                 })(keys[i]);
             }
         }
+    }
 
     /**
      * Resets the properties for this element back to their original default
@@ -66,11 +68,13 @@ class IgniteElement extends HTMLElement {
     resetProperties() {
         var props = this.properties;
 
+        if (props != null) {
             var keys = Object.keys(props);
             for (var i = 0; i < keys.length; i++) {
                 this[keys[i]] = props[keys[i]];
             }
         }
+    }
 
     /**
      * Setups this ignite element and constructs it's template when

src/ignite-html/ignite-template.js

@@ -37,14 +37,12 @@ class IgniteTemplate {
      * to be added once this template is constructed.
      * @param {...any} items 
      */
-    class(...items) {
+    class(name, converter = null) {
-        for (var i = 0; i < items.length; i++) {
+        if (name instanceof IgniteProperty) {
-            if (items[i] instanceof IgniteProperty) {
+            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
-                this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
+            this.classes.push(converter != null ? converter(name.value) : name.value);
-                this.classes.push(items[i].value);
         } else {
-                this.classes.push(items[i]);
+            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.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
-            this.attributes[name] = value.value;
+            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.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name, converter)));
-            this.styles[name] = { name: name, value: value.value, priority: priority };
+            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.element.style.setProperty(name, (converter != null ? converter(newValue) : newValue), this.styles[name].priority);
-            this.styles[name].value = newValue;
         }
+
+        this.styles[name].value = (converter != null ? converter(newValue) : newValue);
     }
 }