lancie-dialog.html

<link rel="import" href="../polymer/polymer.html">

<!--
`lancie-dialog`
Dialog for the lancie frontends

This element is designed to give you a quick dialog with handy defaults,
while at the same time being highly customizable.

## Styling ##
### Defaults ###
To take advantage of the default styling you should use:
`h2`              for the dialog header
`.dialog-content` for the main content of the dialog
`.dialog-actions` for the buttons at the bottom of the dialog

### Customizaton ###
For customization of your element you can set the following css vars/mixins:
`--lancie-dialog`        for style that should be applied to the whole dialog
`--lancie-dialog-width`  for setting the width in a media query  (outside of a media query you can just use --lancie-dialog)
`--lancie-dialog-top`    for setting the top in a media query    (outside of a media query you can just use --lancie-dialog)
`--lancie-dialog-bottom` for setting the bottom in a media query (outside of a media query you can just use --lancie-dialog)

## Functionality ##
If you want an element (e.g. a button) to dismiss the dialog,
simply give it the `dialog-dismiss` attribute.

@demo demo/index.html
-->

<dom-module id="lancie-dialog">
  <template>
    <style>
      :host {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
        align-items: center;
        justify-content: center;
      }

      #actualDialog {
        display: none;
        background-color: white;
        z-index: 11;
        position: fixed;
        flex-direction: column;

        @apply --lancie-actual-dialog;
      }

      #actualDialog ::slotted(h2) {
        background-color: var(--primary-color);
        color: var(--secondary-color);
        margin: 0;
        font-size: 24px;
        font-weight: 400;
        padding: 16px;
      }

      #actualDialog ::slotted(.dialog-content) {
        padding: 16px;
      }

      #actualDialog ::slotted(.dialog-actions) {
        border-top: 1px solid #e8e8e8;
        padding: 8px 24px;
        background-color: white;

        @apply --layout-horizontal;
        @apply --layout-end-justified;
      }

      #backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: black;
        opacity: 0;
        z-index: 10;
        transition: opacity 0.1s linear;
      }
    </style>

    <div id="actualDialog">
      <slot></slot>
    </div>

    <div id="backdrop" on-tap="close"></div>
  </template>

  <script>
    'use strict';

    (function () {
      Polymer({
        is: 'lancie-dialog',

        ready: function () {
          this.addDismissListeners();
        },

        addDismissListeners: function () {
          var dialog = this;
          var buttons = this.querySelectorAll('[dialog-dismiss]');
          for (var i = 0, len = buttons.length; i < len; i++) {
            buttons[i].addEventListener('tap', function () {
              dialog.close();
            });
          }
        },

        /**
         * Opens the lancie-dialog
         * @return {void}
         */
        open: function () {
          this.style.display = 'flex';
          this.$.actualDialog.style.display = 'flex';
          this.$.backdrop.style.display = 'block';
          this.async(function () {
            this.$.backdrop.style.opacity = '0.6';
          }, 1);
        },

        /**
        * Closes the lancie-dialog
        * @return {void}
        */
        close: function () {
          setTimeout(function () {
          this.style.display = 'none';
            this.$.actualDialog.style.display = 'none';
            this.$.backdrop.style.display = 'none';
            this.$.backdrop.style.opacity = '0.0';
          }.bind(this), 130);
        },
      });
    })();
  </script>
</dom-module>