bulma-toast - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/bulma-toast.cjs.js

 /*!
- * bulma-toast 1.2.0 
+ * bulma-toast 1.3.0 
  * (c) 2018-present @rfoel <[e-mail]> 
  * Released under the MIT License.
  */
-'use strict';Object.defineProperty(exports,'__esModule',{value:!0});const defaults={message:'Your message here',duration:2e3,position:'top-right',closeOnClick:!0,opacity:.8};let initialized=!1,containers={},positions={};function init(){containers={noticesTopLeft:document.createElement('div'),noticesTopRight:document.createElement('div'),noticesBottomLeft:document.createElement('div'),noticesBottomRight:document.createElement('div'),noticesTopCenter:document.createElement('div'),noticesBottomCenter:document.createElement('div'),noticesCenter:document.createElement('div')};containers.noticesTopLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;top:0;text-align:left;align-items:flex-start;`),containers.noticesTopRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;top:0;text-align:right;align-items:flex-end;`),containers.noticesBottomLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;bottom:0;text-align:left;align-items:flex-start;`),containers.noticesBottomRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;bottom:0;text-align:right;align-items:flex-end;`),containers.noticesTopCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesBottomCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}bottom:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(containers).forEach(a=>document.body.appendChild(containers[a])),positions={"top-left":containers.noticesTopLeft,"top-right":containers.noticesTopRight,"top-center":containers.noticesTopCenter,"bottom-left":containers.noticesBottomLeft,"bottom-right":containers.noticesBottomRight,"bottom-center":containers.noticesBottomCenter,center:containers.noticesCenter},initialized=!0}function toast(a){initialized||init();let b=Object.assign({},defaults,a);const c=createToast(b),d=positions[b.position]||positions[defaults.position];d.appendChild(c)}function createToast(a){const b=document.createElement('div');let c=`width:auto;pointer-events:auto;display:inline-flex;opacity:${a.opacity};`,d=['notification'];if(a.type&&d.push(a.type),b.classList=d.join(' '),a.dismissible){let a=document.createElement('button');a.className='delete',a.addEventListener('click',()=>{b.remove()}),b.insertAdjacentElement('afterbegin',a)}else c+='padding: 1.25rem 1.5rem';a.closeOnClick&&b.addEventListener('click',()=>{b.remove()}),b.setAttribute('style',c),b.insertAdjacentText('beforeend',a.message);const e=new Timer(()=>{b.remove()},a.duration);return a.pauseOnHover&&(b.addEventListener('mouseover',()=>{e.pause()}),b.addEventListener('mouseout',()=>{e.resume()})),b}function Timer(a,b){let c,d,e=b;this.pause=function(){window.clearTimeout(c),e-=new Date-d},this.resume=function(){d=new Date,window.clearTimeout(c),c=window.setTimeout(a,e)},this.resume()}exports.toast=toast;
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0});const defaults={message:'Your message here',duration:2e3,position:'top-right',closeOnClick:!0,opacity:1};let initialized=!1,containers={},positions={};function init(){containers={noticesTopLeft:document.createElement('div'),noticesTopRight:document.createElement('div'),noticesBottomLeft:document.createElement('div'),noticesBottomRight:document.createElement('div'),noticesTopCenter:document.createElement('div'),noticesBottomCenter:document.createElement('div'),noticesCenter:document.createElement('div')};containers.noticesTopLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;top:0;text-align:left;align-items:flex-start;`),containers.noticesTopRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;top:0;text-align:right;align-items:flex-end;`),containers.noticesBottomLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;bottom:0;text-align:left;align-items:flex-start;`),containers.noticesBottomRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;bottom:0;text-align:right;align-items:flex-end;`),containers.noticesTopCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesBottomCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}bottom:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(containers).forEach(a=>document.body.appendChild(containers[a])),positions={"top-left":containers.noticesTopLeft,"top-right":containers.noticesTopRight,"top-center":containers.noticesTopCenter,"bottom-left":containers.noticesBottomLeft,"bottom-right":containers.noticesBottomRight,"bottom-center":containers.noticesBottomCenter,center:containers.noticesCenter},initialized=!0}function toast(a){initialized||init();let b=Object.assign({},defaults,a);const c=new Toast(b),d=positions[b.position]||positions[defaults.position];d.appendChild(c.element)}class Toast{constructor(a){this.element=document.createElement('div'),this.opacity=a.opacity,this.type=a.type,this.animate=a.animate,this.dismissible=a.dismissible,this.closeOnClick=a.closeOnClick,this.message=a.message,this.duration=a.duration,this.pauseOnHover=a.pauseOnHover;let b=`width:auto;pointer-events:auto;display:inline-flex;opacity:${this.opacity};`,c=['notification'];if(this.type&&c.push(this.type),this.animate&&this.animate.in&&(c.push(`animated ${this.animate.in}`),this.onAnimationEnd(()=>this.element.classList.remove(this.animate.in))),this.element.classList=c.join(' '),this.dismissible){let a=document.createElement('button');a.className='delete',a.addEventListener('click',()=>{this.destroy()}),this.element.insertAdjacentElement('afterbegin',a)}else b+='padding: 1.25rem 1.5rem';this.closeOnClick&&this.element.addEventListener('click',()=>{this.destroy()}),this.element.setAttribute('style',b),this.element.insertAdjacentText('beforeend',this.message);const d=new Timer(()=>{this.destroy()},this.duration);this.pauseOnHover&&(this.element.addEventListener('mouseover',()=>{d.pause()}),this.element.addEventListener('mouseout',()=>{d.resume()}))}destroy(){this.animate&&this.animate.out?(this.element.classList.add(this.animate.out),this.onAnimationEnd(()=>this.element.remove())):this.element.remove()}onAnimationEnd(a=()=>{}){const b={animation:'animationend',OAnimation:'oAnimationEnd',MozAnimation:'mozAnimationEnd',WebkitAnimation:'webkitAnimationEnd'};for(const c in b)if(this.element.style[c]!==void 0){this.element.addEventListener(b[c],()=>a());break}}}class Timer{constructor(a,b){this.timer,this.start,this.remaining=b,this.callback=a,this.resume()}pause(){window.clearTimeout(this.timer),this.remaining-=new Date-this.start}resume(){this.start=new Date,window.clearTimeout(this.timer),this.timer=window.setTimeout(this.callback,this.remaining)}}exports.toast=toast;

dist/bulma-toast.esm.js

 /*!
- * bulma-toast 1.2.0 
+ * bulma-toast 1.3.0 
  * (c) 2018-present @rfoel <[e-mail]> 
  * Released under the MIT License.
  */
-const defaults={message:"Your message here",duration:2e3,position:"top-right",closeOnClick:!0,opacity:.8};let initialized=!1,containers={},positions={};function init(){containers={noticesTopLeft:document.createElement("div"),noticesTopRight:document.createElement("div"),noticesBottomLeft:document.createElement("div"),noticesBottomRight:document.createElement("div"),noticesTopCenter:document.createElement("div"),noticesBottomCenter:document.createElement("div"),noticesCenter:document.createElement("div")};containers.noticesTopLeft.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}left:0;top:0;text-align:left;align-items:flex-start;`),containers.noticesTopRight.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}right:0;top:0;text-align:right;align-items:flex-end;`),containers.noticesBottomLeft.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}left:0;bottom:0;text-align:left;align-items:flex-start;`),containers.noticesBottomRight.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}right:0;bottom:0;text-align:right;align-items:flex-end;`),containers.noticesTopCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}top:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesBottomCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}bottom:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(containers).forEach(a=>document.body.appendChild(containers[a])),positions={"top-left":containers.noticesTopLeft,"top-right":containers.noticesTopRight,"top-center":containers.noticesTopCenter,"bottom-left":containers.noticesBottomLeft,"bottom-right":containers.noticesBottomRight,"bottom-center":containers.noticesBottomCenter,center:containers.noticesCenter},initialized=!0}function toast(a){initialized||init();let b=Object.assign({},defaults,a);const c=createToast(b),d=positions[b.position]||positions[defaults.position];d.appendChild(c)}function createToast(a){const b=document.createElement("div");let c=`width:auto;pointer-events:auto;display:inline-flex;opacity:${a.opacity};`,d=["notification"];if(a.type&&d.push(a.type),b.classList=d.join(" "),a.dismissible){let a=document.createElement("button");a.className="delete",a.addEventListener("click",()=>{b.remove()}),b.insertAdjacentElement("afterbegin",a)}else c+="padding: 1.25rem 1.5rem";a.closeOnClick&&b.addEventListener("click",()=>{b.remove()}),b.setAttribute("style",c),b.insertAdjacentText("beforeend",a.message);const e=new Timer(()=>{b.remove()},a.duration);return a.pauseOnHover&&(b.addEventListener("mouseover",()=>{e.pause()}),b.addEventListener("mouseout",()=>{e.resume()})),b}function Timer(a,b){let c,d,e=b;this.pause=function(){window.clearTimeout(c),e-=new Date-d},this.resume=function(){d=new Date,window.clearTimeout(c),c=window.setTimeout(a,e)},this.resume()}export{toast};
+const defaults={message:"Your message here",duration:2e3,position:"top-right",closeOnClick:!0,opacity:1};let initialized=!1,containers={},positions={};function init(){containers={noticesTopLeft:document.createElement("div"),noticesTopRight:document.createElement("div"),noticesBottomLeft:document.createElement("div"),noticesBottomRight:document.createElement("div"),noticesTopCenter:document.createElement("div"),noticesBottomCenter:document.createElement("div"),noticesCenter:document.createElement("div")};containers.noticesTopLeft.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}left:0;top:0;text-align:left;align-items:flex-start;`),containers.noticesTopRight.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}right:0;top:0;text-align:right;align-items:flex-end;`),containers.noticesBottomLeft.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}left:0;bottom:0;text-align:left;align-items:flex-start;`),containers.noticesBottomRight.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}right:0;bottom:0;text-align:right;align-items:flex-end;`),containers.noticesTopCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}top:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesBottomCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}bottom:0;left:0;right:0;text-align:center;align-items:center;`),containers.noticesCenter.setAttribute("style",`${"width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;"}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(containers).forEach(a=>document.body.appendChild(containers[a])),positions={"top-left":containers.noticesTopLeft,"top-right":containers.noticesTopRight,"top-center":containers.noticesTopCenter,"bottom-left":containers.noticesBottomLeft,"bottom-right":containers.noticesBottomRight,"bottom-center":containers.noticesBottomCenter,center:containers.noticesCenter},initialized=!0}function toast(a){initialized||init();let b=Object.assign({},defaults,a);const c=new Toast(b),d=positions[b.position]||positions[defaults.position];d.appendChild(c.element)}class Toast{constructor(a){this.element=document.createElement("div"),this.opacity=a.opacity,this.type=a.type,this.animate=a.animate,this.dismissible=a.dismissible,this.closeOnClick=a.closeOnClick,this.message=a.message,this.duration=a.duration,this.pauseOnHover=a.pauseOnHover;let b=`width:auto;pointer-events:auto;display:inline-flex;opacity:${this.opacity};`,c=["notification"];if(this.type&&c.push(this.type),this.animate&&this.animate.in&&(c.push(`animated ${this.animate.in}`),this.onAnimationEnd(()=>this.element.classList.remove(this.animate.in))),this.element.classList=c.join(" "),this.dismissible){let a=document.createElement("button");a.className="delete",a.addEventListener("click",()=>{this.destroy()}),this.element.insertAdjacentElement("afterbegin",a)}else b+="padding: 1.25rem 1.5rem";this.closeOnClick&&this.element.addEventListener("click",()=>{this.destroy()}),this.element.setAttribute("style",b),this.element.insertAdjacentText("beforeend",this.message);const d=new Timer(()=>{this.destroy()},this.duration);this.pauseOnHover&&(this.element.addEventListener("mouseover",()=>{d.pause()}),this.element.addEventListener("mouseout",()=>{d.resume()}))}destroy(){this.animate&&this.animate.out?(this.element.classList.add(this.animate.out),this.onAnimationEnd(()=>this.element.remove())):this.element.remove()}onAnimationEnd(a=()=>{}){const b={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"mozAnimationEnd",WebkitAnimation:"webkitAnimationEnd"};for(const c in b)if(this.element.style[c]!==void 0){this.element.addEventListener(b[c],()=>a());break}}}class Timer{constructor(a,b){this.timer,this.start,this.remaining=b,this.callback=a,this.resume()}pause(){window.clearTimeout(this.timer),this.remaining-=new Date-this.start}resume(){this.start=new Date,window.clearTimeout(this.timer),this.timer=window.setTimeout(this.callback,this.remaining)}}export{toast};

dist/bulma-toast.min.js

 /*!
- * bulma-toast 1.2.0 
+ * bulma-toast 1.3.0 
  * (c) 2018-present @rfoel <[e-mail]> 
  * Released under the MIT License.
  */
-(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.bulmaToast={})})(this,function(a){'use strict';function b(){h={noticesTopLeft:document.createElement('div'),noticesTopRight:document.createElement('div'),noticesBottomLeft:document.createElement('div'),noticesBottomRight:document.createElement('div'),noticesTopCenter:document.createElement('div'),noticesBottomCenter:document.createElement('div'),noticesCenter:document.createElement('div')};h.noticesTopLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;top:0;text-align:left;align-items:flex-start;`),h.noticesTopRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;top:0;text-align:right;align-items:flex-end;`),h.noticesBottomLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;bottom:0;text-align:left;align-items:flex-start;`),h.noticesBottomRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;bottom:0;text-align:right;align-items:flex-end;`),h.noticesTopCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;text-align:center;align-items:center;`),h.noticesBottomCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}bottom:0;left:0;right:0;text-align:center;align-items:center;`),h.noticesCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(h).forEach(a=>document.body.appendChild(h[a])),i={"top-left":h.noticesTopLeft,"top-right":h.noticesTopRight,"top-center":h.noticesTopCenter,"bottom-left":h.noticesBottomLeft,"bottom-right":h.noticesBottomRight,"bottom-center":h.noticesBottomCenter,center:h.noticesCenter},g=!0}function c(a){g||b();let c=Object.assign({},f,a);const e=d(c),h=i[c.position]||i[f.position];h.appendChild(e)}function d(a){const b=document.createElement('div');let c=`width:auto;pointer-events:auto;display:inline-flex;opacity:${a.opacity};`,d=['notification'];if(a.type&&d.push(a.type),b.classList=d.join(' '),a.dismissible){let a=document.createElement('button');a.className='delete',a.addEventListener('click',()=>{b.remove()}),b.insertAdjacentElement('afterbegin',a)}else c+='padding: 1.25rem 1.5rem';a.closeOnClick&&b.addEventListener('click',()=>{b.remove()}),b.setAttribute('style',c),b.insertAdjacentText('beforeend',a.message);const f=new e(()=>{b.remove()},a.duration);return a.pauseOnHover&&(b.addEventListener('mouseover',()=>{f.pause()}),b.addEventListener('mouseout',()=>{f.resume()})),b}function e(a,b){let c,d,e=b;this.pause=function(){window.clearTimeout(c),e-=new Date-d},this.resume=function(){d=new Date,window.clearTimeout(c),c=window.setTimeout(a,e)},this.resume()}const f={message:'Your message here',duration:2e3,position:'top-right',closeOnClick:!0,opacity:.8};let g=!1,h={},i={};a.toast=c,Object.defineProperty(a,'__esModule',{value:!0})});
+(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.bulmaToast={})})(this,function(a){'use strict';function b(){f={noticesTopLeft:document.createElement('div'),noticesTopRight:document.createElement('div'),noticesBottomLeft:document.createElement('div'),noticesBottomRight:document.createElement('div'),noticesTopCenter:document.createElement('div'),noticesBottomCenter:document.createElement('div'),noticesCenter:document.createElement('div')};f.noticesTopLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;top:0;text-align:left;align-items:flex-start;`),f.noticesTopRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;top:0;text-align:right;align-items:flex-end;`),f.noticesBottomLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;bottom:0;text-align:left;align-items:flex-start;`),f.noticesBottomRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;bottom:0;text-align:right;align-items:flex-end;`),f.noticesTopCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;text-align:center;align-items:center;`),f.noticesBottomCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}bottom:0;left:0;right:0;text-align:center;align-items:center;`),f.noticesCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(f).forEach(a=>document.body.appendChild(f[a])),g={"top-left":f.noticesTopLeft,"top-right":f.noticesTopRight,"top-center":f.noticesTopCenter,"bottom-left":f.noticesBottomLeft,"bottom-right":f.noticesBottomRight,"bottom-center":f.noticesBottomCenter,center:f.noticesCenter},e=!0}function c(a){e||b();let c=Object.assign({},d,a);const f=new h(c),i=g[c.position]||g[d.position];i.appendChild(f.element)}const d={message:'Your message here',duration:2e3,position:'top-right',closeOnClick:!0,opacity:1};let e=!1,f={},g={};class h{constructor(a){this.element=document.createElement('div'),this.opacity=a.opacity,this.type=a.type,this.animate=a.animate,this.dismissible=a.dismissible,this.closeOnClick=a.closeOnClick,this.message=a.message,this.duration=a.duration,this.pauseOnHover=a.pauseOnHover;let b=`width:auto;pointer-events:auto;display:inline-flex;opacity:${this.opacity};`,c=['notification'];if(this.type&&c.push(this.type),this.animate&&this.animate.in&&(c.push(`animated ${this.animate.in}`),this.onAnimationEnd(()=>this.element.classList.remove(this.animate.in))),this.element.classList=c.join(' '),this.dismissible){let a=document.createElement('button');a.className='delete',a.addEventListener('click',()=>{this.destroy()}),this.element.insertAdjacentElement('afterbegin',a)}else b+='padding: 1.25rem 1.5rem';this.closeOnClick&&this.element.addEventListener('click',()=>{this.destroy()}),this.element.setAttribute('style',b),this.element.insertAdjacentText('beforeend',this.message);const d=new i(()=>{this.destroy()},this.duration);this.pauseOnHover&&(this.element.addEventListener('mouseover',()=>{d.pause()}),this.element.addEventListener('mouseout',()=>{d.resume()}))}destroy(){this.animate&&this.animate.out?(this.element.classList.add(this.animate.out),this.onAnimationEnd(()=>this.element.remove())):this.element.remove()}onAnimationEnd(a=()=>{}){const b={animation:'animationend',OAnimation:'oAnimationEnd',MozAnimation:'mozAnimationEnd',WebkitAnimation:'webkitAnimationEnd'};for(const c in b)if(this.element.style[c]!==void 0){this.element.addEventListener(b[c],()=>a());break}}}class i{constructor(a,b){this.timer,this.start,this.remaining=b,this.callback=a,this.resume()}pause(){window.clearTimeout(this.timer),this.remaining-=new Date-this.start}resume(){this.start=new Date,window.clearTimeout(this.timer),this.timer=window.setTimeout(this.callback,this.remaining)}}a.toast=c,Object.defineProperty(a,'__esModule',{value:!0})});

package.json

 {
   "name": "bulma-toast",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Bulma's pure JavaScript extension to display toasts",
@@ -10,3 +10,4 @@ "main": "dist/bulma-toast.cjs.js",
     "dev": "rollup -c -w",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "jest"
   },
@@ -30,2 +31,3 @@ "repository": {
   "devDependencies": {
+    "jest": "^23.5.0",
     "rollup": "^0.63.5",
@@ -32,0 +34,0 @@ "rollup-plugin-babel-minify": "^5.0.0"

README.md

 # bulma-toast
 
 [![npm version](https://badge.fury.io/js/bulma-toast.svg)](https://badge.fury.io/js/bulma-toast)
+[![Build Status](https://travis-ci.org/rfoel/bulma-toast.svg?branch=master)](https://travis-ci.org/rfoel/bulma-toast)
 
@@ -9,3 +10,3 @@ Bulma's pure JavaScript extension to display toasts. Basically a Bulma's [notification](https://bulma.io/documentation/elements/notification) implemented as a toast plugin.
 
-![Screenshot](https://raw.githubusercontent.com/rfoel/bulma-toast/master/screenshot.png)
+![Bulma Toast](https://raw.githubusercontent.com/rfoel/bulma-toast/master/bulma-toast.gif)
 
@@ -23,3 +24,4 @@ ## Options
 - `closeOnClick`: Dismisses the notification when clicked. Default is `true`.
-- `opacity`: The notification's container opacity. Default is `0.8`.
+- `opacity`: The notification's container opacity. Default is `1`.
+- `animate`: [See here](#Animate.css). Default is no animations.
 
@@ -31,3 +33,3 @@ ## Install
 ```
-npm install --save bulma-toast
+  npm install --save bulma-toast
 ```
@@ -39,11 +41,11 @@
 
-    ```html
-    <script src="bulma-toast.min.js"></script>
-    ```
+```html
+  <script src="bulma-toast.min.js"></script>
+```
 
 2.  Use bulma-toast to display a toast
-    ```js
-    bulmaToast.toast({ message: "Hello There" });
-    bulmaToast.toast({ message: "General Kenobi", type: "is-danger" });
-    ```
+```js
+  bulmaToast.toast({ message: "Hello There" });
+  bulmaToast.toast({ message: "General Kenobi", type: "is-danger" });
+```
 
@@ -53,13 +55,14 @@ ## ES Modules
 ```js
-// Import the toast function
-import { toast } from "bulma-toast";
-// Or use
-// import { toast as superToast } from 'bulma-toast'
-// to rename your import
+  // Import the toast function
+  import { toast } from "bulma-toast";
+  // Or use
+  // import { toast as superToast } from 'bulma-toast'
+  // to rename your import
 
-toast({
-  message: "Hello There",
-  type: "is-success",
-  dismissible: true
-});
+  toast({
+    message: "Hello There",
+    type: "is-success",
+    dismissible: true,
+    animate: { in: "fadeIn", out: "fadeOut" }
+  });
 ```
@@ -72,9 +75,37 @@
 ```js
-{
-  message: 'Your message here',
-  duration: 2000,
-  position: 'top-right',
-}
+  {
+    message: "Your message here",
+    duration: 2000,
+    position: "top-right",
+    closeOnClick: true,
+    opacity: 1
+  }
 ```
 
+## Animate.css
+
+You MUST include [animate.css](https://daneden.github.io/animate.css/) on your document's `<head>`
+
+```html
+  <head>
+    <link rel="stylesheet" href="animate.min.css">
+    <!-- or -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
+    <!-- or -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+  </head>
+```
+
+Bulma Toast supports [animate.css](https://daneden.github.io/animate.css/) (and maybe others?). Accepts a object with `in` and `out` with css classes to add animations. Using Animate.css you would pass a object like this: 
+
+```js
+  {
+    message: "I'm animated! Yay!",
+    duration: 2000,
+    position: "top-right",
+    opacity: 1,
+    animate: { in: 'fadeIn', out: 'fadeOut' }
+  }
+```
+
 ## Contributing
@@ -81,0 +112,0 @@

src/index.js

@@ -6,3 +6,3 @@ const defaults = {
   closeOnClick: true,
-  opacity: 0.8
+  opacity: 1
 };
@@ -68,3 +68,3 @@
     "bottom-center": containers.noticesBottomCenter,
-    "center": containers.noticesCenter
+    center: containers.noticesCenter
   };
@@ -79,66 +79,108 @@
 
-  const toast = createToast(options);
+  const toast = new Toast(options);
   const container = positions[options.position] || positions[defaults.position];
 
-  container.appendChild(toast);
+  container.appendChild(toast.element);
 }
 
-function createToast(options) {
-  const toast = document.createElement("div");
-  let style = `width:auto;pointer-events:auto;display:inline-flex;opacity:${
-    options.opacity
-  };`;
-  let classes = ["notification"];
-  if (options.type) classes.push(options.type);
-  toast.classList = classes.join(" ");
-  if (options.dismissible) {
-    let dismissButton = document.createElement("button");
-    dismissButton.className = "delete";
-    dismissButton.addEventListener("click", () => {
-      toast.remove();
-    });
-    toast.insertAdjacentElement("afterbegin", dismissButton);
-  } else {
-    style += "padding: 1.25rem 1.5rem";
+class Toast {
+  constructor(options) {
+    this.element = document.createElement("div");
+    this.opacity = options.opacity;
+    this.type = options.type;
+    this.animate = options.animate;
+    this.dismissible = options.dismissible;
+    this.closeOnClick = options.closeOnClick;
+    this.message = options.message;
+    this.duration = options.duration;
+    this.pauseOnHover = options.pauseOnHover;
+
+    let style = `width:auto;pointer-events:auto;display:inline-flex;opacity:${
+      this.opacity
+    };`;
+    let classes = ["notification"];
+    if (this.type) classes.push(this.type);
+    if (this.animate && this.animate.in) {
+      classes.push(`animated ${this.animate.in}`);
+      this.onAnimationEnd(() => this.element.classList.remove(this.animate.in));
+    }
+    this.element.classList = classes.join(" ");
+    if (this.dismissible) {
+      let dismissButton = document.createElement("button");
+      dismissButton.className = "delete";
+      dismissButton.addEventListener("click", () => {
+        this.destroy();
+      });
+      this.element.insertAdjacentElement("afterbegin", dismissButton);
+    } else {
+      style += "padding: 1.25rem 1.5rem";
+    }
+    if (this.closeOnClick) {
+      this.element.addEventListener("click", () => {
+        this.destroy();
+      });
+    }
+    this.element.setAttribute("style", style);
+    this.element.insertAdjacentText("beforeend", this.message);
+
+    const timer = new Timer(() => {
+      this.destroy();
+    }, this.duration);
+
+    if (this.pauseOnHover) {
+      this.element.addEventListener("mouseover", () => {
+        timer.pause();
+      });
+      this.element.addEventListener("mouseout", () => {
+        timer.resume();
+      });
+    }
   }
-  if (options.closeOnClick) {
-    toast.addEventListener("click", () => {
-      toast.remove();
-    });
+
+  destroy() {
+    if (this.animate && this.animate.out) {
+      this.element.classList.add(this.animate.out);
+      this.onAnimationEnd(() => this.element.remove());
+    } else {
+      this.element.remove();
+    }
   }
-  toast.setAttribute("style", style);
-  toast.insertAdjacentText("beforeend", options.message);
 
-  const timer = new Timer(() => {
-    toast.remove();
-  }, options.duration);
+  onAnimationEnd(callback = () => {}) {
+    const animations = {
+      animation: "animationend",
+      OAnimation: "oAnimationEnd",
+      MozAnimation: "mozAnimationEnd",
+      WebkitAnimation: "webkitAnimationEnd"
+    };
 
-  if (options.pauseOnHover) {
-    toast.addEventListener("mouseover", () => {
-      timer.pause();
-    });
-    toast.addEventListener("mouseout", () => {
-      timer.resume();
-    });
+    for (const t in animations) {
+      if (this.element.style[t] !== undefined) {
+        this.element.addEventListener(animations[t], () => callback());
+        break;
+      }
+    }
   }
-  return toast;
 }
 
-function Timer(callback, delay) {
-  let timer,
-    start,
-    remaining = delay;
+class Timer {
+  constructor(callback, delay) {
+    this.timer;
+    this.start;
+    this.remaining = delay;
+    this.callback = callback;
 
-  this.pause = function() {
-    window.clearTimeout(timer);
-    remaining -= new Date() - start;
-  };
+    this.resume();
+  }
 
-  this.resume = function() {
-    start = new Date();
-    window.clearTimeout(timer);
-    timer = window.setTimeout(callback, remaining);
-  };
+  pause() {
+    window.clearTimeout(this.timer);
+    this.remaining -= new Date() - this.start;
+  }
 
-  this.resume();
+  resume() {
+    this.start = new Date();
+    window.clearTimeout(this.timer);
+    this.timer = window.setTimeout(this.callback, this.remaining);
+  }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25123

increased by27.48%

Lines of code

231

increased by26.92%

Number of lines in readme file

114

increased by37.35%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes