https://www.towdium.me/js/snackbar.js

1/**
2 * SnackBar.js
3 * 
4 * This small component is borrowed from 
5 * https://codepen.io/wibblymat/pen/avAjq
6 */
7
8
9var createSnackbar = (function() {
10  // Any snackbar that is already shown
11  var previous = null;
12  
13/*
14<div class="paper-snackbar">
15  <button class="action">Dismiss</button>
16  This is a longer message that won't fit on one line. It is, inevitably, quite a boring thing. Hopefully it is still useful.
17</div>
18*/
19  
20  return function(config) {
21    var message = config.message,
22      actionText = config.actionText,
23      action = config.action,
24      duration = config.duration;
25
26    if (previous) {
27      previous.dismiss();
28    }
29    var snackbar = document.createElement('div');
30    snackbar.className = 'paper-snackbar';
31    snackbar.dismiss = function() {
32      this.style.opacity = 0;
33    };
34    var text = document.createTextNode(message);
35    snackbar.appendChild(text);
36    if (actionText) {
37      if (!action) {
38        action = snackbar.dismiss.bind(snackbar);
39      }
40      var actionButton = document.createElement('button');
41      actionButton.className = 'action';
42      actionButton.innerHTML = actionText;
43      actionButton.addEventListener('click', action);
44      snackbar.appendChild(actionButton);
45    }
46    setTimeout(function() {
47      if (previous === this) {
48        previous.dismiss();
49      }
50    }.bind(snackbar), duration || 5000);
51    
52    snackbar.addEventListener('transitionend', function(event, elapsed) {
53      if (event.propertyName === 'opacity' && this.style.opacity == 0) {
54        this.parentElement.removeChild(this);
55        if (previous === this) {
56          previous = null;
57        }
58      }
59    }.bind(snackbar));
60
61
62    
63    previous = snackbar;
64    document.body.appendChild(snackbar);
65    // In order for the animations to trigger, I have to force the original style to be computed, and then change it.
66    getComputedStyle(snackbar).bottom;
67    snackbar.style.bottom = '0px';
68    snackbar.style.opacity = 1;
69  };
70})();