• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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  <template>
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    <content></content>
38  </template>
39
40</dom-module>
41
42<script>
43  (function() {
44
45    Polymer({
46
47      is: 'test-overlay',
48
49      properties: {
50        animated: {
51          type: Boolean,
52          reflectToAttribute: true
53        }
54      },
55
56      behaviors: [
57        Polymer.IronOverlayBehavior
58      ],
59
60      listeners: {
61        'transitionend': '__onTransitionEnd'
62      },
63
64      _renderOpened: function() {
65        if (this.animated) {
66          if (this.withBackdrop) {
67            this.backdropElement.open();
68          }
69          this.classList.add('opened');
70          this.fire('simple-overlay-open-animation-start');
71        } else {
72          Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
73        }
74      },
75
76      _renderClosed: function() {
77        if (this.animated) {
78          if (this.withBackdrop) {
79            this.backdropElement.close();
80          }
81          this.classList.remove('opened');
82          this.fire('simple-overlay-close-animation-start');
83        } else {
84          Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
85        }
86      },
87
88      __onTransitionEnd: function(e) {
89        if (e && e.target === this) {
90          if (this.opened) {
91            this._finishRenderOpened();
92          } else {
93            this._finishRenderClosed();
94          }
95        }
96      },
97
98    });
99
100  })();
101</script>
102