accessify-widget 0.2.1 → 0.2.3

package/dist/text-simplify-C9gzE3t0.js

@@ -0,0 +1,632 @@
+function createTextSimplifyModule(aiService, lang = "de") {
+  let enabled = false;
+  let level = "einfache";
+  let savedParagraphs = [];
+  let abortController = null;
+  let overlayEl = null;
+  let skippedBlocks = 0;
+  let resizeObserver = null;
+  let mutationObserver = null;
+  const preReplaceDimensions = /* @__PURE__ */ new Map();
+  const STORAGE_KEY = "accessify-text-simplify";
+  const SIMPLIFIED_ATTR = "data-accessify-simplified";
+  const ORIGINAL_ATTR = "data-accessify-original";
+  const BLOCK_HASH_ATTR = "data-accessify-block-hash";
+  const CLIENT_CACHE_DB = "accessify-simplify-cache";
+  const CLIENT_CACHE_STORE = "blocks";
+  const CLIENT_CACHE_VERSION = 1;
+  function openClientCache() {
+    return new Promise((resolve, reject) => {
+      const req = indexedDB.open(CLIENT_CACHE_DB, CLIENT_CACHE_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(CLIENT_CACHE_STORE)) {
+          db.createObjectStore(CLIENT_CACHE_STORE);
+        }
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  async function getClientCached(key) {
+    try {
+      const db = await openClientCache();
+      return new Promise((resolve) => {
+        const tx = db.transaction(CLIENT_CACHE_STORE, "readonly");
+        const store = tx.objectStore(CLIENT_CACHE_STORE);
+        const req = store.get(key);
+        req.onsuccess = () => resolve(req.result ?? null);
+        req.onerror = () => resolve(null);
+      });
+    } catch {
+      return null;
+    }
+  }
+  async function setClientCached(key, value) {
+    try {
+      const db = await openClientCache();
+      const tx = db.transaction(CLIENT_CACHE_STORE, "readwrite");
+      tx.objectStore(CLIENT_CACHE_STORE).put(value, key);
+    } catch {
+    }
+  }
+  function clientCacheKey(blockHash) {
+    const pageUrl = window.location.origin + window.location.pathname;
+    return `${pageUrl}:simplify:${level}:${blockHash}`;
+  }
+  function getConfig() {
+    const script = document.querySelector("script[data-site-key]");
+    const siteKey = script?.getAttribute("data-site-key") || window.Accessify?.config?.siteKey || "";
+    const proxyUrl = script?.getAttribute("data-proxy-url") || window.Accessify?.config?.proxyUrl || "";
+    return { siteKey: siteKey || void 0, proxyUrl: proxyUrl || void 0 };
+  }
+  function getTextElements() {
+    const selectors = "p, li, td, th, blockquote, figcaption, .hero-subtitle, h1, h2, h3, h4, h5, h6";
+    const elements = [];
+    const seen = /* @__PURE__ */ new Set();
+    document.querySelectorAll(selectors).forEach((el) => {
+      const htmlEl = el;
+      if (htmlEl.closest("#accessify-root")) return;
+      if (htmlEl.offsetParent === null && htmlEl.style.display !== "fixed") return;
+      const text = htmlEl.textContent?.trim() || "";
+      if (text.length < 20) return;
+      if (seen.has(htmlEl)) return;
+      let dominated = false;
+      for (const s of seen) {
+        if (s.contains(htmlEl)) {
+          dominated = true;
+          break;
+        }
+      }
+      if (dominated) return;
+      seen.add(htmlEl);
+      elements.push(htmlEl);
+    });
+    return elements;
+  }
+  function hashText(text) {
+    const normalized = text.replace(/\s+/g, " ").trim().toLowerCase();
+    let hash = 5381;
+    for (let i = 0; i < normalized.length; i++) {
+      hash = (hash << 5) + hash + normalized.charCodeAt(i) & 2147483647;
+    }
+    return hash.toString(36);
+  }
+  function getLeafTextNodes(root) {
+    const textNodes = [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+    let node;
+    while (node = walker.nextNode()) {
+      const trimmed = node.nodeValue?.trim();
+      if (trimmed && trimmed.length > 0) {
+        textNodes.push(node);
+      }
+    }
+    return textNodes;
+  }
+  function replaceLeafTextNodes(el, simplifiedText) {
+    const textNodes = getLeafTextNodes(el);
+    if (textNodes.length === 0) return;
+    if (textNodes.length === 1) {
+      textNodes[0].nodeValue = simplifiedText;
+      return;
+    }
+    const sentences = simplifiedText.match(/[^.!?]+[.!?]*\s*/g) || [simplifiedText];
+    const totalOriginalLen = textNodes.reduce((sum, n) => sum + (n.nodeValue?.trim().length || 0), 0);
+    if (totalOriginalLen === 0) {
+      textNodes[0].nodeValue = simplifiedText;
+      for (let i = 1; i < textNodes.length; i++) {
+        textNodes[i].nodeValue = "";
+      }
+      return;
+    }
+    let sentenceIndex = 0;
+    for (let i = 0; i < textNodes.length; i++) {
+      const nodeWeight = (textNodes[i].nodeValue?.trim().length || 0) / totalOriginalLen;
+      const sentenceCount = Math.max(1, Math.round(nodeWeight * sentences.length));
+      const chunk = sentences.slice(sentenceIndex, sentenceIndex + sentenceCount).join("");
+      textNodes[i].nodeValue = chunk || "";
+      sentenceIndex += sentenceCount;
+    }
+    if (sentenceIndex < sentences.length) {
+      const lastNode = textNodes[textNodes.length - 1];
+      lastNode.nodeValue = (lastNode.nodeValue || "") + sentences.slice(sentenceIndex).join("");
+    }
+  }
+  function measureElement(el) {
+    return { scrollHeight: el.scrollHeight, clientHeight: el.clientHeight };
+  }
+  function findClippingAncestor(el) {
+    let current = el;
+    while (current && current !== document.body) {
+      const style = getComputedStyle(current);
+      const overflow = style.overflow + " " + style.overflowY;
+      const hasHiddenOverflow = overflow.includes("hidden") || overflow.includes("clip");
+      const hasFixedHeight = style.maxHeight !== "none" || style.height !== "auto" && style.height !== "" && !style.height.includes("%");
+      if (hasHiddenOverflow && hasFixedHeight) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function checkLayoutSafety(el) {
+    const patches = [];
+    const after = measureElement(el);
+    const isElementOverflowing = after.scrollHeight > after.clientHeight + 2;
+    if (!isElementOverflowing) {
+      const clipAncestor2 = findClippingAncestor(el);
+      if (!clipAncestor2) return { safe: true, patches: [] };
+      const ancestorAfter = measureElement(clipAncestor2);
+      if (ancestorAfter.scrollHeight <= ancestorAfter.clientHeight + 2) {
+        return { safe: true, patches: [] };
+      }
+      return tryAncestorPatches(clipAncestor2, patches);
+    }
+    const clipAncestor = findClippingAncestor(el);
+    if (!clipAncestor) {
+      return { safe: true, patches: [] };
+    }
+    return tryAncestorPatches(clipAncestor, patches);
+  }
+  function tryAncestorPatches(ancestor, patches) {
+    const style = getComputedStyle(ancestor);
+    if (style.maxHeight !== "none") {
+      patches.push({
+        el: ancestor,
+        property: "maxHeight",
+        originalValue: ancestor.style.maxHeight
+      });
+      ancestor.style.maxHeight = "none";
+    }
+    if (style.overflow.includes("hidden") || style.overflowY.includes("hidden")) {
+      patches.push({
+        el: ancestor,
+        property: "overflow",
+        originalValue: ancestor.style.overflow
+      });
+      ancestor.style.overflow = "visible";
+    }
+    const afterPatch = measureElement(ancestor);
+    if (afterPatch.scrollHeight <= afterPatch.clientHeight + 2) {
+      return { safe: true, patches };
+    }
+    revertPatches(patches);
+    return { safe: false, patches: [] };
+  }
+  function revertPatches(patches) {
+    for (const patch of patches) {
+      patch.el.style[patch.property] = patch.originalValue;
+    }
+  }
+  function setupResizeObserver() {
+    if (resizeObserver) return;
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const el = entry.target;
+        if (!el.hasAttribute(SIMPLIFIED_ATTR)) continue;
+        const saved = savedParagraphs.find((sp) => sp.el === el);
+        if (!saved) continue;
+        const clipAncestor = findClippingAncestor(el);
+        if (clipAncestor) {
+          const dims = measureElement(clipAncestor);
+          if (dims.scrollHeight > dims.clientHeight + 2) {
+            console.warn(
+              "[Accessify] ResizeObserver detected clipping after external layout change, reverting block:",
+              el
+            );
+            revertSingleBlock(saved);
+            skippedBlocks++;
+          }
+        }
+      }
+    });
+  }
+  function setupMutationObserver() {
+    if (mutationObserver) return;
+    mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const removed of mutation.removedNodes) {
+          if (!(removed instanceof HTMLElement)) continue;
+          const idx = savedParagraphs.findIndex((sp) => sp.el === removed || removed.contains(sp.el));
+          if (idx !== -1) {
+            const saved = savedParagraphs[idx];
+            resizeObserver?.unobserve(saved.el);
+            saved.el.removeAttribute(SIMPLIFIED_ATTR);
+            saved.el.removeAttribute(ORIGINAL_ATTR);
+            saved.el.removeAttribute(BLOCK_HASH_ATTR);
+            revertPatches(saved.ancestorPatches);
+            savedParagraphs.splice(idx, 1);
+          }
+        }
+        if (mutation.type === "characterData" || mutation.type === "childList") {
+          const target = mutation.target instanceof HTMLElement ? mutation.target : mutation.target.parentElement;
+          if (!target) continue;
+          const simplifiedEl = target.closest(`[${SIMPLIFIED_ATTR}]`);
+          if (simplifiedEl) {
+            const saved = savedParagraphs.find((sp) => sp.el === simplifiedEl);
+            if (saved && !simplifiedEl.hasAttribute("data-accessify-replacing")) {
+              console.warn(
+                "[Accessify] External mutation detected on simplified block, cleaning up tracking:",
+                simplifiedEl
+              );
+              resizeObserver?.unobserve(saved.el);
+              saved.el.removeAttribute(SIMPLIFIED_ATTR);
+              saved.el.removeAttribute(ORIGINAL_ATTR);
+              saved.el.removeAttribute(BLOCK_HASH_ATTR);
+              revertPatches(saved.ancestorPatches);
+              savedParagraphs = savedParagraphs.filter((sp) => sp.el !== simplifiedEl);
+            }
+          }
+        }
+      }
+    });
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+  function disconnectObservers() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (mutationObserver) {
+      mutationObserver.disconnect();
+      mutationObserver = null;
+    }
+    preReplaceDimensions.clear();
+  }
+  function safeReplace(el, simplifiedText, blockHash) {
+    const originalHtml = el.innerHTML;
+    el.setAttribute("data-accessify-replacing", "true");
+    replaceLeafTextNodes(el, simplifiedText);
+    const { safe, patches } = checkLayoutSafety(el);
+    if (!safe) {
+      el.innerHTML = originalHtml;
+      el.removeAttribute("data-accessify-replacing");
+      console.warn(
+        "[Accessify] Block skipped — layout clipping detected after replacement:",
+        el.textContent?.slice(0, 60)
+      );
+      skippedBlocks++;
+      return false;
+    }
+    el.removeAttribute("data-accessify-replacing");
+    el.setAttribute(SIMPLIFIED_ATTR, "true");
+    el.setAttribute(ORIGINAL_ATTR, originalHtml);
+    if (blockHash) {
+      el.setAttribute(BLOCK_HASH_ATTR, blockHash);
+    }
+    savedParagraphs.push({ el, originalHtml, ancestorPatches: patches });
+    resizeObserver?.observe(el);
+    return true;
+  }
+  function revertSingleBlock(saved) {
+    saved.el.innerHTML = saved.originalHtml;
+    saved.el.removeAttribute(SIMPLIFIED_ATTR);
+    saved.el.removeAttribute(ORIGINAL_ATTR);
+    saved.el.removeAttribute(BLOCK_HASH_ATTR);
+    revertPatches(saved.ancestorPatches);
+    resizeObserver?.unobserve(saved.el);
+    savedParagraphs = savedParagraphs.filter((sp) => sp.el !== saved.el);
+  }
+  async function fetchManifest(siteKey, proxyUrl) {
+    const base = proxyUrl || "https://accessify-api.accessify.workers.dev";
+    const pageUrl = encodeURIComponent(window.location.origin + window.location.pathname);
+    const url = `${base}/v1/manifest?siteKey=${siteKey}&url=${pageUrl}&feature=simplify&variant=${level}`;
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return null;
+      const data = await res.json();
+      if (!data.blocks?.length) return null;
+      return data;
+    } catch {
+      return null;
+    }
+  }
+  function applyManifestBlocks(manifest, elements) {
+    const applied = [];
+    const remaining = [];
+    const byHash = /* @__PURE__ */ new Map();
+    for (const block of manifest.blocks) {
+      byHash.set(block.blockHash, block);
+    }
+    for (const el of elements) {
+      const text = el.textContent?.trim() || "";
+      const elHash = hashText(text);
+      const cached = byHash.get(elHash);
+      if (cached?.result) {
+        const success = safeReplace(el, cached.result, elHash);
+        if (success) {
+          applied.push(el);
+        } else {
+          remaining.push(el);
+        }
+      } else {
+        remaining.push(el);
+      }
+    }
+    return { applied, remaining };
+  }
+  function persistToManifest(siteKey, blockHash, originalText, simplifiedText, proxyUrl) {
+    const base = proxyUrl || "https://accessify-api.accessify.workers.dev";
+    const pageUrl = window.location.origin + window.location.pathname;
+    fetch(`${base}/v1/cache/persist`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        siteKey,
+        url: pageUrl,
+        feature: "simplify",
+        variant: level,
+        blockHash,
+        originalText,
+        result: simplifiedText
+      })
+    }).catch((err) => {
+      console.warn("[Accessify] Failed to persist live simplification:", err);
+    });
+  }
+  function markLoading(el) {
+    el.style.opacity = "0.5";
+    el.style.transition = "opacity 0.3s ease";
+  }
+  function clearLoading(el) {
+    el.style.opacity = "";
+    el.style.transition = "";
+  }
+  function showProgress(current, total, skipped = 0) {
+    if (!overlayEl) {
+      overlayEl = document.createElement("div");
+      overlayEl.setAttribute("role", "status");
+      overlayEl.setAttribute("aria-live", "polite");
+      Object.assign(overlayEl.style, {
+        position: "fixed",
+        bottom: "80px",
+        right: "24px",
+        zIndex: "2147483645",
+        padding: "10px 18px",
+        background: "#1a1a2e",
+        color: "#4ea8de",
+        borderRadius: "10px",
+        boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: "13px",
+        fontWeight: "600",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+      });
+      document.body.appendChild(overlayEl);
+    }
+    const pct = Math.round(current / total * 100);
+    const skippedNote = skipped > 0 ? lang.startsWith("de") ? ` (${skipped} übersprungen)` : ` (${skipped} skipped)` : "";
+    const label = lang.startsWith("de") ? `Wird vereinfacht... ${current}/${total} (${pct}%)${skippedNote}` : `Simplifying... ${current}/${total} (${pct}%)${skippedNote}`;
+    overlayEl.innerHTML = `<span style="display:inline-block;width:14px;height:14px;border:2px solid rgba(78,168,222,0.3);border-top-color:#4ea8de;border-radius:50%;animation:accessify-autospin 0.6s linear infinite"></span> ${label}`;
+    if (!document.getElementById("accessify-autospin-style")) {
+      const style = document.createElement("style");
+      style.id = "accessify-autospin-style";
+      style.textContent = "@keyframes accessify-autospin { to { transform: rotate(360deg); } }";
+      document.head.appendChild(style);
+    }
+  }
+  function showDone(count, fromCache) {
+    if (overlayEl) {
+      const cacheNote = fromCache > 0 ? lang.startsWith("de") ? ` (${fromCache} aus Cache)` : ` (${fromCache} from cache)` : "";
+      const skippedNote = skippedBlocks > 0 ? lang.startsWith("de") ? `, ${skippedBlocks} übersprungen` : `, ${skippedBlocks} skipped` : "";
+      const label = lang.startsWith("de") ? `${count} Textabschnitte vereinfacht${cacheNote}${skippedNote}` : `${count} text sections simplified${cacheNote}${skippedNote}`;
+      overlayEl.innerHTML = `<span style="color:#22c55e">&#x2713;</span> ${label}`;
+      overlayEl.style.color = "#22c55e";
+      setTimeout(() => removeProgress(), 3e3);
+    }
+  }
+  function showError(msg) {
+    if (overlayEl) {
+      overlayEl.innerHTML = `<span style="color:#ef4444">&#x2715;</span> ${msg}`;
+      overlayEl.style.color = "#ef4444";
+      setTimeout(() => removeProgress(), 5e3);
+    }
+  }
+  function removeProgress() {
+    overlayEl?.remove();
+    overlayEl = null;
+    document.getElementById("accessify-autospin-style")?.remove();
+  }
+  async function simplifyPage() {
+    const elements = getTextElements();
+    if (elements.length === 0) return;
+    abortController = new AbortController();
+    savedParagraphs = [];
+    skippedBlocks = 0;
+    setupResizeObserver();
+    setupMutationObserver();
+    const { siteKey, proxyUrl } = getConfig();
+    let fromCache = 0;
+    let remaining = elements;
+    if (siteKey) {
+      showProgress(0, elements.length);
+      const manifest = await fetchManifest(siteKey, proxyUrl);
+      if (manifest?.blocks?.length) {
+        const result = applyManifestBlocks(manifest, elements);
+        fromCache = result.applied.length;
+        remaining = result.remaining;
+        for (const block of manifest.blocks) {
+          if (block.result) {
+            setClientCached(clientCacheKey(block.blockHash), block.result);
+          }
+        }
+        if (remaining.length === 0) {
+          showDone(fromCache, fromCache);
+          return;
+        }
+      }
+    }
+    {
+      const stillRemaining = [];
+      for (const el of remaining) {
+        const text = el.textContent?.trim() || "";
+        if (text.length < 20) {
+          stillRemaining.push(el);
+          continue;
+        }
+        const blockHash = hashText(text);
+        const cached = await getClientCached(clientCacheKey(blockHash));
+        if (cached) {
+          const success = safeReplace(el, cached, blockHash);
+          if (success) {
+            fromCache++;
+          } else {
+            stillRemaining.push(el);
+          }
+        } else {
+          stillRemaining.push(el);
+        }
+      }
+      remaining = stillRemaining;
+      if (remaining.length === 0) {
+        showDone(fromCache, fromCache);
+        return;
+      }
+    }
+    if (!aiService && remaining.length > 0) {
+      if (fromCache > 0) {
+        showDone(fromCache, fromCache);
+      } else {
+        showProgress(0, 1);
+        showError(lang.startsWith("de") ? "Kein API-Key konfiguriert" : "No API key configured");
+      }
+      return;
+    }
+    for (const el of remaining) {
+      markLoading(el);
+    }
+    const totalElements = elements.length;
+    let completed = fromCache;
+    let totalSimplified = fromCache;
+    showProgress(completed, totalElements, skippedBlocks);
+    for (const el of remaining) {
+      if (abortController.signal.aborted) break;
+      const text = el.textContent?.trim() || "";
+      if (text.length < 20) {
+        clearLoading(el);
+        completed++;
+        showProgress(completed, totalElements, skippedBlocks);
+        continue;
+      }
+      const blockHash = hashText(text);
+      try {
+        const simplified = await aiService.simplifyText(text, level, lang);
+        if (abortController?.signal.aborted) return;
+        if (simplified && simplified !== text) {
+          const success = safeReplace(el, simplified, blockHash);
+          if (success) {
+            totalSimplified++;
+            setClientCached(clientCacheKey(blockHash), simplified);
+            if (siteKey) {
+              persistToManifest(siteKey, blockHash, text, simplified, proxyUrl);
+            }
+          }
+        }
+      } catch (err) {
+        if (err?.message?.includes("429")) {
+          await new Promise((r) => setTimeout(r, 8e3));
+          try {
+            const retry = await aiService.simplifyText(text, level, lang);
+            if (abortController?.signal.aborted) return;
+            if (retry && retry !== text) {
+              const success = safeReplace(el, retry, blockHash);
+              if (success) {
+                totalSimplified++;
+                setClientCached(clientCacheKey(blockHash), retry);
+                if (siteKey) {
+                  persistToManifest(siteKey, blockHash, text, retry, proxyUrl);
+                }
+              }
+            }
+          } catch {
+          }
+        } else {
+          console.warn("[Accessify] Failed to simplify:", err);
+        }
+      } finally {
+        clearLoading(el);
+        completed++;
+        if (!abortController?.signal.aborted) {
+          showProgress(completed, totalElements, skippedBlocks);
+          await new Promise((r) => setTimeout(r, 1200));
+        }
+      }
+    }
+    if (!abortController?.signal.aborted) {
+      showDone(totalSimplified, fromCache);
+    }
+  }
+  function restorePage() {
+    disconnectObservers();
+    for (const { el, originalHtml, ancestorPatches } of savedParagraphs) {
+      el.innerHTML = originalHtml;
+      el.removeAttribute(ORIGINAL_ATTR);
+      el.removeAttribute(SIMPLIFIED_ATTR);
+      el.removeAttribute(BLOCK_HASH_ATTR);
+      el.removeAttribute("data-accessify-replacing");
+      clearLoading(el);
+      revertPatches(ancestorPatches);
+    }
+    savedParagraphs = [];
+    skippedBlocks = 0;
+  }
+  function loadPreferences() {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (parsed.level === "einfache" || parsed.level === "leichte") {
+          level = parsed.level;
+        }
+      }
+    } catch {
+    }
+  }
+  function savePreferences() {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ level }));
+  }
+  function activate() {
+    if (enabled) return;
+    enabled = true;
+    loadPreferences();
+    simplifyPage();
+  }
+  function deactivate() {
+    enabled = false;
+    abortController?.abort();
+    abortController = null;
+    restorePage();
+    removeProgress();
+  }
+  return {
+    id: "text-simplify",
+    name: () => lang.startsWith("de") ? "Text vereinfachen" : "Simplify Text",
+    description: lang.startsWith("de") ? "Text in Einfache Sprache umwandeln" : "Simplify text for easier understanding",
+    icon: "simplify-text",
+    category: "ai",
+    activate,
+    deactivate,
+    getState: () => ({
+      id: "text-simplify",
+      enabled,
+      value: { level }
+    }),
+    setState: (newState) => {
+      if (newState.level && (newState.level === "einfache" || newState.level === "leichte")) {
+        level = newState.level;
+        savePreferences();
+      }
+    }
+  };
+}
+export {
+  createTextSimplifyModule as default
+};
+//# sourceMappingURL=text-simplify-C9gzE3t0.js.map