paper-fullscreen-dialog.html

<!--
Material Design [Full-screen dialogs](http://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs)

Provides a full-screen dialog based on the material design spec.  In full-screen
dialogs, the confirmation and dismissive actions are at the top of the screen.

Use `responsiveWidth` to control display widths on which the dialog takes up the
entire screen. The dialog should only be full-screen on mobile devices. When the
window size is wider than responsiveWidth, the dialog becomes a modal dialog
with a backdrop.

An element with the `"tool"` attribute will serve as the title content.

A dialog with no confirmation action should have the `"arrow-back"` icon,
indicating that any changes are immediately saved upon selection.

Example "settings" dialog (no confirmation action):

    <paper-fullscreen-dialog id="dialog1">
      <paper-toolbar class="toolbar">
        <paper-icon-button icon="arrow-back" dialog-dismiss></paper-icon-button>
        <div class="title">Settings</div>
      </paper-toolbar>
      <p>The back-arrow button indicates that any changes are saved immediately.</p>
      <section class="settings">
        <div center horizontal layout>
          <div flex>Wi-Fi</div>
          <paper-toggle-button checked></paper-toggle-button>
        </div>
        <div center horizontal layout>
          <div flex>Bluetooth</div>
          <paper-toggle-button></paper-toggle-button>
        </div>
      </section>
    </paper-fullscreen-dialog>

A dialog with a confirmation action should use descriptive and accurate word
for the action, such as “save”, “send”, “add”, “share”, “update”, or “create”.

Example "edit" dialog:

    <paper-fullscreen-dialog id="dialog2">
      <paper-toolbar class="toolbar">
        <paper-icon-button icon="close" dialog-dismiss></paper-icon-button>
        <div class="title flex">Edit This</div>
        <paper-button dialog-confirm on-tap="save">Save</paper-button>
      </paper-toolbar>
      <p>The "X" button indicates any changes will be discarded when dismissed</p>
      <div>The confirmation action is disabled until all required actions are performed.</div>
      <div horizontal layout>
        <paper-input label="First name" floatingLabel>
      </div>
      <div horizontal layout>
        <paper-input label="Last name" floatingLabel>
      </div>
    </paper-fullscreen-dialog>

@element paper-fullscreen-dialog
@blurb Element providing a full-screen dialog with dismissive and confirmation actions 
@status alpha
@homepage https://github.com/bendavis78/paper-fullscreen-dialog
@demo demo/index.html
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">
<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-styles/paper-styles.html">

<dom-module id="paper-fullscreen-dialog">
  <style>
    :host {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: none;
    }
    :host #backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: var(--iron-overlay-backdrop-background-color, #000);
      opacity: 0;
      transition: opacity 0.2s;
    }
    :host([opened]) {
      display: block;
    }
    :host([opened]) #backdrop {
      display: block;
      opacity: 0.6;
    }
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
    }
    #headerPanel {
      min-width: 480px;
      @apply(--paper-fullscreen-dialog);
    }

    :host([narrow]) #headerPanel {
      flex: 1;
      min-width: auto;
      @apply(--paper-fullscreen-dialog-narrow);
    }

    ::content paper-icon-button[dialog-dismiss] {
      margin-right: 24px;
    }

    ::content .toolbar > [role=button]:first-child {
      margin-left: -4px;
    }

    ::content .toolbar > paper-menu-button:last-child,
    ::content .toolbar > [role=button]:last-child {
      margin-right: -16px;
    }

    [main] {
      background-color: var(--primary-background-color);
    }
    #scroller {
      @apply(--paper-fullscreen-dialog-content);
    }
  </style>
  <template>
    <iron-media-query query="[[_computeMediaQuery(responsiveWidth)]]" query-matches="{{narrow}}"></iron-media-query>
    <div id="backdrop"></div>
    <div id="overlay">
      <paper-header-panel main id="headerPanel" class="no-padding" mode="{{mode}}">
        <content select=".toolbar"></content> 
        <div id="scroller" class="flex">
          <content select="*"></content>
        </div>
      </paper-header-panel>
    </div>
  </template>
  <script>
    Polymer({
      is: 'paper-fullscreen-dialog',
      /**
       * Fired when the narrow layout changes.
       *
       * @event paper-responsive-change
       * @param {Object} detail
       * @param {boolean} detail.narrow true if the panel is in narrow layout.
       */

      properties: {
        /**
         * When the browser window size is larger than the `responsiveWidth`, 
         * the dialog becomes a modal dialog with a backdrop.
         *
         * @attribute responsiveWidth
         * @type string
         * @default '600px'
         */
        responsiveWidth: {
          type: String,
          value: '600px'
        },

        narrow: {
          type: Boolean,
          reflectToAttribute: true,
          observer: '_narrowChanged',
          notify: true
        },

        opened: {
          type: Boolean,
          value: false,
          readOnly: true,
          reflectToAttribute: true
        },
      },

      behaviors: [Polymer.PaperDialogBehavior],

      attached: function() {
        this.sizingTarget = this.$.scroller;
        // Polymer's iron-overlay-behavior and paper-dialog-behavior don't really support multiple modal dialogs,
        // so we make our own.
        this.modal = false;
        this.withBackdrop = false;
      },

      open: function() {
        this._setOpened(true);
      },

      close: function() {
        this._setOpened(false);
      },

      _computeMediaQuery: function(responsiveWidth) {
        var mq = '(max-width: ' + responsiveWidth + ')';
        return mq;
      },

      _narrowChanged: function() {
        if (!this.narrow) {
          this.modal = true;
        } else {
          this.modal = false;
        }
        this.fire('paper-responsive-change', {narrow: this.narrow});
      },

    });

  </script>

</dom-module>