accessify-widget 0.3.8 → 0.3.10

package/dist/accessify.mjs

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

package/dist/{index-C3jQHPAw.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-CzeLetKR.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-DFT1USJ1.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)
@@ -8149,6 +8149,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     img.setAttribute("alt", altText2);
     img.setAttribute("title", altText2);
     processedImages.set(img, { generatedAlt: altText2 });
+    if (enabled) addInfoBadge(img, altText2);
   }
   function applyTitlesToAllImages() {
     document.querySelectorAll("img").forEach((img) => {
@@ -8161,6 +8162,109 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     });
   }
+  const BADGE_ATTR = "data-accessify-badge";
+  function addInfoBadge(target, altText2) {
+    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("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;
+    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("[data-accessify-badge-container]").forEach((el) => {
+      el._cleanup?.();
+      el.remove();
+    });
+    document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => {
+      el.removeAttribute(BADGE_ATTR);
+    });
+  }
+  function addBadgesToAllImages() {
+    document.querySelectorAll("img").forEach((img) => {
+      if (!isValidImage(img)) return;
+      const alt = img.getAttribute("alt") || img.getAttribute("title");
+      if (alt && alt.trim()) {
+        addInfoBadge(img, alt.trim());
+      }
+    });
+    document.querySelectorAll("[data-accessify-bg-alt]").forEach((el) => {
+      const alt = el.getAttribute("aria-label");
+      if (alt && alt.trim()) {
+        addInfoBadge(el, alt.trim());
+      }
+    });
+  }
   function removeTitles() {
     document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
       img.removeAttribute("title");
@@ -8172,6 +8276,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       el.removeAttribute("title");
       el.removeAttribute("data-accessify-bg-alt");
     });
+    removeAllBadges();
   }
   function scanForBackgroundImages() {
     const found = [];
@@ -8201,6 +8306,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     el.setAttribute("aria-label", altText2);
     el.setAttribute("title", altText2);
     el.setAttribute("data-accessify-bg-alt", "auto");
+    if (enabled) addInfoBadge(el, altText2);
   }
   async function generateBgAlts() {
     if (!aiService || !enabled) return;
@@ -8340,6 +8446,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     generateAll();
     generateBgAlts();
     applyTitlesToAllImages();
+    addBadgesToAllImages();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
     });
@@ -8347,6 +8454,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       if (enabled) {
         document.querySelectorAll("img").forEach(tryRegisterImage);
         applyTitlesToAllImages();
+        addBadgesToAllImages();
       }
     }, 2e3);
     domObserver = new MutationObserver((mutations) => {
@@ -8580,4 +8688,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-C3jQHPAw.js.map
+//# sourceMappingURL=index-DxYL6cyB.js.map