notify2t/dist/ui.js

A versatile UI notification, alert, and modal library with unique Ant Design inspired look.

var b={success:'<svg focusable="false" aria-hidden="true" fill="currentColor" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292.8c-1.8 2.5-4.2 4.6-6.8 6.2-2.9 1.7-6.2 2.8-9.6 3.3-3.4.5-6.9.5-10.3 0-3.4-.5-6.7-1.6-9.6-3.3-2.6-1.6-5-3.7-6.8-6.2l-137.9-191.6c-4.5-6.2-3.1-14.7 3.1-19.2s14.7-3.1 19.2 3.1l125.7 174.4 199.3-277.2c4.5-6.2 12.9-7.6 19.2-3.1s7.6 12.9 3.1 19.2z"></path></svg>',error:'<svg focusable="false" aria-hidden="true" fill="currentColor" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/><path d="M512 444c-13.2 0-24 10.8-24 24v112c0 13.2 10.8 24 24 24s24-10.8 24-24V468c0-13.2-10.8-24-24-24z"/><circle cx="512" cy="362" r="24"/></svg>',warning:'<svg focusable="false" aria-hidden="true" fill="currentColor" viewBox="64 64 896 896"><path d="M909.5 540.7L679.1 163.6c-13.4-23.2-38.1-37.9-65.7-37.9H296.6c-27.6 0-52.3 14.7-65.7 37.9L114.5 540.7c-13.4 23.2-13.4 49.9 0 73.1l230.4 391.8c13.4 23.2 38.1 37.9 65.7 37.9h316.8c27.6 0 52.3-14.7 65.7-37.9l230.4-391.8c13.4-23.2 13.4-49.9 0-73.1zM488 684V452c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v232c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8zm24-144c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/></svg>',info:'<svg focusable="false" aria-hidden="true" fill="currentColor" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/><path d="M512 444c-13.2 0-24 10.8-24 24v112c0 13.2 10.8 24 24 24s24-10.8 24-24V468c0-13.2-10.8-24-24-24z"/><circle cx="512" cy="362" r="24"/></svg>'};function g(h){if(h)try{new Audio(h).play().catch(a=>console.warn("Audio playback failed:",a))}catch(e){console.error("Error creating audio object:",e)}}var y=class{notificationConfig;notificationContainer=null;constructor(e){this.notificationConfig={duration:e?.notification?.duration??4e3,position:e?.notification?.position??"top-right",pauseOnHover:e?.notification?.pauseOnHover??!0,appendOnTopBody:e?.notification?.appendOnTopBody??!0,showProgressBar:e?.notification?.showProgressBar??!1,sound:e?.notification?.sound},this.initNotificationContainer()}initNotificationContainer(){document.querySelectorAll(".ui-notification-container").forEach(e=>e.remove()),this.notificationContainer=document.createElement("div"),this.notificationContainer.classList.add("ui-notification-container",this.notificationConfig.position),this.notificationConfig.appendOnTopBody?document.body.prepend(this.notificationContainer):(console.warn("UINotifier: appendOnTopBody is false. You must manually append the notification container element to the DOM."),console.warn("Notification Container Element:",this.notificationContainer))}notification={_template:`
            <div class="ui-notification-wrapper">
                <div class="ui-notification-icon ui-icon-base">:icon</div>
                <div class="ui-notification-content">
                    <div class="ui-notification-title">:title</div>
                    <div class="ui-notification-message">:message</div>
                    <div class="ui-expand-btn" style="display:none;">See More</div>
                </div>
                <button class="ui-notification-close-btn">\xD7</button>
                <div class="ui-progress-bar"></div>
            </div>
        `,_create:(e,a,o)=>{let l=this.notification._template.replace(":icon",b[o]).replace(":title",e).replace(":message",a);return new DOMParser().parseFromString(l,"text/html").body.firstElementChild},_handleLifecycle:(e,a,o)=>{if(!this.notificationContainer&&(this.initNotificationContainer(),!this.notificationContainer)){console.error("Notification container not found and could not be re-initialized.");return}e.classList.add(a),e.querySelector(".ui-notification-close-btn")?.addEventListener("click",()=>{this.notification._close(e)});let l=e.querySelector(".ui-notification-message"),i=e.querySelector(".ui-expand-btn");if(l&&i&&l.scrollHeight>l.clientHeight){i.style.display="block";let c=!1;i.textContent="See More",i.addEventListener("click",f=>{f.stopPropagation(),c=!c,e.classList.toggle("expanded",c),i.textContent=c?"See Less":"See More"})}this.notificationConfig.position.startsWith("top")?this.notificationContainer.prepend(e):this.notificationContainer.append(e),requestAnimationFrame(()=>{e.classList.add("show")}),o.sound&&g(o.sound);let t=e.querySelector(".ui-progress-bar"),n,r,d=c=>{r||(r=c);let f=c-r,m=Math.min(f/(o.duration||4e3),1);t&&(t.style.width=`${m*100}%`),m<1&&(n=requestAnimationFrame(d))};o.showProgressBar&&t?(t.style.display="block",n=requestAnimationFrame(d)):t&&(t.style.display="none");let s=setTimeout(()=>{this.notification._close(e),o.showProgressBar&&n&&cancelAnimationFrame(n)},o.duration||4e3);this.notificationConfig.pauseOnHover&&(e.addEventListener("mouseenter",()=>{s!==void 0&&(clearTimeout(s),s=void 0),o.showProgressBar&&n&&cancelAnimationFrame(n)}),e.addEventListener("mouseleave",()=>{s===void 0&&(r=performance.now()-(this.notificationConfig.duration-(o.duration||4e3)*(1-parseFloat(t.style.width)/100)),s=setTimeout(()=>{this.notification._close(e),o.showProgressBar&&n&&cancelAnimationFrame(n)},(o.duration||4e3)*(1-parseFloat(t.style.width)/100))),o.showProgressBar&&t&&t.style.width!=="100%"&&(n=requestAnimationFrame(d))},{once:!0}))},_close:e=>{e.classList.remove("show"),e.classList.add("hide"),setTimeout(()=>{e.remove(),this.notificationContainer&&this.notificationContainer.children.length===0&&(this.notificationContainer.remove(),this.notificationContainer=null)},400)},success:(e,a,o)=>{let l=a||e,i=a?e:"Success!",t={...this.notificationConfig,...o},n=this.notification._create(i,l,"success");this.notification._handleLifecycle(n,"success",t)},error:(e,a,o)=>{let l=a||e,i=a?e:"Error!",t={...this.notificationConfig,...o},n=this.notification._create(i,l,"error");this.notification._handleLifecycle(n,"error",t)},warning:(e,a,o)=>{let l=a||e,i=a?e:"Warning!",t={...this.notificationConfig,...o},n=this.notification._create(i,l,"warning");this.notification._handleLifecycle(n,"warning",t)},info:(e,a,o)=>{let l=a||e,i=a?e:"Info",t={...this.notificationConfig,...o},n=this.notification._create(i,l,"info");this.notification._handleLifecycle(n,"info",t)}};modal={_template:`
            <div class="ui-modal-backdrop">
                <div class="ui-modal-wrapper">
                    <div class="ui-modal-header">
                        <div class="ui-modal-title"></div>
                        <button class="ui-modal-close-btn">\xD7</button>
                    </div>
                    <div class="ui-modal-body"></div>
                    <div class="ui-modal-footer">
                        <button class="modal-cancel-btn">Cancel</button>
                        <button class="modal-ok-btn">OK</button>
                    </div>
                </div>
            </div>
        `,_activeModal:null,_resolve:null,_reject:null,show:e=>new Promise((a,o)=>{this.modal._activeModal&&(this.modal.hide(),this.modal._reject?.("New modal opened, previous cancelled.")),this.modal._resolve=a,this.modal._reject=o;let t=new DOMParser().parseFromString(this.modal._template,"text/html").body.firstElementChild,n=t.querySelector(".ui-modal-wrapper"),r=t.querySelector(".ui-modal-header"),d=t.querySelector(".ui-modal-body"),s=t.querySelector(".ui-modal-footer"),c=r.querySelector(".ui-modal-close-btn"),f=s.querySelector(".modal-ok-btn"),m=s.querySelector(".modal-cancel-btn"),M=r.querySelector(".ui-modal-title");M.textContent=e.title||"Modal",typeof e.content=="string"?d.innerHTML=e.content:d.appendChild(e.content),e.footer===null?s.remove():Array.isArray(e.footer)?(s.innerHTML="",e.footer.forEach(u=>{if(typeof u=="string"){let v=document.createElement("div");v.innerHTML=u.trim(),v.firstChild&&s.appendChild(v.firstChild)}else s.appendChild(u)})):(f.textContent=e.okText||"OK",m.textContent=e.cancelText||"Cancel"),e.closable===!1&&c.remove();let p=u=>{this.modal.hide(),this.modal._reject?.(u||"Modal Closed"),this.modal._resolve=null,this.modal._reject=null};c?.addEventListener("click",()=>p("close-button")),m?.addEventListener("click",()=>p("cancel-button")),f?.addEventListener("click",()=>{this.modal.hide(),this.modal._resolve?.(n),this.modal._resolve=null,this.modal._reject=null}),e.maskClosable!==!1&&t.addEventListener("click",u=>{u.target===t&&p("mask-click")}),e.sound&&g(e.sound),document.body.appendChild(t),this.modal._activeModal=t,requestAnimationFrame(()=>{t.classList.add("show"),document.body.style.overflow="hidden"})}),hide:()=>{this.modal._activeModal&&(this.modal._activeModal.classList.remove("show"),setTimeout(()=>{this.modal._activeModal?.remove(),this.modal._activeModal=null,document.body.style.overflow=""},400))}};alert={_template:`
            <div class="ui-alert-wrapper">
                <div class="ui-alert-icon ui-icon-base">:icon</div>
                <div class="ui-alert-content">
                    <div class="ui-alert-title"></div>
                    <div class="ui-alert-message"></div>
                    <div class="ui-expand-btn" style="display:none;">See More</div>
                </div>
                <button class="ui-alert-close-btn">\xD7</button>
            </div>
        `,create:e=>{let a=this.alert._template.replace(":icon",b[e.type]),i=new DOMParser().parseFromString(a,"text/html").body.firstElementChild;i.classList.add(e.type);let t=i.querySelector(".ui-alert-title"),n=i.querySelector(".ui-alert-message"),r=i.querySelector(".ui-expand-btn");e.title?t.textContent=e.title:t?.remove(),n.textContent=e.message,e.showIcon!==!1?i.classList.add("show-icon"):i.classList.remove("show-icon");let d=i.querySelector(".ui-alert-close-btn");if(e.closable!==!1?d.addEventListener("click",()=>{i.classList.add("hide"),setTimeout(()=>i.remove(),300)}):d.remove(),e.expandable&&n&&r&&n.scrollHeight>n.clientHeight){r.style.display="block";let s=!1;r.textContent="See More",r.addEventListener("click",()=>{s=!s,i.classList.toggle("expanded",s),r.textContent=s?"See Less":"See More"})}else r&&r.remove();return e.sound&&g(e.sound),i}}};export{y as default};