Added Variables to ignite element. Added ability to create an IgniteProperty with a set of optional callbacks to create advanced components.

ignite-element.js

@@ -50,13 +50,18 @@ class IgniteElement extends HTMLElement {
     constructor() {
         super();
 
-        this.elementConnected = false;
+        this.elementConnected = false; //Used to know if the connectedCallback was already called.
         this.template = null;
         this.elements = [];
-        this.createProperties();
         this.readyCallback = new IgniteCallback(() => this.ready());
         this.onDisconnectCallbacks = [];
 
+        //Create the variables for this element.
+        this.createVariables();
+
+        //Create the properties for this element.
+        this.createProperties();
+
         //Init the element before connected callback is fired
         //Create a new rendering context so the init method can access properties correctly.
         IgniteRenderingContext.push();
@@ -64,6 +69,24 @@ class IgniteElement extends HTMLElement {
         IgniteRenderingContext.pop();
     }
 
+    /**
+     * Returns an object with all the variables for this ignite element. Variables
+     * unlike properties have no callbacks or events, they are just data.
+     * 
+     * @returns An object with properties that will be assigned to this ignite element as variables.
+     * 
+     * @example
+     * get variables() {
+     *  return {
+     *      dialog: null,
+     *      clickCallback: null
+     *  };
+     * }
+     */
+    get variables() {
+        return {};
+    }
+
     /**
      * Returns an object with all the properties for this ignite element. If null or empty
      * then no properties will be created. To change a property and read it's current value see below.
@@ -110,6 +133,36 @@ class IgniteElement extends HTMLElement {
         return null;
     }
 
+    /**
+     * Creates the variables for this ignite element and initializes them.
+     * @ignore
+     */
+    createVariables() {
+        var vars = this.variables;
+
+        if (vars != null) {
+            var keys = Object.keys(vars);
+            for (var i = 0; i < keys.length; i++) {
+                this[keys[i]] = vars[keys[i]];
+            }
+        }
+    }
+
+    /**
+     * Resets the variables for this element back to their original default
+     * values.
+     */
+    resetVariables() {
+        var vars = this.variables;
+
+        if (vars != null) {
+            var keys = Object.keys(vars);
+            for (var i = 0; i < keys.length; i++) {
+                this[keys[i]] = vars[keys[i]];
+            }
+        }
+    }
+
     /**
      * Creates the getters/setters for properties in this
      * ignite element and initializes everything.
@@ -153,7 +206,7 @@ class IgniteElement extends HTMLElement {
 
     /**
      * Resets the properties for this element back to their original default
-     * value.
+     * values.
      */
     resetProperties() {
         var props = this.properties;

ignite-html.js

@@ -4,7 +4,7 @@
  * @ignore
  */
 class IgniteProperty {
-    constructor(val, onChange = null) {
+    constructor(val, options = null) {
         this.onChangeCallbacks = [];
         this.onPushCallbacks = [];
         this.onPopCallbacks = [];
@@ -17,9 +17,31 @@ class IgniteProperty {
         this._value = val;
         this.ignoreValueChange = false;
 
-        //If we were passed an onchange function attach it.
+        //If we were passed options, add any callbacks needed.
-        if (onChange) {
+        if (options) {
-            this.attachOnChange(onChange);
+            if (options.onChange) {
+                this.attachOnChange(options.onChange);
+            }
+
+            if (options.onPush) {
+                this.attachOnPush(options.onPush);
+            }
+
+            if (options.onPop) {
+                this.attachOnPop(options.onPop);
+            }
+
+            if (options.onShift) {
+                this.attachOnShift(options.onShift);
+            }
+
+            if (options.onUnshift) {
+                this.attachOnUnshift(options.onUnshift);
+            }
+
+            if (options.onSplice) {
+                this.attachOnSplice(options.onSplice);
+            }
         }
         
         //Attempt to patch the value if it's a list.