| 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"`. The header (a `<h2>` eleme
nt) will | |
| 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 _lastFocusedElement: { | |
| 86 type: Node | |
| 87 }, | |
| 88 | |
| 89 _boundOnFocus: { | |
| 90 type: Function, | |
| 91 value: function() { | |
| 92 return this._onFocus.bind(this); | |
| 93 } | |
| 94 }, | |
| 95 | |
| 96 _boundOnBackdropClick: { | |
| 97 type: Function, | |
| 98 value: function() { | |
| 99 return this._onBackdropClick.bind(this); | |
| 100 } | |
| 101 } | |
| 102 | |
| 103 }, | |
| 104 | |
| 105 listeners: { | |
| 106 'click': '_onDialogClick', | |
| 107 'iron-overlay-opened': '_onIronOverlayOpened', | |
| 108 'iron-overlay-closed': '_onIronOverlayClosed' | |
| 109 }, | |
| 110 | |
| 111 attached: function() { | |
| 112 this._observer = this._observe(this); | |
| 113 this._updateAriaLabelledBy(); | |
| 114 }, | |
| 115 | |
| 116 detached: function() { | |
| 117 if (this._observer) { | |
| 118 this._observer.disconnect(); | |
| 119 } | |
| 120 }, | |
| 121 | |
| 122 _observe: function(node) { | |
| 123 var observer = new MutationObserver(function() { | |
| 124 this._updateAriaLabelledBy(); | |
| 125 }.bind(this)); | |
| 126 observer.observe(node, { | |
| 127 childList: true, | |
| 128 subtree: true | |
| 129 }); | |
| 130 return observer; | |
| 131 }, | |
| 132 | |
| 133 _modalChanged: function() { | |
| 134 if (this.modal) { | |
| 135 this.setAttribute('aria-modal', 'true'); | |
| 136 } else { | |
| 137 this.setAttribute('aria-modal', 'false'); | |
| 138 } | |
| 139 // modal implies noCancelOnOutsideClick and withBackdrop if true, don't ov
erwrite | |
| 140 // those properties otherwise. | |
| 141 if (this.modal) { | |
| 142 this.noCancelOnOutsideClick = true; | |
| 143 this.withBackdrop = true; | |
| 144 } | |
| 145 }, | |
| 146 | |
| 147 _updateAriaLabelledBy: function() { | |
| 148 var header = Polymer.dom(this).querySelector('h2'); | |
| 149 if (!header) { | |
| 150 this.removeAttribute('aria-labelledby'); | |
| 151 return; | |
| 152 } | |
| 153 var headerId = header.getAttribute('id'); | |
| 154 if (headerId && this.getAttribute('aria-labelledby') === headerId) { | |
| 155 return; | |
| 156 } | |
| 157 // set aria-describedBy to the header element | |
| 158 var labelledById; | |
| 159 if (headerId) { | |
| 160 labelledById = headerId; | |
| 161 } else { | |
| 162 labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds(); | |
| 163 header.setAttribute('id', labelledById); | |
| 164 } | |
| 165 this.setAttribute('aria-labelledby', labelledById); | |
| 166 }, | |
| 167 | |
| 168 _updateClosingReasonConfirmed: function(confirmed) { | |
| 169 this.closingReason = this.closingReason || {}; | |
| 170 this.closingReason.confirmed = confirmed; | |
| 171 }, | |
| 172 | |
| 173 _onDialogClick: function(event) { | |
| 174 var target = event.target; | |
| 175 while (target !== this) { | |
| 176 if (target.hasAttribute('dialog-dismiss')) { | |
| 177 this._updateClosingReasonConfirmed(false); | |
| 178 this.close(); | |
| 179 break; | |
| 180 } else if (target.hasAttribute('dialog-confirm')) { | |
| 181 this._updateClosingReasonConfirmed(true); | |
| 182 this.close(); | |
| 183 break; | |
| 184 } | |
| 185 target = target.parentNode; | |
| 186 } | |
| 187 }, | |
| 188 | |
| 189 _onIronOverlayOpened: function() { | |
| 190 if (this.modal) { | |
| 191 document.body.addEventListener('focus', this._boundOnFocus, true); | |
| 192 this.backdropElement.addEventListener('click', this._boundOnBackdropClic
k); | |
| 193 } | |
| 194 }, | |
| 195 | |
| 196 _onIronOverlayClosed: function() { | |
| 197 document.body.removeEventListener('focus', this._boundOnFocus, true); | |
| 198 this.backdropElement.removeEventListener('click', this._boundOnBackdropCli
ck); | |
| 199 }, | |
| 200 | |
| 201 _onFocus: function(event) { | |
| 202 if (this.modal) { | |
| 203 var target = event.target; | |
| 204 while (target && target !== this && target !== document.body) { | |
| 205 target = target.parentNode; | |
| 206 } | |
| 207 if (target) { | |
| 208 if (target === document.body) { | |
| 209 if (this._lastFocusedElement) { | |
| 210 this._lastFocusedElement.focus(); | |
| 211 } else { | |
| 212 this._focusNode.focus(); | |
| 213 } | |
| 214 } else { | |
| 215 this._lastFocusedElement = event.target; | |
| 216 } | |
| 217 } | |
| 218 } | |
| 219 }, | |
| 220 | |
| 221 _onBackdropClick: function() { | |
| 222 if (this.modal) { | |
| 223 if (this._lastFocusedElement) { | |
| 224 this._lastFocusedElement.focus(); | |
| 225 } else { | |
| 226 this._focusNode.focus(); | |
| 227 } | |
| 228 } | |
| 229 } | |
| 230 | |
| 231 }; | |
| 232 | |
| 233 /** @polymerBehavior */ | |
| 234 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo
gBehaviorImpl]; | |
| 235 | |
| 236 </script> | |
| OLD | NEW |