From 0fcb90894123f7bed4ce3514338a93026b1678a0 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Fri, 11 Sep 2020 07:57:37 -0700
Subject: [PATCH] Implemented a ready function that is only invoked once all
 ignite elements on a page are ready.

---
 src/ignite-element.js | 30 +++++++++++++++++++++++++++++-
 src/ignite-html.js    | 23 +++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/ignite-element.js b/src/ignite-element.js
index 3a84ecf..3e8076b 100644
--- a/src/ignite-element.js
+++ b/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 {
diff --git a/src/ignite-html.js b/src/ignite-html.js
index 02a0199..321da16 100644
--- a/src/ignite-html.js
+++ b/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;