@fylgja/alpinejs-dialog
Version:
Bring the power of AlpineJs to the HTML dialog
2 lines (1 loc) • 1.41 kB
JavaScript
(()=>{function h(i){i.directive("htmldialog",r);function r(t,{expression:n,modifiers:s},{evaluateLater:l,cleanup:y}){let c=n.length?l(n):()=>{},m=s.includes("noscroll"),u=p(s,"closeby","any");t.style.display=null,t.hidden=!1,t.style.length===0&&t.removeAttribute("style"),t.addEventListener("keydown",f),t.addEventListener("click",g),t.addEventListener("submit",d);function a(e=!0){document.body.style.overflow=e?"hidden":""}function d(e){(e.target.getAttribute("method")==="dialog"||e.submitter&&e.submitter.getAttribute("formmethod")==="dialog")&&c()}function f(e){e.key==="Escape"&&(e.preventDefault(),!(u!=="any"&&u!=="closerequest")&&c())}function g(e){if(e.target!==t||u!=="any")return;let o=t.getBoundingClientRect();o.top<=e.clientY&&e.clientY<=o.top+o.height&&o.left<=e.clientX&&e.clientX<=o.left+o.width||c()}t._x_doShow=()=>{t.hasAttribute("open")||(t.showModal(),a(m))},t._x_doHide=()=>{t.hasAttribute("open")&&(t.close(),a(!1))},y(()=>{t.removeEventListener("keydown",f),t.removeEventListener("click",g),t.removeEventListener("submit",d),a(!1)})}}function p(i,r,t){if(i.indexOf(r)===-1)return t;let n=i[i.indexOf(r)+1];if(!n)return t;if(r==="closeby"){let s=["auto","none","closerequest","any"],l=s.join(", ");if(!s.includes(n))return console.warn(`"${n}" is not one of the allowed values for closeby: ${l}`),t}return n}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(h)});})();