decentralized-video-chat/public/js/snackbar.js

193 lines
5.5 KiB
JavaScript
Raw Permalink 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
*/
2020-03-31 02:16:08 +08:00
(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",
2020-04-04 12:21:03 +08:00
// backgroundColor: "#323232",
2020-03-31 02:16:08 +08:00
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
);
2020-03-26 05:57:54 +08:00
}
2020-03-31 02:16:08 +08:00
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.fontWeight = 300;
// $p.style.fontSize = "14px";
// $p.style.lineHeight = "1em";
2020-03-31 02:16:08 +08:00
$p.innerHTML = options.text;
Snackbar.snackbar.appendChild($p);
2020-04-04 12:21:03 +08:00
// Snackbar.snackbar.style.background = options.backgroundColor;
2020-03-31 02:16:08 +08:00
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);
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
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);
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
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
);
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
if (options.alertScreenReader) {
Snackbar.snackbar.setAttribute("role", "alert");
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
Snackbar.snackbar.addEventListener(
"transitionend",
function (event, elapsed) {
if (event.propertyName === "opacity" && this.style.opacity === "0") {
if (typeof options.onClose === "function") options.onClose(this);
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
this.parentElement.removeChild(this);
if (Snackbar.current === this) {
Snackbar.current = null;
}
2020-03-26 05:57:54 +08:00
}
2020-03-31 02:16:08 +08:00
}.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++;
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
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];
}
2020-03-26 05:57:54 +08:00
}
2020-03-31 02:16:08 +08:00
}
2020-03-26 05:57:54 +08:00
};
2020-03-31 02:16:08 +08:00
for (; i < length; i++) {
var obj = arguments[i];
merge(obj);
}
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
return extended;
};
2020-03-26 05:57:54 +08:00
2020-03-31 02:16:08 +08:00
return Snackbar;
2020-03-26 05:57:54 +08:00
});