feat(ipub): use ipub-body to handle custom elements defining

.epub/example/OEBPS/scripts/ipub.js

@@ -144,10 +144,38 @@ class IPUBBackground extends IPUBElement {
   }
 }
 
-class IPUBContent extends IPUBElement {
-  static elementName = "ipub-content";
+class IPUBBody extends IPUBElement {
+  static elementName = "ipub-body";
+
+  static defineContentElements() {
+    for (const e of [
+      IPUBBackground,
+      IPUBImage,
+      IPUBInteraction,
+    ]) {
+      console.info(`IPUBBody: Defining custom element <${e.elementName}>`);
+      globalThis.customElements.define(e.elementName, e);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.setAttribute("aria-busy", "true");
+
+      IPUBBody.defineContentElements();
+
+    this.setAttribute("aria-busy", "false");
+  }
 }
 
+globalThis.addEventListener("load", () => {
+  console.info("IPUB: Starting IPUB elements");
+
+  console.log("IPUB: Defining custom element <ipub-body>");
+  globalThis.customElements.define(IPUBBody.elementName, IPUBBody);
+});
+
 class IPUBImage extends IPUBElement {
   static elementName = "ipub-image";
 }
@@ -156,34 +184,8 @@ class IPUBInteraction extends IPUBElement {
   static elementName = "ipub-interaction";
 }
 
-globalThis.addEventListener("load", () => {
-  console.info("IPUB: STARTING DEFINITIONS");
-
-  [IPUBBackground, IPUBContent, IPUBImage, IPUBInteraction].forEach((e) => {
-    console.info(`IPUB: Defining custom element <${e.elementName}>`);
-    globalThis.customElements.define(e.elementName, e);
-  });
-
-  console.info("IPUB: FINISHED DEFINITIONS");
-
-  /** @type {Map<string, Element>} */
-  const onScreenMap = new Map();
-
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((e) => {
-      if (e.intersectionRatio > 0) {
-        // console.debug(
-        //   `IntersectionObserver: adding element #${e.target.id} to onScreenMap`,
-        // );
-        onScreenMap.set(e.target.id, e.target);
-      } else {
-        // console.debug(
-        //   `IntersectionObserver: removing element #${e.target.id} to onScreenMap`,
-        // );
-        onScreenMap.delete(e.target.id);
       }
     });
-  });