Fix ready event (closes #117)

demo/electron-tabs.html

@@ -11,11 +11,13 @@
 <script src="../dist/electron-tabs.sortable.js"></script>
 <script>
   const tabGroup = document.querySelector("tab-group");
+  tabGroup.on("ready", () => console.info("TabGroup is ready"));
 
   tabGroup.setDefaultTab({
     title: "Wikipedia",
     src: "https://www.wikipedia.org/",
-    active: true
+    active: true,
+    ready: () => console.info("New Tab is ready")
   });
 
   tabGroup.addTab({

dist/electron-tabs.js

@@ -61,6 +61,7 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
             if (window.Sortable) initSortable();
             else document.addEventListener("DOMContentLoaded", initSortable);
         }
+        this.emit("ready", this);
     }
     setDefaultTab(tab) {
         this.options.defaultTab = tab;
@@ -167,6 +168,7 @@ class $4fa36e821943b400$var$Tab extends EventTarget {
         $4fa36e821943b400$var$TabPrivate.initWebview.bind(this)();
         if (args.visible !== false) this.show();
         if (typeof args.ready === "function") args.ready(this);
+        else this.emit("ready", this);
     }
     setTitle(title) {
         if (this.isClosed) return;
@@ -380,15 +382,22 @@ const $4fa36e821943b400$var$TabPrivate = {
  * This makes the browser EventTarget API work similar to EventEmitter
  */ const $4fa36e821943b400$var$eventEmitterMixin = {
     emit (type, ...args) {
+        if (type === "ready") this.isReady = true;
         this.dispatchEvent(new CustomEvent(type, {
             detail: args
         }));
     },
     on (type, fn) {
+        if (type === "ready" && this.isReady === true) fn.apply(this, [
+            this
+        ]);
         this.addEventListener(type, ({ detail: detail  })=>fn.apply(this, detail)
         );
     },
     once (type, fn) {
+        if (type === "ready" && this.isReady === true) fn.apply(this, [
+            this
+        ]);
         this.addEventListener(type, ({ detail: detail  })=>fn.apply(this, detail)
         , {
             once: true

dist/electron-tabs.sortable.js

@@ -3131,6 +3131,7 @@ class TabGroup extends HTMLElement {
             if (window.Sortable) initSortable();
             else document.addEventListener("DOMContentLoaded", initSortable);
         }
+        this.emit("ready", this);
     }
     setDefaultTab(tab) {
         this.options.defaultTab = tab;
@@ -3237,6 +3238,7 @@ class Tab extends EventTarget {
         TabPrivate.initWebview.bind(this)();
         if (args.visible !== false) this.show();
         if (typeof args.ready === "function") args.ready(this);
+        else this.emit("ready", this);
     }
     setTitle(title) {
         if (this.isClosed) return;
@@ -3450,15 +3452,22 @@ const TabPrivate = {
  * This makes the browser EventTarget API work similar to EventEmitter
  */ const eventEmitterMixin = {
     emit (type, ...args) {
+        if (type === "ready") this.isReady = true;
         this.dispatchEvent(new CustomEvent(type, {
             detail: args
         }));
     },
     on (type, fn) {
+        if (type === "ready" && this.isReady === true) fn.apply(this, [
+            this
+        ]);
         this.addEventListener(type, ({ detail  })=>fn.apply(this, detail)
         );
     },
     once (type, fn) {
+        if (type === "ready" && this.isReady === true) fn.apply(this, [
+            this
+        ]);
         this.addEventListener(type, ({ detail  })=>fn.apply(this, detail)
         , {
             once: true

src/index.js

@@ -18,8 +18,6 @@ class TabGroup extends HTMLElement {
       newTabButton: this.getAttribute("new-tab-button") || false,
       defaultTab: { title: "New Tab", active: true },
       sortable: this.getAttribute("sortable") || false
-      // TODO: replace this callback
-      // ready: args.ready
     };
 
     // Create custom element
@@ -75,6 +73,8 @@ class TabGroup extends HTMLElement {
         document.addEventListener("DOMContentLoaded", initSortable);
       }
     }
+
+    this.emit("ready", this);
   }
 
   setDefaultTab (tab) {
@@ -220,6 +220,8 @@ class Tab extends EventTarget {
     }
     if (typeof args.ready === "function") {
       args.ready(this);
+    } else {
+      this.emit("ready", this);
     }
   }
 
@@ -490,14 +492,23 @@ const TabPrivate = {
  */
 const eventEmitterMixin = {
   emit (type, ...args) {
+    if (type === "ready") {
+      this.isReady = true;
+    }
     this.dispatchEvent(new CustomEvent(type, { detail: args }));
   },
 
   on (type, fn) {
+    if (type === "ready" && this.isReady === true) {
+      fn.apply(this, [this]);
+    }
     this.addEventListener(type, ({ detail }) => fn.apply(this, detail));
   },
 
   once (type, fn) {
+    if (type === "ready" && this.isReady === true) {
+      fn.apply(this, [this]);
+    }
     this.addEventListener(type, ({ detail }) => fn.apply(this, detail), { once: true });
   }
 };