accessify-widget 0.3.32 → 0.3.34

package/dist/accessify.mjs

@@ -1,4 +1,4 @@
-import { d, i } from "./index-hf7U_NmB.js";
+import { d, i } from "./index-BG6LNf5h.js";
 export {
   d as destroy,
   i as init

package/dist/{index-hf7U_NmB.js → index-BG6LNf5h.js}

@@ -6641,14 +6641,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-B6r-k8He.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BjMDStEd.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-_chC8bg1.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-B7Easdyx.js"),
+    "page-structure": () => import("./page-structure-BfDi-GEx.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cfykj7Ak.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -8393,52 +8393,72 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   }
   const BADGE_ATTR = "data-accessify-badge";
   const WRAPPER_ATTR = "data-accessify-badge-wrap";
+  const OVERLAY_ID = "accessify-badge-overlay";
+  let badgePositionRAF = null;
+  let trackedBadges = [];
+  function getOrCreateOverlay() {
+    let overlay = document.getElementById(OVERLAY_ID);
+    if (!overlay) {
+      overlay = document.createElement("div");
+      overlay.id = OVERLAY_ID;
+      Object.assign(overlay.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "0",
+        height: "0",
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: "10000"
+      });
+      document.body.appendChild(overlay);
+    }
+    return overlay;
+  }
+  function positionBadge(target, badge, tooltip) {
+    const rect = target.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) {
+      badge.style.display = "none";
+      tooltip.style.display = "none";
+      return;
+    }
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    const top = rect.top + scrollY + 6;
+    const left = rect.left + scrollX + 6;
+    badge.style.display = "";
+    badge.style.top = `${top}px`;
+    badge.style.left = `${left}px`;
+    tooltip.style.top = `${top + 26}px`;
+    tooltip.style.left = `${left}px`;
+  }
+  function updateAllBadgePositions() {
+    for (const { target, badge, tooltip } of trackedBadges) {
+      if (!document.body.contains(target)) continue;
+      positionBadge(target, badge, tooltip);
+    }
+  }
+  function startBadgeTracking() {
+    if (badgePositionRAF !== null) return;
+    const tick = () => {
+      updateAllBadgePositions();
+      badgePositionRAF = requestAnimationFrame(tick);
+    };
+    badgePositionRAF = requestAnimationFrame(tick);
+  }
+  function stopBadgeTracking() {
+    if (badgePositionRAF !== null) {
+      cancelAnimationFrame(badgePositionRAF);
+      badgePositionRAF = null;
+    }
+  }
   function addInfoBadge(target, altText2) {
     if (target.getAttribute(BADGE_ATTR)) return;
     target.setAttribute(BADGE_ATTR, "1");
-    const isImg = target.tagName === "IMG";
-    let anchor;
-    let badgeTop = "6px";
-    let badgeLeft = "6px";
-    if (isImg) {
-      const parent = target.parentElement;
-      if (!parent) return;
-      let overflowAncestor = null;
-      let el = parent;
-      const MAX_LEVELS = 2;
-      for (let i = 0; i < MAX_LEVELS && el && el !== document.body; i++) {
-        const cs = getComputedStyle(el);
-        if (cs.overflow === "hidden" && cs.position !== "static") {
-          overflowAncestor = el;
-          break;
-        }
-        el = el.parentElement;
-      }
-      if (overflowAncestor) {
-        anchor = overflowAncestor;
-        const imgEl = target;
-        const containerRect = overflowAncestor.getBoundingClientRect();
-        const imgRect = imgEl.getBoundingClientRect();
-        badgeTop = `${Math.max(6, imgRect.top - containerRect.top + 6)}px`;
-        badgeLeft = `${Math.max(6, imgRect.left - containerRect.left + 6)}px`;
-      } else {
-        const parentPos = getComputedStyle(parent).position;
-        if (parentPos === "static") parent.style.position = "relative";
-        anchor = parent;
-        const imgEl = target;
-        badgeTop = `${imgEl.offsetTop + 6}px`;
-        badgeLeft = `${imgEl.offsetLeft + 6}px`;
-      }
-    } else {
-      const pos = getComputedStyle(target).position;
-      if (pos === "static") target.style.position = "relative";
-      anchor = target;
-    }
+    const overlay = getOrCreateOverlay();
     const badge = document.createElement("span");
     Object.assign(badge.style, {
       position: "absolute",
-      top: badgeTop,
-      left: badgeLeft,
       width: "22px",
       height: "22px",
       borderRadius: "50%",
@@ -8450,7 +8470,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       lineHeight: "22px",
       textAlign: "center",
       cursor: "default",
-      zIndex: "10000",
       pointerEvents: "auto",
       boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
       transition: "background 0.15s"
@@ -8464,8 +8483,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     Object.assign(tooltip.style, {
       display: "none",
       position: "absolute",
-      top: `calc(${badgeTop} + 26px)`,
-      left: badgeLeft,
       minWidth: "150px",
       maxWidth: "280px",
       padding: "6px 10px",
@@ -8475,10 +8492,10 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       fontSize: "12px",
       lineHeight: "1.4",
       borderRadius: "6px",
-      zIndex: "10001",
       pointerEvents: "none",
       wordWrap: "break-word",
-      boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+      boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+      zIndex: "1"
     });
     tooltip.textContent = altText2;
     tooltip.setAttribute("translate", "no");
@@ -8492,11 +8509,15 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       badge.style.background = "rgba(0,0,0,0.6)";
       tooltip.style.display = "none";
     });
-    anchor.appendChild(badge);
-    anchor.appendChild(tooltip);
+    overlay.appendChild(badge);
+    overlay.appendChild(tooltip);
+    positionBadge(target, badge, tooltip);
+    trackedBadges.push({ target, badge, tooltip });
   }
   function removeAllBadges() {
-    document.querySelectorAll(`[${BADGE_ATTR}="badge"], [${BADGE_ATTR}="tooltip"]`).forEach((el) => el.remove());
+    stopBadgeTracking();
+    trackedBadges = [];
+    document.getElementById(OVERLAY_ID)?.remove();
     document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => el.removeAttribute(BADGE_ATTR));
     document.querySelectorAll(`[${WRAPPER_ATTR}]`).forEach((wrapper) => {
       const img = wrapper.querySelector("img");
@@ -8520,6 +8541,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         addInfoBadge(el, alt.trim());
       }
     });
+    if (trackedBadges.length > 0) startBadgeTracking();
   }
   function removeTitles() {
     document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
@@ -8949,4 +8971,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-hf7U_NmB.js.map
+//# sourceMappingURL=index-BG6LNf5h.js.map