hyperbook 0.45.0 → 0.46.1

package/dist/assets/directive-scratchblock/client.js

@@ -1,5 +1,5 @@
 hyperbook.scratchblock = (function () {
-  function init() {
+  const init = () => {
     scratchblocks.renderMatching("pre.directive-scratchblock", {
       style: "scratch3",
       languages: [
@@ -24,7 +24,22 @@ hyperbook.scratchblock = (function () {
       ],
       scale: 1,
     });
-  }
+  };
 
-  init();
+  document.addEventListener("DOMContentLoaded", () => {
+    init();
+  });
+
+  // Observe for new elements
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.matches("pre.directive-scratchblock")) {
+          init();
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 })();

package/dist/assets/directive-slideshow/client.js

@@ -50,15 +50,36 @@ hyperbook.slideshow = (function () {
     window.hyperbook.slideshow.update(id);
   };
 
-  const slideshows = document.getElementsByClassName("slideshow");
-  for (let slideshow of slideshows) {
-    const id = slideshow.getAttribute("data-id");
-    update(id);
-  }
+  const init = (root) => {
+    const slideshows = root.getElementsByClassName("slideshow");
+    for (let slideshow of slideshows) {
+      const id = slideshow.getAttribute("data-id");
+      update(id);
+    }
+  };
+
+  // Initialize existing slideshows on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new slideshows added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) { // Element node
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 
   return {
     update,
     moveBy,
     setActive,
+    init,
   };
 })();

package/dist/assets/directive-tabs/client.js

@@ -1,14 +1,15 @@
 hyperbook.tabs = (function () {
-  let allTabs = document.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
-
-  allTabs.forEach((tab) =>
-    tab.addEventListener("click", () => {
-      selectTab(
-        tab.getAttribute("data-tabs-id"),
-        tab.getAttribute("data-tab-id"),
-      );
-    }),
-  );
+  const init = (root) => {
+    let allTabs = root.querySelectorAll(".directive-tabs .tab[data-tabs-id]");
+    allTabs.forEach((tab) =>
+      tab.addEventListener("click", () => {
+        selectTab(
+          tab.getAttribute("data-tabs-id"),
+          tab.getAttribute("data-tab-id"),
+        );
+      }),
+    );
+  };
 
   function selectTab(tabsId, tabId) {
     let relevantTabButtons = document.querySelectorAll(
@@ -31,7 +32,23 @@ hyperbook.tabs = (function () {
     });
   }
 
+  init(document.body);
+
+  // Observe for new tabs added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) { // Element node
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
   return {
     selectTab,
+    init,
   };
 })();