toastjs-notifications/toast-notifications.min.js

Una librería moderna, ligera y elegante para notificaciones toast en aplicaciones web. Incluye animaciones suaves, múltiples posiciones y diseño responsive.

/**
 * ToastJS Notifications
 * ==========================================
 *
 * La librería de notificaciones toast más elegante y minimalista para tu aplicación web.
 * Con animaciones suaves, diseño moderno y una experiencia de usuario excepcional.
 *
 * @version     1.11.14
 * @author      Urian Viera
 * @website     https://www.urianviera.com
 * @youtube     https://www.youtube.com/WebDeveloperUrianViera
 * @email       urian1213viera@gmail.com
 * @donate      https://www.paypal.com/donate/?hosted_button_id=4SV78MQJJH3VE
 * @license     MIT
 * @copyright   © 2025 Urian Viera. Todos los derechos reservados.
 */
!function(t){"use strict";function n(t={}){this.options={position:t.position||"top-right",duration:t.duration||4e3,maxToasts:t.maxToasts||5,...t},this.container=null,this.toastCount=0,this.init()}n.prototype={init:function(){this.injectStyles(),this.createContainer()},injectStyles:function(){if(document.getElementById("toastjs-styles"))return;const t=document.createElement("link");t.id="toastjs-styles",t.rel="stylesheet";const n=document.currentScript||function(){const t=document.getElementsByTagName("script");return t[t.length-1]}(),s=n?.src||"";if(s.includes("cdn.jsdelivr.net/npm/toastjs-notifications")){const n=s.match(/@(\d+\.\d+\.\d+)/)?.[1]||"latest";return t.href=`https://cdn.jsdelivr.net/npm/toastjs-notifications@${n}/toast-notifications.min.css`,void document.head.appendChild(t)}if(s.includes("unpkg.com/toastjs-notifications")){const n=s.match(/@(\d+\.\d+\.\d+)/)?.[1]||"latest";return t.href=`https://unpkg.com/toastjs-notifications@${n}/toast-notifications.css`,void document.head.appendChild(t)}if(s.includes("toast-notifications.min.js")){const t=s.substring(0,s.lastIndexOf("/")),n=t.substring(0,t.lastIndexOf("/js")),e=document.createElement("link");return e.rel="stylesheet",e.href=`${n}/css/toast-notifications.css`,void document.head.appendChild(e)}t.href=`${basePath}/toast-notifications.css`,document.head.appendChild(t)},createContainer:function(t=this.options.position){this.container?this.container.className=`toastjs-container ${t}`:(this.container=document.createElement("div"),this.container.className=`toastjs-container ${t}`,this.container.id="toastjs-container",document.body.appendChild(this.container))},show:function(t,n="info",s={}){this.toastCount>=this.options.maxToasts&&this.removeOldest();const e={success:{icon:'<svg class="checkmark success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n      <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />\n      <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />\n    </svg>',class:"success"},warning:{icon:'<svg class="checkmark warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n      <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />\n      <line class="checkmark__check" x1="26" y1="16" x2="26" y2="30" />\n      <circle class="checkmark__dot" cx="26" cy="36" r="2" />\n    </svg>',class:"warning"},error:{icon:'<svg class="checkmark error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n      <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />\n      <line class="checkmark__check" x1="16" y1="16" x2="36" y2="36" />\n      <line class="checkmark__check" x1="36" y1="16" x2="16" y2="36" />\n    </svg>',class:"error"},info:{icon:'<svg class="checkmark info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n      <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />\n      <line class="checkmark__check" x1="26" y1="20" x2="26" y2="34" />\n      <circle class="checkmark__dot" cx="26" cy="16" r="2" />\n    </svg>',class:"info"}},o=e[n]||e.info,c=s.duration??this.options.duration,i=s.position??this.options.position;this.createContainer(i);const r=document.createElement("div");r.className=`my-toast ${o.class}`,r.innerHTML=`\n        ${o.icon}\n        <div class="toast-content">${t}</div>\n        <span class="close-toast">×</span>\n        <div class="toast-progress-bar"></div>\n      `;return r.querySelector(".close-toast").addEventListener("click",(()=>this.remove(r))),c>0&&(r.style.setProperty("--progress-duration",`${c}ms`),setTimeout((()=>{r.parentNode&&this.remove(r)}),c)),i.includes("bottom")?this.container.appendChild(r):this.container.insertBefore(r,this.container.firstChild),this.toastCount++,r},remove:function(t){t.classList.add("toastjs-fade-out"),setTimeout((()=>{t.parentNode&&(t.remove(),this.toastCount--)}),1e4)},removeOldest:function(){const t=this.container.querySelector(".my-toast");t&&this.remove(t)},info:function(t,n){return this.show(t,"info",n)},success:function(t,n){return this.show(t,"success",n)},warning:function(t,n){return this.show(t,"warning",n)},error:function(t,n){return this.show(t,"error",n)}};const s=new n,e={create:function(t){return new n(t)},show:function(t,n,e){return s.show(t,n,e)},info:function(t,n){return s.info(t,n)},success:function(t,n){return s.success(t,n)},warning:function(t,n){return s.warning(t,n)},error:function(t,n){return s.error(t,n)}};"undefined"!=typeof module&&module.exports?module.exports=e:"function"==typeof define&&define.amd?define((function(){return e})):(t.showToast=e,t.ToastJS=n)}("undefined"!=typeof window?window:this);