UNPKG

@mochabug/adapt-web

Version:

Browser client library for Adapt automation platform

2 lines (1 loc) 5.6 kB
import{setupCapAdapter,cleanupCapAdapter,takeRedeemedChallengeExpiration}from"./cap-adapter.js";import{CAP_WIDGET_CSS}from"./css-cap.js";import"@cap.js/widget";class AdaptCapWidget{constructor(options){this.widgetContainer=null;this.widgetElement=null;this.attributionObserver=null;this.destroyed=!1;if(!options.automationId)throw new Error('[adapt] AdaptCapWidget requires "automationId".');if(!options.client)throw new Error('[adapt] AdaptCapWidget requires "client". Create one with: createConnectClient({ id: "..." })');if(!options.onSolve)throw new Error('[adapt] AdaptCapWidget requires "onSolve" callback.');this.options=options;const container=typeof options.container=="string"?document.getElementById(options.container):options.container;if(!container)throw new Error(`Container ${typeof options.container=="string"?`with id '${options.container}'`:""} not found`);this.containerElement=container,this.injectStyles(),setupCapAdapter(options.client,options.automationId),this.mountWidget()}injectStyles(){if(getComputedStyle(document.documentElement).getPropertyValue("--mb-adapt-styles-loaded").trim()||document.getElementById("mb-adapt-cap-styles"))return;const style=document.createElement("style");style.id="mb-adapt-cap-styles",style.textContent=CAP_WIDGET_CSS,document.head.appendChild(style)}mountWidget(){this.widgetContainer=document.createElement("div"),this.widgetContainer.className="mb-adapt-cap";const innerContainer=document.createElement("div");if(innerContainer.className="mb-adapt-cap__container",this.widgetElement=document.createElement("cap-widget"),this.widgetElement.setAttribute("data-cap-api-endpoint",`/adapt-cap-${encodeURIComponent(this.options.automationId)}/`),this.options.workerCount&&this.widgetElement.setAttribute("data-cap-worker-count",String(this.options.workerCount)),this.options.hiddenFieldName&&this.widgetElement.setAttribute("data-cap-hidden-field-name",this.options.hiddenFieldName),this.options.troubleshootingUrl&&this.widgetElement.setAttribute("data-cap-troubleshooting-url",this.options.troubleshootingUrl),this.options.disableHaptics&&this.widgetElement.setAttribute("data-cap-disable-haptics",""),this.options.i18n){const i18nAttributes=[["initialState","data-cap-i18n-initial-state"],["verifyingLabel","data-cap-i18n-verifying-label"],["solvedLabel","data-cap-i18n-solved-label"],["errorLabel","data-cap-i18n-error-label"],["troubleshootingLabel","data-cap-i18n-troubleshooting-label"],["wasmDisabled","data-cap-i18n-wasm-disabled"],["verifyAriaLabel","data-cap-i18n-verify-aria-label"],["verifyingAriaLabel","data-cap-i18n-verifying-aria-label"],["verifiedAriaLabel","data-cap-i18n-verified-aria-label"],["requiredLabel","data-cap-i18n-required-label"],["errorAriaLabel","data-cap-i18n-error-aria-label"]];for(const[key,attribute]of i18nAttributes){const value=this.options.i18n[key];value&&this.widgetElement.setAttribute(attribute,value)}}this.widgetElement.addEventListener("solve",(e=>{if(this.destroyed)return;const token=e.detail?.token,expiresStr=e.detail?.expires,expires=takeRedeemedChallengeExpiration(this.options.automationId)??(expiresStr?new Date(expiresStr):new Date);setTimeout(()=>this.destroy(),0),token?this.options.onSolve(token,expires):this.options.onError?.(new Error("No token received from Cap.js"))})),this.widgetElement.addEventListener("error",(e=>{this.destroyed||(console.error("[AdaptCapWidget] Cap.js error:",e.detail),setTimeout(()=>this.destroy(),0),this.options.onError?.(new Error(e.detail?.message||"Cap.js error")))})),innerContainer.appendChild(this.widgetElement),this.widgetContainer.appendChild(innerContainer),this.containerElement.appendChild(this.widgetContainer),this.hideCapAttribution()}hideCapAttribution(){const hide=()=>{if(this.destroyed||!this.widgetElement)return;const attribution=this.widgetElement.shadowRoot?.querySelector('[part="attribution"], .credits');attribution&&((attribution.style.getPropertyValue("display")!=="none"||attribution.style.getPropertyPriority("display")!=="important")&&attribution.style.setProperty("display","none","important"),(attribution.style.getPropertyValue("visibility")!=="hidden"||attribution.style.getPropertyPriority("visibility")!=="important")&&attribution.style.setProperty("visibility","hidden","important"),(attribution.style.getPropertyValue("pointer-events")!=="none"||attribution.style.getPropertyPriority("pointer-events")!=="important")&&attribution.style.setProperty("pointer-events","none","important"),attribution.getAttribute("aria-hidden")!=="true"&&attribution.setAttribute("aria-hidden","true"),attribution.getAttribute("tabindex")!=="-1"&&attribution.setAttribute("tabindex","-1"))},observe=()=>{this.destroyed||!this.widgetElement?.shadowRoot||(hide(),!(this.attributionObserver||typeof MutationObserver>"u")&&(this.attributionObserver=new MutationObserver(hide),this.attributionObserver.observe(this.widgetElement.shadowRoot,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class","aria-hidden","tabindex"]})))};observe(),queueMicrotask(observe),setTimeout(observe,0),setTimeout(hide,150)}setDarkMode(dark){this.widgetContainer&&(dark?this.widgetContainer.classList.add("mb-adapt-cap--dark"):this.widgetContainer.classList.remove("mb-adapt-cap--dark"))}destroy(){this.destroyed||(this.destroyed=!0,cleanupCapAdapter(this.options.automationId),this.attributionObserver?.disconnect(),this.attributionObserver=null,this.widgetContainer&&this.widgetContainer.parentNode&&this.widgetContainer.parentNode.removeChild(this.widgetContainer),this.widgetContainer=null,this.widgetElement=null)}}export{AdaptCapWidget};