alpinejs-notify/dist/notifications.min.js

Simple notifications in your projects using Alpine JS 🙋‍♀️

(()=>{function n(t,e){setTimeout(function(){t.setAttribute("data-notify-show",!1)},e)}function a(t,e){if(typeof e=="boolean"){t.addEventListener("animationend",function(){JSON.parse(t.getAttribute("data-notify-show"))===!1&&t.remove()});return}setTimeout(function(){t.remove()},e)}function m(t,e){t.split(" ").forEach(r=>e.classList.add(r))}function l(t,e){async function o(){let i=await(await fetch(e.templateFile)).text(),s=await new DOMParser().parseFromString(i.replace("{notificationText}",t),"text/html").body.firstChild;notificationWrapper.appendChild(s),s.setAttribute("data-notify-show",!0),e.autoClose&&n(s,e.autoClose),e.autoRemove&&a(s,e.autoRemove),e.classNames&&m(e.classNames,s)}o()}function p(t,e,o){let r=document.getElementById(t),i=document.getElementById(e),s=new DOMParser().parseFromString(i.innerHTML.replace("{notificationText}",o),"text/html").body.firstChild;return r.appendChild(s),s.setAttribute("data-notify-show",!0),s}function u(t,e){let o=p(e.wrapperId,e.templateId,t);e.autoClose&&n(o,e.autoClose),e.autoRemove&&a(o,e.autoRemove),e.classNames&&m(e.classNames,o)}function f(t){t.magic("notify",()=>(e,o)=>{let r=o?.wrapperId?o:window.notificationOptions;if(r.templateFile)return l(e,r);if(r.templateId)return u(e,r)})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(f));})();