decentralized-video-chat/public/snackbar.js

188 lines
6.3 KiB
JavaScript
Raw Normal View History

2020-03-26 05:57:54 +08:00
/*!
* 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;
});