mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-16 23:29:20 +08:00
188 lines
6.3 KiB
JavaScript
188 lines
6.3 KiB
JavaScript
|
/*!
|
||
|
* 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;
|
||
|
});
|