| OLD | NEW |
| 1 /** | 1 /** |
| 2 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design | 2 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple
ment a Material Design |
| 3 dialog. | 3 dialog. |
| 4 | 4 |
| 5 For example, if `<paper-dialog-impl>` implements this behavior: | 5 For example, if `<paper-dialog-impl>` implements this behavior: |
| 6 | 6 |
| 7 <paper-dialog-impl> | 7 <paper-dialog-impl> |
| 8 <h2>Header</h2> | 8 <h2>Header</h2> |
| 9 <div>Dialog body</div> | 9 <div>Dialog body</div> |
| 10 <div class="buttons"> | 10 <div class="buttons"> |
| (...skipping 23 matching lines...) Expand all Loading... |
| 34 `--paper-dialog-button-color` | Button area foreground color
| `--default-primary-color` | 34 `--paper-dialog-button-color` | Button area foreground color
| `--default-primary-color` |
| 35 | 35 |
| 36 ### Accessibility | 36 ### Accessibility |
| 37 | 37 |
| 38 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate | 38 This element has `role="dialog"` by default. Depending on the context, it may be
more appropriate |
| 39 to override this attribute with `role="alertdialog"`. | 39 to override this attribute with `role="alertdialog"`. |
| 40 | 40 |
| 41 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. | 41 If `modal` is set, the element will set `aria-modal` and prevent the focus from
exiting the element. |
| 42 It will also ensure that focus remains in the dialog. | 42 It will also ensure that focus remains in the dialog. |
| 43 | 43 |
| 44 The `aria-labelledby` attribute will be set to the header element, if one exists
. | |
| 45 | |
| 46 @hero hero.svg | 44 @hero hero.svg |
| 47 @demo demo/index.html | 45 @demo demo/index.html |
| 48 @polymerBehavior Polymer.PaperDialogBehavior | 46 @polymerBehavior Polymer.PaperDialogBehavior |
| 49 */ | 47 */ |
| 50 | 48 |
| 51 Polymer.PaperDialogBehaviorImpl = { | 49 Polymer.PaperDialogBehaviorImpl = { |
| 52 | 50 |
| 53 hostAttributes: { | 51 hostAttributes: { |
| 54 'role': 'dialog', | 52 'role': 'dialog', |
| 55 'tabindex': '-1' | 53 'tabindex': '-1' |
| (...skipping 19 matching lines...) Expand all Loading... |
| 75 'tap': '_onDialogClick' | 73 'tap': '_onDialogClick' |
| 76 }, | 74 }, |
| 77 | 75 |
| 78 ready: function () { | 76 ready: function () { |
| 79 // Only now these properties can be read. | 77 // Only now these properties can be read. |
| 80 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; | 78 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; |
| 81 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; | 79 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; |
| 82 this.__prevWithBackdrop = this.withBackdrop; | 80 this.__prevWithBackdrop = this.withBackdrop; |
| 83 }, | 81 }, |
| 84 | 82 |
| 85 attached: function() { | |
| 86 // this._observer is used by iron-overlay-behavior | |
| 87 this._ariaObserver = Polymer.dom(this).observeNodes(this._updateAriaLabell
edBy); | |
| 88 this._updateAriaLabelledBy(); | |
| 89 }, | |
| 90 | |
| 91 detached: function() { | |
| 92 Polymer.dom(this).unobserveNodes(this._ariaObserver); | |
| 93 }, | |
| 94 | |
| 95 _modalChanged: function(modal, readied) { | 83 _modalChanged: function(modal, readied) { |
| 96 if (modal) { | 84 if (modal) { |
| 97 this.setAttribute('aria-modal', 'true'); | 85 this.setAttribute('aria-modal', 'true'); |
| 98 } else { | 86 } else { |
| 99 this.setAttribute('aria-modal', 'false'); | 87 this.setAttribute('aria-modal', 'false'); |
| 100 } | 88 } |
| 101 | 89 |
| 102 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop
. | 90 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop
. |
| 103 // We need to wait for the element to be ready before we can read the | 91 // We need to wait for the element to be ready before we can read the |
| 104 // properties values. | 92 // properties values. |
| (...skipping 11 matching lines...) Expand all Loading... |
| 116 } else { | 104 } else { |
| 117 // If the value was changed to false, let it false. | 105 // If the value was changed to false, let it false. |
| 118 this.noCancelOnOutsideClick = this.noCancelOnOutsideClick && | 106 this.noCancelOnOutsideClick = this.noCancelOnOutsideClick && |
| 119 this.__prevNoCancelOnOutsideClick; | 107 this.__prevNoCancelOnOutsideClick; |
| 120 this.noCancelOnEscKey = this.noCancelOnEscKey && | 108 this.noCancelOnEscKey = this.noCancelOnEscKey && |
| 121 this.__prevNoCancelOnEscKey; | 109 this.__prevNoCancelOnEscKey; |
| 122 this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop; | 110 this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop; |
| 123 } | 111 } |
| 124 }, | 112 }, |
| 125 | 113 |
| 126 _updateAriaLabelledBy: function() { | |
| 127 var header = Polymer.dom(this).querySelector('h2'); | |
| 128 if (!header) { | |
| 129 this.removeAttribute('aria-labelledby'); | |
| 130 return; | |
| 131 } | |
| 132 var headerId = header.getAttribute('id'); | |
| 133 if (headerId && this.getAttribute('aria-labelledby') === headerId) { | |
| 134 return; | |
| 135 } | |
| 136 // set aria-describedBy to the header element | |
| 137 var labelledById; | |
| 138 if (headerId) { | |
| 139 labelledById = headerId; | |
| 140 } else { | |
| 141 labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds(); | |
| 142 header.setAttribute('id', labelledById); | |
| 143 } | |
| 144 this.setAttribute('aria-labelledby', labelledById); | |
| 145 }, | |
| 146 | |
| 147 _updateClosingReasonConfirmed: function(confirmed) { | 114 _updateClosingReasonConfirmed: function(confirmed) { |
| 148 this.closingReason = this.closingReason || {}; | 115 this.closingReason = this.closingReason || {}; |
| 149 this.closingReason.confirmed = confirmed; | 116 this.closingReason.confirmed = confirmed; |
| 150 }, | 117 }, |
| 151 | 118 |
| 152 /** | 119 /** |
| 153 * Will dismiss the dialog if user clicked on an element with dialog-dismiss | 120 * Will dismiss the dialog if user clicked on an element with dialog-dismiss |
| 154 * or dialog-confirm attribute. | 121 * or dialog-confirm attribute. |
| 155 */ | 122 */ |
| 156 _onDialogClick: function(event) { | 123 _onDialogClick: function(event) { |
| 157 // Search for the element with dialog-confirm or dialog-dismiss, | 124 // Search for the element with dialog-confirm or dialog-dismiss, |
| 158 // from the root target until this (excluded). | 125 // from the root target until this (excluded). |
| 159 var path = Polymer.dom(event).path; | 126 var path = Polymer.dom(event).path; |
| 160 for (var i = 0; i < path.indexOf(this); i++) { | 127 for (var i = 0; i < path.indexOf(this); i++) { |
| 161 var target = path[i]; | 128 var target = path[i]; |
| 162 if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || tar
get.hasAttribute('dialog-confirm'))) { | 129 if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || tar
get.hasAttribute('dialog-confirm'))) { |
| 163 this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm
')); | 130 this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm
')); |
| 164 this.close(); | 131 this.close(); |
| 165 event.stopPropagation(); | 132 event.stopPropagation(); |
| 166 break; | 133 break; |
| 167 } | 134 } |
| 168 } | 135 } |
| 169 } | 136 } |
| 170 | 137 |
| 171 }; | 138 }; |
| 172 | 139 |
| 173 /** @polymerBehavior */ | 140 /** @polymerBehavior */ |
| 174 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; | 141 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; |
| OLD | NEW |