cta-modal/dist/cta-modal.js

Web Component call to action modal

if("customElements"in window){const t="active",n="animated",o=250,a="aria-label",i="block",s="click",e="close",d="Close",l="data-cta-modal-hide",c="data-cta-modal-show",r="",h="enter",m="escape",u="false",p="focusin",_="function",v="hidden",f="keydown",g="modal",b="none",y="(prefers-reduced-motion:reduce)",w=" ",x=/\s+/g,k="static",O="tab",A="template",E="true",L=["[contenteditable]",'[tabindex="0"]:not([disabled])',"a[href]","audio[controls]","button:not([disabled])","iframe","input:not([disabled]):not([type=hidden])","select:not([disabled])","summary","textarea:not([disabled])","video[controls]"].join(","),$="<span aria-hidden=true class=f tabindex=0></span>",D=[`<style>*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}@media ${y}{*,*:after,*:before{animation:none!important;transition:none!important}}@keyframes d{0%{opacity:0}100%{opacity:1}}@keyframes b{0%{transform:scale(0.95)}100%{transform:scale(1)}}@keyframes c{0%{opacity:1}100%{opacity:0}}@keyframes a{0%{transform:scale(1)}100%{transform:scale(0.95)}}.f{opacity:0;overflow:hidden;width:0;height:0;position:fixed;top:0;left:0}.s{overflow-x:hidden;overflow-y:auto;width:100%;height:100%;z-index:var(--cta-modal-overlay-z-index,100000);position:fixed;top:0;left:0}.o{background-color:var(--cta-modal-overlay-background-color,rgba(0,0,0,0.5));display:flex;align-items:center;justify-content:center;padding-top:var(--cta-modal-overlay-padding-top,20px);padding-left:var(--cta-modal-overlay-padding-left,20px);padding-right:var(--cta-modal-overlay-padding-right,20px);padding-bottom:var(--cta-modal-overlay-padding-bottom,20px);width:100%;min-height:100%}.d{background-color:var(--cta-modal-dialog-background-color,#fff);border-radius:var(--cta-modal-dialog-border-radius,5px);box-shadow:var(--cta-modal-dialog-box-shadow,0 2px 5px 0 rgba(0,0,0,0.5));padding-top:var(--cta-modal-dialog-padding-top,20px);padding-left:var(--cta-modal-dialog-padding-left,20px);padding-right:var(--cta-modal-dialog-padding-right,20px);padding-bottom:var(--cta-modal-dialog-padding-bottom,20px);width:var(--cta-modal-dialog-width,500px);max-width:100%;position:relative}[${c}=true] .o{animation-duration:${o}ms;animation-name:d}[${c}=true] .d{animation-duration:${o}ms;animation-name:b}[${l}=true] .o{animation-duration:${o}ms;animation-name:c;opacity:0}[${l}=true] .d{animation-duration:${o}ms;animation-name:a;transform:scale(0.95)}.c{appearance:none;touch-action:none;user-select:none;border:0;padding:0;color:var(--cta-modal-close-color,#fff);background-color:var(--cta-modal-close-background-color,#000);border-radius:var(--cta-modal-close-border-radius,50%);box-shadow:var(--cta-modal-close-box-shadow,0 0 0 1px#fff);display:var(--cta-modal-close-display,block);cursor:pointer;font-family:var(--cta-modal-close-font-family,'Arial',sans-serif);font-size:var(--cta-modal-close-font-size,23px);text-align:center;line-height:var(--cta-modal-close-line-height,26px);width:var(--cta-modal-close-width,26px);transform:translate(40%,-40%);position:absolute;top:0;right:0}.c:hover{color:var(--cta-modal-close-color-hover,#000);background-color:var(--cta-modal-close-background-color-hover,#fff);box-shadow:var(--cta-modal-close-box-shadow-hover,0 0 0 1px#000)}@supports selector(:focus-visible){.c:focus-visible{color:var(--cta-modal-close-color-hover,#000);background-color:var(--cta-modal-close-background-color-hover,#fff);box-shadow:var(--cta-modal-close-box-shadow-hover,0 0 0 1px#000)}}@supports not selector(:focus-visible){.c:focus{color:var(--cta-modal-close-color-hover,#000);background-color:var(--cta-modal-close-background-color-hover,#fff);box-shadow:var(--cta-modal-close-box-shadow-hover,0 0 0 1px#000)}}</style>`,`<slot name=button></slot><div class=s style=display:none>${$}<div class=o><div aria-modal=true class=d role=dialog tabindex=-1><button class=c type=button>&times;</button><slot name=modal></slot></div></div>${$}</div>`].join(r).trim().replace(x,w),H=document.createElement(A);H.innerHTML=D;class C extends HTMLElement{t;o;i;l;h;m;u;p;_=null;v;g=0;k=1;O=0;A=0;L;$;constructor(){super(),this.D(),this.m=this.attachShadow({mode:"closed"}),this.m.append(H.content.cloneNode(1)),this.u=this.querySelector("[slot=button]"),this.p=this.querySelector("[slot=modal]"),this.o=this.querySelector("h1,h2,h3,h4,h5,h6"),this.t=this.m.querySelector(".c"),this.v=this.m.querySelectorAll(".f"),this.i=this.m.querySelector(".d"),this.l=this.m.querySelector(".o"),this.h=this.m.querySelector(".s"),this.p||console.error('Required [slot="modal"] not found inside cta-modal.'),this.H(),this.C(),this.I(),this.S(),this.F()}static get observedAttributes(){return[t,n,e,k]}attributeChangedCallback(o,a,i){a!==i&&(o===t&&this.F(),o===n&&this.H(),o===e&&this.C(),o===k&&this.S())}connectedCallback(){this.M()}disconnectedCallback(){this.T()}D(){Object.getOwnPropertyNames(Object.getPrototypeOf(this)).forEach((t=>{typeof this[t]===_&&(this[t]=this[t].bind(this))}))}M(){this.T(),document.addEventListener(p,this.R),document.addEventListener(f,this.G),this.t.addEventListener(s,this.V),this.l.addEventListener(s,this.W),this.u&&(this.u.addEventListener(s,this.V),this.u.addEventListener(f,this.V)),this.p&&(this.p.addEventListener(s,this.V),this.p.addEventListener(f,this.V))}T(){document.removeEventListener(p,this.R),document.removeEventListener(f,this.G),this.t.removeEventListener(s,this.V),this.l.removeEventListener(s,this.W),this.u&&(this.u.removeEventListener(s,this.V),this.u.removeEventListener(f,this.V)),this.p&&(this.p.removeEventListener(s,this.V),this.p.removeEventListener(f,this.V))}H(){this.k=this.getAttribute(n)!==u}C(){const t=this.getAttribute(e)||d;this.t.title=t,this.t.setAttribute(a,t)}I(){let t=g;this.o&&(t=this.o.textContent||t,t=t.trim().replace(x,w)),this.i.setAttribute(a,t)}F(){const n=this.getAttribute(t)===E;this.g=n,this.Y((()=>{this.g&&this.j()}))}S(){this.A=this.getAttribute(k)===E}q(t){requestAnimationFrame((()=>{typeof t.focus===_&&t.focus()}))}j(){requestAnimationFrame((()=>{this.i.focus(),this.h.scrollTo(0,0)}))}B(t){if(!this.g||!t)return 0;return!(this.contains(t)||this.i.contains(t))}K(){const{matches:t}=matchMedia(y);return this.k&&!t}Y(n){this.setAttribute(t,this.g);const a=this.h.style.display===i,s=this.K(),e=s?o:0,d=innerWidth-document.documentElement.clientWidth,h=document.activeElement;this.g&&h&&(this._=h),this.g?(this.h.style.display=i,document.documentElement.style.overflow=v,d&&(document.documentElement.style.paddingRight=`${d}px`),s&&(this.O=1,this.h.setAttribute(c,E)),n(),this.$=setTimeout((()=>{clearTimeout(this.$),this.O=0,this.h.removeAttribute(c)}),e)):a&&(s&&(this.O=1,this.h.setAttribute(l,E)),n(),this.L=setTimeout((()=>{clearTimeout(this.L),this.O=0,this.h.removeAttribute(l),this.h.style.display=b,document.documentElement.style.overflow=r,document.documentElement.style.paddingRight=r}),e))}W(t){if(this.O||this.A)return;t.target.classList.contains("o")&&this.V()}V(t){let n,o=r,a=null;t&&(t.target&&(a=t.target),t.key&&(o=t.key,o=o.toLowerCase())),a&&(a.classList.contains("c")?n=a:typeof a.closest===_&&(n=a.closest(".cta-modal-toggle")));const i=t&&typeof t.preventDefault===_,s=n&&i&&!o,e=n&&i&&[h,w].includes(o);n&&n.disabled||i&&!n||o&&!e||((e||s)&&t.preventDefault(),this.g=!this.g,this.Y((()=>{this.g?this.j():this._&&this.q(this._)})))}R(){if(!this.g)return;const t=this.m.activeElement||document.activeElement,n=t===this.v[0],o=t===this.v[1];let a=[];this.p&&(a=Array.from(this.p.querySelectorAll(L)));const i=Array.from(this.i.querySelectorAll(L)).concat(a),s=i[0],e=i[i.length-1];n&&e?this.q(e):o&&s?this.q(s):this.B(t)&&this.j()}G({key:t}){this.g&&((t=t.toLowerCase())!==m||this.O||this.A||this.V(),t===O&&this.R())}}addEventListener("DOMContentLoaded",(()=>{customElements.define("cta-modal",C)}))}