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 |