OLD | NEW |
1 | 1 |
2 | 2 |
3 /** | 3 /** |
4 Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a M
aterial Design | 4 Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a M
aterial Design |
5 dialog. | 5 dialog. |
6 | 6 |
7 For example, if `<paper-dialog-impl>` implements this behavior: | 7 For example, if `<paper-dialog-impl>` implements this behavior: |
8 | 8 |
9 <paper-dialog-impl> | 9 <paper-dialog-impl> |
10 <h2>Header</h2> | 10 <h2>Header</h2> |
(...skipping 20 matching lines...) Expand all Loading... |
31 ----------------|-------------|---------- | 31 ----------------|-------------|---------- |
32 `--paper-dialog-background-color` | Dialog background color
| `--primary-background-color` | 32 `--paper-dialog-background-color` | Dialog background color
| `--primary-background-color` |
33 `--paper-dialog-color` | Dialog foreground color
| `--primary-text-color` | 33 `--paper-dialog-color` | Dialog foreground color
| `--primary-text-color` |
34 `--paper-dialog` | Mixin applied to the dialog
| `{}` | 34 `--paper-dialog` | Mixin applied to the dialog
| `{}` |
35 `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element
| `{}` | 35 `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element
| `{}` |
36 `--paper-dialog-button-color` | Button area foreground color
| `--default-primary-color` | 36 `--paper-dialog-button-color` | Button area foreground color
| `--default-primary-color` |
37 | 37 |
38 ### Accessibility | 38 ### Accessibility |
39 | 39 |
40 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate | 40 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate |
41 to override this attribute with `role="alertdialog"`. The header (a `<h2>` eleme
nt) will | 41 to override this attribute with `role="alertdialog"`. |
42 | 42 |
43 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. | 43 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. |
44 It will also ensure that focus remains in the dialog. | 44 It will also ensure that focus remains in the dialog. |
45 | 45 |
46 The `aria-labelledby` attribute will be set to the header element, if one exists
. | 46 The `aria-labelledby` attribute will be set to the header element, if one exists
. |
47 | 47 |
48 @hero hero.svg | 48 @hero hero.svg |
49 @demo demo/index.html | 49 @demo demo/index.html |
50 @polymerBehavior Polymer.PaperDialogBehavior | 50 @polymerBehavior Polymer.PaperDialogBehavior |
51 */ | 51 */ |
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
152 this.setAttribute('aria-labelledby', labelledById); | 152 this.setAttribute('aria-labelledby', labelledById); |
153 }, | 153 }, |
154 | 154 |
155 _updateClosingReasonConfirmed: function(confirmed) { | 155 _updateClosingReasonConfirmed: function(confirmed) { |
156 this.closingReason = this.closingReason || {}; | 156 this.closingReason = this.closingReason || {}; |
157 this.closingReason.confirmed = confirmed; | 157 this.closingReason.confirmed = confirmed; |
158 }, | 158 }, |
159 | 159 |
160 _onDialogClick: function(event) { | 160 _onDialogClick: function(event) { |
161 var target = event.target; | 161 var target = event.target; |
162 while (target !== this) { | 162 while (target && target !== this) { |
163 if (target.hasAttribute('dialog-dismiss')) { | 163 if (target.hasAttribute) { |
164 this._updateClosingReasonConfirmed(false); | 164 if (target.hasAttribute('dialog-dismiss')) { |
165 this.close(); | 165 this._updateClosingReasonConfirmed(false); |
166 break; | 166 this.close(); |
167 } else if (target.hasAttribute('dialog-confirm')) { | 167 break; |
168 this._updateClosingReasonConfirmed(true); | 168 } else if (target.hasAttribute('dialog-confirm')) { |
169 this.close(); | 169 this._updateClosingReasonConfirmed(true); |
170 break; | 170 this.close(); |
| 171 break; |
| 172 } |
171 } | 173 } |
172 target = target.parentNode; | 174 target = target.parentNode; |
173 } | 175 } |
174 }, | 176 }, |
175 | 177 |
176 _onIronOverlayOpened: function() { | 178 _onIronOverlayOpened: function() { |
177 if (this.modal) { | 179 if (this.modal) { |
178 document.body.addEventListener('focus', this._boundOnFocus, true); | 180 document.body.addEventListener('focus', this._boundOnFocus, true); |
179 this.backdropElement.addEventListener('click', this._boundOnBackdropClic
k); | 181 this.backdropElement.addEventListener('click', this._boundOnBackdropClic
k); |
180 } | 182 } |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
213 this._focusNode.focus(); | 215 this._focusNode.focus(); |
214 } | 216 } |
215 } | 217 } |
216 } | 218 } |
217 | 219 |
218 }; | 220 }; |
219 | 221 |
220 /** @polymerBehavior */ | 222 /** @polymerBehavior */ |
221 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; | 223 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; |
222 | 224 |
OLD | NEW |