Implemented a ready function that is only invoked once all ignite elements on a page are ready.

src/ignite-element.js

@@ -1,4 +1,4 @@
-import { IgniteProperty } from './ignite-html.js';
+import { IgniteProperty, IgniteCallback } from './ignite-html.js';
 import { IgniteTemplate } from './ignite-template.js';
 
 /**
@@ -55,6 +55,7 @@ class IgniteElement extends HTMLElement {
         this.template = null;
         this.elements = [];
         this.createProperties();
+        this.readyCallback = new IgniteCallback(() => this.ready());
     }
 
     /**
@@ -207,6 +208,9 @@ class IgniteElement extends HTMLElement {
 
         //Leave the rendering context.
         IgniteRenderingContext.leave();
+
+        //Let the rendering context know this element is ready.
+        IgniteRenderingContext.ready(this.readyCallback);
     }
 
     /**
@@ -234,6 +238,12 @@ class IgniteElement extends HTMLElement {
                 this.onDisconnected();
                 this.onDisconnected = null;
             }
+
+            //Detach the after render callback
+            this.readyCallback.disconnect();
+
+            //Cleanup this element if we need to.
+            this.cleanup();
         }, 1);
     }
 
@@ -256,6 +266,24 @@ class IgniteElement extends HTMLElement {
     render() {
         return null;
     }
+
+    /**
+     * Called when this ignite element is ready. This will invoke once all
+     * ignite elements on the current page have been rendered and setup. You can safely know
+     * all elements have be initialized and are ready once this is called.
+     */
+    ready() {
+
+    }
+
+    /**
+     * Called when this ignite element should cleanup
+     * any resources like events, timers, ect. This is called when the element
+     * is being destroyed.
+     */
+    cleanup() {
+
+    }
 }
 
 export {

src/ignite-html.js

@@ -205,6 +205,29 @@ class IgniteRenderingContext {
         }
     }
 
+    static ready(callback) {
+        //Setup the callbacks if it's not init'd.
+        if (!IgniteRenderingContext.ReadyCallbacks) {
+            IgniteRenderingContext.ReadyCallbacks = [];
+        }
+
+        //Add this ignite callback.
+        IgniteRenderingContext.ReadyCallbacks.push(callback);
+
+        //Clear the existing timer if there is one.
+        if (IgniteRenderingContext.ReadyTimer) {
+            clearTimeout(IgniteRenderingContext.ReadyTimer);
+        }
+
+        //Set a new timeout, it will only run once all elements are ready because
+        //of the way single threaded timers work.
+        IgniteRenderingContext.ReadyTimer = setTimeout(() => {
+            IgniteRenderingContext.ReadyCallbacks.forEach((ready) => ready.invoke());
+            IgniteRenderingContext.ReadyCallbacks = [];
+            IgniteRenderingContext.ReadyTimer = null;
+        }, 1);
+    }
+
     static get rendering() {
         if (IgniteRenderingContext.RenderCount && IgniteRenderingContext.RenderCount > 0) {
             return true;