@mailto.foo/sdk 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/cdn.js +6 -3
- package/dist/cdn.js.map +1 -1
- package/dist/sdk.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,12 +40,12 @@ The CDN build auto-enhances any `<form>` whose `action` points at your subscribe
|
|
|
40
40
|
</form>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
On submit, the SDK intercepts the form, calls `subscribe` with the form fields, resets the form on success, and dispatches `mailto
|
|
43
|
+
On submit, the SDK intercepts the form, calls `subscribe` with the form fields, resets the form on success, and dispatches `mailto:submitting` / `mailto:success` / `mailto:error` custom events on the form element so you can hook in your own UI:
|
|
44
44
|
|
|
45
45
|
```js
|
|
46
|
-
form.addEventListener('mailto
|
|
47
|
-
form.addEventListener('mailto
|
|
48
|
-
form.addEventListener('mailto
|
|
46
|
+
form.addEventListener('mailto:submitting', () => showLoading())
|
|
47
|
+
form.addEventListener('mailto:success', () => showThankYou())
|
|
48
|
+
form.addEventListener('mailto:error', (e) => showError(e.detail.error.message))
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
The SDK also manages status messages and submit buttons for you automatically:
|
package/dist/cdn.js
CHANGED
|
@@ -11,6 +11,9 @@ const collectFormData = (form) => {
|
|
|
11
11
|
const ERROR_CLASS = "mailto-foo-error";
|
|
12
12
|
const SUCCESS_CLASS = "mailto-foo-success";
|
|
13
13
|
const BUTTON_CLASS = "mailto-foo-button";
|
|
14
|
+
const SUBMITTING_EVENT = "mailto:submitting";
|
|
15
|
+
const SUCCESS_EVENT = "mailto:success";
|
|
16
|
+
const ERROR_EVENT = "mailto:error";
|
|
14
17
|
const ensureMessageElement = (form, className) => {
|
|
15
18
|
const existing = form.querySelector(`.${className}`);
|
|
16
19
|
if (existing)
|
|
@@ -45,18 +48,18 @@ const enhanceForm = (form, publishKey) => {
|
|
|
45
48
|
form.addEventListener("submit", async (event) => {
|
|
46
49
|
event.preventDefault();
|
|
47
50
|
setButtonsLoading(actionButtons, true);
|
|
48
|
-
form.dispatchEvent(new CustomEvent(
|
|
51
|
+
form.dispatchEvent(new CustomEvent(SUBMITTING_EVENT, { bubbles: true }));
|
|
49
52
|
try {
|
|
50
53
|
await mailto.subscribe(collectFormData(form));
|
|
51
54
|
errorElement.textContent = "";
|
|
52
55
|
successElement.textContent = "Thanks for subscribing!";
|
|
53
56
|
form.reset();
|
|
54
|
-
form.dispatchEvent(new CustomEvent(
|
|
57
|
+
form.dispatchEvent(new CustomEvent(SUCCESS_EVENT, { bubbles: true }));
|
|
55
58
|
}
|
|
56
59
|
catch (err) {
|
|
57
60
|
successElement.textContent = "";
|
|
58
61
|
errorElement.textContent = err instanceof Error ? err.message : String(err);
|
|
59
|
-
form.dispatchEvent(new CustomEvent(
|
|
62
|
+
form.dispatchEvent(new CustomEvent(ERROR_EVENT, { bubbles: true, detail: { error: err } }));
|
|
60
63
|
}
|
|
61
64
|
finally {
|
|
62
65
|
setButtonsLoading(actionButtons, false);
|
package/dist/cdn.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,mBAAmB,GAAG,iDAAiD,CAAC;AAE9E,MAAM,eAAe,GAAG,CAAC,IAAqB,EAA0B,EAAE;IACxE,MAAM,IAAI,GAA2B,EAAE,CAAC;IACxC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;QACxD,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IACnD,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,aAAa,GAAG,oBAAoB,CAAC;AAC3C,MAAM,YAAY,GAAG,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"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"}
|
package/dist/sdk.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(()=>{var u="https://api-mailto-foo.dan-7bc.workers.dev",g=async n=>{let e=new AbortController,t=setTimeout(()=>e.abort(),5e3);try{let o=await fetch(`${u}/config/${n}/config`,{signal:e.signal});if(clearTimeout(t),!o.ok)throw new Error(`Config fetch failed: ${o.status}`);return o.json()}catch(o){throw clearTimeout(t),o}},a=null,p=()=>window.turnstile?Promise.resolve():a||(a=new Promise((n,e)=>{let t=document.createElement("script");t.src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",t.async=!0,t.defer=!0,t.onload=()=>n(),t.onerror=o=>{a=null,e(o)},document.head.appendChild(t)}),a),
|
|
1
|
+
"use strict";(()=>{var u="https://api-mailto-foo.dan-7bc.workers.dev",g=async n=>{let e=new AbortController,t=setTimeout(()=>e.abort(),5e3);try{let o=await fetch(`${u}/config/${n}/config`,{signal:e.signal});if(clearTimeout(t),!o.ok)throw new Error(`Config fetch failed: ${o.status}`);return o.json()}catch(o){throw clearTimeout(t),o}},a=null,p=()=>window.turnstile?Promise.resolve():a||(a=new Promise((n,e)=>{let t=document.createElement("script");t.src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit",t.async=!0,t.defer=!0,t.onload=()=>n(),t.onerror=o=>{a=null,e(o)},document.head.appendChild(t)}),a),y=n=>new Promise((e,t)=>{let o=document.createElement("div");o.style.cssText=["position:fixed","inset:0","z-index:2147483647","display:flex","align-items:center","justify-content:center","background:rgba(0,0,0,0.5)"].join(";");let s=document.createElement("div");o.appendChild(s),document.body.appendChild(o);let i,c=()=>{try{window.turnstile.remove(i)}catch{}try{document.body.removeChild(o)}catch{}};i=window.turnstile.render(s,{sitekey:n,callback:r=>{c(),e(r)},"error-callback":()=>{c(),t(new Error("Turnstile verification failed"))},"expired-callback":()=>{c(),t(new Error("Turnstile token expired"))}})}),f=async n=>{await p();let e=document.createElement("div");e.style.cssText="position:fixed;bottom:0;right:0;z-index:9999;visibility:hidden;",document.body.appendChild(e);let t,o=()=>{try{window.turnstile.remove(t)}catch{}try{document.body.removeChild(e)}catch{}};return await new Promise((i,c)=>{t=window.turnstile.render(e,{sitekey:n,appearance:"interaction-only",callback:r=>{o(),i(r)},"error-callback":()=>{o(),i(null)},"expired-callback":()=>{o(),c(new Error("Turnstile token expired"))}})})??y(n)},l=class{publishKey;constructor(e){this.publishKey=e.publishKey}async subscribe(e){let t=await g(this.publishKey),o=t.turnstileSiteKey?await f(t.turnstileSiteKey):void 0,s={data:e,config:{publishKey:this.publishKey,token:o}},i=await fetch(`${u}/subscribe`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)});if(!i.ok){let r=(i.headers.get("content-type")??"").includes("application/json")?(await i.json()).error??"Subscription failed":await i.text();throw new Error(r)}}};var h=/\/(pk_[A-Za-z0-9_-]+)\/subscribe\/?(?:[?#].*)?$/,E=n=>{let e={};for(let[t,o]of new FormData(n).entries())typeof o=="string"&&(e[t]=o);return e},w="mailto-foo-error",T="mailto-foo-success",S="mailto-foo-button",C="mailto:submitting",v="mailto:success",k="mailto:error",d=(n,e)=>{let t=n.querySelector(`.${e}`);if(t)return t;let o=document.createElement("div");return o.className=e,n.appendChild(o),o},x=n=>{let e=new Set;for(let t of n.querySelectorAll(`.${S}, button[type="submit"], input[type="submit"]`))(t instanceof HTMLButtonElement||t instanceof HTMLInputElement)&&e.add(t);return[...e]},m=(n,e)=>{for(let t of n)t.disabled=e,e?t.setAttribute("data-loading","true"):t.removeAttribute("data-loading")},L=(n,e)=>{let t=new l({publishKey:e}),o=d(n,w),s=d(n,T),i=x(n);n.addEventListener("submit",async c=>{c.preventDefault(),m(i,!0),n.dispatchEvent(new CustomEvent(C,{bubbles:!0}));try{await t.subscribe(E(n)),o.textContent="",s.textContent="Thanks for subscribing!",n.reset(),n.dispatchEvent(new CustomEvent(v,{bubbles:!0}))}catch(r){s.textContent="",o.textContent=r instanceof Error?r.message:String(r),n.dispatchEvent(new CustomEvent(k,{bubbles:!0,detail:{error:r}}))}finally{m(i,!1)}})},b=()=>{for(let n of document.querySelectorAll("form[action]")){let e=n.action.match(h);e?.[1]&&L(n,e[1])}};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",b):b();window.Mailto=l;})();
|
package/package.json
CHANGED