nostfly/dist/js/nostfly.min.js

Javascript notification library

class Nostfly{constructor(t={}){this.opt=t,this.opt.class,this.opt.iconHeader??=!0,this.opt.style??="notify",this.opt.loader??=!0,this.opt.loaderPosition??="top",this.opt.content??="We're glad to have you here. Enjoy your experience!",this.opt.position??="top-right",this.opt.delay??=4e3,this.opt.header??=null,this.opt.auto??=!0,this.opt.openAnimate??="nostfly-open-slide-right",this.opt.closeAnimate??="nostfly-close-slide-right",this.opt.background??=null,this.opt.color??=null,this.nostflyID="_nostflyMessage-"+Math.random().toString(36).substring(2,12),this.nostflyCloseID="_nostflyClose-"+Math.random().toString(36).substring(2,15),this.nostflyClass="_nostflyMessage",this.nostflyMessage,this.topRight,this.topLeft,this.topCenter,this.bottomLeft,this.bottomRight,this.bottomCenter,this.ids={tl:"_nostflyContainerTopLeft",tr:"_nostflyContainerTopRight",tc:"_nostflyContainerTopCenter",bl:"_nostflyContainerBottomLeft",br:"_nostflyContainerBottomRight",bc:"_nostflyContainerBottomCenter"},this.classes={container:"_nostflyContainer"},this.validate(),this.createContainers(),this.nostfly()}createContainers(){0==this.isContainersExists()?(this.topLeft=document.createElement("div"),this.topRight=document.createElement("div"),this.topCenter=document.createElement("div"),this.bottomLeft=document.createElement("div"),this.bottomRight=document.createElement("div"),this.bottomCenter=document.createElement("div"),this.topLeft.setAttribute("id",this.ids.tl),this.topRight.setAttribute("id",this.ids.tr),this.topCenter.setAttribute("id",this.ids.tc),this.bottomLeft.setAttribute("id",this.ids.bl),this.bottomRight.setAttribute("id",this.ids.br),this.bottomCenter.setAttribute("id",this.ids.bc),this.topLeft.setAttribute("class",this.classes.container),this.topRight.setAttribute("class",this.classes.container),this.topCenter.setAttribute("class",this.classes.container),this.bottomLeft.setAttribute("class",this.classes.container),this.bottomRight.setAttribute("class",this.classes.container),this.bottomCenter.setAttribute("class",this.classes.container),document.body.prepend(this.topLeft),document.body.prepend(this.topRight),document.body.prepend(this.topCenter),document.body.prepend(this.bottomLeft),document.body.prepend(this.bottomRight),document.body.prepend(this.bottomCenter)):(this.topLeft=document.getElementById(this.ids.tl),this.topRight=document.getElementById(this.ids.tr),this.topCenter=document.getElementById(this.ids.tc),this.bottomLeft=document.getElementById(this.ids.bl),this.bottomRight=document.getElementById(this.ids.br),this.bottomCenter=document.getElementById(this.ids.bc))}isContainersExists(){return!!document.getElementsByClassName(this.classes.container)[0]}nostfly(){let t=this.topRight;"top-right"==this.opt.position?t=this.topRight:"top-left"==this.opt.position?t=this.topLeft:"top-center"==this.opt.position?t=this.topCenter:"bottom-left"==this.opt.position?t=this.bottomLeft:"bottom-right"==this.opt.position?t=this.bottomRight:"bottom-center"==this.opt.position&&(t=this.bottomCenter),t.prepend(this.nostflyMsg());let e=document.getElementById(this.nostflyID);this.nostflyStyle(e),1==this.opt.loader&&1==this.opt.auto?this.loaderCountDown(this.opt.delay,e):e.getElementsByClassName("_nostflyBar")[0]&&(e.getElementsByClassName("_nostflyBar")[0].style.display="none",e.getElementsByClassName("_nostflyBar")[0].remove()),"bottom"==this.opt.loaderPosition&&(e.getElementsByClassName("_nostflyBar")[0].style.top="inherit",e.getElementsByClassName("_nostflyBar")[0].style.bottom=0),null!=!this.opt.class&&""!=!this.opt.class||e.classList.add(this.opt.class),e.classList.add(this.opt.openAnimate),document.getElementById(this.nostflyCloseID).addEventListener("click",function(){this.nostflyRemoveMessage(this.nostflyID)}.bind(this)),1==this.opt.auto&&setTimeout(function(){document.getElementById(this.nostflyID)&&this.nostflyRemoveMessage(this.nostflyID)}.bind(this),this.opt.delay)}nostflyMsg(){this.nostflyMessage=document.createElement("div"),this.nostflyMessage.setAttribute("id",this.nostflyID),this.nostflyMessage.setAttribute("class",this.nostflyClass);let t="",e="";return 1==this.opt.iconHeader&&(e=this.iconSvg()),null!==this.opt.header&&(t=`<b class='_nostflyContentHeader'>${e}${this.opt.header}</b>`),this.nostflyMessage.innerHTML=`\n\t\t\t<div class='_nostflyContent'>\n\t\t\t\t<div class='_nostflyBar'></div>\n\t\t\t\t${t}\n\t\t\t\t<p class='_nostflyContentBody'>${this.opt.content}</p>\n\t\t\t</div>\n\t\t\t<button type="button" class="_nostflyCloseBtn" id="${this.nostflyCloseID}">\n\t\t\t\t<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m18 6l-6 6m0 0l-6 6m6-6l6 6m-6-6L6 6" color="currentColor"/></svg>\n\t\t\t</button>\n\t\t`,this.nostflyMessage}nostflyRemoveMessage(t){let e=document.getElementById(t);e.classList.remove(this.opt.openAnimate),e.classList.add(this.opt.closeAnimate),setTimeout(function(){e.style.display="none",e.remove()}.bind(e),500)}loaderCountDown(t,e){let o=t,s=t/100,i=setTimeout((function n(){let l=Math.round(o/t*100);e.getElementsByClassName("_nostflyBar")[0].style.width=l-7+"%",l>0&&(o-=s,i=setTimeout(n,s))}),s)}validate(){if("boolean"!=typeof this.opt.loader)throw new Error("Nostfly - Invalid type: 'loader' property value must be a boolean (true or false).");if("boolean"!=typeof this.opt.iconHeader)throw new Error("Nostfly - Invalid type: 'icon' property value must be a boolean (true or false).");if("boolean"!=typeof this.opt.auto)throw new Error("Nostfly - Invalid type: 'auto' property value must be a boolean (true or false).");if("number"!=typeof this.opt.delay)throw new Error("Nostfly - Invalid type: 'delay' property value must be a number.");if((null==!this.opt.background||""==!this.opt.background)&&"string"!=typeof this.opt.background)throw new Error("Nostfly - Invalid type: 'background' property value must be a string.");if((null==!this.opt.background||""==!this.opt.background)&&"string"!=typeof this.opt.color)throw new Error("Nostfly - Invalid type: 'color' property value must be a string.");if(!["top-right","top-left","top-center","bottom-right","bottom-left","bottom-center"].includes(this.opt.position))throw new Error("Nostfly - Invalid value: 'position' property value is invalid.")}nostflyStyle(t){let e="#01204E",o="#EEEFC5";if("success"==this.opt.style?e="#028391":"note"==this.opt.style?(e="#F6DCAC",o="#01204E"):"warning"==this.opt.style?(e="#FAA968",o="#01204E"):"attention"==this.opt.style?(e="#F85525",o="#FBFAF2"):"error"==this.opt.style&&(e="#D52429",o="#FBFAF2"),null!=!this.opt.background&&""!=!this.opt.background||(e=this.opt.background),null!=!this.opt.color&&""!=!this.opt.color||(o=this.opt.color),t.style.backgroundColor=e,t.style.color=o,t.getElementsByClassName("_nostflyCloseBtn")[0].style.color=o,t.getElementsByClassName("_nostflyBar")[0].style.backgroundColor=o,t.getElementsByTagName("a")[0]){let e=t.getElementsByTagName("a");for(let t=0;t<=0;t++)e[t].style.color=o}}iconSvg(){return"warning"==this.opt.style?(this.opt.header??="Warning!",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20.777a9 9 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a9 9 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A9 9 0 0 1 10 3.223M12 8v4m0 4v.01"/></svg>'):"error"==this.opt.style?(this.opt.header??="Error!",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20.777a9 9 0 0 1-2.48-.969M14 3.223a9.003 9.003 0 0 1 0 17.554m-9.421-3.684a9 9 0 0 1-1.227-2.592M3.124 10.5c.16-.95.468-1.85.9-2.675l.169-.305m2.714-2.941A9 9 0 0 1 10 3.223M14 14l-4-4m0 4l4-4"/></svg>'):"success"==this.opt.style?(this.opt.header??="Success",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.56 3.69a9 9 0 0 0-2.92 1.95M3.69 8.56A9 9 0 0 0 3 12m.69 3.44a9 9 0 0 0 1.95 2.92m2.92 1.95A9 9 0 0 0 12 21m3.44-.69a9 9 0 0 0 2.92-1.95m1.95-2.92A9 9 0 0 0 21 12m-.69-3.44a9 9 0 0 0-1.95-2.92m-2.92-1.95A9 9 0 0 0 12 3m-3 9l2 2l4-4"/></svg>'):"note"==this.opt.style?(this.opt.header="Note",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8m-8 4h6m-5 5H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-3l-3 3z"/></svg>'):"attention"==this.opt.style?(this.opt.header??="Attention!",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.027 19.002a2 2 0 0 1-.65.444l-5.575 2.39a2.04 2.04 0 0 1-1.604 0l-5.575-2.39a2.04 2.04 0 0 1-1.07-1.07l-2.388-5.574a2.04 2.04 0 0 1 0-1.604l2.389-5.575c.103-.24.25-.457.433-.639m2.689-1.31l3.522-1.51a2.04 2.04 0 0 1 1.604 0l5.575 2.39c.48.206.863.589 1.07 1.07l2.388 5.574c.22.512.22 1.092 0 1.604l-1.509 3.522M3 3l18 18"/></svg>'):"notify"==this.opt.style?(this.opt.header??="Notification!",'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1m6-10.273A11.05 11.05 0 0 0 18.206 3M3 6.727A11.05 11.05 0 0 1 5.792 3"/></svg>'):void 0}}