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;