feat: widget@0.1.45

Author: tiagozip

widget/build.js

@@ -66,7 +66,7 @@ const browser = await chromium.launch({ headless: false });
 const page = await browser.newPage();
 
 const server = Bun.serve({
-  port: 3006,
+  port: 3007,
   routes: {
     "/": () => {
       return new Response(Bun.file("./test.html"));
@@ -104,4 +104,4 @@ const server = Bun.serve({
   },
 });
 
-page.goto(`http://localhost:3006/`);
+page.goto(`http://localhost:3007/`);

widget/src/cap-floating.min.js

@@ -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",

widget/src/package.json

@@ -1,22 +1,5 @@
 (() => {
-  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";
 
@@ -43,12 +26,10 @@
     const triggerRect = element.getBoundingClientRect();
     const containerRect = (capWidget.offsetParent ?? document.documentElement).getBoundingClientRect();
 
-    // Horizontally center the popup under the trigger button.
     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`;
 
-    // Place the popup above or below the trigger, clamped to the visible area.
     if (position === "top") {
       const idealTop = triggerRect.top - capWidget.offsetHeight - offset;
       const clampedTop = Math.max(0, idealTop);
@@ -60,24 +41,18 @@
     }
 
     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) => {
@@ -90,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) => {