Home | History | Annotate | Download | only in test 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../../polymer/polymer.html">
     12 
     13 <link rel="import" href="../iron-overlay-behavior.html">
     14 
     15 <dom-module id="test-overlay">
     16 
     17   <style>
     18     :host {
     19       background: white;
     20       color: black;
     21       border: 1px solid black;
     22     }
     23 
     24     :host([animated]) {
     25       -webkit-transition: -webkit-transform 0.3s;
     26       transition: transform 0.3s;
     27       -webkit-transform: translateY(300px);
     28       transform: translateY(300px);
     29     }
     30 
     31     :host(.opened[animated]) {
     32       -webkit-transform: translateY(0px);
     33       transform: translateY(0px);
     34     }
     35   </style>
     36 
     37   <template>
     38     <content></content>
     39   </template>
     40 
     41 </dom-module>
     42 
     43 <script>
     44   (function() {
     45 
     46     Polymer({
     47 
     48       is: 'test-overlay',
     49 
     50       properties: {
     51         animated: {
     52           type: Boolean,
     53           reflectToAttribute: true
     54         }
     55       },
     56 
     57       behaviors: [
     58         Polymer.IronOverlayBehavior
     59       ],
     60 
     61       listeners: {
     62         'transitionend': '__onTransitionEnd'
     63       },
     64 
     65       _renderOpened: function() {
     66         if (this.animated) {
     67           if (this.withBackdrop) {
     68             this.backdropElement.open();
     69           }
     70           this.classList.add('opened');
     71           this.fire('simple-overlay-open-animation-start');
     72         } else {
     73           Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
     74         }
     75       },
     76 
     77       _renderClosed: function() {
     78         if (this.animated) {
     79           if (this.withBackdrop) {
     80             this.backdropElement.close();
     81           }
     82           this.classList.remove('opened');
     83           this.fire('simple-overlay-close-animation-start');
     84         } else {
     85           Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
     86         }
     87       },
     88 
     89       __onTransitionEnd: function(e) {
     90         if (e && e.target === this) {
     91           if (this.opened) {
     92             this._finishRenderOpened();
     93           } else {
     94             this._finishRenderClosed();
     95           }
     96         }
     97       },
     98 
     99     });
    100 
    101   })();
    102 </script>
    103