modal-sheet.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/slide-from-bottom-animation.html">
<link rel="import" href="../neon-animation/animations/slide-down-animation.html">

<!--
`modal-sheet`
Sheet that slide up from the bottom of the screen to reveal more content.

@demo demo/index.html
-->

<dom-module id="modal-sheet">

  <template>
    <style>
      :host {
        contain: layout;
        display: block;
        margin: 0 auto;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        will-change: transform;

        background: var(--modal-sheet-background-color, --primary-background-color);
        color: var(--modal-sheet-color, --primary-text-color);
      }

      .content {
        width: 100%;
        background-color: white;
        margin: 0;
        padding: 0;
      }

      .header {
        width: 100%;
        box-sizing: border-box;
        display: block;
        background-color: #fff;
        border: 0;
        font-size: 1.1em;
        padding: 16px;
        margin: 0;
        border-bottom: 1px solid rgba(0,0,0,0.13);
      }

      #cancel-button {
        font-size: 24px;
        font-weight: bold;
        padding: 6px;
        color: rgba(0,0,0,0.65);
        text-decoration: none;
        position: absolute;
        right: 10px;
        top: 6px;
        cursor: pointer;
      }

      @media (min-width: 600px) {
        :host {
          max-width: 384px;
        }
      }

      @media (min-width: 900px) {
        :host {
          max-width: 512px;
        }
      }

      @media (min-width: 1280px) {
        :host {
          max-width: 576px;
        }
      }
    </style>

    <template is="dom-if" if="[[title]]">
      <div class="header">
        [[title]]
        <template is="dom-if" if="[[showClose]]">
          <span id="cancel-button" on-tap="close">&times;</span>
        </template>
      </div>
    </template>

    <div class="content">
      <content></content>
    </div>

  </template>

</dom-module>

<script>

(function() {

  var footer = document.createElement('div');
  footer.style.contain = 'layout';
  document.body.appendChild(footer);

  Polymer({
    is: 'modal-sheet',

    behaviors: [
      Polymer.PaperDialogBehavior,
      Polymer.NeonAnimationRunnerBehavior
    ],

    properties: {

      title: {
        type: String,
      },

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


      /**
       * True if the bottom sheet acts like a modal dialog (e.g. can't be closed by clicking outside).
       * Note that the "cancel" option will disappear if the dialog is not modal, as the "cancel" option
       * will be the user's only method of exit when the bottom sheet is modal.
       */
      modal: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },

      /**
       * True if the bottom sheet should slide in from the bottom on entry
       */
      slide: {
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },

      /**
       * True if the bottom sheet is opened with backdrop
       * @default true
       */
      withBackdrop: {
        type: Boolean,
        value: true,
        reflectToAttribute: true
      },

      autoFitOnAttach: {
        type: Boolean,
        value: true
      },

      /**
       * The animation config supplied to the included paper-dialog. Will be empty unless "slide"
       * is set.
       */
      animationConfig: {
        type: Object,
        computed: '_animationConfig(slide)'
      },
    },

    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish',
      'on-iron-overlay-closed': '_attemptRemoval'
    },

    attached: function() {
      footer.appendChild(this);
    },

    _renderOpened: function() {
      this.cancelAnimation();
      this.playAnimation('entry');
    },

    _renderClosed: function() {
      this.cancelAnimation();
      this.playAnimation('exit');
    },

    _onNeonAnimationFinish: function() {
      if (this.opened) {
        this._finishRenderOpened();
      } else {
        this._finishRenderClosed();
        // this._attemptRemoval();
      }
    },

    /**
     * Computed property function- changes the animation config of the dialog based on presence of "slide" attr
     * @param  {Boolean} slide True if the bottom sheet should slide in
     * @return {Object}       Animation config
     */
    _animationConfig: function(slide) {
      if (!slide) {
        return {};
      }

      return {
        entry: {
          name: 'slide-from-bottom-animation',
          node: this,
          timing: {
            duration: 333,
            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
          }
        },
        exit: {
          name: 'slide-down-animation',
          node: this,
          timing: {
            duration: 333,
            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
          }
        }
      };
    },

    /**
     * Runs when the dialog is closed. Will remove this from the DOM
     */
    _attemptRemoval: function() {
      if (this.parentNode) {
        // Remove this element from DOM if there is an animation and the dialog just closed
        this.parentNode.removeChild(this);
      }
    }
  });

})();

</script>