| OLD | NEW |
| 1 /** | 1 /** |
| 2 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design | 2 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design |
| 3 dialog. | 3 dialog. |
| 4 | 4 |
| 5 For example, if `<paper-dialog-impl>` implements this behavior: | 5 For example, if `<paper-dialog-impl>` implements this behavior: |
| 6 | 6 |
| 7 <paper-dialog-impl> | 7 <paper-dialog-impl> |
| 8 <h2>Header</h2> | 8 <h2>Header</h2> |
| 9 <div>Dialog body</div> | 9 <div>Dialog body</div> |
| 10 <div class="buttons"> | 10 <div class="buttons"> |
| 11 <paper-button dialog-dismiss>Cancel</paper-button> | 11 <paper-button dialog-dismiss>Cancel</paper-button> |
| 12 <paper-button dialog-confirm>Accept</paper-button> | 12 <paper-button dialog-confirm>Accept</paper-button> |
| 13 </div> | 13 </div> |
| 14 </paper-dialog-impl> | 14 </paper-dialog-impl> |
| 15 | 15 |
| 16 `paper-dialog-shared-styles.html` provide styles for a header, content area, and
an action area for buttons. | 16 `paper-dialog-shared-styles.html` provide styles for a header, content area, and
an action area for buttons. |
| 17 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the | 17 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the |
| 18 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. | 18 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. |
| 19 | 19 |
| 20 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the | 20 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the |
| 21 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas
on` will update | 21 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas
on` will update |
| 22 to include `confirmed: true`. | 22 to include `confirmed: true`. |
| 23 | 23 |
| 24 ### Accessibility | 24 ### Accessibility |
| 25 | 25 |
| 26 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate | 26 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate |
| 27 to override this attribute with `role="alertdialog"`. | 27 to override this attribute with `role="alertdialog"`. |
| 28 | 28 |
| 29 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. | 29 If `modal` is set, the element will prevent the focus from exiting the element. |
| 30 It will also ensure that focus remains in the dialog. | 30 It will also ensure that focus remains in the dialog. |
| 31 | 31 |
| 32 @hero hero.svg | 32 @hero hero.svg |
| 33 @demo demo/index.html | 33 @demo demo/index.html |
| 34 @polymerBehavior Polymer.PaperDialogBehavior | 34 @polymerBehavior Polymer.PaperDialogBehavior |
| 35 */ | 35 */ |
| 36 | 36 |
| 37 Polymer.PaperDialogBehaviorImpl = { | 37 Polymer.PaperDialogBehaviorImpl = { |
| 38 | 38 |
| 39 hostAttributes: { | 39 hostAttributes: { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 62 }, | 62 }, |
| 63 | 63 |
| 64 ready: function () { | 64 ready: function () { |
| 65 // Only now these properties can be read. | 65 // Only now these properties can be read. |
| 66 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; | 66 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; |
| 67 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; | 67 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; |
| 68 this.__prevWithBackdrop = this.withBackdrop; | 68 this.__prevWithBackdrop = this.withBackdrop; |
| 69 }, | 69 }, |
| 70 | 70 |
| 71 _modalChanged: function(modal, readied) { | 71 _modalChanged: function(modal, readied) { |
| 72 if (modal) { | |
| 73 this.setAttribute('aria-modal', 'true'); | |
| 74 } else { | |
| 75 this.setAttribute('aria-modal', 'false'); | |
| 76 } | |
| 77 | |
| 78 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop
. | 72 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop
. |
| 79 // We need to wait for the element to be ready before we can read the | 73 // We need to wait for the element to be ready before we can read the |
| 80 // properties values. | 74 // properties values. |
| 81 if (!readied) { | 75 if (!readied) { |
| 82 return; | 76 return; |
| 83 } | 77 } |
| 84 | 78 |
| 85 if (modal) { | 79 if (modal) { |
| 86 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; | 80 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; |
| 87 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; | 81 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 120 event.stopPropagation(); | 114 event.stopPropagation(); |
| 121 break; | 115 break; |
| 122 } | 116 } |
| 123 } | 117 } |
| 124 } | 118 } |
| 125 | 119 |
| 126 }; | 120 }; |
| 127 | 121 |
| 128 /** @polymerBehavior */ | 122 /** @polymerBehavior */ |
| 129 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; | 123 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; |
| OLD | NEW |