4 Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a Material Design
7 For example, if `<paper-dialog-impl>` implements this behavior:
11 <div>Dialog body</div>
13 <paper-button dialog-dismiss>Cancel</paper-button>
14 <paper-button dialog-confirm>Accept</paper-button>
18 `paper-dialog-common.css` provide styles for a header, content area, and an action area for buttons.
19 Use the `<h2>` tag for the header and the `buttons` class for the action area. You can use the
20 `paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area.
22 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
23 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
24 to include `confirmed: true`.
28 The following custom properties and mixins are available for styling.
30 Custom property | Description | Default
31 ----------------|-------------|----------
32 `--paper-dialog-background-color` | Dialog background color | `--primary-background-color`
33 `--paper-dialog-color` | Dialog foreground color | `--primary-text-color`
34 `--paper-dialog` | Mixin applied to the dialog | `{}`
35 `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element | `{}`
36 `--paper-dialog-button-color` | Button area foreground color | `--default-primary-color`
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>` element) will
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.
46 The `aria-labelledby` attribute will be set to the header element, if one exists.
50 @polymerBehavior Polymer.PaperDialogBehavior
53 Polymer.PaperDialogBehaviorImpl = {
63 * If `modal` is true, this implies `no-cancel-on-outside-click` and `with-backdrop`.
66 observer: '_modalChanged',
71 _lastFocusedElement: {
78 return this._onFocus.bind(this);
82 _boundOnBackdropClick: {
85 return this._onBackdropClick.bind(this);
92 'click': '_onDialogClick',
93 'iron-overlay-opened': '_onIronOverlayOpened',
94 'iron-overlay-closed': '_onIronOverlayClosed'
97 attached: function() {
98 this._observer = this._observe(this);
99 this._updateAriaLabelledBy();
102 detached: function() {
103 if (this._observer) {
104 this._observer.disconnect();
108 _observe: function(node) {
109 var observer = new MutationObserver(function() {
110 this._updateAriaLabelledBy();
112 observer.observe(node, {
119 _modalChanged: function() {
121 this.setAttribute('aria-modal', 'true');
123 this.setAttribute('aria-modal', 'false');
125 // modal implies noCancelOnOutsideClick and withBackdrop if true, don't overwrite
126 // those properties otherwise.
128 this.noCancelOnOutsideClick = true;
129 this.withBackdrop = true;
133 _updateAriaLabelledBy: function() {
134 var header = Polymer.dom(this).querySelector('h2');
136 this.removeAttribute('aria-labelledby');
139 var headerId = header.getAttribute('id');
140 if (headerId && this.getAttribute('aria-labelledby') === headerId) {
143 // set aria-describedBy to the header element
146 labelledById = headerId;
148 labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds();
149 header.setAttribute('id', labelledById);
151 this.setAttribute('aria-labelledby', labelledById);
154 _updateClosingReasonConfirmed: function(confirmed) {
155 this.closingReason = this.closingReason || {};
156 this.closingReason.confirmed = confirmed;
159 _onDialogClick: function(event) {
160 var target = event.target;
161 while (target !== this) {
162 if (target.hasAttribute('dialog-dismiss')) {
163 this._updateClosingReasonConfirmed(false);
166 } else if (target.hasAttribute('dialog-confirm')) {
167 this._updateClosingReasonConfirmed(true);
171 target = target.parentNode;
175 _onIronOverlayOpened: function() {
177 document.body.addEventListener('focus', this._boundOnFocus, true);
178 this.backdropElement.addEventListener('click', this._boundOnBackdropClick);
182 _onIronOverlayClosed: function() {
183 document.body.removeEventListener('focus', this._boundOnFocus, true);
184 this.backdropElement.removeEventListener('click', this._boundOnBackdropClick);
187 _onFocus: function(event) {
189 var target = event.target;
190 while (target && target !== this && target !== document.body) {
191 target = target.parentNode;
194 if (target === document.body) {
195 if (this._lastFocusedElement) {
196 this._lastFocusedElement.focus();
198 this._focusNode.focus();
201 this._lastFocusedElement = event.target;
207 _onBackdropClick: function() {
209 if (this._lastFocusedElement) {
210 this._lastFocusedElement.focus();
212 this._focusNode.focus();
219 /** @polymerBehavior */
220 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl];