hyperbook 0.46.0 → 0.47.0

package/dist/assets/client.js

@@ -1,33 +1,83 @@
 var hyperbook = (function () {
-  const collapsibles = document.getElementsByClassName("collapsible");
+  /**
+   * Initialize elements within the given root element.
+   * @param {HTMLElement} root - The root element to initialize.
+   */
+  const initCollapsibles = (root) => {
+    const collapsibleEls = root.getElementsByClassName("collapsible");
+    for (let collapsible of collapsibleEls) {
+      collapsible.addEventListener("click", () => {
+        collapsible.classList.toggle("expanded");
+        const id = collapsible.parentElement.getAttribute("data-id");
+        if (id) {
+          store.collapsibles.get(id).then((result) => {
+            if (!result) {
+              store.collapsibles.put({ id }).then(() => {
+                updateCollapsibles(root);
+              });
+            } else {
+              store.collapsibles.delete(id).then(() => {
+                updateCollapsibles(root);
+              });
+            }
+          });
+        }
+      });
+    }
+    updateCollapsibles(root);
+  };
 
-  for (let collapsible of collapsibles) {
-    collapsible.addEventListener("click", () => {
-      collapsible.classList.toggle("expanded");
+  /**
+   * @param {HTMLElement} root 
+   */
+  const updateCollapsibles = (root) => {
+    store.collapsibles.toArray().then((collapsibles) => {
+      const collapsibleEls = root.getElementsByClassName("collapsible");
+      for (let collapsibleEl of collapsibleEls) {
+        const id = collapsibleEl.parentElement.getAttribute("data-id");
+        if (id) {
+          const expanded = collapsibles.some((c) => c.id === id);
+          if (expanded) {
+            collapsibleEl.classList.add("expanded");
+          } else {
+            collapsibleEl.classList.remove("expanded");
+          }
+        }
+      }
     });
-  }
+  };
+
+  const initSearch = (root) => {
+    const searchInputEl = root.querySelector("#search-input");
+    if (searchInputEl) {
+      searchInputEl.addEventListener("keypress", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          search();
+        }
+      });
+    }
+  };
 
+  /**
+   * 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 +133,9 @@ var hyperbook = (function () {
     }
   }
 
+  /**
+   * Open the QR code dialog.
+   */
   function qrcodeOpen() {
     const qrCodeDialog = document.getElementById("qrcode-dialog");
     const qrcodeEls = qrCodeDialog.getElementsByClassName("make-qrcode");
@@ -106,56 +159,94 @@ 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") || "{}");
     const el = document.querySelectorAll(`.bookmark[data-key="${key}"]`);
-    if (bookmarks[key]) {
-      delete bookmarks[key];
-      el.forEach((e) => e.classList.remove("active"));
-    } else {
-      bookmarks[key] = label;
-      el.forEach((e) => e.classList.add("active"));
-    }
-    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
-
-    if (hyperbook.bookmarks) {
-      hyperbook.bookmarks.update();
-    }
+    store.bookmarks.get(key).then((bookmark) => {
+      if (!bookmark) {
+        store.bookmarks.add({ path: key, label }).then(() => {
+          el.forEach((e) => e.classList.add("active"));
+          hyperbook.bookmarks.update();
+        });
+      } else {
+        store.bookmarks.delete(key).then(() => {
+          el.forEach((e) => e.classList.remove("active"));
+          hyperbook.bookmarks.update();
+        });
+      }
+    });
   }
 
-  function initBookmarks() {
-    const bookmarkEls = document.getElementsByClassName("bookmark");
-    const bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "{}");
+  /**
+   * 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");
     for (let bookmarkEl of bookmarkEls) {
       const key = bookmarkEl.getAttribute("data-key");
-      if (bookmarks[key]) {
-        bookmarkEl.classList.add("active");
-      }
+      store.bookmarks.get(key).then((bookmark) => {
+        if (bookmark) {
+          bookmarkEl.classList.add("active");
+        }
+      });
     }
   }
-  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");
   }
+
+  function init(root) {
+    initCollapsibles(root);
+    initSearch(root);
+    initBookmarks(root);
+  }
+
+  // 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 +256,6 @@ var hyperbook = (function () {
     search,
     qrcodeOpen,
     qrcodeClose,
+    init,
   };
 })();