OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html"> | |
13 <link rel="import" href="../paper-styles/paper-styles.html"> | |
14 | |
15 <script> | |
16 | |
17 /** | |
18 Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a M
aterial Design | |
19 dialog. | |
20 | |
21 For example, if `<paper-dialog-impl>` implements this behavior: | |
22 | |
23 <paper-dialog-impl> | |
24 <h2>Header</h2> | |
25 <div>Dialog body</div> | |
26 <div class="buttons"> | |
27 <paper-button dialog-dismiss>Cancel</paper-button> | |
28 <paper-button dialog-confirm>Accept</paper-button> | |
29 </div> | |
30 </paper-dialog-impl> | |
31 | |
32 `paper-dialog-common.css` provide styles for a header, content area, and an acti
on area for buttons. | |
33 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y
ou can use the | |
34 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin
g content area. | |
35 | |
36 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls
to close the | |
37 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas
on` will update | |
38 to include `confirmed: true`. | |
39 | |
40 ### Styling | |
41 | |
42 The following custom properties and mixins are available for styling. | |
43 | |
44 Custom property | Description | Default | |
45 ----------------|-------------|---------- | |
46 `--paper-dialog-background-color` | Dialog background color
| `--primary-background-color` | |
47 `--paper-dialog-color` | Dialog foreground color
| `--primary-text-color` | |
48 `--paper-dialog` | Mixin applied to the dialog
| `{}` | |
49 `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element
| `{}` | |
50 `--paper-dialog-button-color` | Button area foreground color
| `--default-primary-color` | |
51 | |
52 ### Accessibility | |
53 | |
54 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate | |
55 to override this attribute with `role="alertdialog"`. | |
56 | |
57 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. | |
58 It will also ensure that focus remains in the dialog. | |
59 | |
60 The `aria-labelledby` attribute will be set to the header element, if one exists
. | |
61 | |
62 @hero hero.svg | |
63 @demo demo/index.html | |
64 @polymerBehavior Polymer.PaperDialogBehavior | |
65 */ | |
66 | |
67 Polymer.PaperDialogBehaviorImpl = { | |
68 | |
69 hostAttributes: { | |
70 'role': 'dialog', | |
71 'tabindex': '-1' | |
72 }, | |
73 | |
74 properties: { | |
75 | |
76 /** | |
77 * If `modal` is true, this implies `no-cancel-on-outside-click` and `with
-backdrop`. | |
78 */ | |
79 modal: { | |
80 observer: '_modalChanged', | |
81 type: Boolean, | |
82 value: false | |
83 }, | |
84 | |
85 /** @type {?Node} */ | |
86 _lastFocusedElement: { | |
87 type: Object | |
88 }, | |
89 | |
90 _boundOnFocus: { | |
91 type: Function, | |
92 value: function() { | |
93 return this._onFocus.bind(this); | |
94 } | |
95 }, | |
96 | |
97 _boundOnBackdropClick: { | |
98 type: Function, | |
99 value: function() { | |
100 return this._onBackdropClick.bind(this); | |
101 } | |
102 } | |
103 | |
104 }, | |
105 | |
106 listeners: { | |
107 'click': '_onDialogClick', | |
108 'iron-overlay-opened': '_onIronOverlayOpened', | |
109 'iron-overlay-closed': '_onIronOverlayClosed' | |
110 }, | |
111 | |
112 attached: function() { | |
113 this._observer = this._observe(this); | |
114 this._updateAriaLabelledBy(); | |
115 }, | |
116 | |
117 detached: function() { | |
118 if (this._observer) { | |
119 this._observer.disconnect(); | |
120 } | |
121 }, | |
122 | |
123 _observe: function(node) { | |
124 var observer = new MutationObserver(function() { | |
125 this._updateAriaLabelledBy(); | |
126 }.bind(this)); | |
127 observer.observe(node, { | |
128 childList: true, | |
129 subtree: true | |
130 }); | |
131 return observer; | |
132 }, | |
133 | |
134 _modalChanged: function() { | |
135 if (this.modal) { | |
136 this.setAttribute('aria-modal', 'true'); | |
137 } else { | |
138 this.setAttribute('aria-modal', 'false'); | |
139 } | |
140 // modal implies noCancelOnOutsideClick and withBackdrop if true, don't ov
erwrite | |
141 // those properties otherwise. | |
142 if (this.modal) { | |
143 this.noCancelOnOutsideClick = true; | |
144 this.withBackdrop = true; | |
145 } | |
146 }, | |
147 | |
148 _updateAriaLabelledBy: function() { | |
149 var header = Polymer.dom(this).querySelector('h2'); | |
150 if (!header) { | |
151 this.removeAttribute('aria-labelledby'); | |
152 return; | |
153 } | |
154 var headerId = header.getAttribute('id'); | |
155 if (headerId && this.getAttribute('aria-labelledby') === headerId) { | |
156 return; | |
157 } | |
158 // set aria-describedBy to the header element | |
159 var labelledById; | |
160 if (headerId) { | |
161 labelledById = headerId; | |
162 } else { | |
163 labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds(); | |
164 header.setAttribute('id', labelledById); | |
165 } | |
166 this.setAttribute('aria-labelledby', labelledById); | |
167 }, | |
168 | |
169 _updateClosingReasonConfirmed: function(confirmed) { | |
170 this.closingReason = this.closingReason || {}; | |
171 this.closingReason.confirmed = confirmed; | |
172 }, | |
173 | |
174 _onDialogClick: function(event) { | |
175 var target = event.target; | |
176 while (target && target !== this) { | |
177 if (target.hasAttribute) { | |
178 if (target.hasAttribute('dialog-dismiss')) { | |
179 this._updateClosingReasonConfirmed(false); | |
180 this.close(); | |
181 break; | |
182 } else if (target.hasAttribute('dialog-confirm')) { | |
183 this._updateClosingReasonConfirmed(true); | |
184 this.close(); | |
185 break; | |
186 } | |
187 } | |
188 target = target.parentNode; | |
189 } | |
190 }, | |
191 | |
192 _onIronOverlayOpened: function() { | |
193 if (this.modal) { | |
194 document.body.addEventListener('focus', this._boundOnFocus, true); | |
195 this.backdropElement.addEventListener('click', this._boundOnBackdropClic
k); | |
196 } | |
197 }, | |
198 | |
199 _onIronOverlayClosed: function() { | |
200 document.body.removeEventListener('focus', this._boundOnFocus, true); | |
201 this.backdropElement.removeEventListener('click', this._boundOnBackdropCli
ck); | |
202 }, | |
203 | |
204 _onFocus: function(event) { | |
205 if (this.modal) { | |
206 var target = event.target; | |
207 while (target && target !== this && target !== document.body) { | |
208 target = target.parentNode; | |
209 } | |
210 if (target) { | |
211 if (target === document.body) { | |
212 if (this._lastFocusedElement) { | |
213 this._lastFocusedElement.focus(); | |
214 } else { | |
215 this._focusNode.focus(); | |
216 } | |
217 } else { | |
218 this._lastFocusedElement = event.target; | |
219 } | |
220 } | |
221 } | |
222 }, | |
223 | |
224 _onBackdropClick: function() { | |
225 if (this.modal) { | |
226 if (this._lastFocusedElement) { | |
227 this._lastFocusedElement.focus(); | |
228 } else { | |
229 this._focusNode.focus(); | |
230 } | |
231 } | |
232 } | |
233 | |
234 }; | |
235 | |
236 /** @polymerBehavior */ | |
237 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; | |
238 | |
239 </script> | |
OLD | NEW |