@hyperbook/markdown 0.21.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/code.css

@@ -182,4 +182,21 @@ code[data-line-numbers-max-digits="4"]>[data-line]::before {
 
 code-input:not(.code-input_registered)::before {
   content: "..."!important;
+}
+
+/**
+ * Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element 
+ * or a parent element of it has the CSS class `line-numbers`.
+ * https://prismjs.com/plugins/line-numbers/
+ * Files: prism-line-numbers.css
+ */
+/* Update padding to match line-numbers plugin */
+code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
+.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
+  padding-left: max(3.8em, var(--padding, 16px))!important;
+}
+
+/* Ensure pre code/textarea just wide enough to give 100% width with line numbers */
+code-input.line-numbers, .line-numbers code-input {
+  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
 }

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,
+  };
 })();