@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
3 lines (2 loc) • 3.13 kB
JavaScript
"use strict";class t{constructor(t,s="success",e=null){this.data=t,this.type=s,this.time=e,this.closing=!1,this.icons={success:' <i class="uss-icon uss-icon--xl ri-checkbox-circle-line"></i>',info:' <i class="uss-icon uss-icon--xl ri-information-line"></i>',warning:' <i class="uss-icon uss-icon--xl ri-alert-line"></i>',error:' <i class="uss-icon uss-icon--xl ri-information-line"></i>'},this.selectedIcon=this.icons[s],this.toastContainer=null,this.getOrCreateToastContainer(),this.toastElement=this.createAndConfigureToastElement(),this.stoppedTimer=!1,this.toastContainer.addEventListener("mouseenter",(()=>{this.stoppedTimer=!0})),this.toastContainer.addEventListener("mouseleave",(()=>{this.stoppedTimer=!1}))}setupTimer(){const t=setInterval((()=>{this.stoppedTimer||(this.time-=100,this.time<=0&&(clearInterval(t),this.closeToast()))}),100)}getOrCreateToastContainer(){this.toastContainer=document.querySelector(".uss-toast-container"),this.toastContainer||(this.toastContainer=document.createElement("div"),this.toastContainer.className="uss-toast-container",document.body.appendChild(this.toastContainer))}createAndConfigureToastElement(){const t=document.createElement("div");t.className=`uss-toast uss-toast--${this.type}`,t.innerHTML=`\n ${this.selectedIcon}\n <div class="uss-toast__content">\n <div class="uss-h6 ">${this.data.title}</div>\n ${this.data.description?`<p class="mb-12 pt-4">${this.data.description}</p>`:""}\n ${this.data.action?`<button class="uss-btn uss-btn--tertiary">${this.data.action.label}</button>`:""}\n \n </div>\n `;const s=t.querySelector("button");s&&s.addEventListener("click",this.data.action.fn);const e=document.createElement("button");return e.className="uss-toast__close-btn",e.innerHTML='<i class="uss-icon uss-icon--md ri-close-line" style="color: var(--text-strong)"></i>',e.onclick=()=>this.closeToast(),t.appendChild(e),t}openToast(){this.toastContainer.prepend(this.toastElement);const t=this.toastElement.offsetHeight+20;this.toastContainer.style.transition="transform 0ms ease",this.toastContainer.style.transform=`translateY(${t}px)`,setTimeout((()=>{this.toastContainer.style.transition="transform 100ms ease",this.toastContainer.style.transform="translateY(0px)",this.time&&this.setupTimer()}),0)}async closeToast(){this.closing||(this.stoppedTimer=!0,this.closing=!0,this.toastElement.style.transition="all 400ms ease",this.toastElement.style.scale="0.01",this.toastElement.style.transform="transformY(1000px)",this.toastElement.style.height=`${this.toastElement.offsetHeight}px`,this.toastElement.style.margin="0px",await this.animateHeightReduction(100),setTimeout((()=>{this.toastElement.remove(),this.closing=!1}),250))}async animateHeightReduction(t){const s=parseInt(this.toastElement.style.height,10),e=performance.now(),i=n=>{const o=(n-e)/t;if(o<1){const t=Math.max(s*(1-o),0);this.toastElement.style.height=`${t}px`,requestAnimationFrame(i)}else this.toastElement.style.height="0px"};requestAnimationFrame(i)}static show(s,e,i){new t(s,e,i).openToast()}}exports.Toast=t;
//# sourceMappingURL=Toast.js.map