hyperbook 0.46.1 → 0.47.0

package/dist/assets/client.js

@@ -3,27 +3,51 @@ var hyperbook = (function () {
    * 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) {
+  const initCollapsibles = (root) => {
+    const collapsibleEls = root.getElementsByClassName("collapsible");
+    for (let collapsible of collapsibleEls) {
       collapsible.addEventListener("click", () => {
-        const id = collapsible.parentElement.getAttribute("data-id");
         collapsible.classList.toggle("expanded");
-        const expanded = collapsible.classList.contains("expanded");
+        const id = collapsible.parentElement.getAttribute("data-id");
         if (id) {
-          [...collapsibles]
-            .filter((c) => c.parentElement.getAttribute("data-id") === id)
-            .forEach((c) => {
-              if (expanded) {
-                c.classList.add("expanded");
-              } else {
-                c.classList.remove("expanded");
-              }
-            });
+          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);
+  };
+
+  /**
+   * @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) => {
@@ -33,8 +57,6 @@ var hyperbook = (function () {
         }
       });
     }
-
-    initBookmarks(root);
   };
 
   /**
@@ -159,20 +181,20 @@ var hyperbook = (function () {
    * @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();
+        });
+      }
+    });
   }
 
   /**
@@ -181,12 +203,13 @@ var hyperbook = (function () {
    */
   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");
-      if (bookmarks[key]) {
-        bookmarkEl.classList.add("active");
-      }
+      store.bookmarks.get(key).then((bookmark) => {
+        if (bookmark) {
+          bookmarkEl.classList.add("active");
+        }
+      });
     }
   }
 
@@ -199,6 +222,12 @@ var hyperbook = (function () {
     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);