toast-er.html

<!--
@license
Copyright 2015 Mason Louchart

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../lite-signal/lite-signal.html">

<!--
`paper-toast` with some swagg features.

The toaster has a bin, where all signals are stored. This allows for multiple
signals to be received at once, and they will be fulfilled in order of their
receipt. Separate configurations are still maintained for each signal.

There are 4 types of toast (info, success, warning and error) that can be
selected using the `type` property. Each type sets a light at the bottom of the
toast according to the level of danger.

You can also set the blink level (slow, medium or fast) using the `blink` property.
The toast blinks more or less rapidly according to the defined level.

The toaster's position can be set using the `position` property.
Possible values include bottom-left (default), bottom-right, top-left and
top-right.
<br>

### Example

Just put the tag in the index page...

    <toast-er></toast-er>
    <toast-er duration="5000"></toast-er>
    <toast-er type="info"></toast-er>
    <toast-er type="warning" blink="medium"></toast-er>
    <toast-er position="top-right"></toast-er>

...and fire some events, that's all!

    <script>
    function someMethod() {
      this.dispatchEvent(
        new CustomEvent('lite-signal', {
          bubbles: true,
          compose: true, // to cross Shadow DOM boundaries,
          detail: {
            name: 'toaster-show',
            data: {
              text: 'You are not allowed to do this.',
              type: 'error',
              duration: 5000,
              blink: 'fast',
              position: 'top-right'
            }
          }
        })
      );
    }
    </script>

There are no required options excepted `text`!
<br><br>

## Audited events

Name                       | Description
:--------------------------|:----------
`lite-signal-toaster-show` | Shows the toast with received data

@customElement
@polymer
@demo demo/index.html
@blurb `paper-toast` with some swagg features.
@homepage https://masonlouchart.github.io/toast-er/
-->
<dom-module id="toast-er">
  <template>
    <style>
    :host {
      display: inline-block;
      box-sizing: border-box;
      position: fixed;
    }
    :host.top paper-toast {
      top: 0;
      transform: translateY(-100px);
    }
    :host.top paper-toast.paper-toast-open {
      top: 12px;
      transform: translateY(0px);
    }
    #button {
      position: absolute;
      top: 4px; bottom: 4px; right: 0;
      z-index: 1;
    }
    #underline {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 4px;
    }
    .info {
      background-color: rgb(0, 186, 255);
    }
    .success {
      background-color: rgb(11, 219, 0);
    }
    .warning {
      background-color: rgb(255, 168, 0);
    }
    .error {
      background-color: rgb(251, 0, 0);
    }
    @-webkit-keyframes cooking {
      from {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes cooking {
      from {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .slow {
      -webkit-animation: cooking 3s linear 0.2s infinite;
      animation: cooking 3s linear 0.2s infinite;
    }
    .medium {
      -webkit-animation: cooking 2s linear 0.2s infinite;
      animation: cooking 2s linear 0.2s infinite;
    }
    .fast {
      -webkit-animation: cooking 1s linear 0.2s infinite;
      animation: cooking 1s linear 0.2s infinite;
    }
    </style>

    <paper-toast id="toast">
      <paper-button id="button" on-tap="_buttonTap" hidden></paper-button>
      <span id="underline"></span>
    </paper-toast>
    <lite-signal on-lite-signal-toaster-show="_putInStack"></lite-signal>
  </template>

  <script>
  class Toaster extends Polymer.Element {

    static get is() {
      return 'toast-er';
    }

    static get properties() {
      return {
        /**
         * The text shown by the toast.
         *
         * @type {String}
         */
        text: {
          type: String
        },

        /**
         * The text shown on the button. If the text is empty the button is
         * hidden.
         *
         * @type {String}
         */
        buttonText: {
          type: String,
          value: ''
        },

        /**
         * Event to fire when the button is pressed.
         *
         * @type {String}
         * @default button-pressed
         */
        buttonEvent: {
          type: String,
          value: 'button-pressed'
        },

        /**
         * Duration of displaying.
         *
         * @type {Number}
         * @default 3000
         */
        duration: {
          type: Number,
          value: 3000
        },

        /**
         * Defines the color of the toast underline. (success | info | warning | error)
         * <ul>
         * <li>success = color #0bdb00 (flashy green)</li>
         * <li>info = color #00baff (cyan)</li>
         * <li>warning = color #ffa800 (orange)</li>
         * <li>error = color #fb0000 (red)</li>
         * </ul>
         *
         * @type {String}
         */
        type: {
          type: String
        },

        /**
         * Defines the speed of blinking of the toast's underline.
         * (slow | medium | fast)
         * <ul>
         * <li>slow = transition in 3 sec</li>
         * <li>medium = transition in 2 sec</li>
         * <li>fast = transition in 1 sec</li>
         * </ul>
         *
         * @type {String}
         */
        blink: {
          type: String
        },

        /**
         * Sets the toaster position.
         * (top-right | top-left | bottom-right | bottom-left)
         *
         * @type {String}
         * @default bottom-left
         */
        position: {
          type: String
        },

        /**
         * Stack of messages.
         *
         * @type {Array}
         * @default []
         */
        _stack: {
          type: Array,
          value: function() {
            return [];
          }
        }
      }
    }

    /**
      * Shows the toast then `_shift` the stack.
      *
      * @param {Object} event    lite-signal-toaster-show
      * @param {Object} message  to display can contains `text` {String},
      * `type` {String}, `duration` {Number}, `blink` {String} and `position` {String}
      */
    _putInStack(event, message) {
      let text = message.text || this.text;
      if (text && text.trim().length) {
        this.push('_stack', message);
        this._shift();
      }
    }

    _buttonTap(event) {
      this.dispatchEvent(new CustomEvent(
        'toaster-' + event.target.buttonEvent, {
          bubbles: true,
          composed: true
        }
      ));
      this.$.toast.close();
      this._shift();
    }

    /**
      * Shows message by unstacking of toasts.
      */
    _shift() {
      // Turn off the toaster if the queue is empty.
      if (!this._stack.length) {
        setTimeout(() => {
          this._hideToast();
        }, 1000);
        return;
      }

      // Get configuration of the toast.
      let msg = this._stack[0];
      let buttonText = msg.buttonText || this.buttonText;
      let hasButton = buttonText.length != 0;
      let duration = msg.duration || (hasButton && this.duration < 10000 ? 10000 : this.duration);
      let blink = msg.blink || this.blink;
      let position = msg.position || this.position;
      let text = msg.text || this.text;
      let type = msg.type || this.type;
      let toast = this.$.toast;

      // Shows the toast.
      if (!toast.opened) {
        let button = this.$.button;
        this.shift('_stack');

        toast.duration = duration;
        toast.text = text;
        button.hidden = !hasButton;
        button.buttonEvent = msg.buttonEvent || this.buttonEvent;
        button.textContent = buttonText;

        this._displayToast(type, blink, position);
        setTimeout(() => {
          toast.show();
        }, 100);
      }

      // Queue the next toast.
      setTimeout(() => {
        this._shift();
      }, duration + 500);
    }

    /**
      * Sets the toaster bottom color according to the given type, defines the
      * blinking speed and sets the toast position.
      *
      * @param  {String} type  (info | success | warning | error) defines the toaster bottom color
      * @param  {String} blink  (slow | medium | fast) defines the blinking speed
      * @param  {String} position (top-left, top-right, bottom-left, bottom-right) defines the toaster position
      */
    _displayToast(type, blink, position) {
      let underline = this.$.underline;
      let toast = this.$.toast;

      // Set the underline type.
      type = type && type.toLowerCase() || '';
      underline.classList.toggle('info', type === 'info');
      underline.classList.toggle('success', type === 'success');
      underline.classList.toggle('warning', type === 'warning');
      underline.classList.toggle('error', type === 'error');

      // Set the blink speed.
      blink = blink && blink.toLowerCase() || '';
      underline.classList.toggle('slow', blink === 'slow');
      underline.classList.toggle('medium', blink === 'medium');
      underline.classList.toggle('fast', blink === 'fast');

      // Set the toaster position.
      position = position && position.toLowerCase().split('-') || [];
      toast.horizontalAlign = position[1] || 'left';
      toast.verticalAlign = position[0] || 'bottom';
      this.classList.toggle('top', toast.verticalAlign === 'top');
    }

    /**
      * Disables toaster bottom color and blinking.
      */
    _hideToast() {
      let underline = this.$.underline;
      underline.classList.remove('slow');
      underline.classList.remove('medium');
      underline.classList.remove('fast');
    }
  }

  customElements.define(Toaster.is, Toaster);
  </script>
</dom-module>