MediaWiki:Toasts.js

/** * Creates simple non-intrusive pop-up notifications. * @author Arashiryuu0 * @module Toasts * @version 1.0.0 */   if (window.ToastsLoaded) return; importArticles({       type: 'style',        articles: [            'u:dev:MediaWiki:Toasts.css'        ]    }); var Toasts = { show: function (content, options) { var toast; content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; this._helpers.ensureContainer; toast = this._helpers.buildToast(               content,                this._helpers.parseType(options.type || , this.types),                options.icon ||             ); document.querySelector('.toasts').appendChild(toast); new Promise(function (resolve) {               setTimeout(resolve, options.timeout ? options.timeout : 3000);           }) .then(function {                toast.classList.add('closing');                return new Promise(function (resolve) { setTimeout(resolve, 300); });           }, console.error) .then(function {                var toasts;                toast.parentElement.removeChild(toast);                if (document.querySelectorAll('.toasts .toast').length) return;                toasts = document.querySelector('.toasts');                toasts.parentElement.removeChild(toasts);            }, console.error); },       info: function (content, options) { content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; return this.show(content, Object.assign(options, { type: 'info' })); },       error: function (content, options) { content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; return this.show(content, Object.assign(options, { type: 'error' })); },       success: function (content, options) { content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; return this.show(content, Object.assign(options, { type: 'success' })); },       warning: function (content, options) { content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; return this.show(content, Object.assign(options, { type: 'warning' })); },       'default': function (content, options) { content = typeof content === 'string' ? content : ''; options = $.isPlainObject(options) ? options : {}; return this.show(content, options); },       _helpers: { ensureContainer: function { var wrapper; if (document.querySelector('.toasts')) return; wrapper = document.createElement('div'); wrapper.classList.add('toasts'); wrapper.style.setProperty('width', document.documentElement.offsetWidth + 'px'); wrapper.style.setProperty('bottom', '80px'); document.body.appendChild(wrapper); },           parseHTML: function (html, fragment) { var template = document.createElement('template'), node; fragment = typeof fragment === 'boolean' ? fragment : false; template.innerHTML = html; node = template.content.cloneNode(true); if (fragment) return node; return node.childNodes.length > 1 ? node.childNodes : node.childNodes[0]; },           buildToast: function (message, type, icon) { var hasIcon = type || icon, html = '', name = 'toast' + (hasIcon ? ' toast-has-icon' : ''); name += (type && type !== 'default' ? ' toast-' + type : ''); if (!icon && type) icon = type; html += ''; if (this.icons[icon]) { html += ' '; html += this.icons[icon](20); html += ' '; }               html += ' ' + message + ' '; html += ' '; return this.parseHTML(html); },           parseType: function (type, types) { return types.hasOwnProperty(type) ? types[type] : ''; },           icons: { warning: function (size) { return [ '', '', '',                       ' '                    ].join(''); },               success: function (size) { return [ '', '', '',                       ' '                    ].join(''); },               info: function (size) { return [ '', '', '',                       ' '                    ].join(''); },               error: function (size) { return [ '', '',                       ' '                    ].join(''); }           }        },        types: { 'default': '', 'warning': 'warning', 'success': 'success', 'error': 'error', 'info': 'info' }   };    window.Toasts = Toasts; window.ToastsLoaded = true; });
 * (function {