@hyperbook/markdown 0.22.0 → 0.22.1

package/dist/assets/client.js

@@ -1,33 +1,61 @@
 var hyperbook = (function () {
-  const collapsibles = document.getElementsByClassName("collapsible");
+  /**
+   * Initialize elements within the given root element.
+   * @param {HTMLElement} root - The root element to initialize.
+   */
+  const init = (root) => {
+    const collapsibles = root.getElementsByClassName("collapsible");
+    for (let collapsible of collapsibles) {
+      collapsible.addEventListener("click", () => {
+        const id = collapsible.parentElement.getAttribute("data-id");
+        collapsible.classList.toggle("expanded");
+        const expanded = collapsible.classList.contains("expanded");
+        if (id) {
+          [...collapsibles]
+            .filter((c) => c.parentElement.getAttribute("data-id") === id)
+            .forEach((c) => {
+              if (expanded) {
+                c.classList.add("expanded");
+              } else {
+                c.classList.remove("expanded");
+              }
+            });
+        }
+      });
+    }
 
-  for (let collapsible of collapsibles) {
-    collapsible.addEventListener("click", () => {
-      collapsible.classList.toggle("expanded");
-    });
-  }
+    const searchInputEl = root.querySelector("#search-input");
+    if (searchInputEl) {
+      searchInputEl.addEventListener("keypress", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          search();
+        }
+      });
+    }
 
+    initBookmarks(root);
+  };
+
+  /**
+   * Toggle the table of contents drawer.
+   */
   function tocToggle() {
     const tocDrawerEl = document.getElementById("toc-drawer");
     tocDrawerEl.open = !tocDrawerEl.open;
   }
-  // search
-
-  const searchInputEl = document.getElementById("search-input");
-  if (searchInputEl) {
-    searchInputEl.addEventListener("keypress", (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        search();
-      }
-    });
-  }
 
+  /**
+   * Toggle the search drawer.
+   */
   function searchToggle() {
     const searchDrawerEl = document.getElementById("search-drawer");
     searchDrawerEl.open = !searchDrawerEl.open;
   }
 
+  /**
+   * Perform a search and display the results.
+   */
   function search() {
     const resultsEl = document.getElementById("search-results");
     resultsEl.innerHTML = "";
@@ -83,6 +111,9 @@ var hyperbook = (function () {
     }
   }
 
+  /**
+   * Open the QR code dialog.
+   */
   function qrcodeOpen() {
     const qrCodeDialog = document.getElementById("qrcode-dialog");
     const qrcodeEls = qrCodeDialog.getElementsByClassName("make-qrcode");
@@ -106,19 +137,26 @@ var hyperbook = (function () {
     qrCodeDialog.showModal();
   }
 
+  /**
+   * Close the QR code dialog.
+   */
   function qrcodeClose() {
     const qrCodeDialog = document.getElementById("qrcode-dialog");
     qrCodeDialog.close();
   }
 
+  /**
+   * Toggle the navigation drawer.
+   */
   function navToggle() {
     const navDrawerEl = document.getElementById("nav-drawer");
     navDrawerEl.open = !navDrawerEl.open;
   }
 
   /**
-   * @param {string} key
-   * @param {string} label
+   * Toggle a bookmark.
+   * @param {string} key - The key of the bookmark.
+   * @param {string} label - The label of the bookmark.
    */
   function toggleBookmark(key, label) {
     const bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "{}");
@@ -137,8 +175,12 @@ var hyperbook = (function () {
     }
   }
 
-  function initBookmarks() {
-    const bookmarkEls = document.getElementsByClassName("bookmark");
+  /**
+   * Initialize bookmarks within the given root element.
+   * @param {HTMLElement} [root=document] - The root element to initialize.
+   */
+  function initBookmarks(root = document) {
+    const bookmarkEls = root.getElementsByClassName("bookmark");
     const bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "{}");
     for (let bookmarkEl of bookmarkEls) {
       const key = bookmarkEl.getAttribute("data-key");
@@ -147,15 +189,35 @@ var hyperbook = (function () {
       }
     }
   }
-  initBookmarks();
 
   /**
-   * @param {HTMLElement} el
+   * Toggle the lightbox view of an element.
+   * @param {HTMLElement} el - The element to toggle.
    */
   function toggleLightbox(el) {
     el.parentElement.classList.toggle("lightbox");
     el.parentElement.classList.toggle("normal");
   }
+
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new elements 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 {
     toggleLightbox,
     toggleBookmark,
@@ -165,5 +227,6 @@ var hyperbook = (function () {
     search,
     qrcodeOpen,
     qrcodeClose,
+    init,
   };
 })();

package/dist/assets/directive-abc-music/client.js

@@ -1,5 +1,4 @@
 hyperbook.abc = (function () {
-  const els = document.querySelectorAll(".directive-abc-music");
   window.codeInput?.registerTemplate(
     "abc-highlighted",
     codeInput.templates.prism(window.Prism, [
@@ -7,7 +6,7 @@ hyperbook.abc = (function () {
     ])
   );
 
-  for (let el of els) {
+  const initABC = (el) => {
     const tuneEl = el.getElementsByClassName("tune")[0];
     const playerEl = el.getElementsByClassName("player")[0];
 
@@ -60,5 +59,32 @@ hyperbook.abc = (function () {
           "<div class='audio-error'>Audio is not supported in this browser.</div>";
       }
     }
-  }
-})();
+  };
+
+  const init = (root) => {
+    const els = root.querySelectorAll(".directive-abc-music");
+    els.forEach(initABC);
+  };
+
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new elements added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.classList.contains("directive-abc-music")) {
+          initABC(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return {
+    init,
+  };
+})();

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

@@ -1,23 +1,40 @@
 hyperbook.download = (function () {
+  function initElement(el) {
+    const labelEl = el.getElementsByClassName("label")[0];
+    const src = el.href;
+
+    fetch(src).then((r) => {
+      const isOnline = r.ok;
+      if (isOnline) {
+        labelEl.classList.remove("offline");
+        labelEl.innerHTML = labelEl.innerHTML.replace("(Offline)", "");
+      } else {
+        labelEl.classList.add("offline");
+        labelEl.innerHTML += " (Offline)";
+      }
+    });
+  }
+
   function init() {
     const els = document.getElementsByClassName("directive-archive");
     for (let el of els) {
-      const labelEl = el.getElementsByClassName("label")[0];
-
-      const src = el.href;
+      initElement(el);
+    }
+  }
 
-      fetch(src).then((r) => {
-        const isOnline = r.ok;
-        if (isOnline) {
-          labelEl.classList.remove("offline");
-          labelEl.innerHTML.replace("(Offline)", "");
-        } else {
-          labelEl.classList.add("offline");
-          labelEl.innerHTML += " (Offline)";
+  const observer = new MutationObserver((mutations) => {
+    for (let mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (let node of mutation.addedNodes) {
+          if (node.classList && node.classList.contains("directive-archive")) {
+            initElement(node);
+          }
         }
-      });
+      }
     }
-  }
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 
   init();
 })();

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

@@ -1,13 +1,13 @@
 hyperbook.bookmarks = (function () {
-  function update() {
+  function update(root = document) {
     const bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "{}");
 
-    const containerEls = document.getElementsByClassName("directive-bookmarks");
+    const containerEls = root.getElementsByClassName("directive-bookmarks");
     for (let containerEl of containerEls) {
       const elements = [];
       Object.entries(bookmarks).forEach(([key, label]) => {
-        const bookmarkEl = document.createElement("li");
-        const link = document.createElement("a");
+        const bookmarkEl = root.createElement("li");
+        const link = root.createElement("a");
         link.href = key;
         link.innerHTML = label;
         bookmarkEl.append(link);
@@ -16,7 +16,24 @@ hyperbook.bookmarks = (function () {
       containerEl.replaceChildren(...elements);
     }
   }
-  update();
+
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    update(document);
+  });
+
+  // Observe for new elements added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.classList.contains("directive-bookmarks")) { // Element node
+          update(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 
   return {
     update,

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

@@ -1,6 +1,6 @@
 hyperbook.download = (function () {
-  function init() {
-    const els = document.getElementsByClassName("directive-download");
+  const init = (root) => {
+    const els = root.getElementsByClassName("directive-download");
     for (let el of els) {
       const labelEl = el.getElementsByClassName("label")[0];
 
@@ -17,7 +17,27 @@ hyperbook.download = (function () {
         }
       });
     }
-  }
+  };
 
-  init();
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new elements 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 {
+    init,
+  };
 })();

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

@@ -1,9 +1,11 @@
 hyperbook.mermaid = (function () {
   const elementCode = ".directive-mermaid";
+
   const loadMermaid = function (theme) {
     window.mermaid.initialize({ theme });
     window.mermaid.init({ theme }, document.querySelectorAll(elementCode));
   };
+
   const resetProcessed = function () {
     return new Promise((resolve, reject) => {
       try {
@@ -35,19 +37,54 @@ hyperbook.mermaid = (function () {
   const init = () => {
     const toggle = document.querySelector("dark-mode-toggle");
     if (toggle?.mode == "dark") {
-      resetProcessed().then(loadMermaid("dark")).catch(console.error);
+      resetProcessed()
+        .then(() => loadMermaid("dark"))
+        .catch(console.error);
     } else {
-      resetProcessed().then(loadMermaid("default")).catch(console.error);
+      resetProcessed()
+        .then(() => loadMermaid("default"))
+        .catch(console.error);
     }
 
     document.addEventListener("colorschemechange", (e) => {
       if (e.detail.colorScheme === "dark") {
-        resetProcessed().then(loadMermaid("dark")).catch(console.error);
+        resetProcessed()
+          .then(() => loadMermaid("dark"))
+          .catch(console.error);
       } else {
-        resetProcessed().then(loadMermaid("default")).catch(console.error);
+        resetProcessed()
+          .then(() => loadMermaid("default"))
+          .catch(console.error);
       }
     });
   };
 
   init();
+
+  // Observe for new elements added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.hasAttribute("data-mermaid")) {
+          // Element node
+          const toggle = document.querySelector("dark-mode-toggle");
+          if (toggle?.mode == "dark") {
+            resetProcessed()
+              .then(() => loadMermaid("dark"))
+              .catch(console.error);
+          } else {
+            resetProcessed()
+              .then(() => loadMermaid("default"))
+              .catch(console.error);
+          }
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return {
+    init,
+  };
 })();

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

@@ -56,8 +56,12 @@ hyperbook.protect = (function () {
     localStorage.setItem("protect", JSON.stringify(protect));
   }
 
-  function init() {
-    const els = document.getElementsByClassName("directive-protect");
+  /**
+   * Initialize elements within the given root element.
+   * @param {HTMLElement} root - The root element to initialize.
+   */
+  function init(root) {
+    const els = root.getElementsByClassName("directive-protect");
     for (let el of els) {
       const inputEl = el.getElementsByTagName("input")[0];
 
@@ -75,5 +79,25 @@ hyperbook.protect = (function () {
     }
   }
 
-  init();
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new elements 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 {
+    init,
+  };
 })();

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

@@ -65,6 +65,7 @@ hyperbook.python = (function () {
   }
 
   const updateRunning = (id, type) => {
+    const elems = document.getElementsByClassName("directive-pyide");
     for (let elem of elems) {
       const run = elem.getElementsByClassName("run")[0];
       const test = elem.getElementsByClassName("test")[0];
@@ -121,55 +122,83 @@ hyperbook.python = (function () {
     }
   };
 
-  const elems = document.getElementsByClassName("directive-pyide");
-
-  for (let elem of elems) {
-    const editor = elem.getElementsByClassName("editor")[0];
-    const run = elem.getElementsByClassName("run")[0];
-    const test = elem.getElementsByClassName("test")[0];
-    const output = elem.getElementsByClassName("output")[0];
-    const input = elem.getElementsByClassName("input")[0];
-    const outputBtn = elem.getElementsByClassName("output-btn")[0];
-    const inputBtn = elem.getElementsByClassName("input-btn")[0];
-    const id = elem.id;
-    let tests = [];
-    try {
-      tests = JSON.parse(atob(elem.getAttribute("data-tests")));
-    } catch (e) {}
-
-    function showInput() {
-      outputBtn.classList.remove("active");
-      inputBtn.classList.add("active");
-      output.classList.add("hidden");
-      input.classList.remove("hidden");
-    }
-    function showOutput() {
-      outputBtn.classList.add("active");
-      inputBtn.classList.remove("active");
-      output.classList.remove("hidden");
-      input.classList.add("hidden");
-    }
-
-    outputBtn?.addEventListener("click", showOutput);
-    inputBtn?.addEventListener("click", showInput);
+  const init = (root) => {
+    const elems = root.getElementsByClassName("directive-pyide");
 
-    test?.addEventListener("click", async () => {
-      showOutput();
-      if (callback) return;
-
-      output.innerHTML = "";
+    for (let elem of elems) {
+      const editor = elem.getElementsByClassName("editor")[0];
+      const run = elem.getElementsByClassName("run")[0];
+      const test = elem.getElementsByClassName("test")[0];
+      const output = elem.getElementsByClassName("output")[0];
+      const input = elem.getElementsByClassName("input")[0];
+      const outputBtn = elem.getElementsByClassName("output-btn")[0];
+      const inputBtn = elem.getElementsByClassName("input-btn")[0];
+      const id = elem.id;
+      let tests = [];
+      try {
+        tests = JSON.parse(atob(elem.getAttribute("data-tests")));
+      } catch (e) {}
+
+      function showInput() {
+        outputBtn.classList.remove("active");
+        inputBtn.classList.add("active");
+        output.classList.add("hidden");
+        input.classList.remove("hidden");
+      }
+      function showOutput() {
+        outputBtn.classList.add("active");
+        inputBtn.classList.remove("active");
+        output.classList.remove("hidden");
+        input.classList.add("hidden");
+      }
 
-      const script = editor.value;
-      for (let test of tests) {
-        const testCode = test.code.replace("#SCRIPT#", script);
+      outputBtn?.addEventListener("click", showOutput);
+      inputBtn?.addEventListener("click", showInput);
+
+      test?.addEventListener("click", async () => {
+        showOutput();
+        if (callback) return;
+
+        output.innerHTML = "";
+
+        const script = editor.value;
+        for (let test of tests) {
+          const testCode = test.code.replace("#SCRIPT#", script);
+
+          const heading = document.createElement("div");
+          console.log(test);
+          heading.innerHTML = `== Test ${test.name} ==`;
+          heading.classList.add("test-heading");
+          output.appendChild(heading);
+
+          await asyncRun(id, "test")(testCode, {})
+            .then(({ results, error }) => {
+              if (results) {
+                output.textContent += results;
+              } else if (error) {
+                output.textContent += error;
+              }
+              callback = null;
+              updateRunning(id, "test");
+            })
+            .catch((e) => {
+              output.textContent = `Error: ${e}`;
+              console.log(e);
+              callback = null;
+              updateRunning(id, "test");
+            });
+        }
+      });
 
-        const heading = document.createElement("div");
-        console.log(test);
-        heading.innerHTML = `== Test ${test.name} ==`;
-        heading.classList.add("test-heading");
-        output.appendChild(heading);
+      run?.addEventListener("click", async () => {
+        showOutput();
+        if (callback) return;
 
-        await asyncRun(id, "test")(testCode, {})
+        const script = editor.value;
+        output.innerHTML = "";
+        asyncRun(id, "run")(script, {
+          inputs: input.value.split("\n"),
+        })
           .then(({ results, error }) => {
             if (results) {
               output.textContent += results;
@@ -177,41 +206,33 @@ hyperbook.python = (function () {
               output.textContent += error;
             }
             callback = null;
-            updateRunning(id, "test");
+            updateRunning(id, "run");
           })
           .catch((e) => {
             output.textContent = `Error: ${e}`;
             console.log(e);
             callback = null;
-            updateRunning(id, "test");
+            updateRunning(id, "run");
           });
-      }
-    });
+      });
+    }
+  };
 
-    run?.addEventListener("click", async () => {
-      showOutput();
-      if (callback) return;
-
-      const script = editor.value;
-      output.innerHTML = "";
-      asyncRun(id, "run")(script, {
-        inputs: input.value.split("\n"),
-      })
-        .then(({ results, error }) => {
-          if (results) {
-            output.textContent += results;
-          } else if (error) {
-            output.textContent += error;
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.addedNodes.length) {
+        mutation.addedNodes.forEach((node) => {
+          if (node.type === 1 && node.classList?.contains("directive-pyide")) {
+            init(node);
           }
-          callback = null;
-          updateRunning(id, "run");
-        })
-        .catch((e) => {
-          output.textContent = `Error: ${e}`;
-          console.log(e);
-          callback = null;
-          updateRunning(id, "run");
         });
+      }
     });
-  }
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
 })();