• 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
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