71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
/**
|
|
* SnackBar.js
|
|
*
|
|
* This small component is borrowed from
|
|
* https://codepen.io/wibblymat/pen/avAjq
|
|
*/
|
|
|
|
|
|
var createSnackbar = (function() {
|
|
// Any snackbar that is already shown
|
|
var previous = null;
|
|
|
|
/*
|
|
<div class="paper-snackbar">
|
|
<button class="action">Dismiss</button>
|
|
This is a longer message that won't fit on one line. It is, inevitably, quite a boring thing. Hopefully it is still useful.
|
|
</div>
|
|
*/
|
|
|
|
return function(config) {
|
|
var message = config.message,
|
|
actionText = config.actionText,
|
|
action = config.action,
|
|
duration = config.duration;
|
|
|
|
if (previous) {
|
|
previous.dismiss();
|
|
}
|
|
var snackbar = document.createElement('div');
|
|
snackbar.className = 'paper-snackbar';
|
|
snackbar.dismiss = function() {
|
|
this.style.opacity = 0;
|
|
};
|
|
var text = document.createTextNode(message);
|
|
snackbar.appendChild(text);
|
|
if (actionText) {
|
|
if (!action) {
|
|
action = snackbar.dismiss.bind(snackbar);
|
|
}
|
|
var actionButton = document.createElement('button');
|
|
actionButton.className = 'action';
|
|
actionButton.innerHTML = actionText;
|
|
actionButton.addEventListener('click', action);
|
|
snackbar.appendChild(actionButton);
|
|
}
|
|
setTimeout(function() {
|
|
if (previous === this) {
|
|
previous.dismiss();
|
|
}
|
|
}.bind(snackbar), duration || 5000);
|
|
|
|
snackbar.addEventListener('transitionend', function(event, elapsed) {
|
|
if (event.propertyName === 'opacity' && this.style.opacity == 0) {
|
|
this.parentElement.removeChild(this);
|
|
if (previous === this) {
|
|
previous = null;
|
|
}
|
|
}
|
|
}.bind(snackbar));
|
|
|
|
|
|
|
|
previous = snackbar;
|
|
document.body.appendChild(snackbar);
|
|
// In order for the animations to trigger, I have to force the original style to be computed, and then change it.
|
|
getComputedStyle(snackbar).bottom;
|
|
snackbar.style.bottom = '0px';
|
|
snackbar.style.opacity = 1;
|
|
};
|
|
})();
|