@vkm-js/modal
Version:
An Alpinejs modal plugin.
2 lines (1 loc) • 3.77 kB
JavaScript
(()=>{function b(p){function g(e){return["sm","md","lg","xl","xxl","fullscreen"].find(l=>e.includes(l))||null}function v(e){return["top","bottom"].find(l=>e.includes(l))||null}function k(e,l,m){let h=e.querySelector("[data-trigger]"),i=e.querySelector("[data-modal]"),t=e.querySelector("[data-close]"),n=m||"fade",r=g(l),a=v(l),d=l.includes("show"),c=l.includes("overflow"),w=l.includes("no-close"),s=e.querySelector("backdrop");return s||(s=document.createElement("backdrop"),e.insertBefore(s,i)),d&&s.classList.add("show"),{triggerEl:h,modalEl:i,closeEl:t,backdropEl:s,transition:n,size:r,position:a,show:d,overflow:c,noCloseOnBackdrop:w}}p.data("modal",()=>({open:!1,modalEl:null,backdropEl:null,overflow:!1,init(){this.open&&(this.showBackdrop(),this.modalEl.classList.add("modal-show"))},toggleModal(){this.open=!this.open,this.open?(this.showBackdrop(),this.modalEl.classList.add("modal-show")):(this.modalEl.classList.remove("modal-show"),this.removeBackdrop())},showBackdrop(){this.backdropEl.classList.add("show"),this.overflow&&(document.body.style.overflow="hidden")},removeBackdrop(){this.backdropEl.classList.remove("show"),this.overflow&&(document.body.style.overflow="")}})),p.directive("modal",(e,{modifiers:l,expression:m},{cleanup:h})=>{let{triggerEl:i,modalEl:t,closeEl:n,backdropEl:r,transition:a,size:d,position:c,show:w,overflow:s,noCloseOnBackdrop:E}=k(e,l,m);if(!t)return console.warn("Modal JS: Attribute data-modal is not set!");e.id||(e.id=crypto.getRandomValues(new Uint32Array(1))[0].toString(36)+Date.now().toString(36)),e.setAttribute("x-data","modal"),e.setAttribute("x-init",`modalEl = $el.querySelector('[data-modal]'); backdropEl = $el.querySelector('backdrop'); overflow = ${s}; open = ${w}`),t.classList.add("modal"),d&&t.classList.add(`modal-${d}`),c&&t.classList.add(`modal-${c}`),t.setAttribute(":class","{'modal-show': open}"),t.setAttribute("x-show","open"),t.setAttribute("x-transition:enter-start",`modal-${a}-hide`),t.setAttribute("x-transition:enter-end",`modal-${a}-show`),t.setAttribute("x-transition:leave-start",`modal-${a}-show`),t.setAttribute("x-transition:leave-end",`modal-${a}-hide`);let u=t.querySelector(".modal-content");if(!u){let o=t.innerHTML;t.innerHTML=`<div class="modal-content">${o}</div>`,u=t.querySelector(".modal-content")}if(u.setAttribute("x-cloak",""),u.setAttribute("x-show","open"),i&&(i.id=`btn-${e.id}`,i.setAttribute("x-on:click","toggleModal")),n)n.setAttribute("x-on:click","toggleModal"),n.setAttribute("x-on:close-modal.window","$el.click()");else{let o=document.createElement("button");o.type="button",o.className="relative text-initial z-20 float-right flex items-center justify-center transition-all w-8 h-8 rounded-md text-light active:bg-dark/10 hover:bg-dark/5 dark:hover:bg-white/5 shadow-none!",o.setAttribute("x-on:click","toggleModal"),o.setAttribute("data-close",""),o.innerHTML='<svg width="20" height="20" class="fill-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>',t.querySelector(".modal-header")?t.querySelector(".modal-header").appendChild(o):(t.querySelector(".modal-content").insertAdjacentElement("beforebegin",o),o.classList.add("absolute","top-6","right-6"))}if(!E){let o=x=>{if(!x.composedPath().includes(t)&&t.classList.contains("modal-show")){let f=t.querySelector("[data-close]");f&&f.click()}};r.addEventListener("click",o),h(()=>r.removeEventListener("click",o))}})}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(b)});})();