accessify-widget 0.3.9 → 0.3.10

package/dist/accessify.mjs

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

package/dist/{index-DabFemHm.js → index-DxYL6cyB.js}

@@ -6433,14 +6433,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-BAnuU08t.js"),
+    "keyboard-nav": () => import("./keyboard-nav-DFuKOs8i.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-C0MwseK0.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-DjY63saM.js"),
+    "page-structure": () => import("./page-structure-2bsTmvsF.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -8162,82 +8162,95 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     });
   }
-  const INFO_BADGE_CLASS = "accessify-alt-badge";
-  const INFO_TOOLTIP_CLASS = "accessify-alt-tooltip";
-  let styleEl = null;
-  function injectBadgeStyles() {
-    if (styleEl) return;
-    styleEl = document.createElement("style");
-    styleEl.textContent = `
-      .${INFO_BADGE_CLASS} {
-        position: absolute;
-        top: 6px;
-        left: 6px;
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-        background: rgba(0,0,0,0.55);
-        color: #fff;
-        font: bold 13px/22px sans-serif;
-        text-align: center;
-        cursor: default;
-        z-index: 10;
-        pointer-events: auto;
-        transition: background 0.15s;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-      }
-      .${INFO_BADGE_CLASS}:hover {
-        background: rgba(0,0,0,0.8);
-      }
-      .${INFO_TOOLTIP_CLASS} {
-        display: none;
-        position: absolute;
-        top: 32px;
-        left: 0;
-        min-width: 180px;
-        max-width: 300px;
-        padding: 8px 10px;
-        background: rgba(0,0,0,0.85);
-        color: #fff;
-        font: normal 12px/1.4 sans-serif;
-        border-radius: 6px;
-        z-index: 11;
-        pointer-events: none;
-        word-wrap: break-word;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-      }
-      .${INFO_BADGE_CLASS}:hover + .${INFO_TOOLTIP_CLASS},
-      .${INFO_BADGE_CLASS}:focus + .${INFO_TOOLTIP_CLASS} {
-        display: block;
-      }
-    `;
-    document.head.appendChild(styleEl);
-  }
+  const BADGE_ATTR = "data-accessify-badge";
   function addInfoBadge(target, altText2) {
-    const parent = target.tagName === "IMG" ? target.parentElement : target;
-    if (!parent) return;
-    if (parent.querySelector(`.${INFO_BADGE_CLASS}`)) return;
-    const pos = getComputedStyle(parent).position;
-    if (pos === "static") parent.style.position = "relative";
-    const badge = document.createElement("span");
-    badge.className = INFO_BADGE_CLASS;
+    target.tagName === "IMG";
+    const rect = target.getBoundingClientRect();
+    if (rect.width < 40 || rect.height < 40) return;
+    if (target.getAttribute(BADGE_ATTR)) return;
+    target.setAttribute(BADGE_ATTR, "1");
+    const container = document.createElement("div");
+    Object.assign(container.style, {
+      position: "fixed",
+      top: `${rect.top + 6}px`,
+      left: `${rect.left + 6}px`,
+      zIndex: "99999",
+      pointerEvents: "auto"
+    });
+    container.setAttribute("data-accessify-badge-container", "1");
+    const badge = document.createElement("div");
+    Object.assign(badge.style, {
+      width: "24px",
+      height: "24px",
+      borderRadius: "50%",
+      background: "rgba(0,0,0,0.6)",
+      color: "#fff",
+      fontFamily: "sans-serif",
+      fontWeight: "bold",
+      fontSize: "14px",
+      lineHeight: "24px",
+      textAlign: "center",
+      cursor: "default",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
+      transition: "background 0.15s"
+    });
     badge.textContent = "i";
     badge.setAttribute("aria-hidden", "true");
-    const tooltip = document.createElement("span");
-    tooltip.className = INFO_TOOLTIP_CLASS;
+    const tooltip = document.createElement("div");
+    Object.assign(tooltip.style, {
+      display: "none",
+      position: "absolute",
+      top: "28px",
+      left: "0",
+      minWidth: "160px",
+      maxWidth: "300px",
+      padding: "8px 10px",
+      background: "rgba(0,0,0,0.88)",
+      color: "#fff",
+      fontFamily: "sans-serif",
+      fontSize: "12px",
+      lineHeight: "1.4",
+      borderRadius: "6px",
+      pointerEvents: "none",
+      wordWrap: "break-word",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+    });
     tooltip.textContent = altText2;
-    parent.appendChild(badge);
-    parent.appendChild(tooltip);
+    badge.addEventListener("mouseenter", () => {
+      badge.style.background = "rgba(0,0,0,0.85)";
+      tooltip.style.display = "block";
+    });
+    badge.addEventListener("mouseleave", () => {
+      badge.style.background = "rgba(0,0,0,0.6)";
+      tooltip.style.display = "none";
+    });
+    container.appendChild(badge);
+    container.appendChild(tooltip);
+    document.body.appendChild(container);
+    const updatePos = () => {
+      const r = target.getBoundingClientRect();
+      container.style.top = `${r.top + 6}px`;
+      container.style.left = `${r.left + 6}px`;
+      container.style.display = r.bottom < 0 || r.top > window.innerHeight ? "none" : "";
+    };
+    const scrollHandler = () => requestAnimationFrame(updatePos);
+    window.addEventListener("scroll", scrollHandler, { passive: true });
+    window.addEventListener("resize", scrollHandler, { passive: true });
+    container._cleanup = () => {
+      window.removeEventListener("scroll", scrollHandler);
+      window.removeEventListener("resize", scrollHandler);
+    };
   }
   function removeAllBadges() {
-    document.querySelectorAll(`.${INFO_BADGE_CLASS}, .${INFO_TOOLTIP_CLASS}`).forEach((el) => el.remove());
-    if (styleEl) {
-      styleEl.remove();
-      styleEl = null;
-    }
+    document.querySelectorAll("[data-accessify-badge-container]").forEach((el) => {
+      el._cleanup?.();
+      el.remove();
+    });
+    document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => {
+      el.removeAttribute(BADGE_ATTR);
+    });
   }
   function addBadgesToAllImages() {
-    injectBadgeStyles();
     document.querySelectorAll("img").forEach((img) => {
       if (!isValidImage(img)) return;
       const alt = img.getAttribute("alt") || img.getAttribute("title");
@@ -8675,4 +8688,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-DabFemHm.js.map
+//# sourceMappingURL=index-DxYL6cyB.js.map