@cap.js/widget 0.1.44 → 0.1.45

package/cap-floating.min.js

@@ -1 +1 @@
-(()=>{const t=(e,o,n,i)=>{o.onclick=null;const s=parseInt(o.getAttribute("data-cap-floating-offset"))||8,a=o.getAttribute("data-cap-floating-position")||"top",l=o.getBoundingClientRect();Object.assign(n.style,{display:"block",position:"absolute",zIndex:"99999",opacity:"0",transform:"scale(0.98)",marginTop:"-4px",boxShadow:"rgba(0, 0, 0, 0.05) 0px 6px 24px 0px",borderRadius:"14px",transition:"opacity 0.15s, margin-top 0.2s, transform 0.2s"}),setTimeout(()=>{n.style.transform="scale(1)",n.style.opacity="1",n.style.marginTop="0"},5);const r=l.left+(l.width-n.offsetWidth)/2,c=Math.min(r,window.innerWidth-n.offsetWidth);n.style.top="top"===a?`${Math.max(window.scrollY,l.top-n.offsetHeight-s+window.scrollY)}px`:`${Math.min(l.bottom+s+window.scrollY,window.innerHeight-n.offsetHeight+window.scrollY)}px`,n.style.left=`${Math.max(c,2)}px`,n.solve(),n.addEventListener("solve",({detail:s})=>{o.setAttribute("data-cap-token",s.token),o.setAttribute("data-cap-progress","done"),setTimeout(()=>{i.forEach(t=>{o.addEventListener("click",t),t.call(o,e)}),setTimeout(()=>{o.onclick=null,i.forEach(t=>o.removeEventListener("click",t)),o.onclick=e=>t(e,o,n,i)},50)},500),setTimeout(()=>{n.style.transform="scale(0.98)",n.style.opacity="0",n.style.marginTop="-4px"},500),setTimeout(()=>{n.style.display="none"},700)})},e=e=>{const o=e.getAttribute("data-cap-floating");if(!o)return;const n=document.querySelector(o);if(!document.contains(n)&&!n.solve)throw new Error(`[cap floating] "${o}" doesn't exist or isn't a Cap widget`);n.style.display="none";const i=[e.onclick].filter(Boolean);"function"==typeof getEventListeners&&i.push(...(getEventListeners(e).click||[]).map(t=>t.listener)),i.length&&(e.onclick=null,i.forEach(t=>e.removeEventListener("click",t))),e.addEventListener("click",o=>{o.stopImmediatePropagation(),o.preventDefault(),t(o,e,n,i)})},o=t=>{e(t),t.querySelectorAll("[data-cap-floating]").forEach(e)};o(document.body),new MutationObserver(t=>t.forEach(t=>t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&o(t)}))).observe(document.body,{childList:!0,subtree:!0})})();
+(()=>{const t=t=>{const e=t.getAttribute("data-cap-floating");if(!e)return;const o=document.querySelector(e);if(!document.contains(o)&&!o.solve)throw new Error(`[cap floating] "${e}" doesn't exist or isn't a Cap widget`);o.style.display="none";let n=!1;t.addEventListener("click",e=>{if(n)return void(n=!1);e.stopImmediatePropagation(),e.preventDefault(),((t,e)=>{const o=parseInt(t.getAttribute("data-cap-floating-offset"))||8,n=t.getAttribute("data-cap-floating-position")||"top";Object.assign(e.style,{display:"block",position:"absolute",zIndex:"99999",opacity:"0",transform:"scale(0.98)",marginTop:"-4px",boxShadow:"rgba(0, 0, 0, 0.05) 0px 6px 24px 0px",borderRadius:"14px",transition:"opacity 0.15s, margin-top 0.2s, transform 0.2s"}),setTimeout(()=>{e.style.transform="scale(1)",e.style.opacity="1",e.style.marginTop="0"},5);const s=t.getBoundingClientRect(),a=(e.offsetParent??document.documentElement).getBoundingClientRect(),i=s.left+(s.width-e.offsetWidth)/2,r=Math.max(2,Math.min(i,window.innerWidth-e.offsetWidth));if(e.style.left=r-a.left+"px","top"===n){const t=s.top-e.offsetHeight-o,n=Math.max(0,t);e.style.top=n-a.top+"px"}else{const t=s.bottom+o,n=Math.min(t,window.innerHeight-e.offsetHeight);e.style.top=n-a.top+"px"}e.solve()})(t,o);const s=({detail:e})=>{o.removeEventListener("solve",s),t.setAttribute("data-cap-token",e.token),t.setAttribute("data-cap-progress","done"),setTimeout(()=>{n=!0,t.click()},500),(t=>{setTimeout(()=>{t.style.transform="scale(0.98)",t.style.opacity="0",t.style.marginTop="-4px"},500),setTimeout(()=>{t.style.display="none"},700)})(o)};o.addEventListener("solve",s)},!0)},e=e=>{t(e),e.querySelectorAll("[data-cap-floating]").forEach(t)};e(document.body),new MutationObserver(t=>t.forEach(t=>t.addedNodes.forEach(t=>{t.nodeType===Node.ELEMENT_NODE&&e(t)}))).observe(document.body,{childList:!0,subtree:!0})})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cap.js/widget",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Client-side widget for Cap, a lightweight, modern open-source CAPTCHA alternative designed using SHA-256 PoW.",
   "keywords": [
     "algorithm",

package/src/cap-floating.js

@@ -1,25 +1,7 @@
 (() => {
-  const handleClick = (evt, element, capWidget, handlers) => {
-    const trigger = () => {
-      handlers.forEach((h) => {
-        element.addEventListener("click", h);
-        h.call(element, evt);
-      });
-
-      setTimeout(() => {
-        element.onclick = null;
-        handlers.forEach((h) => {
-          return element.removeEventListener("click", h);
-        });
-        element.onclick = (e) => handleClick(e, element, capWidget, handlers);
-      }, 50);
-    };
-
-    element.onclick = null;
-
+  const showWidget = (element, capWidget) => {
     const offset = parseInt(element.getAttribute("data-cap-floating-offset")) || 8;
     const position = element.getAttribute("data-cap-floating-position") || "top";
-    const rect = element.getBoundingClientRect();
 
     Object.assign(capWidget.style, {
       display: "block",
@@ -39,41 +21,38 @@
       capWidget.style.marginTop = "0";
     }, 5);
 
-    const centerX = rect.left + (rect.width - capWidget.offsetWidth) / 2;
-    const safeX = Math.min(centerX, window.innerWidth - capWidget.offsetWidth);
+    // `position: absolute` is resolved against the nearest positioned ancestor (capWidget.offsetParent),
+    // but getBoundingClientRect() returns viewport-relative coords, convert to container-relative coords.
+    const triggerRect = element.getBoundingClientRect();
+    const containerRect = (capWidget.offsetParent ?? document.documentElement).getBoundingClientRect();
+
+    const centeredLeft = triggerRect.left + (triggerRect.width - capWidget.offsetWidth) / 2;
+    const clampedLeft = Math.max(2, Math.min(centeredLeft, window.innerWidth - capWidget.offsetWidth));
+    capWidget.style.left = `${clampedLeft - containerRect.left}px`;
 
     if (position === "top") {
-      capWidget.style.top = `${Math.max(
-        window.scrollY,
-        rect.top - capWidget.offsetHeight - offset + window.scrollY,
-      )}px`;
+      const idealTop = triggerRect.top - capWidget.offsetHeight - offset;
+      const clampedTop = Math.max(0, idealTop);
+      capWidget.style.top = `${clampedTop - containerRect.top}px`;
     } else {
-      capWidget.style.top = `${Math.min(
-        rect.bottom + offset + window.scrollY,
-        window.innerHeight - capWidget.offsetHeight + window.scrollY,
-      )}px`;
+      const idealTop = triggerRect.bottom + offset;
+      const clampedTop = Math.min(idealTop, window.innerHeight - capWidget.offsetHeight);
+      capWidget.style.top = `${clampedTop - containerRect.top}px`;
     }
 
-    capWidget.style.left = `${Math.max(safeX, 2)}px`;
     capWidget.solve();
+  };
 
-    capWidget.addEventListener("solve", ({ detail }) => {
-      element.setAttribute("data-cap-token", detail.token);
-      element.setAttribute("data-cap-progress", "done");
-      setTimeout(() => {
-        trigger();
-      }, 500);
-
-      setTimeout(() => {
-        capWidget.style.transform = "scale(0.98)";
-        capWidget.style.opacity = "0";
-        capWidget.style.marginTop = "-4px";
-      }, 500);
-
-      setTimeout(() => {
-        capWidget.style.display = "none";
-      }, 700);
-    });
+  const hideWidget = (capWidget) => {
+    setTimeout(() => {
+      capWidget.style.transform = "scale(0.98)";
+      capWidget.style.opacity = "0";
+      capWidget.style.marginTop = "-4px";
+    }, 500);
+
+    setTimeout(() => {
+      capWidget.style.display = "none";
+    }, 700);
   };
 
   const setupElement = (element) => {
@@ -86,24 +65,38 @@
     }
 
     capWidget.style.display = "none";
-    const handlers = [element.onclick].filter(Boolean);
-
-    if (typeof getEventListeners === "function") {
-      handlers.push(...(getEventListeners(element).click || []).map((l) => l.listener));
-    }
-
-    if (handlers.length) {
-      element.onclick = null;
-      handlers.forEach((h) => {
-        return element.removeEventListener("click", h);
-      });
-    }
-
-    element.addEventListener("click", (e) => {
-      e.stopImmediatePropagation();
-      e.preventDefault();
-      handleClick(e, element, capWidget, handlers);
-    });
+    let bypass = false;
+
+    element.addEventListener(
+      "click",
+      (e) => {
+        if (bypass) {
+          bypass = false;
+          return;
+        }
+
+        e.stopImmediatePropagation();
+        e.preventDefault();
+
+        showWidget(element, capWidget);
+
+        const onSolve = ({ detail }) => {
+          capWidget.removeEventListener("solve", onSolve);
+          element.setAttribute("data-cap-token", detail.token);
+          element.setAttribute("data-cap-progress", "done");
+
+          setTimeout(() => {
+            bypass = true;
+            element.click();
+          }, 500);
+
+          hideWidget(capWidget);
+        };
+
+        capWidget.addEventListener("solve", onSolve);
+      },
+      true,
+    );
   };
 
   const init = (root) => {