| 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 |