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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/paper-dialog-behavior-extracted.js

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 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
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
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
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
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];
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698