14 lines
6.5 KiB
JavaScript
14 lines
6.5 KiB
JavaScript
!function(t,s){"object"==typeof exports&&"object"==typeof module?module.exports=s():"function"==typeof define&&define.amd?define([],s):"object"==typeof exports?exports.FuiToast=s():t.FuiToast=s()}(this,function(){return function(){let t=({title:t,icon:s,isClose:i})=>`
|
|
<div class="fui-toast-box${s?" iconCss":""}${!t&&i?" custom2":""}">
|
|
${i||t?`<div class="fui-toast-head">
|
|
${t?`<h3 class="fui-toast-title">${t}</h3>`:""}
|
|
${i?'<div class="fui-toast-close"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256 438.6 425.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0L224 210.7 393.4 41.4z"/></svg></div>':""}
|
|
</div>`:""}
|
|
|
|
${s?`<div class="fui-toast-icon">${s}</div>`:""}
|
|
<div class="fui-toast-body">
|
|
</div>
|
|
</div>
|
|
`,s={success:{className:"fui-toast-success",icon:'<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>'},error:{className:"fui-toast-error",icon:'<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"></path></svg>'},info:{className:"fui-toast-info",icon:'<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z"></path></svg>'},warning:{className:"fui-toast-warning",icon:'<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm24-384v24V264v24H232V264 152 128h48zM232 368V320h48v48H232z"></path></svg>'},loading:{icon:`
|
|
<div class="fui-loading-spinner"></div>
|
|
`}},i=t=>Object.prototype.toString.call(t).includes("Element"),e=t=>"function"==typeof t,o=t=>"string"==typeof t&&/<\/?[a-z][\s\S]*>/i.test(t),a=t=>{let s=new DOMParser().parseFromString(t,"text/xml").firstElementChild;return s},n=(t,s)=>e(t)?t(s):t;class r{#a;#b=[];#c;#d=[];#e=new Map;#f=16;#g={duration:3e3};set options(t){this.#g={...this.#g,...t}}addToast(t){let s={...this.#g,...t};this.#b.unshift(s);let i=this.#h(s);return this.#a||(this.#a=document.getElementById("fui-toast"),document.documentElement.style.setProperty("--fui-toast-spacing",`${this.#f}px`)),this.#a?.prepend(i),this.#i(),this.#j(),this.#k(),this}#h=s=>{let i=document.createElement("div");if(i.className=`fui-toast top-eff-show ${s.className??""}`,i.dataset.id=s.id,i.innerHTML=t({title:s.title,icon:s.icon,isClose:s.isClose}),s.style){let e=i.querySelector(".fui-toast-box");Object.assign(e.style,s.style)}if(this.#l(s,i),s.isClose){let o=i.querySelector(".fui-toast-close");o.onclick=()=>{this.closeToast(s.id)}}return i};#l=(t,s)=>{let e="function"==typeof t.message?t.message(t):t.message;if(e&&s){let o=s.querySelector(".fui-toast-body");o?.hasChildNodes()&&(o.innerHTML=""),i(e)?o?.append(e):o.innerHTML=e}return this};updateToast=t=>{this.#b=this.#b.map(s=>s.id===t.id?{...s,...t}:s);let s=this.#m(t.id);s.className=`fui-toast top-eff-show ${t.className??""}`;let i=document.createElement("div");i.className="fui-toast-icon",i.style.animationDelay="0s";let e=t.icon;o(e)&&(e=a(e)),e&&i.append(e),s?.querySelector(".fui-toast-icon")?.replaceWith(i),t.title&&(s.querySelector(".fui-toast-title").innerHTML=t.title),this.#l(t,s),this.#j()};#m=t=>{let s=this.#a?.querySelector(`[data-id="${t}"]`);return s};#i=()=>{let t=0;return this.#b.forEach((s,i)=>{let e=this.#m(s.id);e?.setAttribute("style",`transform: translateY(${i*this.#f+t}px)`),t+=e?.scrollHeight||0}),this};checkToastExists=t=>this.#b.some(s=>s.id===t);closeToast=t=>(this.dismiss(t),this.#b=this.#b.filter(s=>s.id!==t),this.#i(),this);#j=t=>{let s=0!==this.#d.length;if(s&&(this.#d.forEach(t=>t&&clearTimeout(t)),this.#d=[]),t)return this;let i=Date.now(),e=this.#b.map(t=>{if(t.duration===1/0)return null;let s=(t.duration||0)+t.pauseDuration-(i-t.createdAt);return s<0?(this.dismiss(t.id),null):setTimeout(()=>this.dismiss(t.id),s)});return this.#d=e,this};#k=()=>(this.#a.onmouseenter=this.#n,this.#a.onmouseleave=this.#o,this);#n=()=>{let t=Date.now();return this.#c=t,this.#j(this.#c),this};#o=()=>{let t=Date.now(),s=t-(this.#c||0);return this.#b=this.#b.map(t=>({...t,pauseDuration:t.pauseDuration+s})),this.#c=void 0,this.#j(this.#c),this};dismiss=t=>{let s=this.#m(t);return s&&(s.classList.add("top-eff-hidden"),this.#p(t)),this};#p=t=>{if(this.#e.has(t))return this;let s=setTimeout(()=>{this.#e.delete(t),this.#q(t)},450);return this.#e.set(t,s),this};#r=t=>{let s=this.#e.get(t);return s&&(clearTimeout(s),this.#e.delete(t)),this};#q=t=>{let s=this.#m(t),i=this.#b,e=[],o=!1;return s&&(i.forEach(s=>{s.id!==t?e.push(s):o=!0}),this.#b=e,o&&this.#i(),this.#a?.removeChild(s)),this}}let l=new r,h=(t,s,i)=>({message:t,type:s,createdAt:Date.now(),pauseDuration:0,...i,id:i?.id||function t(){function s(){return((1+Math.random())*65536||0).toString(16).substring(1)}return`${s()+s()}-${s()}-${s()}-${s()}-${s()}${s()}${s()}${Date.now()}`}()}),u=t=>(i,e)=>{let o=e,a=s[t];a&&(o={...e||{},icon:e?.icon||a.icon,className:e?.className||a.className});let n=h(i,t,o);return l.checkToastExists(n.id)?l.updateToast(n):l.addToast(n),n.id},c=(t,s)=>u("blank")(t,s);return c.success=u("success"),c.error=u("error"),c.info=u("info"),c.warning=u("warning"),c.loading=u("loading"),c.close=t=>l.closeToast(t),c.promise=(t,s,i)=>{let e=c.loading(s.loading,{duration:1/0,...i,...i?.loading});return t.then(t=>(c.success(n(s.success,t),{id:e,duration:3e3,...i,...i?.success}),t)).catch(t=>{c.error(n(s.error,t),{id:e,duration:3e3,...i,...i?.error})}),t},c.configs=t=>(l.options=t,t),c}()}); |