diff --git a/package.json b/package.json index 3e946e3..85d518b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@artifact-project/recaptcha", - "version": "1.0.1", + "version": "1.0.2-next.2", "description": "reCAPTCHA API & Components", "main": "index.ts", "scripts": { diff --git a/src/api.ts b/src/api.ts index 4846c91..81eb6ea 100644 --- a/src/api.ts +++ b/src/api.ts @@ -231,33 +231,51 @@ function createChallengeObserver(cfg: ReCaptchaWidgetCfg) { } }; - const challengeChanged = () => { - challengeLock = false; - + const checkChallengeElement = () => { if (challenge) { - const visible = !(parseInt(challenge.style.top) < 0); - if (visible !== challengeVisible) { - challengeVisible = visible; - - if (visible) { - startAttempt(Date.now()); - } else { - setTimeout(resolveAttempt, 50, 'cancelled'); - } - - (cfg[visible ? 'onchallengeshow' : 'onchallengehide'] || noop)(); - } + return; + } + + challenge = document.querySelector('[src*="recaptcha/api2/bframe"]') + || document.querySelector('iframe[title*="challenge"][src*="/recaptcha/api2/"]'); + + if (!challenge) { + return; + } + + while (!(parseInt(challenge.style.top) < 0) && challenge.parentElement.tagName !== 'BODY') { + challenge = challenge.parentElement; + } + + challengeObserver.disconnect(); + challengeObserver.observe(challenge, {attributes: true, attributeFilter: ['style'] }); + }; + + const checkChallengeVisibilityState = () => { + const visible = !(parseInt(challenge.style.top) < 0); + if (visible === challengeVisible) { + return; + } + + challengeVisible = visible; + + if (visible) { + startAttempt(Date.now()); + (cfg.onchallengeshow || noop)(); } else { - challenge = document.querySelector('[src*="recaptcha/api2/bframe"]') || document.querySelector('iframe[title*="challenge"][src*="/recaptcha/api2/"]'); + setTimeout(resolveAttempt, 50, 'cancelled'); + challenge = null; + (cfg.onchallengehide || noop)(); + } + }; - if (challenge) { - while (!(parseInt(challenge.style.top) < 0) && challenge.parentElement.tagName !== 'BODY') { - challenge = challenge.parentElement; - } + const challengeChanged = () => { + challengeLock = false; + + checkChallengeElement(); - challengeObserver.disconnect(); - challengeObserver.observe(challenge, {attributes: true, attributeFilter: ['style'] }); - } + if (challenge) { + checkChallengeVisibilityState(); } };