Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3)

Side by Side Diff: third_party/polymer/v1_0/components/paper-dialog-behavior/paper-dialog-behavior.html

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

Powered by Google App Engine
This is Rietveld 408576698