notification-manager.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="notification-overlay.html">

<dom-module id="notification-manager">
  <script>

    class NotificationManager extends Polymer.Element {

      static get is() {return 'notification-manager';}

      static get properties() {
        return {

          disabled: {
            type: Boolean,
            value: false
          },

          __overlays: {
            type: Array,
            value: _ => {
              return [];
            }
          }

        };
      }

      static get observers() {
        return [
          '__positionizeOverlays(__overlays.length)'
        ];
      }

      constructor() {
        super();
        this.__rects = null;
        this.__notificationsReceived = new Map();
        this.notify = this.notify.bind(this);
      }

      connectedCallback() {
        super.connectedCallback();
        requestAnimationFrame(_ => {
          this.__toggleListeners(true);
        });
      }

      disconnectedCallback() {
        this.__toggleListeners(false);
        super.disconnectedCallback();
      }

      notify(event) {
        if (event.defaultPrevented || this.disabled) {
          return;
        }
        const type = event.type.replace('notify-', '');
        const text = event.detail.text;
        const duration = event.detail.duration || Infinity;
        const key = text + type;
        // Ignore the same notification until it is closed
        if (this.__notificationsReceived.get(key)) {return;}
        this.__notificationsReceived.set(key, true);
        const overlay = document.createElement('notification-overlay')
        overlay.type = type;
        overlay.text = text;
        overlay.duration = duration;
        overlay.onDetach = _ => {
          this.splice('__overlays', this.__overlays.indexOf(overlay), 1);
          this.__notificationsReceived.delete(key);
        };
        this.push('__overlays', overlay);
        overlay.open();
      }

     __toggleListeners(enable) {
        const m = enable ? 'addEventListener' : 'removeEventListener';
        document.body[m]('notify-error', this.notify);
        document.body[m]('notify-warning', this.notify);
        document.body[m]('notify-info', this.notify);
        document.body[m]('notify-success', this.notify);
      }

      __positionizeOverlays() {
        this._updateRects();
        this.__overlays.forEach((overlay, index) => {
          let top = 10;
          if (index) {
            let i = index;
            while(i--) {
              top += this.__rects[i].height + 4;
            }
          }
          overlay.style.top = top + 'px';
        });
      }

      _updateRects() {
        this.__rects = this.__overlays.map(overlay => {
          return overlay.getBoundingClientRect();
        });
      }

    }

    customElements.define(NotificationManager.is, NotificationManager);

  </script>
</dom-module>