<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../../polymer/polymer.html”>

<link rel=“import” href=“../iron-overlay-behavior.html”>

<dom-module id=“test-overlay”>

<template>
  <style>
    :host {
      background: white;
      color: black;
      border: 1px solid black;
    }

    :host([animated]) {
      -webkit-transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      -webkit-transform: translateY(300px);
      transform: translateY(300px);
    }

    :host(.opened[animated]) {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
  </style>

  <content></content>
</template>

</dom-module>

<script>

(function() {

  Polymer({

    is: 'test-overlay',

    properties: {
      animated: {
        type: Boolean,
        reflectToAttribute: true
      }
    },

    behaviors: [
      Polymer.IronOverlayBehavior
    ],

    listeners: {
      'transitionend': '__onTransitionEnd'
    },

    _renderOpened: function() {
      if (this.animated) {
        if (this.withBackdrop) {
          this.backdropElement.open();
        }
        this.classList.add('opened');
        this.fire('simple-overlay-open-animation-start');
      } else {
        Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
      }
    },

    _renderClosed: function() {
      if (this.animated) {
        if (this.withBackdrop) {
          this.backdropElement.close();
        }
        this.classList.remove('opened');
        this.fire('simple-overlay-close-animation-start');
      } else {
        Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
      }
    },

    __onTransitionEnd: function(e) {
      if (e && e.target === this) {
        if (this.opened) {
          this._finishRenderOpened();
        } else {
          this._finishRenderClosed();
        }
      }
    },

  });

})();

</script>