Added multiple resize observer support. Added intersect observer with multiple support. Added 3rd party constructors support. Added 3rd party destructors support. Added delay to keyup on value change.

ignite-template.js

@@ -13,6 +13,15 @@ import { IgniteElement } from './ignite-element.js';
  *      super("div", items);
  *  }
  * }
+ * 
+ * @example
+ * IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template:
+ * template._constructors.push(() => console.log('constructed'));
+ * 
+ * 
+ * @example
+ * IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template:
+ * template._destructors.push(() => console.log('destructed'));
  */
 class IgniteTemplate {
 
@@ -36,10 +45,14 @@ class IgniteTemplate {
         this._callbacks = [];
         this._events = {};
         this._styles = {};
+        this._constructors = [];
+        this._destructors = [];
         this._elementValue = null;
         this._elementInnerHTML = null;
-        this._resizeObserverCallback = null;
+        this._resizeObserverCallback = [];
         this._resizeObserver = null;
+        this._intersectObserverCallback = [];
+        this._intersectObserver = null;
 
         if (children) {
             for (var i = 0; i < children.length; i++) {
@@ -163,7 +176,9 @@ class IgniteTemplate {
             this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onValueChanged((converter != null ? converter(list) : null))));
 
             if (reflect != null && ((typeof (reflect) == "boolean" && reflect == true) || reflect instanceof Function)) {
-                var valueChanged = e => {
+                var keyUpDelay = null;
+                var valueChanged = () => {
+                    keyUpDelay = null;
                     var newValue = null;
 
                     var type = this.element.hasAttribute("type") ? this.element.getAttribute("type").toLowerCase().trim() : null;
@@ -185,10 +200,16 @@ class IgniteTemplate {
                     } else {
                         value.setValue(newValue, true);
                     }
+
+                    this._elementValue = newValue;
                 };
 
                 this.on("change", valueChanged);
-                this.on("keyup", valueChanged);
+                this.on("keyup", () => {
+                    if (!keyUpDelay) {
+                        keyUpDelay = setTimeout(valueChanged, 300);
+                    }
+                });
             }
 
             this._elementValue = (converter != null ? converter(value.value) : value.value);
@@ -568,17 +589,36 @@ class IgniteTemplate {
 
     /**
      * Adds a special on resize event handler to this template that will
-     * fire anytime the element is resized by using a resize observer.
+     * fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.
-     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
+     * @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
      * @returns This ignite template so function calls can be chained.
      */
-    onResize(eventCallback) {
+    onResize(callback) {
         IgniteRenderingContext.push();
 
-        if (eventCallback instanceof IgniteProperty) {
+        if (callback instanceof IgniteProperty) {
-            this._resizeObserverCallback = eventCallback.value;
+            this._resizeObserverCallback.push(callback.value);
-        } else if (eventCallback instanceof Function) {
+        } else if (callback instanceof Function) {
-            this._resizeObserverCallback = eventCallback;
+            this._resizeObserverCallback.push(callback);
+        }
+
+        IgniteRenderingContext.pop();
+        return this;
+    }
+
+    /**
+     * Adds a special on intersect event handler to this template that will fire
+     * once the element is in view. You can call this more than once to attach more than one callback.
+     * @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
+     * @returns This ignite template so function calls can be chained.
+     */
+    onIntersect(callback) {
+        IgniteRenderingContext.push();
+
+        if (callback instanceof IgniteProperty) {
+            this._intersectObserverCallback.push(callback.value);
+        } else if (callback instanceof Function) {
+            this._intersectObserverCallback.push(callback);
         }
 
         IgniteRenderingContext.pop();
@@ -912,11 +952,26 @@ class IgniteTemplate {
         }
 
         //Setup a resize observer if needed
-        if (this._resizeObserverCallback !== null) {
+        if (this._resizeObserverCallback && this._resizeObserverCallback.length > 0) {
-            this._resizeObserver = new ResizeObserver(e => this._resizeObserverCallback(e));
+            this._resizeObserver = new ResizeObserver(e => {
+                this._resizeObserverCallback.forEach(callback => callback(e));
+            });
             this._resizeObserver.observe(this.element);
         }
 
+        //Setup a intersect observer if needed
+        if (this._intersectObserverCallback && this._intersectObserverCallback.length > 0) {
+            this._intersectObserver = new IntersectionObserver(results => {
+                if (results[0].isIntersecting) {
+                    this._intersectObserverCallback.forEach(callback => callback(results[0]));
+                }
+            }, { root: null});
+            this._intersectObserver.observe(this.element);
+        }
+
+        //Invoke any custom constructors.
+        this._constructors.forEach(c => c(parent, sibling));
+
         //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) {
@@ -964,18 +1019,31 @@ class IgniteTemplate {
         }
 
         //Stop observing resize events if we need to.
-        if (this._resizeObserver != null) {
+        if (this._resizeObserver) {
             this._resizeObserver.disconnect();
             this._resizeObserver = null;
             this._resizeObserverCallback = null;
         }
 
+        //Stop observing intersects if we need to.
+        if (this._intersectObserver) {
+            this._intersectObserver.disconnect();
+            this._intersectObserver = null;
+            this._intersectObserverCallback = null;
+        }
+
         //Remove any refs
         if (this._refs) {
             //Pass null to our refs so that the reference is updated.
             this._refs.forEach(ref => ref(null));
             this._refs = null;
         }
+
+        //Invoke any custom destructors
+        if (this._destructors) {
+            this._destructors.forEach(d => d());
+            this._destructors = null;
+        }
     }
 
     /**