bro-toastify
Version:
A framework-agnostic toast notification library
3 lines (2 loc) • 12 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={default:{type:"fade",duration:300,easing:"ease"},success:{type:"fade",duration:300,easing:"ease"},error:{type:"fade",duration:300,easing:"ease"},info:{type:"fade",duration:300,easing:"ease"},warning:{type:"fade",duration:500,easing:"ease"},loading:{type:"fade",duration:300,easing:"ease"},show:{type:"fade",duration:300,easing:"ease"},promises:{type:"fade",duration:300,easing:"ease"},fade:{type:"fade",duration:300,easing:"ease"},"top-slide":{type:"top-slide",duration:300,easing:"ease"},"right-slide":{type:"right-slide",duration:300,easing:"ease"},"bottom-slide":{type:"bottom-slide",duration:300,easing:"ease"},"left-slide":{type:"left-slide",duration:300,easing:"ease"},zoom:{type:"zoom",duration:300,easing:"ease"},flip:{type:"flip",duration:300,easing:"ease"},bounce:{type:"bounce",duration:300,easing:"ease"},none:{type:"none",duration:0,easing:"ease"}};const t={type:"default",duration:3e3,position:"top-right",dismissible:!0,pauseOnHover:!0,customIcon:void 0,customClass:void 0},n=new Map,o=new Map,i=()=>Date.now().toString(36)+Math.random().toString(36).substring(2,5);function a(o){if(!o.message)return void console.error("BroToastify: message is required");const a=o.type||"default",d=o.containerOptions||{},l=d.animation?{...e[d.animation]}:e.fade,m={...t,...o,duration:"loading"===o.type?0:o.duration??t.duration,animation:{...e[a],...l,...o.animation}},f=o.id||i(),c={...m,id:f,createdAt:Date.now()};return n.set(f,c),s("create",c),m.duration&&m.duration>0&&"undefined"!=typeof window&&setTimeout((()=>{r(f)}),m.duration),c}function r(e){let t,o;"string"==typeof e?(t=e,o=Array.from(n.values()).find((e=>e.id===t))):(t=e.id,o=e),o&&(n.delete(t),s("dismiss",o),o.onClose&&o.onClose())}function s(e,t){if("undefined"!=typeof window){const n=o.get(e);n&&n.forEach((e=>e(t)))}}const d={show:(e,t)=>a({message:e,type:"show",...t}),default:(e,t)=>a({message:e,type:"default",...t}),success:(e,t)=>a({message:e,type:"success",...t}),error:(e,t)=>a({message:e,type:"error",...t}),info:(e,t)=>a({message:e,type:"info",...t}),warning:(e,t)=>a({message:e,type:"warning",...t}),loading:(e,t)=>{const n=i();return a({id:n,message:e,type:"loading",...t}),{id:n}},promises:(e,t,n)=>{const o=i();return a({id:o,message:t.loading,type:"loading",...n}),e.then((e=>(r(o),a({message:t.success,type:"success",...n}),e))).catch((e=>{throw r(o),a({message:t.error,type:"error",...n}),e})),{id:o}},isToastActive:e=>!!Array.from(n.values()).find((t=>t.id===e)),dismiss:e=>r(e),dismissible:e=>r(e),clearAll:function(){Array.from(n.values()).forEach((e=>{r(e.id)}))}};let l=!1;function m(){if("undefined"==typeof window||l)return;const e="broToastify-styles";if(document.getElementById(e))l=!0;else try{const t=document.createElement("style");t.id=e,t.innerHTML="\n .broToastify-container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 100%;\n max-height: 100vh;\n overflow-y: auto;\n padding: 1rem;\n }\n \n .broToastify-notification {\n position: relative;\n min-width: 300px;\n max-width: 500px;\n padding: 1rem;\n border-radius: 0.375rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n opacity: 1 !important;\n visibility: visible !important;\n }\n\n .broToastify-default {\n background-color: rgb(240, 241, 240);\n color: #333;\n }\n \n .broToastify-success {\n background-color: #10B981;\n color: white;\n }\n \n .broToastify-error {\n background-color: #EF4444;\n color: white;\n }\n \n .broToastify-info {\n background-color: #3B82F6;\n color: white;\n }\n \n .broToastify-warning {\n background-color: #F59E0B;\n color: white;\n }\n\n .broToastify-loading {\n background-color: #F3F4F6;\n color: #333;\n }\n\n .broToastify-loader-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n } \n\n .broToastify-loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n }\n\n .broToastify-loader-message {\n font-size: 0.875rem;\n color: #333;\n animation: fadeIn 0.3s ease-in-out;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @keyframes fadeIn {\n 0% { opacity: 0; transform: translateY(-10px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n \n .broToastify-title {\n font-weight: bold;\n margin-bottom: 0.25rem;\n font-size: 1rem;\n }\n \n .broToastify-message {\n font-size: 0.875rem;\n }\n \n .broToastify-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n background: transparent;\n border: none;\n color: currentColor;\n font-size: 1.25rem;\n cursor: pointer;\n opacity: 0.7;\n transition: opacity 0.2s;\n }\n \n .broToastify-close:hover {\n opacity: 1;\n }\n \n .broToastify-top-right {\n top: 1rem;\n right: 1rem;\n align-items: flex-end;\n }\n \n .broToastify-top-left {\n top: 1rem;\n left: 1rem;\n align-items: flex-start;\n }\n \n .broToastify-bottom-right {\n bottom: 1rem;\n right: 1rem;\n align-items: flex-end;\n }\n \n .broToastify-bottom-left {\n bottom: 1rem;\n left: 1rem;\n align-items: flex-start;\n }\n \n .broToastify-top-center {\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n \n .broToastify-bottom-center {\n bottom: 1rem;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n \n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n \n @media (max-width: 576px) {\n .broToastify-container {\n width: 100%;\n padding: 0 1rem;\n }\n \n .broToastify-notification {\n min-width: 100%;\n max-width: 100%;\n }\n \n .broToastify-top-center,\n .broToastify-top-right,\n .broToastify-top-left {\n top: 0;\n right: 0;\n left: 0;\n transform: none;\n }\n \n .broToastify-bottom-center,\n .broToastify-bottom-right,\n .broToastify-bottom-left {\n bottom: 0;\n right: 0;\n left: 0;\n transform: none;\n }\n }\n ",document.head.appendChild(t),l=!0}catch(e){console.error("Failed to inject bro-toastify styles:",e)}}function f(t){const{id:n,type:o,message:i,title:a,dismissible:r,customClass:s,animation:d}=t,l=document.createElement("div");if(l.id=`broToastify-${n}`,l.className=`broToastify-notification broToastify-${o} ${s||""}`,l.setAttribute("role","alert"),function(t,n=e.default,o=!0){const{type:i}=n;if("none"===i)return;const a={fade:"animate-fade","top-slide":o?"animate-topSlide":"animate-topSlideReverse","right-slide":o?"animate-rightSlide":"animate-rightSlideReverse","bottom-slide":o?"animate-bottomSlide":"animate-bottomSlideReverse","left-slide":o?"animate-leftSlide":"animate-leftSlideReverse",zoom:"animate-zoom",flip:"animate-flip",bounce:"animate-bounce",none:""},r=document.createElement("style");r.textContent="\n .animate-topSlideReverse {\n animation: topSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes topSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(-100%); opacity: 0; }\n }\n .animate-rightSlideReverse {\n animation: rightSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes rightSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(100%); opacity: 0; }\n }\n .animate-bottomSlideReverse {\n animation: bottomSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes bottomSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(100%); opacity: 0; }\n }\n .animate-leftSlideReverse {\n animation: leftSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes leftSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(-100%); opacity: 0; }\n }\n ",document.head.appendChild(r);const s=a[i];s&&(t.classList.add(s),t.addEventListener("animationend",(()=>{t.classList.remove(s)}),{once:!0}))}(l,d,!0),a){const e=document.createElement("div");e.className="broToastify-title",e.textContent=a,l.appendChild(e)}if("loading"===o){const e=document.createElement("div");e.className="broToastify-loader-container";const t=document.createElement("div");t.className="broToastify-loader",e.appendChild(t);const n=document.createElement("div");n.className="broToastify-loader-message",n.textContent=i,e.appendChild(n),l.appendChild(e)}else{const e=document.createElement("div");e.className="broToastify-message",e.textContent=i,l.appendChild(e)}if(r){const e=document.createElement("button");e.className="broToastify-close",e.innerHTML="×",e.setAttribute("aria-label","Close"),e.onclick=()=>{const e=new CustomEvent("broToastify:dismiss",{detail:{id:n}});document.dispatchEvent(e)},l.appendChild(e)}return t.onClick&&(l.addEventListener("click",(e=>{e.target.closest(".broToastify-close")||t.onClick()})),l.style.cursor="pointer"),l}const c=new Map;function p(e){if("undefined"==typeof window)return null;if(c.has(e)){const t=c.get(e);return document.body.contains(t)||document.body.appendChild(t),t}return function(e){if("undefined"==typeof window)return null;if(c.has(e)){const t=c.get(e);return document.body.contains(t)||document.body.appendChild(t),t}console.debug("Creating container for position:",e);const t=document.createElement("div");switch(t.className=`broToastify-container ${function(e){return{"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"}[e||"top-right"]}(e)}`,t.setAttribute("role","region"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),e){case"top-right":t.style.top="1rem",t.style.right="1rem";break;case"top-left":t.style.top="1rem",t.style.left="1rem";break;case"top-center":t.style.top="1rem",t.style.left="50%",t.style.transform="translateX(-50%)";break;case"bottom-right":t.style.bottom="1rem",t.style.right="1rem";break;case"bottom-left":t.style.bottom="1rem",t.style.left="1rem";break;case"bottom-center":t.style.bottom="1rem",t.style.left="50%",t.style.transform="translateX(-50%)";break;default:console.error(`Invalid position: ${e}`)}return document.body.appendChild(t),c.set(e,t),t}(e)}const u=d;exports.init=function(e){"undefined"!=typeof window&&m(),e&&Object.assign(d,{defaultOptions:e});const t=(n="create",i=t=>{const n=p(t.position),o=f(t);e?.newestOnTop?n?.prepend(o):n?.appendChild(o);const i=e=>{e.detail.id===t.id&&(t.dismiss?.(t.id),o.remove())};document.addEventListener("toast:dismiss",i),t.duration&&t.duration>0&&setTimeout((()=>{t.dismiss?.(t.id),o.remove()}),t.duration),o.addEventListener("remove",(()=>{document.removeEventListener("toast:dismiss",i)}),{once:!0})},"undefined"==typeof window?{off:()=>{}}:(o.has(n)||o.set(n,[]),o.get(n).push(i),{off:()=>{const e=o.get(n);if(e){const t=e.indexOf(i);-1!==t&&e.splice(t,1)}}}));var n,i;return()=>{t.off()}},exports.injectStyles=m,exports.vanilla=u;
//# sourceMappingURL=vanilla.cjs.js.map