Added uuid function to element class to easily allow generating uuid's. May move this later. Added reflect() option to reflect properties once changed via a function or another property. Added onResize function that adds a resize observer to the element constructed by a template and cleans it up nicely. Added onTouch event helper function. Modified reflect callback to allow calling functions or setting the value of a property.

ignite-element.js

@@ -299,6 +299,15 @@ class IgniteElement extends HTMLElement {
     cleanup() {
 
     }
+
+    /**
+     * Generates a uuid and returns it.
+     */
+    uuid() {
+        return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+          (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+        );
+    }
 }
 
 export {

ignite-html.js

@@ -63,7 +63,7 @@ class IgniteProperty {
         //If we want to reflect the value then bubble it up.
         if (reflect) {
             this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
-            this.reflected.forEach(reflect => reflect.value = val);
+            this.reflected.forEach(reflect => reflect instanceof Function ? reflect(val) : (reflect.value = val));
             this.ignoreValueChange = false;
         }
 

ignite-template.js

@@ -30,12 +30,15 @@ class IgniteTemplate {
         this._attributes = {};
         this._classes = [];
         this._properties = {};
+        this._reflecting = {};
         this._refs = [];
         this._callbacks = [];
         this._events = {};
         this._styles = {};
         this._elementValue = null;
         this._elementInnerHTML = null;
+        this._resizeObserverCallback = null;
+        this._resizeObserver = null;
 
         if (children) {
             for (var i = 0; i < children.length; i++) {
@@ -218,6 +221,29 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Makes a property on this template reflect its value back to the given target.
+     * (You can reflect a property more than once if it's needed.)
+     * @param {String} name Name of the property to reflect.
+     * @param {IgniteProperty|Function} target The target for the value to be reflected to.
+     */
+    reflect(name, target) {
+        IgniteRenderingContext.push();
+
+        if (this._reflecting[name] == undefined || this._reflecting[name] == null) {
+            this._reflecting[name] = [];
+        }
+
+        if (target instanceof IgniteProperty) {
+            this._reflecting[name].push(target);
+        } else if (target instanceof Function) {
+            this._reflecting[name].push(target);
+        }
+
+        IgniteRenderingContext.pop();
+        return this;
+    }
+
     /**
      * Adds a set of properties from an object to be added to this template once it's constructed.
      * @param {Object} props The object value that property names/values will be pulled from.
@@ -303,7 +329,7 @@ class IgniteTemplate {
     ref(refCallback) {
         if (refCallback instanceof IgniteProperty) {
             this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback)));
-            this._refs.push((element) => refCallback.value = element);
+            this._refs.push(element => refCallback.value = element);
         } else {
             this._refs.push(refCallback);
         }
@@ -319,6 +345,8 @@ class IgniteTemplate {
      * @returns This ignite template so function calls can be chained.
      */
     on(eventName, eventCallback) {
+        IgniteRenderingContext.push();
+
         if (!this._events[eventName]) {
             this._events[eventName] = [];
         }
@@ -330,11 +358,12 @@ class IgniteTemplate {
             this._events[eventName].push(eventCallback);
         }
 
+        IgniteRenderingContext.pop();
         return this;
     }
 
     /**
-     * Adds an onclick event handler to this template.
+     * Adds a click event handler to this template.
      * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
      * @returns This ignite template so function calls can be chained.
      */
@@ -342,6 +371,15 @@ class IgniteTemplate {
         return this.on("click", eventCallback);
     }
 
+    /**
+     * Adds a touch event handler to this template.
+     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
+     * @returns This ignite template so function calls can be chained.
+     */
+    onTouch(eventCallback) {
+        return this.on("touch", eventCallback);
+    }
+
     /**
      * Adds a onblur event handler to this template.
      * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
@@ -465,6 +503,25 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Adds a special on resize event handler to this template that will
+     * fire anytime the element is resized by using a resize observer.
+     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
+     * @returns This ignite template so function calls can be chained.
+     */
+    onResize(eventCallback) {
+        IgniteRenderingContext.push();
+
+        if (eventCallback instanceof IgniteProperty) {
+            this._resizeObserverCallback = eventCallback.value;
+        } else if (eventCallback instanceof Function) {
+            this._resizeObserverCallback = eventCallback;
+        }
+
+        IgniteRenderingContext.pop();
+        return this;
+    }
+
     /**
      * Adds a CSS property to this template with a value and priority.
      * @param {String} name The name of the CSS property to set.
@@ -713,6 +770,12 @@ class IgniteTemplate {
             }
         }
 
+        //Setup any reflecting properties on this element
+        var keys = Object.keys(this._reflecting);
+        for (var i = 0; i < keys.length; i++) {
+            this._reflecting[keys[i]].forEach(value => this.element[keys[i]].reflected.push(value));
+        }
+
         //Set the elements inner html if it was set
         if (this._elementInnerHTML != null) {
             this.element.innerHTML = this._elementInnerHTML;
@@ -734,6 +797,12 @@ class IgniteTemplate {
             }
         }
 
+        //Setup a resize observer if needed
+        if (this._resizeObserverCallback !== null) {
+            this._resizeObserver = new ResizeObserver(e => this._resizeObserverCallback(e));
+            this._resizeObserver.observe(this.element);
+        }
+
         //If our element has not been added to the dom yet, then add it.
         if (this.element.isConnected == false && this.element.parentElement == null) {
             if (sibling) {
@@ -780,6 +849,13 @@ class IgniteTemplate {
             this._callbacks = null;
         }
 
+        //Stop observing resize events if we need to.
+        if (this._resizeObserver != null) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+            this._resizeObserverCallback = null;
+        }
+
         //Remove any refs
         if (this._refs) {
             //Pass null to our refs so that the reference is updated.