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