| OLD | NEW |
| 1 /** | 1 /** |
| 2 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays | 2 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays |
| 3 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety | 3 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety |
| 4 of UI controls including dialogs and drop downs. Multiple overlays may be displa
yed at once. | 4 of UI controls including dialogs and drop downs. Multiple overlays may be displa
yed at once. |
| 5 | 5 |
| 6 ### Closing and canceling | 6 ### Closing and canceling |
| 7 | 7 |
| 8 A dialog may be hidden by closing or canceling. The difference between close and
cancel is user | 8 A dialog may be hidden by closing or canceling. The difference between close and
cancel is user |
| 9 intent. Closing generally implies that the user acknowledged the content on the
overlay. By default, | 9 intent. Closing generally implies that the user acknowledged the content on the
overlay. By default, |
| 10 it will cancel whenever the user taps outside it or presses the escape key. This
behavior is | 10 it will cancel whenever the user taps outside it or presses the escape key. This
behavior is |
| (...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 113 | 113 |
| 114 _boundOnCaptureKeydown: { | 114 _boundOnCaptureKeydown: { |
| 115 type: Function, | 115 type: Function, |
| 116 value: function() { | 116 value: function() { |
| 117 return this._onCaptureKeydown.bind(this); | 117 return this._onCaptureKeydown.bind(this); |
| 118 } | 118 } |
| 119 } | 119 } |
| 120 | 120 |
| 121 }, | 121 }, |
| 122 | 122 |
| 123 /** | |
| 124 * Fired after the `iron-overlay` opens. | |
| 125 * @event iron-overlay-opened | |
| 126 */ | |
| 127 | |
| 128 /** | |
| 129 * Fired after the `iron-overlay` closes. | |
| 130 * @event iron-overlay-closed {{canceled: boolean}} detail - | |
| 131 * canceled: True if the overlay was canceled. | |
| 132 */ | |
| 133 | |
| 134 listeners: { | 123 listeners: { |
| 135 'click': '_onClick', | 124 'click': '_onClick', |
| 136 'iron-resize': '_onIronResize' | 125 'iron-resize': '_onIronResize' |
| 137 }, | 126 }, |
| 138 | 127 |
| 139 /** | 128 /** |
| 140 * The backdrop element. | 129 * The backdrop element. |
| 141 * @type Node | 130 * @type Node |
| 142 */ | 131 */ |
| 143 get backdropElement() { | 132 get backdropElement() { |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 225 | 214 |
| 226 if (this.opened) { | 215 if (this.opened) { |
| 227 this._prepareRenderOpened(); | 216 this._prepareRenderOpened(); |
| 228 } | 217 } |
| 229 | 218 |
| 230 // async here to allow overlay layer to become visible. | 219 // async here to allow overlay layer to become visible. |
| 231 this._openChangedAsync = this.async(function() { | 220 this._openChangedAsync = this.async(function() { |
| 232 // overlay becomes visible here | 221 // overlay becomes visible here |
| 233 this.style.display = ''; | 222 this.style.display = ''; |
| 234 // force layout to ensure transitions will go | 223 // force layout to ensure transitions will go |
| 235 this.offsetWidth; | 224 /** @suppress {suspiciousCode} */ this.offsetWidth; |
| 236 if (this.opened) { | 225 if (this.opened) { |
| 237 this._renderOpened(); | 226 this._renderOpened(); |
| 238 } else { | 227 } else { |
| 239 this._renderClosed(); | 228 this._renderClosed(); |
| 240 } | 229 } |
| 241 this._openChangedAsync = null; | 230 this._openChangedAsync = null; |
| 242 }); | 231 }); |
| 243 | 232 |
| 244 }, | 233 }, |
| 245 | 234 |
| (...skipping 103 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 _preparePositioning: function() { | 338 _preparePositioning: function() { |
| 350 this.style.transition = this.style.webkitTransition = 'none'; | 339 this.style.transition = this.style.webkitTransition = 'none'; |
| 351 this.style.transform = this.style.webkitTransform = 'none'; | 340 this.style.transform = this.style.webkitTransform = 'none'; |
| 352 this.style.display = ''; | 341 this.style.display = ''; |
| 353 }, | 342 }, |
| 354 | 343 |
| 355 _finishPositioning: function() { | 344 _finishPositioning: function() { |
| 356 this.style.display = 'none'; | 345 this.style.display = 'none'; |
| 357 this.style.transform = this.style.webkitTransform = ''; | 346 this.style.transform = this.style.webkitTransform = ''; |
| 358 // force layout to avoid application of transform | 347 // force layout to avoid application of transform |
| 359 this.offsetWidth; | 348 /** @suppress {suspiciousCode} */ this.offsetWidth; |
| 360 this.style.transition = this.style.webkitTransition = ''; | 349 this.style.transition = this.style.webkitTransition = ''; |
| 361 }, | 350 }, |
| 362 | 351 |
| 363 _applyFocus: function() { | 352 _applyFocus: function() { |
| 364 if (this.opened) { | 353 if (this.opened) { |
| 365 if (!this.noAutoFocus) { | 354 if (!this.noAutoFocus) { |
| 366 this._focusNode.focus(); | 355 this._focusNode.focus(); |
| 367 } | 356 } |
| 368 } else { | 357 } else { |
| 369 this._focusNode.blur(); | 358 this._focusNode.blur(); |
| (...skipping 30 matching lines...) Expand all Loading... |
| 400 _onIronResize: function() { | 389 _onIronResize: function() { |
| 401 if (this._squelchNextResize) { | 390 if (this._squelchNextResize) { |
| 402 this._squelchNextResize = false; | 391 this._squelchNextResize = false; |
| 403 return; | 392 return; |
| 404 } | 393 } |
| 405 if (this.opened) { | 394 if (this.opened) { |
| 406 this.refit(); | 395 this.refit(); |
| 407 } | 396 } |
| 408 } | 397 } |
| 409 | 398 |
| 399 /** |
| 400 * Fired after the `iron-overlay` opens. |
| 401 * @event iron-overlay-opened |
| 402 */ |
| 403 |
| 404 /** |
| 405 * Fired after the `iron-overlay` closes. |
| 406 * @event iron-overlay-closed |
| 407 * @param {{canceled: (boolean|undefined)}} set to the `closingReason` attribute |
| 408 */ |
| 410 }; | 409 }; |
| 411 | 410 |
| 412 /** @polymerBehavior */ | 411 /** @polymerBehavior */ |
| 413 Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableB
ehavior, Polymer.IronOverlayBehaviorImpl]; | 412 Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableB
ehavior, Polymer.IronOverlayBehaviorImpl]; |
| OLD | NEW |