/*! * Snackbar v0.1.14 * http://polonel.com/Snackbar * * Copyright 2018 Chris Brame and other contributors * Released under the MIT license * https://github.com/polonel/Snackbar/blob/master/LICENSE */ (function(root, factory) { 'use strict'; if (typeof define === 'function' && define.amd) { define([], function() { return (root.Snackbar = factory()); }); } else if (typeof module === 'object' && module.exports) { module.exports = root.Snackbar = factory(); } else { root.Snackbar = factory(); } })(this, function() { var Snackbar = {}; Snackbar.current = null; var $defaults = { text: 'Default Text', textColor: '#FFFFFF', width: 'auto', showAction: true, actionText: 'Dismiss', actionTextAria: 'Dismiss, Description for Screen Readers', alertScreenReader: false, actionTextColor: '#4CAF50', showSecondButton: false, secondButtonText: '', secondButtonAria: 'Description for Screen Readers', secondButtonTextColor: '#4CAF50', backgroundColor: '#323232', pos: 'bottom-left', duration: 5000, customClass: '', onActionClick: function(element) { element.style.opacity = 0; }, onSecondButtonClick: function(element) {}, onClose: function(element) {} }; Snackbar.show = function($options) { var options = Extend(true, $defaults, $options); if (Snackbar.current) { Snackbar.current.style.opacity = 0; setTimeout( function() { var $parent = this.parentElement; if ($parent) // possible null if too many/fast Snackbars $parent.removeChild(this); }.bind(Snackbar.current), 500 ); } Snackbar.snackbar = document.createElement('div'); Snackbar.snackbar.className = 'snackbar-container ' + options.customClass; Snackbar.snackbar.style.width = options.width; var $p = document.createElement('p'); $p.style.margin = 0; $p.style.padding = 0; $p.style.color = options.textColor; $p.style.fontSize = '14px'; $p.style.fontWeight = 300; $p.style.lineHeight = '1em'; $p.innerHTML = options.text; Snackbar.snackbar.appendChild($p); Snackbar.snackbar.style.background = options.backgroundColor; if (options.showSecondButton) { var secondButton = document.createElement('button'); secondButton.className = 'action'; secondButton.innerHTML = options.secondButtonText; secondButton.setAttribute('aria-label', options.secondButtonAria); secondButton.style.color = options.secondButtonTextColor; secondButton.addEventListener('click', function() { options.onSecondButtonClick(Snackbar.snackbar); }); Snackbar.snackbar.appendChild(secondButton); } if (options.showAction) { var actionButton = document.createElement('button'); actionButton.className = 'action'; actionButton.innerHTML = options.actionText; actionButton.setAttribute('aria-label', options.actionTextAria); actionButton.style.color = options.actionTextColor; actionButton.addEventListener('click', function() { options.onActionClick(Snackbar.snackbar); }); Snackbar.snackbar.appendChild(actionButton); } if (options.duration) { setTimeout( function() { if (Snackbar.current === this) { Snackbar.current.style.opacity = 0; // When natural remove event occurs let's move the snackbar to its origins Snackbar.current.style.top = '-100px'; Snackbar.current.style.bottom = '-100px'; } }.bind(Snackbar.snackbar), options.duration ); } if (options.alertScreenReader) { Snackbar.snackbar.setAttribute('role', 'alert'); } Snackbar.snackbar.addEventListener( 'transitionend', function(event, elapsed) { if (event.propertyName === 'opacity' && this.style.opacity === '0') { if (typeof(options.onClose) === 'function') options.onClose(this); this.parentElement.removeChild(this); if (Snackbar.current === this) { Snackbar.current = null; } } }.bind(Snackbar.snackbar) ); Snackbar.current = Snackbar.snackbar; document.body.appendChild(Snackbar.snackbar); var $bottom = getComputedStyle(Snackbar.snackbar).bottom; var $top = getComputedStyle(Snackbar.snackbar).top; Snackbar.snackbar.style.opacity = 1; Snackbar.snackbar.className = 'snackbar-container ' + options.customClass + ' snackbar-pos ' + options.pos; }; Snackbar.close = function() { if (Snackbar.current) { Snackbar.current.style.opacity = 0; } }; // Pure JS Extend // http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ var Extend = function() { var extended = {}; var deep = false; var i = 0; var length = arguments.length; if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { deep = arguments[0]; i++; } var merge = function(obj) { for (var prop in obj) { if (Object.prototype.hasOwnProperty.call(obj, prop)) { if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { extended[prop] = Extend(true, extended[prop], obj[prop]); } else { extended[prop] = obj[prop]; } } } }; for (; i < length; i++) { var obj = arguments[i]; merge(obj); } return extended; }; return Snackbar; });