hyperbook 0.84.4 → 0.85.0

package/dist/assets/store.js

@@ -1,166 +1,201 @@
+/// <reference path="./hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
 /**
- * @type {import("dexie").Dexie}
+ * Persistent store backed by Dexie (IndexedDB).
+ * Provides table access, import/export, and reset functionality.
+ * @type {HyperbookStore}
+ * @memberof hyperbook
+ * @see hyperbook.i18n
+ * @see hyperbook.cloud
  */
-var store = new Dexie("Hyperbook");
-store.version(2).stores({
-  currentState: `
-            id,
-            path,
-            mouseX,
-            mouseY,
-            scrollX,
-            scrollY,
-            windowWidth,
-            windowHeight
-  `,
-  collapsibles: `id`,
-  abcMusic: `id,tune`,
-  audio: `id,time`,
-  bookmarks: `path,label`,
-  p5: `id,sketch`,
-  protect: `id,passwordHash`,
-  pyide: `id,script`,
-  slideshow: `id,active`,
-  tabs: `id,active`,
-  excalidraw: `id,excalidrawElements,appState,files`,
-  webide: `id,html,css,js`,
-  h5p: `id,userData`,
-  geogebra: `id,state`,
-  learningmap: `id,nodes,x,y,zoom`,
-  textinput: `id,text`,
-  custom: `id,payload`,
-  onlineide: `scriptId,script`,
-  sqlideScripts: `scriptId,script`,
-  sqlideDatabases: `databaseId,database`,
-  multievent: `id,state`,
-  typst: `id,code`,
-});
-
-const initStore = async () => {
-  store.currentState.put({
-    id: 1,
-    path: window.location.pathname,
-    mouseX: 0,
-    mouseY: 0,
-    scrollX: window.scrollX,
-    scrollY: window.scrollY,
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight,
-  });
-  window.addEventListener("mousemove", (e) => {
-    store.currentState.update(1, { mouseX: e.clientX, mouseY: e.clientY });
+hyperbook.store = (function () {
+  /** @type {import("dexie").Dexie} */
+  var db = new Dexie("Hyperbook");
+  db.version(3).stores({
+    consent: `id`,
+    currentState: `
+              id,
+              path,
+              mouseX,
+              mouseY,
+              scrollX,
+              scrollY,
+              windowWidth,
+              windowHeight
+    `,
+    collapsibles: `id`,
+    abcMusic: `id,tune`,
+    audio: `id,time`,
+    bookmarks: `path,label`,
+    p5: `id,sketch`,
+    protect: `id,passwordHash`,
+    pyide: `id,script`,
+    slideshow: `id,active`,
+    tabs: `id,active`,
+    excalidraw: `id,excalidrawElements,appState,files`,
+    webide: `id,html,css,js`,
+    h5p: `id,userData`,
+    geogebra: `id,state`,
+    learningmap: `id,nodes,x,y,zoom`,
+    textinput: `id,text`,
+    custom: `id,payload`,
+    onlineide: `scriptId,script`,
+    sqlideScripts: `scriptId,script`,
+    sqlideDatabases: `databaseId,database`,
+    multievent: `id,state`,
+    typst: `id,code`,
   });
-  window.addEventListener("scroll", (e) => {
-    store.currentState.update(1, {
+
+  /** @returns {Promise<void>} */
+  const init = async () => {
+    db.currentState.put({
+      id: 1,
+      path: window.location.pathname,
+      mouseX: 0,
+      mouseY: 0,
       scrollX: window.scrollX,
       scrollY: window.scrollY,
-    });
-  });
-  window.addEventListener("resize", (e) => {
-    store.currentState.update(1, {
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
     });
-  });
-};
-
-initStore();
+    window.addEventListener("mousemove", (e) => {
+      db.currentState.update(1, { mouseX: e.clientX, mouseY: e.clientY });
+    });
+    window.addEventListener("scroll", (e) => {
+      db.currentState.update(1, {
+        scrollX: window.scrollX,
+        scrollY: window.scrollY,
+      });
+    });
+    window.addEventListener("resize", (e) => {
+      db.currentState.update(1, {
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+      });
+    });
+  };
 
-async function hyperbookExport() {
-  const hyperbook = await store.export({ prettyJson: true });
+  init();
+
+  /**
+   * Export all store data as a JSON file download.
+   * @returns {Promise<void>}
+   */
+  async function hyperbookExport() {
+    const exp = await db.export({ prettyJson: true });
+
+    const data = {
+      version: 1,
+      origin: window.location.origin,
+      data: {
+        hyperbook: JSON.parse(await exp.text()),
+      },
+    };
 
-  const data = {
-    version: 1,
-    origin: window.location.origin,
-    data: {
-      hyperbook: JSON.parse(await hyperbook.text()),
-    },
-  };
+    const json = JSON.stringify(data);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const date = new Date().toISOString().split("T")[0];
+    a.href = url;
+    a.download = `hyperbook-export-${date}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
 
-  const json = JSON.stringify(data);
-  const blob = new Blob([json], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  const date = new Date().toISOString().split("T")[0];
-  a.href = url;
-  a.download = `hyperbook-export-${date}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-async function hyperbookReset() {
-  async function clearTable(db) {
-    for (const table of db.tables) {
-      await table.clear();
+  /**
+   * Clear all store data after user confirmation.
+   * Syncs the reset to the cloud if connected.
+   * @returns {Promise<void>}
+   */
+  async function hyperbookReset() {
+    async function clearTable(database) {
+      for (const table of database.tables) {
+        await table.clear();
+      }
     }
-  }
 
-  if (!confirm(i18n.get("store-reset-confirm"))) {
-    return;
-  }
+    if (!confirm(hyperbook.i18n.get("store-reset-confirm"))) {
+      return;
+    }
 
-  clearTable(store);
+    clearTable(db);
 
-  // Send empty snapshot to cloud
-  if (window.hyperbook && window.hyperbook.cloud) {
-    try {
-      await window.hyperbook.cloud.sendSnapshot();
-    } catch (e) {
-      console.error("Failed to sync reset to cloud:", e);
+    // Send empty snapshot to cloud
+    if (hyperbook.cloud) {
+      try {
+        await hyperbook.cloud.sendSnapshot();
+      } catch (e) {
+        console.error("Failed to sync reset to cloud:", e);
+      }
     }
+
+    alert(hyperbook.i18n.get("store-reset-sucessful"));
+    window.location.reload();
   }
 
-  alert(i18n.get("store-reset-sucessful"));
-  window.location.reload();
-}
-
-async function hyperbookImport() {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = "application/json";
-  input.onchange = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      const data = JSON.parse(e.target.result);
-      if (data.origin !== window.location.origin) {
-        if (
-          !confirm(i18n.get("store-different-origin", { origin: data.origin }))
-        ) {
+  /**
+   * Import store data from a user-selected JSON file.
+   * Syncs the import to the cloud if connected.
+   * @returns {Promise<void>}
+   */
+  async function hyperbookImport() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "application/json";
+    input.onchange = async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const data = JSON.parse(e.target.result);
+        if (data.origin !== window.location.origin) {
+          if (
+            !confirm(hyperbook.i18n.get("store-different-origin", { origin: data.origin }))
+          ) {
+            return;
+          }
+        }
+        if (data.version !== 1) {
+          alert(
+            hyperbook.i18n.get("store-not-supported-file-version", {
+              version: data.version,
+            }),
+          );
           return;
         }
-      }
-      if (data.version !== 1) {
-        alert(
-          i18n.get("store-not-supported-file-version", {
-            version: data.version,
-          }),
-        );
-        return;
-      }
 
-      const { hyperbook } = data.data;
+        const { hyperbook: hyperbookData } = data.data;
 
-      const hyperbookBlob = new Blob([JSON.stringify(hyperbook)], {
-        type: "application/json",
-      });
+        const hyperbookBlob = new Blob([JSON.stringify(hyperbookData)], {
+          type: "application/json",
+        });
 
-      await store.import(hyperbookBlob, { clearTablesBeforeImport: true });
+        await db.import(hyperbookBlob, { clearTablesBeforeImport: true });
 
-      // Send full snapshot to cloud after import
-      if (window.hyperbook && window.hyperbook.cloud) {
-        try {
-          await window.hyperbook.cloud.sendSnapshot();
-        } catch (e) {
-          console.error("Failed to sync import to cloud:", e);
+        // Send full snapshot to cloud after import
+        if (hyperbook.cloud) {
+          try {
+            await hyperbook.cloud.sendSnapshot();
+          } catch (e) {
+            console.error("Failed to sync import to cloud:", e);
+          }
         }
-      }
 
-      alert(i18n.get("store-import-sucessful"));
-      window.location.reload();
+        alert(hyperbook.i18n.get("store-import-sucessful"));
+        window.location.reload();
+      };
+      reader.readAsText(file);
     };
-    reader.readAsText(file);
-  };
-  input.click();
-}
+    input.click();
+  }
+
+  // Expose the Dexie db instance properties and public API
+  return Object.assign(db, {
+    db,
+    export: hyperbookExport,
+    reset: hyperbookReset,
+    import: hyperbookImport,
+  });
+})();

package/dist/assets/ui.js

@@ -0,0 +1,279 @@
+/// <reference path="./hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
+/**
+ * Core UI functions called from onclick handlers in the generated HTML.
+ * @type {HyperbookUI}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ */
+hyperbook.ui = (function () {
+  /**
+   * Toggle the lightbox view of an element.
+   * @param {HTMLElement} el - The image element to display.
+   */
+  function toggleLightbox(el) {
+    const overlay = document.createElement("div");
+    overlay.classList.add("lightbox-overlay");
+
+    const captionText =
+      el.parentElement.querySelector("figcaption")?.textContent || "";
+
+    const content = document.createElement("div");
+    content.classList.add("lightbox-content");
+
+    const imgContainer = document.createElement("div");
+    imgContainer.classList.add("lightbox-image-container");
+
+    const lightboxImg = document.createElement("img");
+    lightboxImg.src = el.src;
+    imgContainer.appendChild(lightboxImg);
+
+    content.appendChild(imgContainer);
+
+    if (captionText) {
+      const caption = document.createElement("div");
+      caption.classList.add("caption");
+      caption.textContent = captionText;
+      content.appendChild(caption);
+    }
+
+    overlay.appendChild(content);
+
+    overlay.addEventListener("click", () => {
+      document.body.removeChild(overlay);
+    });
+
+    document.body.appendChild(overlay);
+    overlay.style.display = "flex";
+  }
+
+  /**
+   * Toggle a bookmark on/off.
+   * @param {string} key - The bookmark path key.
+   * @param {string} label - The bookmark label.
+   */
+  function toggleBookmark(key, label) {
+    const el = document.querySelectorAll(`.bookmark[data-key="${key}"]`);
+    hyperbook.store.bookmarks.get(key).then((bookmark) => {
+      if (!bookmark) {
+        hyperbook.store.bookmarks.add({ path: key, label }).then(() => {
+          el.forEach((e) => e.classList.add("active"));
+          hyperbook.bookmarks.update();
+        });
+      } else {
+        hyperbook.store.bookmarks.delete(key).then(() => {
+          el.forEach((e) => e.classList.remove("active"));
+          hyperbook.bookmarks.update();
+        });
+      }
+    });
+  }
+
+  /**
+   * Toggle the navigation drawer.
+   */
+  function navToggle() {
+    const navDrawerEl = document.getElementById("nav-drawer");
+    navDrawerEl.open = !navDrawerEl.open;
+  }
+
+  /**
+   * Toggle the table of contents drawer.
+   */
+  function tocToggle() {
+    const tocDrawerEl = document.getElementById("toc-drawer");
+    tocDrawerEl.open = !tocDrawerEl.open;
+  }
+
+  /**
+   * 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 = "";
+    const searchInputEl = document.querySelector("#search-input");
+    const query = searchInputEl.value;
+    const idx = window.lunr.Index.load(LUNR_INDEX);
+    const documents = SEARCH_DOCUMENTS;
+    const results = idx.search(query);
+    for (let result of results) {
+      const doc = documents[result.ref];
+
+      const container = document.createElement("a");
+      container.href = doc.href;
+      container.classList.add("search-result");
+      const heading = document.createElement("div");
+      heading.textContent = doc.heading;
+      heading.classList.add("search-result-heading");
+      const content = document.createElement("div");
+      content.classList.add("search-result-content");
+      const href = document.createElement("div");
+      href.classList.add("search-result-href");
+      href.textContent = doc.href;
+
+      let contentHTML = "";
+      const terms = Object.keys(result.matchData.metadata);
+      const term = terms[0];
+      if (result?.matchData?.metadata?.[term]?.content?.position?.length > 0) {
+        const pos = result.matchData.metadata[term].content.position[0];
+        const start = pos[0];
+        const len = pos[1];
+        let cutoffBefore = start - 50;
+        if (cutoffBefore < 0) {
+          cutoffBefore = 0;
+        } else {
+          contentHTML += "...";
+        }
+        contentHTML += doc.content.slice(cutoffBefore, start);
+
+        contentHTML += `<mark>${doc.content.slice(start, start + len)}</mark>`;
+        let cutoffAfter = start + len + 50;
+
+        contentHTML += doc.content.slice(start + len, cutoffAfter);
+        if (cutoffAfter < doc.content.length) {
+          contentHTML += "...";
+        }
+      }
+
+      content.innerHTML = contentHTML;
+
+      container.appendChild(heading);
+      container.appendChild(content);
+      container.appendChild(href);
+      resultsEl.appendChild(container);
+    }
+  }
+
+  return {
+    toggleLightbox,
+    toggleBookmark,
+    navToggle,
+    tocToggle,
+    searchToggle,
+    search,
+  };
+})();
+
+/**
+ * QR code dialog functions.
+ * @type {HyperbookQrcode}
+ * @memberof hyperbook
+ */
+hyperbook.qrcode = (function () {
+  /**
+   * Open the QR code dialog.
+   */
+  function open() {
+    const qrCodeDialog = document.getElementById("qrcode-dialog");
+    const qrcodeEls = qrCodeDialog.getElementsByClassName("make-qrcode");
+    const urlEls = qrCodeDialog.getElementsByClassName("url");
+    const qrcodeEl = qrcodeEls[0];
+    const qrcode = new window.QRCode({
+      content: window.location.href,
+      padding: 0,
+      join: true,
+      color: "var(--color-text)",
+      container: "svg-viewbox",
+      background: "var(--color-background)",
+      ecl: "M",
+    });
+    qrcodeEl.innerHTML = qrcode.svg();
+    for (let urlEl of urlEls[0].children) {
+      const href = urlEl.getAttribute("data-href");
+      urlEl.innerHTML = `${window.location.origin}${href}`;
+    }
+
+    qrCodeDialog.showModal();
+  }
+
+  /**
+   * Close the QR code dialog.
+   */
+  function close() {
+    const qrCodeDialog = document.getElementById("qrcode-dialog");
+    qrCodeDialog.close();
+  }
+
+  return { open, close };
+})();
+
+/**
+ * Share dialog functions.
+ * @type {HyperbookShare}
+ * @memberof hyperbook
+ * @see hyperbook.i18n
+ */
+hyperbook.share = (function () {
+  /**
+   * Open the share dialog.
+   */
+  function open() {
+    const shareDialog = document.getElementById("share-dialog");
+    updatePreview();
+    shareDialog.showModal();
+  }
+
+  /**
+   * Close the share dialog.
+   */
+  function close() {
+    const shareDialog = document.getElementById("share-dialog");
+    shareDialog.close();
+  }
+
+  /**
+   * Update the URL preview in the share dialog.
+   */
+  function updatePreview() {
+    const standaloneCheckbox = document.getElementById("share-standalone-checkbox");
+    const sectionCheckboxes = document.querySelectorAll("#share-dialog input[data-anchor]");
+    const previewEl = document.getElementById("share-url-preview");
+    
+    const baseUrl = window.location.origin + window.location.pathname;
+    const params = new URLSearchParams();
+    
+    if (standaloneCheckbox && standaloneCheckbox.checked) {
+      params.append("standalone", "true");
+    }
+    
+    const selectedSections = Array.from(sectionCheckboxes)
+      .filter(cb => cb.checked)
+      .map(cb => cb.getAttribute("data-anchor"));
+    
+    if (selectedSections.length > 0) {
+      params.append("sections", selectedSections.join(","));
+    }
+    
+    const finalUrl = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
+    previewEl.textContent = finalUrl;
+  }
+
+  /**
+   * Copy the shareable URL to clipboard.
+   */
+  function copyUrl() {
+    const previewEl = document.getElementById("share-url-preview");
+    const url = previewEl.textContent;
+    
+    navigator.clipboard.writeText(url).then(() => {
+      const button = document.querySelector("#share-dialog .copy-button");
+      const originalText = button.textContent;
+      button.textContent = hyperbook.i18n.get("share-dialog-url-copied");
+      
+      setTimeout(() => {
+        button.textContent = originalText;
+      }, 2000);
+    });
+  }
+
+  return { open, close, updatePreview, copyUrl };
+})();