OLD | NEW |
(Empty) | |
| 1 /** |
| 2 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design |
| 3 dialog. |
| 4 |
| 5 For example, if `<paper-dialog-impl>` implements this behavior: |
| 6 |
| 7 <paper-dialog-impl> |
| 8 <h2>Header</h2> |
| 9 <div>Dialog body</div> |
| 10 <div class="buttons"> |
| 11 <paper-button dialog-dismiss>Cancel</paper-button> |
| 12 <paper-button dialog-confirm>Accept</paper-button> |
| 13 </div> |
| 14 </paper-dialog-impl> |
| 15 |
| 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 |
| 18 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. |
| 19 |
| 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 |
| 22 to include `confirmed: true`. |
| 23 |
| 24 ### Accessibility |
| 25 |
| 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"`. |
| 28 |
| 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. |
| 31 |
| 32 @hero hero.svg |
| 33 @demo demo/index.html |
| 34 @polymerBehavior Polymer.PaperDialogBehavior |
| 35 */ |
| 36 |
| 37 Polymer.PaperDialogBehaviorImpl = { |
| 38 |
| 39 hostAttributes: { |
| 40 'role': 'dialog', |
| 41 'tabindex': '-1' |
| 42 }, |
| 43 |
| 44 properties: { |
| 45 |
| 46 /** |
| 47 * If `modal` is true, this implies `no-cancel-on-outside-click`, `no-canc
el-on-esc-key` and `with-backdrop`. |
| 48 */ |
| 49 modal: { |
| 50 type: Boolean, |
| 51 value: false |
| 52 } |
| 53 |
| 54 }, |
| 55 |
| 56 observers: [ |
| 57 '_modalChanged(modal, _readied)' |
| 58 ], |
| 59 |
| 60 listeners: { |
| 61 'tap': '_onDialogClick' |
| 62 }, |
| 63 |
| 64 ready: function () { |
| 65 // Only now these properties can be read. |
| 66 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; |
| 67 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; |
| 68 this.__prevWithBackdrop = this.withBackdrop; |
| 69 }, |
| 70 |
| 71 _modalChanged: function(modal, readied) { |
| 72 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop
. |
| 73 // We need to wait for the element to be ready before we can read the |
| 74 // properties values. |
| 75 if (!readied) { |
| 76 return; |
| 77 } |
| 78 |
| 79 if (modal) { |
| 80 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; |
| 81 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; |
| 82 this.__prevWithBackdrop = this.withBackdrop; |
| 83 this.noCancelOnOutsideClick = true; |
| 84 this.noCancelOnEscKey = true; |
| 85 this.withBackdrop = true; |
| 86 } else { |
| 87 // If the value was changed to false, let it false. |
| 88 this.noCancelOnOutsideClick = this.noCancelOnOutsideClick && |
| 89 this.__prevNoCancelOnOutsideClick; |
| 90 this.noCancelOnEscKey = this.noCancelOnEscKey && |
| 91 this.__prevNoCancelOnEscKey; |
| 92 this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop; |
| 93 } |
| 94 }, |
| 95 |
| 96 _updateClosingReasonConfirmed: function(confirmed) { |
| 97 this.closingReason = this.closingReason || {}; |
| 98 this.closingReason.confirmed = confirmed; |
| 99 }, |
| 100 |
| 101 /** |
| 102 * Will dismiss the dialog if user clicked on an element with dialog-dismiss |
| 103 * or dialog-confirm attribute. |
| 104 */ |
| 105 _onDialogClick: function(event) { |
| 106 // Search for the element with dialog-confirm or dialog-dismiss, |
| 107 // from the root target until this (excluded). |
| 108 var path = Polymer.dom(event).path; |
| 109 for (var i = 0; i < path.indexOf(this); i++) { |
| 110 var target = path[i]; |
| 111 if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || tar
get.hasAttribute('dialog-confirm'))) { |
| 112 this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm
')); |
| 113 this.close(); |
| 114 event.stopPropagation(); |
| 115 break; |
| 116 } |
| 117 } |
| 118 } |
| 119 |
| 120 }; |
| 121 |
| 122 /** @polymerBehavior */ |
| 123 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; |
OLD | NEW |