@alotool/toast
Version:
Elegant, responsive, flexible and lightweight notification plugin with no dependencies.
1 lines • 18 kB
JavaScript
!function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof exports?module.exports=e():t.iziToast=e()}("undefined"!=typeof global?global:window||this.window||this.global,function(t){"use strict";var e,l={},d="iziToast",c=(document.querySelector("body"),!!/Mobi/.test(navigator.userAgent)),a=/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor),r="undefined"!=typeof InstallTrigger,u="ontouchstart"in document.documentElement,p=["bottomRight","bottomLeft","bottomCenter","topRight","topLeft","topCenter","center"],m=568,g={},h={id:null,class:"",title:"",titleColor:"",titleSize:"",titleLineHeight:"",message:"",messageColor:"",messageSize:"",messageLineHeight:"",backgroundColor:"",theme:"light",color:"",icon:"",iconText:"",iconColor:"",iconUrl:null,image:"",imageWidth:50,maxWidth:null,zindex:null,layout:1,balloon:!(l.children={}),close:!0,closeOnEscape:!1,closeOnClick:!1,displayMode:0,position:"bottomRight",target:"",targetFirst:!0,timeout:5e3,rtl:!1,animateInside:!0,drag:!0,pauseOnHover:!0,resetOnHover:!1,progressBar:!0,progressBarColor:"",progressBarEasing:"linear",overlay:!1,overlayClose:!1,overlayColor:"rgba(0, 0, 0, 0.6)",transitionIn:"fadeInUp",transitionOut:"fadeOut",transitionInMobile:"fadeInUp",transitionOutMobile:"fadeOutDown",buttons:{},inputs:{},onOpening:function(){},onOpened:function(){},onClosing:function(){},onClosed:function(){}};"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)}),"function"!=typeof window.CustomEvent&&((e=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var o=document.createEvent("CustomEvent");return o.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),o}).prototype=window.Event.prototype,window.CustomEvent=e);function y(t,e,o){if("[object Object]"===Object.prototype.toString.call(t))for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.call(o,t[n],n,t);else if(t)for(var i=0,s=t.length;i<s;i++)e.call(o,t[i],i,t)}function f(o,n){var i={};return y(o,function(t,e){i[e]=o[e]}),y(n,function(t,e){i[e]=n[e]}),i}function v(t){var e=document.createDocumentFragment(),o=document.createElement("div");for(o.innerHTML=t;o.firstChild;)e.appendChild(o.firstChild);return e}var b={move:function(t,e,o,n){var i,s=180;0!==n&&(t.classList.add(d+"-dragged"),t.style.transform="translateX("+n+"px)",0<n?(i=(s-n)/s)<.3&&e.hide(f(o,{transitionOut:"fadeOutRight",transitionOutMobile:"fadeOutRight"}),t,"drag"):(i=(s+n)/s)<.3&&e.hide(f(o,{transitionOut:"fadeOutLeft",transitionOutMobile:"fadeOutLeft"}),t,"drag"),(t.style.opacity=i)<.3&&((a||r)&&(t.style.left=n+"px"),t.parentNode.style.opacity=.3,this.stopMoving(t,null)))},startMoving:function(e,o,n,t){t=t||window.event;var i=(u?t.touches[0]:t).clientX-e.style.transform.replace("px)","").replace("translateX(","");n.transitionIn&&e.classList.remove(n.transitionIn),n.transitionInMobile&&e.classList.remove(n.transitionInMobile),e.style.transition="",u?document.ontouchmove=function(t){t.preventDefault();t=(t=t||window.event).touches[0].clientX-i;b.move(e,o,n,t)}:document.onmousemove=function(t){t.preventDefault();t=(t=t||window.event).clientX-i;b.move(e,o,n,t)}},stopMoving:function(t,e){u?document.ontouchmove=function(){}:document.onmousemove=function(){},t.style.opacity="",t.style.transform="",t.classList.contains(d+"-dragged")&&(t.classList.remove(d+"-dragged"),t.style.transition="transform 0.4s ease, opacity 0.4s ease",setTimeout(function(){t.style.transition=""},400))}};return l.setSetting=function(t,e,o){l.children[t][e]=o},l.getSetting=function(t,e){return l.children[t][e]},l.destroy=function(){y(document.querySelectorAll("."+d+"-overlay"),function(t,e){t.remove()}),y(document.querySelectorAll("."+d+"-wrapper"),function(t,e){t.remove()}),y(document.querySelectorAll("."+d),function(t,e){t.remove()}),this.children={},document.removeEventListener(d+"-opened",{},!1),document.removeEventListener(d+"-opening",{},!1),document.removeEventListener(d+"-closing",{},!1),document.removeEventListener(d+"-closed",{},!1),document.removeEventListener("keyup",{},!1),g={}},l.settings=function(t){l.destroy(),h=f(h,(g=t)||{})},y({info:{color:"blue",icon:"ico-info"},success:{color:"green",icon:"ico-success"},warning:{color:"orange",icon:"ico-warning"},error:{color:"red",icon:"ico-error"},question:{color:"yellow",icon:"ico-question"}},function(e,t){l[t]=function(t){t=f(g,t||{}),t=f(e,t||{});this.show(t)}}),l.progress=function(t,e,o){var n=this,i=e.getAttribute("data-iziToast-ref"),s=f(this.children[i],t||{}),a=e.querySelector("."+d+"-progressbar div");return{start:function(){void 0===s.time.REMAINING&&(e.classList.remove(d+"-reseted"),null!==a&&(a.style.transition="width "+s.timeout+"ms "+s.progressBarEasing,a.style.width="0%"),s.time.START=(new Date).getTime(),s.time.END=s.time.START+s.timeout,s.time.TIMER=setTimeout(function(){clearTimeout(s.time.TIMER),e.classList.contains(d+"-closing")||(n.hide(s,e,"timeout"),"function"==typeof o&&o.apply(n))},s.timeout),n.setSetting(i,"time",s.time))},pause:function(){var t;void 0===s.time.START||e.classList.contains(d+"-paused")||e.classList.contains(d+"-reseted")||(e.classList.add(d+"-paused"),s.time.REMAINING=s.time.END-(new Date).getTime(),clearTimeout(s.time.TIMER),n.setSetting(i,"time",s.time),null!==a&&(t=window.getComputedStyle(a).getPropertyValue("width"),a.style.transition="none",a.style.width=t),"function"==typeof o&&setTimeout(function(){o.apply(n)},10))},resume:function(){void 0!==s.time.REMAINING?(e.classList.remove(d+"-paused"),null!==a&&(a.style.transition="width "+s.time.REMAINING+"ms "+s.progressBarEasing,a.style.width="0%"),s.time.END=(new Date).getTime()+s.time.REMAINING,s.time.TIMER=setTimeout(function(){clearTimeout(s.time.TIMER),e.classList.contains(d+"-closing")||(n.hide(s,e,"timeout"),"function"==typeof o&&o.apply(n))},s.time.REMAINING),n.setSetting(i,"time",s.time)):this.start()},reset:function(){clearTimeout(s.time.TIMER),delete s.time.REMAINING,n.setSetting(i,"time",s.time),e.classList.add(d+"-reseted"),e.classList.remove(d+"-paused"),null!==a&&(a.style.transition="none",a.style.width="100%"),"function"==typeof o&&setTimeout(function(){o.apply(n)},10)}}},l.hide=function(t,e,o){"object"!=typeof e&&(e=document.querySelector(e));var n,i=this,s=f(this.children[e.getAttribute("data-iziToast-ref")],t||{});s.closedBy=o||null,delete s.time.REMAINING,e.classList.add(d+"-closing"),null!==(n=document.querySelector("."+d+"-overlay"))&&(-1!==(t=(a=(a=n.getAttribute("data-iziToast-ref")).split(",")).indexOf(String(s.ref)))&&a.splice(t,1),n.setAttribute("data-iziToast-ref",a.join()),0===a.length&&(n.classList.remove("fadeIn"),n.classList.add("fadeOut"),setTimeout(function(){n.remove()},700))),s.transitionIn&&e.classList.remove(s.transitionIn),s.transitionInMobile&&e.classList.remove(s.transitionInMobile),c||window.innerWidth<=m?s.transitionOutMobile&&e.classList.add(s.transitionOutMobile):s.transitionOut&&e.classList.add(s.transitionOut);var a=e.parentNode.offsetHeight;e.parentNode.style.height=a+"px",e.style.pointerEvents="none",(!c||window.innerWidth>m)&&(e.parentNode.style.transitionDelay="0.2s");try{var r=new CustomEvent(d+"-closing",{detail:s,bubbles:!0,cancelable:!0});document.dispatchEvent(r)}catch(t){console.warn(t)}setTimeout(function(){e.parentNode.style.height="0px",e.parentNode.style.overflow="",setTimeout(function(){delete i.children[s.ref],e.parentNode.remove();try{var t=new CustomEvent(d+"-closed",{detail:s,bubbles:!0,cancelable:!0});document.dispatchEvent(t)}catch(t){console.warn(t)}void 0!==s.onClosed&&s.onClosed.apply(null,[s,e,o])},1e3)},200),void 0!==s.onClosing&&s.onClosing.apply(null,[s,e,o])},l.show=function(t){var n=this,i=f(g,t||{});if((i=f(h,i)).time={},null===i.id&&(i.id=(t=i.title+i.message+i.color,btoa(encodeURIComponent(t)).replace(/=/g,""))),1===i.displayMode||"once"==i.displayMode)try{if(0<document.querySelectorAll("."+d+"#"+i.id).length)return!1}catch(t){console.warn("["+d+"] Could not find an element with this selector: #"+i.id+". Try to set an valid id.")}if(2===i.displayMode||"replace"==i.displayMode)try{y(document.querySelectorAll("."+d+"#"+i.id),function(t,e){n.hide(i,t,"replaced")})}catch(t){console.warn("["+d+"] Could not find an element with this selector: #"+i.id+". Try to set an valid id.")}i.ref=(new Date).getTime()+Math.floor(1e7*Math.random()+1),l.children[i.ref]=i;var s,e,o,a={body:document.querySelector("body"),overlay:document.createElement("div"),toast:document.createElement("div"),toastBody:document.createElement("div"),toastTexts:document.createElement("div"),toastCapsule:document.createElement("div"),cover:document.createElement("div"),buttons:document.createElement("div"),inputs:document.createElement("div"),icon:i.iconUrl?document.createElement("img"):document.createElement("i"),wrapper:null};a.toast.setAttribute("data-iziToast-ref",i.ref),a.toast.appendChild(a.toastBody),a.toastCapsule.appendChild(a.toast),a.toast.classList.add(d),a.toast.classList.add(d+"-opening"),a.toastCapsule.classList.add(d+"-capsule"),a.toastBody.classList.add(d+"-body"),a.toastTexts.classList.add(d+"-texts"),c||window.innerWidth<=m?i.transitionInMobile&&a.toast.classList.add(i.transitionInMobile):i.transitionIn&&a.toast.classList.add(i.transitionIn),i.class&&(e=i.class.split(" "),y(e,function(t,e){a.toast.classList.add(t)})),i.id&&(a.toast.id=i.id),i.rtl&&(a.toast.classList.add(d+"-rtl"),a.toast.setAttribute("dir","rtl")),1<i.layout&&a.toast.classList.add(d+"-layout"+i.layout),i.balloon&&a.toast.classList.add(d+"-balloon"),i.maxWidth&&(isNaN(i.maxWidth)?a.toast.style.maxWidth=i.maxWidth:a.toast.style.maxWidth=i.maxWidth+"px"),""===i.theme&&"light"===i.theme||a.toast.classList.add(d+"-theme-"+i.theme),i.color&&("#"==(e=i.color).substring(0,1)||"rgb"==e.substring(0,3)||"hsl"==e.substring(0,3)?a.toast.style.background=i.color:a.toast.classList.add(d+"-color-"+i.color)),i.backgroundColor&&(a.toast.style.background=i.backgroundColor,i.balloon&&(a.toast.style.borderColor=i.backgroundColor)),i.image&&(a.cover.classList.add(d+"-cover"),a.cover.style.width=i.imageWidth+"px",!function(t){try{return btoa(atob(t))==t}catch(t){return!1}}(i.image.replace(/ /g,""))?a.cover.style.backgroundImage="url("+i.image+")":a.cover.style.backgroundImage="url(data:image/png;base64,"+i.image.replace(/ /g,"")+")",i.rtl?a.toastBody.style.marginRight=i.imageWidth+10+"px":a.toastBody.style.marginLeft=i.imageWidth+10+"px",a.toast.appendChild(a.cover)),i.close?(a.buttonClose=document.createElement("button"),a.buttonClose.type="button",a.buttonClose.classList.add(d+"-close"),a.buttonClose.addEventListener("click",function(t){t.target;n.hide(i,a.toast,"button")}),a.toast.appendChild(a.buttonClose)):i.rtl?a.toast.style.paddingLeft="18px":a.toast.style.paddingRight="18px",i.progressBar&&(a.progressBar=document.createElement("div"),a.progressBarDiv=document.createElement("div"),a.progressBar.classList.add(d+"-progressbar"),a.progressBarDiv.style.background=i.progressBarColor,a.progressBar.appendChild(a.progressBarDiv),a.toast.appendChild(a.progressBar)),i.timeout&&(i.pauseOnHover&&!i.resetOnHover&&(a.toast.addEventListener("mouseenter",function(t){n.progress(i,a.toast).pause()}),a.toast.addEventListener("mouseleave",function(t){n.progress(i,a.toast).resume()})),i.resetOnHover&&(a.toast.addEventListener("mouseenter",function(t){n.progress(i,a.toast).reset()}),a.toast.addEventListener("mouseleave",function(t){n.progress(i,a.toast).start()}))),i.iconUrl?(a.icon.setAttribute("class",d+"-icon"),a.icon.setAttribute("src",i.iconUrl)):i.icon&&(a.icon.setAttribute("class",d+"-icon "+i.icon),i.iconText&&a.icon.appendChild(document.createTextNode(i.iconText)),i.iconColor&&(a.icon.style.color=i.iconColor)),(i.icon||i.iconUrl)&&(i.rtl?a.toastBody.style.paddingRight="33px":a.toastBody.style.paddingLeft="33px",a.toastBody.appendChild(a.icon)),0<i.title.length&&(a.strong=document.createElement("strong"),a.strong.classList.add(d+"-title"),a.strong.appendChild(v(i.title)),a.toastTexts.appendChild(a.strong),i.titleColor&&(a.strong.style.color=i.titleColor),i.titleSize&&(isNaN(i.titleSize)?a.strong.style.fontSize=i.titleSize:a.strong.style.fontSize=i.titleSize+"px"),i.titleLineHeight&&(isNaN(i.titleSize)?a.strong.style.lineHeight=i.titleLineHeight:a.strong.style.lineHeight=i.titleLineHeight+"px")),0<i.message.length&&(a.p=document.createElement("p"),a.p.classList.add(d+"-message"),a.p.appendChild(v(i.message)),a.toastTexts.appendChild(a.p),i.messageColor&&(a.p.style.color=i.messageColor),i.messageSize&&(isNaN(i.titleSize)?a.p.style.fontSize=i.messageSize:a.p.style.fontSize=i.messageSize+"px"),i.messageLineHeight&&(isNaN(i.titleSize)?a.p.style.lineHeight=i.messageLineHeight:a.p.style.lineHeight=i.messageLineHeight+"px")),0<i.title.length&&0<i.message.length&&(i.rtl?a.strong.style.marginLeft="10px":2===i.layout||i.rtl||(a.strong.style.marginRight="10px")),a.toastBody.appendChild(a.toastTexts),0<i.inputs.length&&(a.inputs.classList.add(d+"-inputs"),y(i.inputs,function(e,t){a.inputs.appendChild(v(e[0])),(s=a.inputs.childNodes)[t].classList.add(d+"-inputs-child"),e[3]&&setTimeout(function(){s[t].focus()},300),s[t].addEventListener(e[1],function(t){return(0,e[2])(n,a.toast,this,t)})}),a.toastBody.appendChild(a.inputs)),0<i.buttons.length&&(a.buttons.classList.add(d+"-buttons"),y(i.buttons,function(e,t){a.buttons.appendChild(v(e[0]));var o=a.buttons.childNodes;o[t].classList.add(d+"-buttons-child"),e[2]&&setTimeout(function(){o[t].focus()},300),o[t].addEventListener("click",function(t){return t.preventDefault(),(0,e[1])(n,a.toast,this,t,s)})})),a.toastBody.appendChild(a.buttons),0<i.message.length&&(0<i.inputs.length||0<i.buttons.length)&&(a.p.style.marginBottom="0"),(0<i.inputs.length||0<i.buttons.length)&&(i.rtl?a.toastTexts.style.marginLeft="10px":a.toastTexts.style.marginRight="10px",0<i.inputs.length&&0<i.buttons.length&&(i.rtl?a.inputs.style.marginLeft="8px":a.inputs.style.marginRight="8px")),a.toastCapsule.style.visibility="hidden",setTimeout(function(){var t=a.toast.offsetHeight,e=a.toast.currentStyle||window.getComputedStyle(a.toast),o=(o=e.marginTop).split("px");o=parseInt(o[0]);e=(e=e.marginBottom).split("px");e=parseInt(e[0]),a.toastCapsule.style.visibility="",a.toastCapsule.style.height=t+e+o+"px",setTimeout(function(){a.toastCapsule.style.height="auto",i.target&&(a.toastCapsule.style.overflow="visible")},500),i.timeout&&n.progress(i,a.toast).start()},100),function(){var t=i.position;if(i.target)a.wrapper=document.querySelector(i.target),a.wrapper.classList.add(d+"-target"),i.targetFirst?a.wrapper.insertBefore(a.toastCapsule,a.wrapper.firstChild):a.wrapper.appendChild(a.toastCapsule);else{if(-1==p.indexOf(i.position))return console.warn("["+d+"] Incorrect position.\nIt can be › "+p);t=c||window.innerWidth<=m?"bottomLeft"==i.position||"bottomRight"==i.position||"bottomCenter"==i.position?d+"-wrapper-bottomCenter":"topLeft"==i.position||"topRight"==i.position||"topCenter"==i.position?d+"-wrapper-topCenter":d+"-wrapper-center":d+"-wrapper-"+t,a.wrapper=document.querySelector("."+d+"-wrapper."+t),a.wrapper||(a.wrapper=document.createElement("div"),a.wrapper.classList.add(d+"-wrapper"),a.wrapper.classList.add(t),document.body.appendChild(a.wrapper)),"topLeft"==i.position||"topCenter"==i.position||"topRight"==i.position?a.wrapper.insertBefore(a.toastCapsule,a.wrapper.firstChild):a.wrapper.appendChild(a.toastCapsule)}isNaN(i.zindex)?console.warn("["+d+"] Invalid zIndex."):a.wrapper.style.zIndex=i.zindex}(),i.overlay&&(null!==document.querySelector("."+d+"-overlay.fadeIn")?(a.overlay=document.querySelector("."+d+"-overlay"),a.overlay.setAttribute("data-iziToast-ref",a.overlay.getAttribute("data-iziToast-ref")+","+i.ref),isNaN(i.zindex)||null===i.zindex||(a.overlay.style.zIndex=i.zindex-1)):(a.overlay.classList.add(d+"-overlay"),a.overlay.classList.add("fadeIn"),a.overlay.style.background=i.overlayColor,a.overlay.setAttribute("data-iziToast-ref",i.ref),isNaN(i.zindex)||null===i.zindex||(a.overlay.style.zIndex=i.zindex-1),document.querySelector("body").appendChild(a.overlay)),i.overlayClose?(a.overlay.removeEventListener("click",{}),a.overlay.addEventListener("click",function(t){n.hide(i,a.toast,"overlay")})):a.overlay.removeEventListener("click",{})),i.animateInside&&(a.toast.classList.add(d+"-animateInside"),e=[200,100,300],"bounceInLeft"!=i.transitionIn&&"bounceInRight"!=i.transitionIn||(e=[400,200,400]),0<i.title.length&&setTimeout(function(){a.strong.classList.add("slideIn")},e[0]),0<i.message.length&&setTimeout(function(){a.p.classList.add("slideIn")},e[1]),(i.icon||i.iconUrl)&&setTimeout(function(){a.icon.classList.add("revealIn")},e[2]),o=150,0<i.buttons.length&&a.buttons&&setTimeout(function(){y(a.buttons.childNodes,function(t,e){setTimeout(function(){t.classList.add("revealIn")},o),o+=150})},0<i.inputs.length?150:0),0<i.inputs.length&&a.inputs&&(o=150,y(a.inputs.childNodes,function(t,e){setTimeout(function(){t.classList.add("revealIn")},o),o+=150}))),i.onOpening.apply(null,[i,a.toast]);try{var r=new CustomEvent(d+"-opening",{detail:i,bubbles:!0,cancelable:!0});document.dispatchEvent(r)}catch(t){console.warn(t)}setTimeout(function(){a.toast.classList.remove(d+"-opening"),a.toast.classList.add(d+"-opened");try{var t=new CustomEvent(d+"-opened",{detail:i,bubbles:!0,cancelable:!0});document.dispatchEvent(t)}catch(t){console.warn(t)}i.onOpened.apply(null,[i,a.toast])},1e3),i.drag&&(u?(a.toast.addEventListener("touchstart",function(t){b.startMoving(this,n,i,t)},!1),a.toast.addEventListener("touchend",function(t){b.stopMoving(this,t)},!1)):(a.toast.addEventListener("mousedown",function(t){t.preventDefault(),b.startMoving(this,n,i,t)},!1),a.toast.addEventListener("mouseup",function(t){t.preventDefault(),b.stopMoving(this,t)},!1))),i.closeOnEscape&&document.addEventListener("keyup",function(t){27==(t=t||window.event).keyCode&&n.hide(i,a.toast,"esc")}),i.closeOnClick&&a.toast.addEventListener("click",function(t){n.hide(i,a.toast,"toast")}),n.toast=a.toast},l});