UNPKG

notiflix

Version:

Notiflix is a dependency-free, secure, and lightweight JavaScript library built with pure JavaScript, offering client-side non-blocking notifications, popup boxes, loading indicators, and more.

584 lines (529 loc) 36.7 kB
/* * Notiflix Notify AIO (https://notiflix.github.io) * Description: This file has been created automatically that using "notiflix.js", and "notiflix.css" files. * Version: 3.2.8 * Author: Furkan (https://github.com/furcan) * Copyright 2019 - 2025 Notiflix, MIT License (https://opensource.org/licenses/MIT) */ /* global define */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], function () { return factory(root); }); } else if (typeof module === 'object' && typeof module.exports === 'object') { module.exports = factory(root); } else { root.Notiflix = factory(root); } })(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, function (window) { 'use strict'; // COMMON: SSR check: begin if (typeof window === 'undefined' && typeof window.document === 'undefined') { return false; } // COMMON: SSR check: end // COMMON: Variables: begin var notiflixNamespace = 'Notiflix'; var notiflixConsoleDocs = '\n\nVisit documentation page to learn more: https://notiflix.github.io/documentation'; var defaultFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif'; // COMMON: Variables: end // NOTIFY: Default Settings: begin var typesNotify = { Success: 'Success', Failure: 'Failure', Warning: 'Warning', Info: 'Info', }; var newNotifySettings; var notifySettings = { wrapID: 'NotiflixNotifyWrap', // can not customizable overlayID: 'NotiflixNotifyOverlay', // can not customizable width: '280px', position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' - 'center-top' - 'center-bottom' - 'center-center' distance: '10px', opacity: 1, borderRadius: '5px', rtl: false, timeout: 3000, messageMaxLength: 110, backOverlay: false, backOverlayColor: 'rgba(0,0,0,0.5)', plainText: true, showOnlyTheLastOne: false, clickToClose: false, pauseOnHover: true, ID: 'NotiflixNotify', className: 'notiflix-notify', zindex: 4001, fontFamily: 'Quicksand', fontSize: '13px', cssAnimation: true, cssAnimationDuration: 400, cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left' closeButton: false, useIcon: true, useFontAwesome: false, fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' fontAwesomeIconSize: '34px', success: { background: '#32c682', textColor: '#fff', childClassName: 'notiflix-notify-success', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-check-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(50,198,130,0.2)', }, failure: { background: '#ff5549', textColor: '#fff', childClassName: 'notiflix-notify-failure', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-times-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(255,85,73,0.2)', }, warning: { background: '#eebf31', textColor: '#fff', childClassName: 'notiflix-notify-warning', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-exclamation-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(238,191,49,0.2)', }, info: { background: '#26c0d3', textColor: '#fff', childClassName: 'notiflix-notify-info', notiflixIconColor: 'rgba(0,0,0,0.2)', fontAwesomeClassName: 'fas fa-info-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', backOverlayColor: 'rgba(38,192,211,0.2)', }, }; // NOTIFY: Default Settings: end // COMMON: Console Error: begin var commonConsoleError = function (message) { return console.error('%c ' + notiflixNamespace + ' Error ', 'padding:2px;border-radius:20px;color:#fff;background:#ff5549', '\n' + message + notiflixConsoleDocs); }; // COMMON: Console Error: end // COMMON: Check Head or Body: begin var commonCheckHeadOrBody = function (element) { if (!element) { element = 'head'; } if (window.document[element] === undefined) { commonConsoleError('\nNotiflix needs to be appended to the "<' + element + '>" element, but you called it before the "<' + element + '>" element has been created.'); return false; } return true; }; // COMMON: Check Head or Body: end // COMMON: Set Internal CSS Codes: begin var commonSetInternalCSSCodes = function (getInternalCSSCodes, styleElementId) { // check doc head if (!commonCheckHeadOrBody('head')) { return false; } // internal css if (getInternalCSSCodes() !== null && !window.document.getElementById(styleElementId)) { var internalCSS = window.document.createElement('style'); internalCSS.id = styleElementId; internalCSS.innerHTML = getInternalCSSCodes(); window.document.head.appendChild(internalCSS); } }; // COMMON: Set Internal CSS Codes: end // COMMON: Extend Options: begin var commonExtendOptions = function () { // variables var extended = {}; var deep = false; var i = 0; // check if a deep merge if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { deep = arguments[0]; i++; } // merge the object into the extended object var merge = function (obj) { for (var prop in obj) { if (Object.prototype.hasOwnProperty.call(obj, prop)) { // if property is an object, merge properties if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { extended[prop] = commonExtendOptions(extended[prop], obj[prop]); } else { extended[prop] = obj[prop]; } } } }; // loop through each object and conduct a merge for (; i < arguments.length; i++) { merge(arguments[i]); } return extended; }; // COMMON: Extend Options: end // COMMON: Get Plaintext: begin var commonGetPlaintext = function (html) { var htmlPool = window.document.createElement('div'); htmlPool.innerHTML = html; return htmlPool.textContent || htmlPool.innerText || ''; }; // COMMON: Get Plaintext: end // NOTIFY: Get Internal CSS Codes: begin var notifyGetInternalCSSCodes = function () { var notifyCSS = '[id^=NotiflixNotifyWrap]{pointer-events:none;position:fixed;z-index:4001;opacity:1;right:10px;top:10px;width:280px;max-width:96%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent}[id^=NotiflixNotifyWrap].nx-flex-center-center{max-height:calc(100vh - 20px);overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:auto}[id^=NotiflixNotifyWrap]::-webkit-scrollbar{width:0;height:0}[id^=NotiflixNotifyWrap]::-webkit-scrollbar-thumb{background:transparent}[id^=NotiflixNotifyWrap]::-webkit-scrollbar-track{background:transparent}[id^=NotiflixNotifyWrap] *{-webkit-box-sizing:border-box;box-sizing:border-box}[id^=NotiflixNotifyOverlay]{-webkit-transition:background .3s ease-in-out;-o-transition:background .3s ease-in-out;transition:background .3s ease-in-out}[id^=NotiflixNotifyWrap]>div{pointer-events:all;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:"Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;width:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative;margin:0 0 10px;border-radius:5px;background:#1e1e1e;color:#fff;padding:10px 12px;font-size:14px;line-height:1.4}[id^=NotiflixNotifyWrap]>div:last-child{margin:0}[id^=NotiflixNotifyWrap]>div.nx-with-callback{cursor:pointer}[id^=NotiflixNotifyWrap]>div.nx-with-icon{padding:8px;min-height:56px}[id^=NotiflixNotifyWrap]>div.nx-paused{cursor:auto}[id^=NotiflixNotifyWrap]>div.nx-notify-click-to-close{cursor:pointer}[id^=NotiflixNotifyWrap]>div.nx-with-close-button{padding:10px 36px 10px 12px}[id^=NotiflixNotifyWrap]>div.nx-with-icon.nx-with-close-button{padding:6px 36px 6px 6px}[id^=NotiflixNotifyWrap]>div>span.nx-message{cursor:inherit;font-weight:normal;font-family:inherit!important;word-break:break-all;word-break:break-word}[id^=NotiflixNotifyWrap]>div>span.nx-close-button{cursor:pointer;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;position:absolute;right:8px;top:0;bottom:0;margin:auto;color:inherit;width:20px;height:20px}[id^=NotiflixNotifyWrap]>div>span.nx-close-button:hover{-webkit-transform:rotate(90deg);transform:rotate(90deg)}[id^=NotiflixNotifyWrap]>div>span.nx-close-button>svg{position:absolute;width:16px;height:16px;right:2px;top:2px}[id^=NotiflixNotifyWrap]>div>.nx-message-icon{position:absolute;width:40px;height:40px;font-size:30px;line-height:40px;text-align:center;left:8px;top:0;bottom:0;margin:auto;border-radius:inherit}[id^=NotiflixNotifyWrap]>div>.nx-message-icon-fa.nx-message-icon-fa-shadow{color:inherit;background:rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 34px rgba(0,0,0,.2);box-shadow:inset 0 0 34px rgba(0,0,0,.2);text-shadow:0 0 10px rgba(0,0,0,.3)}[id^=NotiflixNotifyWrap]>div>span.nx-with-icon{position:relative;float:left;width:calc(100% - 40px);margin:0 0 0 40px;padding:0 0 0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}[id^=NotiflixNotifyWrap]>div.nx-rtl-on>.nx-message-icon{left:auto;right:8px}[id^=NotiflixNotifyWrap]>div.nx-rtl-on>span.nx-with-icon{padding:0 10px 0 0;margin:0 40px 0 0}[id^=NotiflixNotifyWrap]>div.nx-rtl-on>span.nx-close-button{right:auto;left:8px}[id^=NotiflixNotifyWrap]>div.nx-with-icon.nx-with-close-button.nx-rtl-on{padding:6px 6px 6px 36px}[id^=NotiflixNotifyWrap]>div.nx-with-close-button.nx-rtl-on{padding:10px 12px 10px 36px}[id^=NotiflixNotifyOverlay].nx-with-animation,[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-fade{-webkit-animation:notify-animation-fade .3s ease-in-out 0s normal;animation:notify-animation-fade .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-fade{0%{opacity:0}100%{opacity:1}}@keyframes notify-animation-fade{0%{opacity:0}100%{opacity:1}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-zoom{-webkit-animation:notify-animation-zoom .3s ease-in-out 0s normal;animation:notify-animation-zoom .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes notify-animation-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(1);transform:scale(1)}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-right{-webkit-animation:notify-animation-from-right .3s ease-in-out 0s normal;animation:notify-animation-from-right .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-from-right{0%{right:-300px;opacity:0}50%{right:8px;opacity:1}100%{right:0;opacity:1}}@keyframes notify-animation-from-right{0%{right:-300px;opacity:0}50%{right:8px;opacity:1}100%{right:0;opacity:1}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-left{-webkit-animation:notify-animation-from-left .3s ease-in-out 0s normal;animation:notify-animation-from-left .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-from-left{0%{left:-300px;opacity:0}50%{left:8px;opacity:1}100%{left:0;opacity:1}}@keyframes notify-animation-from-left{0%{left:-300px;opacity:0}50%{left:8px;opacity:1}100%{left:0;opacity:1}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-top{-webkit-animation:notify-animation-from-top .3s ease-in-out 0s normal;animation:notify-animation-from-top .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-from-top{0%{top:-50px;opacity:0}50%{top:8px;opacity:1}100%{top:0;opacity:1}}@keyframes notify-animation-from-top{0%{top:-50px;opacity:0}50%{top:8px;opacity:1}100%{top:0;opacity:1}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-bottom{-webkit-animation:notify-animation-from-bottom .3s ease-in-out 0s normal;animation:notify-animation-from-bottom .3s ease-in-out 0s normal}@-webkit-keyframes notify-animation-from-bottom{0%{bottom:-50px;opacity:0}50%{bottom:8px;opacity:1}100%{bottom:0;opacity:1}}@keyframes notify-animation-from-bottom{0%{bottom:-50px;opacity:0}50%{bottom:8px;opacity:1}100%{bottom:0;opacity:1}}[id^=NotiflixNotifyOverlay].nx-with-animation.nx-remove,[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-fade.nx-remove{opacity:0;-webkit-animation:notify-remove-fade .3s ease-in-out 0s normal;animation:notify-remove-fade .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-fade{0%{opacity:1}100%{opacity:0}}@keyframes notify-remove-fade{0%{opacity:1}100%{opacity:0}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-zoom.nx-remove{-webkit-transform:scale(0);transform:scale(0);-webkit-animation:notify-remove-zoom .3s ease-in-out 0s normal;animation:notify-remove-zoom .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-zoom{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(0);transform:scale(0)}}@keyframes notify-remove-zoom{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(0);transform:scale(0)}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-top.nx-remove{opacity:0;-webkit-animation:notify-remove-to-top .3s ease-in-out 0s normal;animation:notify-remove-to-top .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-to-top{0%{top:0;opacity:1}50%{top:8px;opacity:1}100%{top:-50px;opacity:0}}@keyframes notify-remove-to-top{0%{top:0;opacity:1}50%{top:8px;opacity:1}100%{top:-50px;opacity:0}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-right.nx-remove{opacity:0;-webkit-animation:notify-remove-to-right .3s ease-in-out 0s normal;animation:notify-remove-to-right .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-to-right{0%{right:0;opacity:1}50%{right:8px;opacity:1}100%{right:-300px;opacity:0}}@keyframes notify-remove-to-right{0%{right:0;opacity:1}50%{right:8px;opacity:1}100%{right:-300px;opacity:0}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-bottom.nx-remove{opacity:0;-webkit-animation:notify-remove-to-bottom .3s ease-in-out 0s normal;animation:notify-remove-to-bottom .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-to-bottom{0%{bottom:0;opacity:1}50%{bottom:8px;opacity:1}100%{bottom:-50px;opacity:0}}@keyframes notify-remove-to-bottom{0%{bottom:0;opacity:1}50%{bottom:8px;opacity:1}100%{bottom:-50px;opacity:0}}[id^=NotiflixNotifyWrap]>div.nx-with-animation.nx-from-left.nx-remove{opacity:0;-webkit-animation:notify-remove-to-left .3s ease-in-out 0s normal;animation:notify-remove-to-left .3s ease-in-out 0s normal}@-webkit-keyframes notify-remove-to-left{0%{left:0;opacity:1}50%{left:8px;opacity:1}100%{left:-300px;opacity:0}}@keyframes notify-remove-to-left{0%{left:0;opacity:1}50%{left:8px;opacity:1}100%{left:-300px;opacity:0}}'; return notifyCSS || null; }; // NOTIFY: Get Internal CSS Codes: end // NOTIFY: Create: begin var notifyCreateCounter = 0; var notifyCreate = function (notifyType, message, callbackOrOptions, options) { // check doc body if (!commonCheckHeadOrBody('body')) { return false; } // if not initialized pretend like init if (!newNotifySettings) { Notiflix.Notify.init({}); } // create a backup for new settings var newNotifySettingsBackup = commonExtendOptions(true, newNotifySettings, {}); // check callbackOrOptions and options: begin if ((typeof callbackOrOptions === 'object' && !Array.isArray(callbackOrOptions)) || (typeof options === 'object' && !Array.isArray(options))) { // new options var newOptions = {}; if (typeof callbackOrOptions === 'object') { newOptions = callbackOrOptions; } else if (typeof options === 'object') { newOptions = options; } // extend new settings with the new options newNotifySettings = commonExtendOptions(true, newNotifySettings, newOptions); } // check callbackOrOptions and options: end // notify type var theType = newNotifySettings[notifyType.toLocaleLowerCase('en')]; // notify counter notifyCreateCounter++; // check the message: begin if (typeof message !== 'string') { message = 'Notiflix ' + notifyType; } // check the message: end // if plainText is true => HTML tags not allowed: begin if (newNotifySettings.plainText) { message = commonGetPlaintext(message); // message plain text } // if plainText is true => HTML tags not allowed: end // if plainText is false but the message length more than messageMaxLength => Possible HTML tags error: begin if (!newNotifySettings.plainText && message.length > newNotifySettings.messageMaxLength) { // extend settings for error massage newNotifySettings = commonExtendOptions(true, newNotifySettings, { closeButton: true, messageMaxLength: 150 }); // error message message = 'Possible HTML Tags Error: The "plainText" option is "false" and the notification content length is more than the "messageMaxLength" option.'; } // if plainText is false but the message length more than messageMaxLength => Possible HTML tags error: end // check message max length: begin if (message.length > newNotifySettings.messageMaxLength) { message = message.substring(0, newNotifySettings.messageMaxLength) + '...'; } // check message max length: end // font awesome icon style: begin if (newNotifySettings.fontAwesomeIconStyle === 'shadow') { theType.fontAwesomeIconColor = theType.background; } // font awesome icon style: end // if cssAnimation is false => duration: begin if (!newNotifySettings.cssAnimation) { newNotifySettings.cssAnimationDuration = 0; } // if cssAnimation is false => duration: end // notify wrap: begin var ntflxNotifyWrap = window.document.getElementById(notifySettings.wrapID) || window.document.createElement('div'); ntflxNotifyWrap.id = notifySettings.wrapID; ntflxNotifyWrap.style.width = newNotifySettings.width; ntflxNotifyWrap.style.zIndex = newNotifySettings.zindex; ntflxNotifyWrap.style.opacity = newNotifySettings.opacity; // wrap position: begin if (newNotifySettings.position === 'center-center') { ntflxNotifyWrap.style.left = newNotifySettings.distance; ntflxNotifyWrap.style.top = newNotifySettings.distance; ntflxNotifyWrap.style.right = newNotifySettings.distance; ntflxNotifyWrap.style.bottom = newNotifySettings.distance; ntflxNotifyWrap.style.margin = 'auto'; ntflxNotifyWrap.classList.add('nx-flex-center-center'); ntflxNotifyWrap.style.maxHeight = 'calc((100vh - ' + newNotifySettings.distance + ') - ' + newNotifySettings.distance + ')'; ntflxNotifyWrap.style.display = 'flex'; ntflxNotifyWrap.style.flexWrap = 'wrap'; ntflxNotifyWrap.style.flexDirection = 'column'; ntflxNotifyWrap.style.justifyContent = 'center'; ntflxNotifyWrap.style.alignItems = 'center'; ntflxNotifyWrap.style.pointerEvents = 'none'; } else if (newNotifySettings.position === 'center-top') { ntflxNotifyWrap.style.left = newNotifySettings.distance; ntflxNotifyWrap.style.right = newNotifySettings.distance; ntflxNotifyWrap.style.top = newNotifySettings.distance; ntflxNotifyWrap.style.bottom = 'auto'; ntflxNotifyWrap.style.margin = 'auto'; } else if (newNotifySettings.position === 'center-bottom') { ntflxNotifyWrap.style.left = newNotifySettings.distance; ntflxNotifyWrap.style.right = newNotifySettings.distance; ntflxNotifyWrap.style.bottom = newNotifySettings.distance; ntflxNotifyWrap.style.top = 'auto'; ntflxNotifyWrap.style.margin = 'auto'; } else if (newNotifySettings.position === 'right-bottom') { ntflxNotifyWrap.style.right = newNotifySettings.distance; ntflxNotifyWrap.style.bottom = newNotifySettings.distance; ntflxNotifyWrap.style.top = 'auto'; ntflxNotifyWrap.style.left = 'auto'; } else if (newNotifySettings.position === 'left-top') { ntflxNotifyWrap.style.left = newNotifySettings.distance; ntflxNotifyWrap.style.top = newNotifySettings.distance; ntflxNotifyWrap.style.right = 'auto'; ntflxNotifyWrap.style.bottom = 'auto'; } else if (newNotifySettings.position === 'left-bottom') { ntflxNotifyWrap.style.left = newNotifySettings.distance; ntflxNotifyWrap.style.bottom = newNotifySettings.distance; ntflxNotifyWrap.style.top = 'auto'; ntflxNotifyWrap.style.right = 'auto'; } else { // 'right-top' or else ntflxNotifyWrap.style.right = newNotifySettings.distance; ntflxNotifyWrap.style.top = newNotifySettings.distance; ntflxNotifyWrap.style.left = 'auto'; ntflxNotifyWrap.style.bottom = 'auto'; } // wrap position: end // if background overlay is true: begin if (newNotifySettings.backOverlay) { var ntflxNotifyOverlay = window.document.getElementById(notifySettings.overlayID) || window.document.createElement('div'); ntflxNotifyOverlay.id = notifySettings.overlayID; ntflxNotifyOverlay.style.width = '100%'; ntflxNotifyOverlay.style.height = '100%'; ntflxNotifyOverlay.style.position = 'fixed'; ntflxNotifyOverlay.style.zIndex = newNotifySettings.zindex - 1; ntflxNotifyOverlay.style.left = 0; ntflxNotifyOverlay.style.top = 0; ntflxNotifyOverlay.style.right = 0; ntflxNotifyOverlay.style.bottom = 0; ntflxNotifyOverlay.style.background = theType.backOverlayColor || newNotifySettings.backOverlayColor; ntflxNotifyOverlay.className = newNotifySettings.cssAnimation ? 'nx-with-animation' : ''; ntflxNotifyOverlay.style.animationDuration = newNotifySettings.cssAnimation ? newNotifySettings.cssAnimationDuration + 'ms' : ''; if (!window.document.getElementById(notifySettings.overlayID)) { window.document.body.appendChild(ntflxNotifyOverlay); } } // if background overlay is true: end if (!window.document.getElementById(notifySettings.wrapID)) { window.document.body.appendChild(ntflxNotifyWrap); } // notify wrap: end // notify content: begin var ntflxNotify = window.document.createElement('div'); ntflxNotify.id = newNotifySettings.ID + '-' + notifyCreateCounter; ntflxNotify.className = newNotifySettings.className + ' ' + theType.childClassName + ' ' + (newNotifySettings.cssAnimation ? 'nx-with-animation' : '') + ' ' + (newNotifySettings.useIcon ? 'nx-with-icon' : '') + ' nx-' + newNotifySettings.cssAnimationStyle + ' ' + (newNotifySettings.closeButton && typeof callbackOrOptions !== 'function' ? 'nx-with-close-button' : '') + ' ' + (typeof callbackOrOptions === 'function' ? 'nx-with-callback' : '') + ' ' + (newNotifySettings.clickToClose ? 'nx-notify-click-to-close' : ''); ntflxNotify.style.fontSize = newNotifySettings.fontSize; ntflxNotify.style.color = theType.textColor; ntflxNotify.style.background = theType.background; ntflxNotify.style.borderRadius = newNotifySettings.borderRadius; ntflxNotify.style.pointerEvents = 'all'; // rtl: begin if (newNotifySettings.rtl) { ntflxNotify.setAttribute('dir', 'rtl'); ntflxNotify.classList.add('nx-rtl-on'); } // rtl: end // font-family: begin ntflxNotify.style.fontFamily = '"' + newNotifySettings.fontFamily + '", ' + defaultFontFamily; // font-family: end // use css animation: begin if (newNotifySettings.cssAnimation) { ntflxNotify.style.animationDuration = newNotifySettings.cssAnimationDuration + 'ms'; } // use css animation: end // close button element: begin var closeButtonHTML = ''; if (newNotifySettings.closeButton && typeof callbackOrOptions !== 'function') { closeButtonHTML = '<span class="nx-close-button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g><path fill="' + theType.notiflixIconColor + '" d="M0.38 2.19l7.8 7.81 -7.8 7.81c-0.51,0.5 -0.51,1.31 -0.01,1.81 0.25,0.25 0.57,0.38 0.91,0.38 0.34,0 0.67,-0.14 0.91,-0.38l7.81 -7.81 7.81 7.81c0.24,0.24 0.57,0.38 0.91,0.38 0.34,0 0.66,-0.14 0.9,-0.38 0.51,-0.5 0.51,-1.31 0,-1.81l-7.81 -7.81 7.81 -7.81c0.51,-0.5 0.51,-1.31 0,-1.82 -0.5,-0.5 -1.31,-0.5 -1.81,0l-7.81 7.81 -7.81 -7.81c-0.5,-0.5 -1.31,-0.5 -1.81,0 -0.51,0.51 -0.51,1.32 0,1.82z"/></g></svg></span>'; } // close button element: end // use icon: begin if (newNotifySettings.useIcon) { // use font awesome if (newNotifySettings.useFontAwesome) { ntflxNotify.innerHTML = '<i style="color:' + theType.fontAwesomeIconColor + '; font-size:' + newNotifySettings.fontAwesomeIconSize + ';" class="nx-message-icon nx-message-icon-fa ' + theType.fontAwesomeClassName + ' ' + (newNotifySettings.fontAwesomeIconStyle === 'shadow' ? 'nx-message-icon-fa-shadow' : 'nx-message-icon-fa-basic') + '"></i><span class="nx-message nx-with-icon">' + message + '</span>' + (newNotifySettings.closeButton ? closeButtonHTML : ''); } // use notiflix icon else { var svgIcon = ''; if (notifyType === typesNotify.Success) { // success svgIcon = '<svg class="nx-message-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g><path fill="' + theType.notiflixIconColor + '" d="M20 0c11.03,0 20,8.97 20,20 0,11.03 -8.97,20 -20,20 -11.03,0 -20,-8.97 -20,-20 0,-11.03 8.97,-20 20,-20zm0 37.98c9.92,0 17.98,-8.06 17.98,-17.98 0,-9.92 -8.06,-17.98 -17.98,-17.98 -9.92,0 -17.98,8.06 -17.98,17.98 0,9.92 8.06,17.98 17.98,17.98zm-2.4 -13.29l11.52 -12.96c0.37,-0.41 1.01,-0.45 1.42,-0.08 0.42,0.37 0.46,1 0.09,1.42l-12.16 13.67c-0.19,0.22 -0.46,0.34 -0.75,0.34 -0.23,0 -0.45,-0.07 -0.63,-0.22l-7.6 -6.07c-0.43,-0.35 -0.5,-0.99 -0.16,-1.42 0.35,-0.43 0.99,-0.5 1.42,-0.16l6.85 5.48z"/></g></svg>'; } else if (notifyType === typesNotify.Failure) { // failure svgIcon = '<svg class="nx-message-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g><path fill="' + theType.notiflixIconColor + '" d="M20 0c11.03,0 20,8.97 20,20 0,11.03 -8.97,20 -20,20 -11.03,0 -20,-8.97 -20,-20 0,-11.03 8.97,-20 20,-20zm0 37.98c9.92,0 17.98,-8.06 17.98,-17.98 0,-9.92 -8.06,-17.98 -17.98,-17.98 -9.92,0 -17.98,8.06 -17.98,17.98 0,9.92 8.06,17.98 17.98,17.98zm1.42 -17.98l6.13 6.12c0.39,0.4 0.39,1.04 0,1.43 -0.19,0.19 -0.45,0.29 -0.71,0.29 -0.27,0 -0.53,-0.1 -0.72,-0.29l-6.12 -6.13 -6.13 6.13c-0.19,0.19 -0.44,0.29 -0.71,0.29 -0.27,0 -0.52,-0.1 -0.71,-0.29 -0.39,-0.39 -0.39,-1.03 0,-1.43l6.13 -6.12 -6.13 -6.13c-0.39,-0.39 -0.39,-1.03 0,-1.42 0.39,-0.39 1.03,-0.39 1.42,0l6.13 6.12 6.12 -6.12c0.4,-0.39 1.04,-0.39 1.43,0 0.39,0.39 0.39,1.03 0,1.42l-6.13 6.13z"/></g></svg>'; } else if (notifyType === typesNotify.Warning) { // warning svgIcon = '<svg class="nx-message-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g><path fill="' + theType.notiflixIconColor + '" d="M21.91 3.48l17.8 30.89c0.84,1.46 -0.23,3.25 -1.91,3.25l-35.6 0c-1.68,0 -2.75,-1.79 -1.91,-3.25l17.8 -30.89c0.85,-1.47 2.97,-1.47 3.82,0zm16.15 31.84l-17.8 -30.89c-0.11,-0.2 -0.41,-0.2 -0.52,0l-17.8 30.89c-0.12,0.2 0.05,0.4 0.26,0.4l35.6 0c0.21,0 0.38,-0.2 0.26,-0.4zm-19.01 -4.12l0 -1.05c0,-0.53 0.42,-0.95 0.95,-0.95 0.53,0 0.95,0.42 0.95,0.95l0 1.05c0,0.53 -0.42,0.95 -0.95,0.95 -0.53,0 -0.95,-0.42 -0.95,-0.95zm0 -4.66l0 -13.39c0,-0.52 0.42,-0.95 0.95,-0.95 0.53,0 0.95,0.43 0.95,0.95l0 13.39c0,0.53 -0.42,0.96 -0.95,0.96 -0.53,0 -0.95,-0.43 -0.95,-0.96z"/></g></svg>'; } else if (notifyType === typesNotify.Info) { // info svgIcon = '<svg class="nx-message-icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g><path fill="' + theType.notiflixIconColor + '" d="M20 0c11.03,0 20,8.97 20,20 0,11.03 -8.97,20 -20,20 -11.03,0 -20,-8.97 -20,-20 0,-11.03 8.97,-20 20,-20zm0 37.98c9.92,0 17.98,-8.06 17.98,-17.98 0,-9.92 -8.06,-17.98 -17.98,-17.98 -9.92,0 -17.98,8.06 -17.98,17.98 0,9.92 8.06,17.98 17.98,17.98zm-0.99 -23.3c0,-0.54 0.44,-0.98 0.99,-0.98 0.55,0 0.99,0.44 0.99,0.98l0 15.86c0,0.55 -0.44,0.99 -0.99,0.99 -0.55,0 -0.99,-0.44 -0.99,-0.99l0 -15.86zm0 -5.22c0,-0.55 0.44,-0.99 0.99,-0.99 0.55,0 0.99,0.44 0.99,0.99l0 1.09c0,0.54 -0.44,0.99 -0.99,0.99 -0.55,0 -0.99,-0.45 -0.99,-0.99l0 -1.09z"/></g></svg>'; } ntflxNotify.innerHTML = svgIcon + '<span class="nx-message nx-with-icon">' + message + '</span>' + (newNotifySettings.closeButton ? closeButtonHTML : ''); } } // without icon else { ntflxNotify.innerHTML = '<span class="nx-message">' + message + '</span>' + (newNotifySettings.closeButton ? closeButtonHTML : ''); } // use icon: end // notify content: end // notify append or prepend: begin if (newNotifySettings.position === 'left-bottom' || newNotifySettings.position === 'right-bottom') { // the new one will be first var notifyWrap = window.document.getElementById(notifySettings.wrapID); notifyWrap.insertBefore(ntflxNotify, notifyWrap.firstChild); } else { window.document.getElementById(notifySettings.wrapID).appendChild(ntflxNotify); } // notify append or prepend: end // remove by timeout or click: begin var eachNotifyElement = window.document.getElementById(ntflxNotify.id); if (eachNotifyElement) { // timeout variables var timeoutHide; var timeoutRemove; // hide notify elm and hide overlay: begin var hideNotifyElementsAndOverlay = function () { eachNotifyElement.classList.add('nx-remove'); var removeOverlay = window.document.getElementById(notifySettings.overlayID); if (removeOverlay && ntflxNotifyWrap.childElementCount <= 0) { removeOverlay.classList.add('nx-remove'); } clearTimeout(timeoutHide); }; // hide notify elm and hide overlay: end // remove notify elm and wrapper: begin var removeNotifyElementsAndWrapper = function () { if (eachNotifyElement && eachNotifyElement.parentNode !== null) { eachNotifyElement.parentNode.removeChild(eachNotifyElement); } if (ntflxNotifyWrap.childElementCount <= 0 && ntflxNotifyWrap.parentNode !== null) { // if childs count === 0 remove wrap ntflxNotifyWrap.parentNode.removeChild(ntflxNotifyWrap); var removeOverlay = window.document.getElementById(notifySettings.overlayID); if (removeOverlay && removeOverlay.parentNode !== null) { removeOverlay.parentNode.removeChild(removeOverlay); } } clearTimeout(timeoutRemove); }; // remove notify elm and wrapper: end // if has close button and callbackOrOptions is not a function: begin if (newNotifySettings.closeButton && typeof callbackOrOptions !== 'function') { var closeButtonElm = window.document.getElementById(ntflxNotify.id).querySelector('span.nx-close-button'); closeButtonElm.addEventListener('click', function () { hideNotifyElementsAndOverlay(); var clickToCloseTimeout = setTimeout(function () { removeNotifyElementsAndWrapper(); clearTimeout(clickToCloseTimeout); }, newNotifySettings.cssAnimationDuration); }); } // if has close button and callbackOrOptions is not a function: end // if callbackOrOptions or click to close: begin if (typeof callbackOrOptions === 'function' || newNotifySettings.clickToClose) { eachNotifyElement.addEventListener('click', function () { if (typeof callbackOrOptions === 'function') { callbackOrOptions(); } hideNotifyElementsAndOverlay(); var callbackTimeout = setTimeout(function () { removeNotifyElementsAndWrapper(); clearTimeout(callbackTimeout); }, newNotifySettings.cssAnimationDuration); }); } // if callbackOrOptions or click to close: end // else auto remove: begin if (!newNotifySettings.closeButton && typeof callbackOrOptions !== 'function') { // auto remove: begin var autoRemove = function () { timeoutHide = setTimeout(function () { hideNotifyElementsAndOverlay(); }, newNotifySettings.timeout); timeoutRemove = setTimeout(function () { removeNotifyElementsAndWrapper(); }, newNotifySettings.timeout + newNotifySettings.cssAnimationDuration); }; autoRemove(); // auto remove: end // pause auto remove: begin if (newNotifySettings.pauseOnHover) { eachNotifyElement.addEventListener('mouseenter', function () { eachNotifyElement.classList.add('nx-paused'); clearTimeout(timeoutHide); clearTimeout(timeoutRemove); }); eachNotifyElement.addEventListener('mouseleave', function () { eachNotifyElement.classList.remove('nx-paused'); autoRemove(); }); } // pause auto remove: end } // else auto remove: end } // remove by timeout or click: end // notify - show only the last one: begin if (newNotifySettings.showOnlyTheLastOne && notifyCreateCounter > 0) { var allNotifyElmNotTheLastOne = window.document.querySelectorAll('[id^=' + newNotifySettings.ID + '-]:not([id=' + newNotifySettings.ID + '-' + notifyCreateCounter + '])'); for (var i = 0; i < allNotifyElmNotTheLastOne.length; i++) { var eachNotifyElmNotLastOne = allNotifyElmNotTheLastOne[i]; if (eachNotifyElmNotLastOne.parentNode !== null) { eachNotifyElmNotLastOne.parentNode.removeChild(eachNotifyElmNotLastOne); } } } // notify - show only the last one: end // extend new settings with the backup settings newNotifySettings = commonExtendOptions(true, newNotifySettings, newNotifySettingsBackup); }; // NOTIFY: Create: end var Notiflix = { Notify: { // Init init: function (userNotifyOptions) { // extend options newNotifySettings = commonExtendOptions(true, notifySettings, userNotifyOptions); // internal css if exist commonSetInternalCSSCodes(notifyGetInternalCSSCodes, 'NotiflixNotifyInternalCSS'); }, // Merge First Init merge: function (userNotifyExtendOptions) { // if initialized already if (newNotifySettings) { newNotifySettings = commonExtendOptions(true, newNotifySettings, userNotifyExtendOptions); } // initialize first else { commonConsoleError('You have to initialize the Notify module before call Merge function.'); return false; } }, // Success success: function (message, callbackOrOptions, options) { notifyCreate(typesNotify.Success, message, callbackOrOptions, options); }, // Failure failure: function (message, callbackOrOptions, options) { notifyCreate(typesNotify.Failure, message, callbackOrOptions, options); }, // Warning warning: function (message, callbackOrOptions, options) { notifyCreate(typesNotify.Warning, message, callbackOrOptions, options); }, // Info info: function (message, callbackOrOptions, options) { notifyCreate(typesNotify.Info, message, callbackOrOptions, options); }, }, }; if (typeof window.Notiflix === 'object') { return commonExtendOptions(true, window.Notiflix, { Notify: Notiflix.Notify }); } else { return { Notify: Notiflix.Notify }; } });