OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 display: block; | 70 display: block; |
71 position: fixed; | 71 position: fixed; |
72 background-color: var(--paper-toast-background-color, #323232); | 72 background-color: var(--paper-toast-background-color, #323232); |
73 color: var(--paper-toast-color, #f1f1f1); | 73 color: var(--paper-toast-color, #f1f1f1); |
74 min-height: 48px; | 74 min-height: 48px; |
75 min-width: 288px; | 75 min-width: 288px; |
76 padding: 16px 24px; | 76 padding: 16px 24px; |
77 box-sizing: border-box; | 77 box-sizing: border-box; |
78 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); | 78 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
79 border-radius: 2px; | 79 border-radius: 2px; |
80 left: 0; | |
81 bottom: 0; | |
82 margin: 12px; | 80 margin: 12px; |
83 font-size: 14px; | 81 font-size: 14px; |
84 cursor: default; | 82 cursor: default; |
85 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; | 83 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; |
86 transition: transform 0.3s, opacity 0.3s; | 84 transition: transform 0.3s, opacity 0.3s; |
87 opacity: 0; | 85 opacity: 0; |
88 -webkit-transform: translateY(100px); | 86 -webkit-transform: translateY(100px); |
89 transform: translateY(100px); | 87 transform: translateY(100px); |
90 @apply(--paper-font-common-base); | 88 @apply(--paper-font-common-base); |
91 } | 89 } |
(...skipping 27 matching lines...) Expand all Loading... |
119 | 117 |
120 Polymer({ | 118 Polymer({ |
121 is: 'paper-toast', | 119 is: 'paper-toast', |
122 | 120 |
123 behaviors: [ | 121 behaviors: [ |
124 Polymer.IronOverlayBehavior | 122 Polymer.IronOverlayBehavior |
125 ], | 123 ], |
126 | 124 |
127 properties: { | 125 properties: { |
128 /** | 126 /** |
| 127 * The element to fit `this` into. |
| 128 * Overridden from `Polymer.IronFitBehavior`. |
| 129 */ |
| 130 fitInto: { |
| 131 type: Object, |
| 132 value: window, |
| 133 observer: '_onFitIntoChanged' |
| 134 }, |
| 135 |
| 136 /** |
| 137 * The orientation against which to align the dropdown content |
| 138 * horizontally relative to `positionTarget`. |
| 139 * Overridden from `Polymer.IronFitBehavior`. |
| 140 */ |
| 141 horizontalAlign: { |
| 142 type: String, |
| 143 value: 'left' |
| 144 }, |
| 145 |
| 146 /** |
| 147 * The orientation against which to align the dropdown content |
| 148 * vertically relative to `positionTarget`. |
| 149 * Overridden from `Polymer.IronFitBehavior`. |
| 150 */ |
| 151 verticalAlign: { |
| 152 type: String, |
| 153 value: 'bottom' |
| 154 }, |
| 155 |
| 156 /** |
129 * The duration in milliseconds to show the toast. | 157 * The duration in milliseconds to show the toast. |
130 * Set to `0`, a negative number, or `Infinity`, to disable the | 158 * Set to `0`, a negative number, or `Infinity`, to disable the |
131 * toast auto-closing. | 159 * toast auto-closing. |
132 */ | 160 */ |
133 duration: { | 161 duration: { |
134 type: Number, | 162 type: Number, |
135 value: 3000 | 163 value: 3000 |
136 }, | 164 }, |
137 | 165 |
138 /** | 166 /** |
(...skipping 27 matching lines...) Expand all Loading... |
166 listeners: { | 194 listeners: { |
167 'transitionend': '__onTransitionEnd' | 195 'transitionend': '__onTransitionEnd' |
168 }, | 196 }, |
169 | 197 |
170 /** | 198 /** |
171 * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`. | 199 * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`. |
172 * @property visible | 200 * @property visible |
173 * @deprecated | 201 * @deprecated |
174 */ | 202 */ |
175 get visible() { | 203 get visible() { |
176 console.warn('`visible` is deprecated, use `opened` instead'); | 204 Polymer.Base._warn('`visible` is deprecated, use `opened` instead'); |
177 return this.opened; | 205 return this.opened; |
178 }, | 206 }, |
179 | 207 |
180 /** | 208 /** |
181 * Read-only. Can auto-close if duration is a positive finite number. | 209 * Read-only. Can auto-close if duration is a positive finite number. |
182 * @property _canAutoClose | 210 * @property _canAutoClose |
183 */ | 211 */ |
184 get _canAutoClose() { | 212 get _canAutoClose() { |
185 return this.duration > 0 && this.duration !== Infinity; | 213 return this.duration > 0 && this.duration !== Infinity; |
186 }, | 214 }, |
187 | 215 |
188 created: function() { | 216 created: function() { |
189 this._autoClose = null; | 217 this._autoClose = null; |
190 Polymer.IronA11yAnnouncer.requestAvailability(); | 218 Polymer.IronA11yAnnouncer.requestAvailability(); |
191 }, | 219 }, |
192 | 220 |
193 /** | 221 /** |
194 * Show the toast. Without arguments, this is the same as `open()` from
`IronOverlayBehavior`. | 222 * Show the toast. Without arguments, this is the same as `open()` from
`IronOverlayBehavior`. |
195 * @param {(Object|string)=} properties Properties to be set before open
ing the toast. | 223 * @param {(Object|string)=} properties Properties to be set before open
ing the toast. |
196 * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3
000})` | 224 * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3
000})` |
197 */ | 225 */ |
198 show: function(properties) { | 226 show: function(properties) { |
199 if (typeof properties == 'string') { | 227 if (typeof properties == 'string') { |
200 properties = { text: properties }; | 228 properties = { text: properties }; |
201 } | 229 } |
202 for (var property in properties) { | 230 for (var property in properties) { |
203 if (property.indexOf('_') === 0) { | 231 if (property.indexOf('_') === 0) { |
204 console.warn('The property "' + property + '" is private and was n
ot set.'); | 232 Polymer.Base._warn('The property "' + property + '" is private and
was not set.'); |
205 } else if (property in this) { | 233 } else if (property in this) { |
206 this[property] = properties[property]; | 234 this[property] = properties[property]; |
207 } else { | 235 } else { |
208 console.warn('The property "' + property + '" is not valid.'); | 236 Polymer.Base._warn('The property "' + property + '" is not valid.'
); |
209 } | 237 } |
210 } | 238 } |
211 this.open(); | 239 this.open(); |
212 }, | 240 }, |
213 | 241 |
214 /** | 242 /** |
215 * Hide the toast. Same as `close()` from `IronOverlayBehavior`. | 243 * Hide the toast. Same as `close()` from `IronOverlayBehavior`. |
216 */ | 244 */ |
217 hide: function() { | 245 hide: function() { |
218 this.close(); | 246 this.close(); |
219 }, | 247 }, |
220 | 248 |
221 /** | 249 /** |
222 * Overridden from `IronFitBehavior`. | |
223 * Positions the toast at the bottom left of fitInto. | |
224 */ | |
225 center: function () { | |
226 if (this.fitInto === window) { | |
227 this.style.bottom = this.style.left = ''; | |
228 } else { | |
229 var rect = this.fitInto.getBoundingClientRect(); | |
230 this.style.left = rect.left + 'px'; | |
231 this.style.bottom = (window.innerHeight - rect.bottom) + 'px'; | |
232 } | |
233 }, | |
234 | |
235 /** | |
236 * Called on transitions of the toast, indicating a finished animation | 250 * Called on transitions of the toast, indicating a finished animation |
237 * @private | 251 * @private |
238 */ | 252 */ |
239 __onTransitionEnd: function(e) { | 253 __onTransitionEnd: function(e) { |
240 // there are different transitions that are happening when opening and | 254 // there are different transitions that are happening when opening and |
241 // closing the toast. The last one so far is for `opacity`. | 255 // closing the toast. The last one so far is for `opacity`. |
242 // This marks the end of the transition, so we check for this to deter
mine if this | 256 // This marks the end of the transition, so we check for this to deter
mine if this |
243 // is the correct event. | 257 // is the correct event. |
244 if (e && e.target === this && e.propertyName === 'opacity') { | 258 if (e && e.target === this && e.propertyName === 'opacity') { |
245 if (this.opened) { | 259 if (this.opened) { |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
284 }, | 298 }, |
285 | 299 |
286 /** | 300 /** |
287 * Overridden from `IronOverlayBehavior`. | 301 * Overridden from `IronOverlayBehavior`. |
288 */ | 302 */ |
289 _renderClosed: function() { | 303 _renderClosed: function() { |
290 this.classList.remove('paper-toast-open'); | 304 this.classList.remove('paper-toast-open'); |
291 }, | 305 }, |
292 | 306 |
293 /** | 307 /** |
294 * Overridden from `IronOverlayBehavior`. | 308 * @private |
295 * iron-fit-behavior will set the inline style position: static, which | |
296 * causes the toast to be rendered incorrectly when opened by default. | |
297 */ | 309 */ |
298 _onIronResize: function() { | 310 _onFitIntoChanged: function(fitInto) { |
299 Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments); | 311 this.positionTarget = fitInto; |
300 if (this.opened) { | |
301 // Make sure there is no inline style for position. | |
302 this.style.position = ''; | |
303 } | |
304 } | 312 } |
305 | 313 |
306 /** | 314 /** |
307 * Fired when `paper-toast` is opened. | 315 * Fired when `paper-toast` is opened. |
308 * | 316 * |
309 * @event 'iron-announce' | 317 * @event 'iron-announce' |
310 * @param {{text: string}} detail Contains text that will be announced. | 318 * @param {{text: string}} detail Contains text that will be announced. |
311 */ | 319 */ |
312 }); | 320 }); |
313 })(); | 321 })(); |
314 </script> | 322 </script> |
315 </dom-module> | 323 </dom-module> |
OLD | NEW |