| OLD | NEW |
|---|
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 /** | 4 /** |
| 5 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays | 5 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays |
| 6 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety | 6 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety |
| 7 of UI controls including dialogs and drop downs. Multiple overlays may be displa
yed at once. | 7 of UI controls including dialogs and drop downs. Multiple overlays may be displa
yed at once. |
| 8 | 8 |
| 9 See the [demo source code](https://github.com/PolymerElements/iron-overlay-behav
ior/blob/master/demo/simple-overlay.html) |
| 10 for an example. |
| 11 |
| 9 ### Closing and canceling | 12 ### Closing and canceling |
| 10 | 13 |
| 11 A dialog may be hidden by closing or canceling. The difference between close and
cancel is user | 14 An overlay may be hidden by closing or canceling. The difference between close a
nd cancel is user |
| 12 intent. Closing generally implies that the user acknowledged the content on the
overlay. By default, | 15 intent. Closing generally implies that the user acknowledged the content on the
overlay. By default, |
| 13 it will cancel whenever the user taps outside it or presses the escape key. This
behavior is | 16 it will cancel whenever the user taps outside it or presses the escape key. This
behavior is |
| 14 configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click
` properties. | 17 configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click
` properties. |
| 15 `close()` should be called explicitly by the implementer when the user interacts
with a control | 18 `close()` should be called explicitly by the implementer when the user interacts
with a control |
| 16 in the overlay element. When the dialog is canceled, the overlay fires an 'iron-
overlay-canceled' | 19 in the overlay element. When the dialog is canceled, the overlay fires an 'iron-
overlay-canceled' |
| 17 event. Call `preventDefault` on this event to prevent the overlay from closing. | 20 event. Call `preventDefault` on this event to prevent the overlay from closing. |
| 18 | 21 |
| 19 ### Positioning | 22 ### Positioning |
| 20 | 23 |
| 21 By default the element is sized and positioned to fit and centered inside the wi
ndow. You can | 24 By default the element is sized and positioned to fit and centered inside the wi
ndow. You can |
| 22 position and size it manually using CSS. See `Polymer.IronFitBehavior`. | 25 position and size it manually using CSS. See `Polymer.IronFitBehavior`. |
| 23 | 26 |
| 24 ### Backdrop | 27 ### Backdrop |
| 25 | 28 |
| 26 Set the `with-backdrop` attribute to display a backdrop behind the overlay. The
backdrop is | 29 Set the `with-backdrop` attribute to display a backdrop behind the overlay. The
backdrop is |
| 27 appended to `<body>` and is of type `<iron-overlay-backdrop>`. See its doc page
for styling | 30 appended to `<body>` and is of type `<iron-overlay-backdrop>`. See its doc page
for styling |
| 28 options. | 31 options. |
| 29 | 32 |
| 33 In addition, `with-backdrop` will wrap the focus within the content in the light
DOM. |
| 34 Override the [`_focusableNodes` getter](#Polymer.IronOverlayBehavior:property-_f
ocusableNodes) |
| 35 to achieve a different behavior. |
| 36 |
| 30 ### Limitations | 37 ### Limitations |
| 31 | 38 |
| 32 The element is styled to appear on top of other content by setting its `z-index`
property. You | 39 The element is styled to appear on top of other content by setting its `z-index`
property. You |
| 33 must ensure no element has a stacking context with a higher `z-index` than its p
arent stacking | 40 must ensure no element has a stacking context with a higher `z-index` than its p
arent stacking |
| 34 context. You should place this element as a child of `<body>` whenever possible. | 41 context. You should place this element as a child of `<body>` whenever possible. |
| 35 | 42 |
| 36 @demo demo/index.html | 43 @demo demo/index.html |
| 37 @polymerBehavior Polymer.IronOverlayBehavior | 44 @polymerBehavior Polymer.IronOverlayBehavior |
| 38 */ | 45 */ |
| 39 | 46 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 55 * True if the overlay was canceled when it was last closed. | 62 * True if the overlay was canceled when it was last closed. |
| 56 */ | 63 */ |
| 57 canceled: { | 64 canceled: { |
| 58 observer: '_canceledChanged', | 65 observer: '_canceledChanged', |
| 59 readOnly: true, | 66 readOnly: true, |
| 60 type: Boolean, | 67 type: Boolean, |
| 61 value: false | 68 value: false |
| 62 }, | 69 }, |
| 63 | 70 |
| 64 /** | 71 /** |
| 65 * Set to true to display a backdrop behind the overlay. | 72 * Set to true to display a backdrop behind the overlay. It traps the focu
s |
| 73 * within the light DOM of the overlay. |
| 66 */ | 74 */ |
| 67 withBackdrop: { | 75 withBackdrop: { |
| 68 observer: '_withBackdropChanged', | 76 observer: '_withBackdropChanged', |
| 69 type: Boolean | 77 type: Boolean |
| 70 }, | 78 }, |
| 71 | 79 |
| 72 /** | 80 /** |
| 73 * Set to true to disable auto-focusing the overlay or child nodes with | 81 * Set to true to disable auto-focusing the overlay or child nodes with |
| 74 * the `autofocus` attribute` when the overlay is opened. | 82 * the `autofocus` attribute` when the overlay is opened. |
| 75 */ | 83 */ |
| (...skipping 244 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 320 this.__isAnimating = true; | 328 this.__isAnimating = true; |
| 321 | 329 |
| 322 // requestAnimationFrame for non-blocking rendering | 330 // requestAnimationFrame for non-blocking rendering |
| 323 this.__openChangedAsync = window.requestAnimationFrame(function() { | 331 this.__openChangedAsync = window.requestAnimationFrame(function() { |
| 324 this.__openChangedAsync = null; | 332 this.__openChangedAsync = null; |
| 325 if (this.opened) { | 333 if (this.opened) { |
| 326 this._manager.addOverlay(this); | 334 this._manager.addOverlay(this); |
| 327 this._prepareRenderOpened(); | 335 this._prepareRenderOpened(); |
| 328 this._renderOpened(); | 336 this._renderOpened(); |
| 329 } else { | 337 } else { |
| 338 // Move the focus before actually closing. |
| 339 this._applyFocus(); |
| 330 this._renderClosed(); | 340 this._renderClosed(); |
| 331 } | 341 } |
| 332 }.bind(this)); | 342 }.bind(this)); |
| 333 }, | 343 }, |
| 334 | 344 |
| 335 _canceledChanged: function() { | 345 _canceledChanged: function() { |
| 336 this.closingReason = this.closingReason || {}; | 346 this.closingReason = this.closingReason || {}; |
| 337 this.closingReason.canceled = this.canceled; | 347 this.closingReason.canceled = this.canceled; |
| 338 }, | 348 }, |
| 339 | 349 |
| (...skipping 16 matching lines...) Expand all Loading... |
| 356 * @protected | 366 * @protected |
| 357 */ | 367 */ |
| 358 _prepareRenderOpened: function() { | 368 _prepareRenderOpened: function() { |
| 359 | 369 |
| 360 // Needed to calculate the size of the overlay so that transitions on its
size | 370 // Needed to calculate the size of the overlay so that transitions on its
size |
| 361 // will have the correct starting points. | 371 // will have the correct starting points. |
| 362 this._preparePositioning(); | 372 this._preparePositioning(); |
| 363 this.refit(); | 373 this.refit(); |
| 364 this._finishPositioning(); | 374 this._finishPositioning(); |
| 365 | 375 |
| 376 // Move the focus to the child node with [autofocus]. |
| 377 this._applyFocus(); |
| 378 |
| 366 // Safari will apply the focus to the autofocus element when displayed for
the first time, | 379 // Safari will apply the focus to the autofocus element when displayed for
the first time, |
| 367 // so we blur it. Later, _applyFocus will set the focus if necessary. | 380 // so we blur it. Later, _applyFocus will set the focus if necessary. |
| 368 if (this.noAutoFocus && document.activeElement === this._focusNode) { | 381 if (this.noAutoFocus && document.activeElement === this._focusNode) { |
| 369 this._focusNode.blur(); | 382 this._focusNode.blur(); |
| 370 } | 383 } |
| 371 }, | 384 }, |
| 372 | 385 |
| 373 /** | 386 /** |
| 374 * Tasks which cause the overlay to actually open; typically play an animati
on. | 387 * Tasks which cause the overlay to actually open; typically play an animati
on. |
| 375 * @protected | 388 * @protected |
| 376 */ | 389 */ |
| 377 _renderOpened: function() { | 390 _renderOpened: function() { |
| 378 this._finishRenderOpened(); | 391 this._finishRenderOpened(); |
| 379 }, | 392 }, |
| 380 | 393 |
| 381 /** | 394 /** |
| 382 * Tasks which cause the overlay to actually close; typically play an animat
ion. | 395 * Tasks which cause the overlay to actually close; typically play an animat
ion. |
| 383 * @protected | 396 * @protected |
| 384 */ | 397 */ |
| 385 _renderClosed: function() { | 398 _renderClosed: function() { |
| 386 this._finishRenderClosed(); | 399 this._finishRenderClosed(); |
| 387 }, | 400 }, |
| 388 | 401 |
| 389 /** | 402 /** |
| 390 * Tasks to be performed at the end of open action. Will fire `iron-overlay-
opened`. | 403 * Tasks to be performed at the end of open action. Will fire `iron-overlay-
opened`. |
| 391 * @protected | 404 * @protected |
| 392 */ | 405 */ |
| 393 _finishRenderOpened: function() { | 406 _finishRenderOpened: function() { |
| 394 // Focus the child node with [autofocus] | |
| 395 this._applyFocus(); | |
| 396 | 407 |
| 397 this.notifyResize(); | 408 this.notifyResize(); |
| 398 this.__isAnimating = false; | 409 this.__isAnimating = false; |
| 399 | 410 |
| 400 // Store it so we don't query too much. | 411 // Store it so we don't query too much. |
| 401 var focusableNodes = this._focusableNodes; | 412 var focusableNodes = this._focusableNodes; |
| 402 this.__firstFocusableNode = focusableNodes[0]; | 413 this.__firstFocusableNode = focusableNodes[0]; |
| 403 this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1]; | 414 this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1]; |
| 404 | 415 |
| 405 this.fire('iron-overlay-opened'); | 416 this.fire('iron-overlay-opened'); |
| 406 }, | 417 }, |
| 407 | 418 |
| 408 /** | 419 /** |
| 409 * Tasks to be performed at the end of close action. Will fire `iron-overlay
-closed`. | 420 * Tasks to be performed at the end of close action. Will fire `iron-overlay
-closed`. |
| 410 * @protected | 421 * @protected |
| 411 */ | 422 */ |
| 412 _finishRenderClosed: function() { | 423 _finishRenderClosed: function() { |
| 413 // Hide the overlay and remove the backdrop. | 424 // Hide the overlay and remove the backdrop. |
| 414 this.style.display = 'none'; | 425 this.style.display = 'none'; |
| 415 // Reset z-index only at the end of the animation. | 426 // Reset z-index only at the end of the animation. |
| 416 this.style.zIndex = ''; | 427 this.style.zIndex = ''; |
| 417 | 428 |
| 418 this._applyFocus(); | |
| 419 | |
| 420 this.notifyResize(); | 429 this.notifyResize(); |
| 421 this.__isAnimating = false; | 430 this.__isAnimating = false; |
| 422 this.fire('iron-overlay-closed', this.closingReason); | 431 this.fire('iron-overlay-closed', this.closingReason); |
| 423 }, | 432 }, |
| 424 | 433 |
| 425 _preparePositioning: function() { | 434 _preparePositioning: function() { |
| 426 this.style.transition = this.style.webkitTransition = 'none'; | 435 this.style.transition = this.style.webkitTransition = 'none'; |
| 427 this.style.transform = this.style.webkitTransform = 'none'; | 436 this.style.transform = this.style.webkitTransform = 'none'; |
| 428 this.style.display = ''; | 437 this.style.display = ''; |
| 429 }, | 438 }, |
| (...skipping 164 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 594 */ | 603 */ |
| 595 | 604 |
| 596 /** | 605 /** |
| 597 * Fired after the overlay closes. | 606 * Fired after the overlay closes. |
| 598 * @event iron-overlay-closed | 607 * @event iron-overlay-closed |
| 599 * @param {Event} event The `event.detail` is the `closingReason` property | 608 * @param {Event} event The `event.detail` is the `closingReason` property |
| 600 * (contains `canceled`, whether the overlay was canceled). | 609 * (contains `canceled`, whether the overlay was canceled). |
| 601 */ | 610 */ |
| 602 | 611 |
| 603 })(); | 612 })(); |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2158913007:
Roll Polymer from 1.5.0 -> 1.6.0 to pick up native CSS custom props (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master