notyf/notyf.min.js

A dead simple, responsive, a11y, dependency-free, vanilla JavaScript toast library.

var Notyf=function(){"use strict";var e,t,o=function(){return(o=Object.assign||function(t){for(var i,n=1,e=arguments.length;n<e;n++)for(var o in i=arguments[n])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t}).apply(this,arguments)},a=function(t){this.options=t};(t=e||(e={}))[t.Add=0]="Add",t[t.Remove=1]="Remove";var s=function(){function t(){this.notifications=[]}return t.prototype.push=function(t){this.notifications.push(t),this.updateFn(t,e.Add,this.notifications)},t.prototype.splice=function(t,i){var n=this.notifications.splice(t,i)[0];this.updateFn(n,e.Remove,this.notifications)},t.prototype.indexOf=function(t){return this.notifications.indexOf(t)},t.prototype.onupdate=function(t){this.updateFn=t},t}(),r={types:[{type:"success",className:"notyf__toast--success",backgroundColor:"#3dc763",icon:{className:"notyf__icon--success",tagName:"i"}},{type:"error",className:"notyf__toast--error",backgroundColor:"#ed3d3d",icon:{className:"notyf__icon--error",tagName:"i"}}],duration:2e3,ripple:!0},c=function(){function t(){this.notifications=[];var t=document.createDocumentFragment(),i=this._createHTLMElement({tagName:"div",className:"notyf"});t.appendChild(i),document.body.appendChild(t),this.container=i,this.animationEndEventName=this._getAnimationEndEventName(),this._createA11yContainer()}return t.prototype.update=function(t,i){i===e.Add?this.addNotification(t):i===e.Remove&&this.removeNotification(t)},t.prototype.removeNotification=function(t){var i,n,e=this,o=this._popRenderedNotification(t);o&&((i=o.node).classList.add("notyf__toast--disappear"),i.addEventListener(this.animationEndEventName,n=function(t){t.target===i&&(i.removeEventListener(e.animationEndEventName,n),e.container.removeChild(i))}))},t.prototype.addNotification=function(t){var i=this._renderNotification(t);this.notifications.push({notification:t,node:i}),this._announce(t.options.message||"Notification")},t.prototype._renderNotification=function(t){var i=this._buildNotificationCard(t),n=t.options.className;return n&&i.classList.add(n),this.container.appendChild(i),i},t.prototype._popRenderedNotification=function(t){for(var i=-1,n=0;n<this.notifications.length&&i<0;n++)this.notifications[n].notification===t&&(i=n);if(-1!==i)return this.notifications.splice(i,1)[0]},t.prototype._buildNotificationCard=function(t){var i=t.options,n=i.icon,e=this._createHTLMElement({tagName:"div",className:"notyf__toast"}),o=this._createHTLMElement({tagName:"div",className:"notyf__ripple"}),a=this._createHTLMElement({tagName:"div",className:"notyf__wrapper"}),s=this._createHTLMElement({tagName:"div",className:"notyf__message"});s.innerHTML=i.message||"";var r=i.backgroundColor;if(n&&"object"==typeof n){var c=this._createHTLMElement({tagName:"div",className:"notyf__icon"}),p=this._createHTLMElement({tagName:n.tagName||"i",className:n.className,text:n.text});r&&(p.style.color=r),c.appendChild(p),a.appendChild(c)}return a.appendChild(s),e.appendChild(a),r&&(i.ripple?(o.style.backgroundColor=r,e.appendChild(o)):e.style.backgroundColor=r),e},t.prototype._createHTLMElement=function(t){var i=t.tagName,n=t.className,e=t.text,o=document.createElement(i);return n&&(o.className=n),o.textContent=e||null,o},t.prototype._createA11yContainer=function(){var t=this._createHTLMElement({tagName:"div",className:"notyf-announcer"});t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.border="0",t.style.clip="rect(0 0 0 0)",t.style.height="1px",t.style.margin="-1px",t.style.overflow="hidden",t.style.padding="0",t.style.position="absolute",t.style.width="1px",t.style.outline="0",document.body.appendChild(t),this.a11yContainer=t},t.prototype._announce=function(t){var i=this;this.a11yContainer.textContent="",setTimeout(function(){i.a11yContainer.textContent=t},100)},t.prototype._getAnimationEndEventName=function(){var t,i=document.createElement("_fake"),n={MozTransition:"animationend",OTransition:"oAnimationEnd",WebkitTransition:"webkitAnimationEnd",transition:"animationend"};for(t in n)if(void 0!==i.style[t])return n[t];return"animationend"},t}();return function(){function t(t){var n=this;this.notifications=new s,this.view=new c;var i=this.registerTypes(t);this.options=o({},r,t),this.options.types=i,this.notifications.onupdate(function(t,i){n.view.update(t,i)})}return t.prototype.error=function(t){var i=this.normalizeOptions("error",t);this.open(i)},t.prototype.success=function(t){var i=this.normalizeOptions("success",t);this.open(i)},t.prototype.open=function(i){var t=this.options.types.find(function(t){return t.type===i.type})||{},n=o({},t,i);n.ripple=void 0===n.ripple?this.options.ripple:n.ripple;var e=new a(n);this._pushNotification(e)},t.prototype._pushNotification=function(i){var n=this;this.notifications.push(i);var t=i.options.duration||this.options.duration;setTimeout(function(){var t=n.notifications.indexOf(i);n.notifications.splice(t,1)},t)},t.prototype.normalizeOptions=function(t,i){var n={type:t};return"string"==typeof i?n.message=i:"object"==typeof i&&(n=o({},n,i)),n},t.prototype.registerTypes=function(t){var e=(t&&t.types||[]).slice();return r.types.map(function(i){var t=e.findIndex(function(t){return t.type===i.type}),n=-1!==t?e.splice(t,1)[0]:{};return o({},i,n)}).concat(e)},t}()}();