accessify-widget 0.3.9 → 0.3.11

package/dist/accessify.mjs

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

package/dist/{index-DabFemHm.js → index-CK-JGSFG.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-BK_UYLtc.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-C7f5kvRE.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -8162,82 +8162,110 @@ 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;
+    if (target.getAttribute(BADGE_ATTR)) return;
+    const rect = target.getBoundingClientRect();
+    if (rect.width < 40 || rect.height < 40) {
+      if (target.tagName === "IMG") {
+        const obs = new IntersectionObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting && entry.boundingClientRect.width >= 40) {
+              obs.disconnect();
+              if (enabled && !target.getAttribute(BADGE_ATTR)) {
+                addInfoBadge(target, altText2);
+              }
+            }
+          }
+        });
+        obs.observe(target);
+        setTimeout(() => obs.disconnect(), 3e4);
+      }
+      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");
@@ -8405,9 +8433,12 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         generateSingle(img);
       } else {
         const alt = img.getAttribute("alt");
-        if (alt && alt.trim() && !img.getAttribute("title")) {
-          img.setAttribute("title", alt);
-          img.setAttribute("data-accessify-title", "auto");
+        if (alt && alt.trim()) {
+          if (!img.getAttribute("title")) {
+            img.setAttribute("title", alt);
+            img.setAttribute("data-accessify-title", "auto");
+          }
+          addInfoBadge(img, alt.trim());
         }
       }
     }
@@ -8437,13 +8468,15 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
     });
-    setTimeout(() => {
-      if (enabled) {
-        document.querySelectorAll("img").forEach(tryRegisterImage);
-        applyTitlesToAllImages();
-        addBadgesToAllImages();
-      }
-    }, 2e3);
+    for (const delay of [2e3, 5e3, 1e4]) {
+      setTimeout(() => {
+        if (enabled) {
+          document.querySelectorAll("img").forEach(tryRegisterImage);
+          applyTitlesToAllImages();
+          addBadgesToAllImages();
+        }
+      }, delay);
+    }
     domObserver = new MutationObserver((mutations) => {
       for (const m of mutations) {
         for (const node of m.addedNodes) {
@@ -8675,4 +8708,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-DabFemHm.js.map
+//# sourceMappingURL=index-CK-JGSFG.js.map