OLD | NEW |
| (Empty) |
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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="iron-overlay-manager.html"> | |
13 | |
14 <!-- | |
15 `iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It
should be a | |
16 singleton. | |
17 | |
18 ### Styling | |
19 | |
20 The following custom properties and mixins are available for styling. | |
21 | |
22 Custom property | Description | Default | |
23 -------------------------------------------|------------------------|--------- | |
24 `--iron-overlay-backdrop-background-color` | Backdrop background color
| #000 | |
25 `--iron-overlay-backdrop-opacity` | Backdrop opacity
| 0.6 | |
26 `--iron-overlay-backdrop` | Mixin applied to `iron-overlay-back
drop`. | {} | |
27 `--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-back
drop` when it is displayed | {} | |
28 --> | |
29 | |
30 <dom-module id="iron-overlay-backdrop"> | |
31 | |
32 <style> | |
33 | |
34 :host { | |
35 position: fixed; | |
36 top: 0; | |
37 left: 0; | |
38 width: 100vw; | |
39 height: 100vh; | |
40 background-color: var(--iron-overlay-backdrop-background-color, #000); | |
41 opacity: 0; | |
42 transition: opacity 0.2s; | |
43 | |
44 @apply(--iron-overlay-backdrop); | |
45 } | |
46 | |
47 :host([opened]) { | |
48 opacity: var(--iron-overlay-backdrop-opacity, 0.6); | |
49 | |
50 @apply(--iron-overlay-backdrop-opened); | |
51 } | |
52 | |
53 </style> | |
54 | |
55 <template> | |
56 <content></content> | |
57 </template> | |
58 | |
59 </dom-module> | |
60 | |
61 <script> | |
62 | |
63 (function() { | |
64 | |
65 Polymer({ | |
66 | |
67 is: 'iron-overlay-backdrop', | |
68 | |
69 properties: { | |
70 | |
71 /** | |
72 * Returns true if the backdrop is opened. | |
73 */ | |
74 opened: { | |
75 readOnly: true, | |
76 reflectToAttribute: true, | |
77 type: Boolean, | |
78 value: false | |
79 }, | |
80 | |
81 _manager: { | |
82 type: Object, | |
83 value: Polymer.IronOverlayManager | |
84 } | |
85 | |
86 }, | |
87 | |
88 /** | |
89 * Appends the backdrop to document body and sets its `z-index` to be below
the latest overlay. | |
90 */ | |
91 prepare: function() { | |
92 if (!this.parentNode) { | |
93 Polymer.dom(document.body).appendChild(this); | |
94 this.style.zIndex = this._manager.currentOverlayZ() - 1; | |
95 } | |
96 }, | |
97 | |
98 /** | |
99 * Shows the backdrop if needed. | |
100 */ | |
101 open: function() { | |
102 // only need to make the backdrop visible if this is called by the first o
verlay with a backdrop | |
103 if (this._manager.getBackdrops().length < 2) { | |
104 this._setOpened(true); | |
105 } | |
106 }, | |
107 | |
108 /** | |
109 * Hides the backdrop if needed. | |
110 */ | |
111 close: function() { | |
112 // only need to make the backdrop invisible if this is called by the last
overlay with a backdrop | |
113 if (this._manager.getBackdrops().length < 2) { | |
114 this._setOpened(false); | |
115 } | |
116 }, | |
117 | |
118 /** | |
119 * Removes the backdrop from document body if needed. | |
120 */ | |
121 complete: function() { | |
122 // only remove the backdrop if there are no more overlays with backdrops | |
123 if (this._manager.getBackdrops().length === 0 && this.parentNode) { | |
124 Polymer.dom(this.parentNode).removeChild(this); | |
125 } | |
126 } | |
127 | |
128 }); | |
129 | |
130 })(); | |
131 | |
132 </script> | |
OLD | NEW |