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

Side by Side Diff: polymer_1.2.3/bower_components/iron-menu-behavior/iron-menu-behavior.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-selector/iron-multi-selectable.html"> 12 <link rel="import" href="../iron-selector/iron-multi-selectable.html">
13 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html "> 13 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
14 14
15 <script> 15 <script>
16 16
17 /** 17 /**
18 * `Polymer.IronMenuBehavior` implements accessible menu behavior. 18 * `Polymer.IronMenuBehavior` implements accessible menu behavior.
19 * 19 *
20 * @demo demo/index.html 20 * @demo demo/index.html
21 * @polymerBehavior Polymer.IronMenuBehavior 21 * @polymerBehavior Polymer.IronMenuBehavior
22 */ 22 */
23 Polymer.IronMenuBehaviorImpl = { 23 Polymer.IronMenuBehaviorImpl = {
24 24
25 properties: { 25 properties: {
26 26
27 /** 27 /**
28 * Returns the currently focused item. 28 * Returns the currently focused item.
29 * 29 * @type {?Object}
30 * @attribute focusedItem
31 * @type Object
32 */ 30 */
33 focusedItem: { 31 focusedItem: {
34 observer: '_focusedItemChanged', 32 observer: '_focusedItemChanged',
35 readOnly: true, 33 readOnly: true,
36 type: Object 34 type: Object
37 }, 35 },
38 36
39 /** 37 /**
40 * The attribute to use on menu items to look up the item title. Typing th e first 38 * The attribute to use on menu items to look up the item title. Typing th e first
41 * letter of an item when the menu is open focuses that item. If unset, `t extContent` 39 * letter of an item when the menu is open focuses that item. If unset, `t extContent`
42 * will be used. 40 * will be used.
43 *
44 * @attribute attrForItemTitle
45 * @type String
46 */ 41 */
47 attrForItemTitle: { 42 attrForItemTitle: {
48 type: String 43 type: String
49 } 44 }
50 }, 45 },
51 46
52 hostAttributes: { 47 hostAttributes: {
53 'role': 'menu', 48 'role': 'menu',
54 'tabindex': '0' 49 'tabindex': '0'
55 }, 50 },
56 51
57 observers: [ 52 observers: [
58 '_updateMultiselectable(multi)' 53 '_updateMultiselectable(multi)'
59 ], 54 ],
60 55
61 listeners: { 56 listeners: {
62 'focus': '_onFocus', 57 'focus': '_onFocus',
63 'keydown': '_onKeydown' 58 'keydown': '_onKeydown',
59 'iron-items-changed': '_onIronItemsChanged'
64 }, 60 },
65 61
66 keyBindings: { 62 keyBindings: {
67 'up': '_onUpKey', 63 'up': '_onUpKey',
68 'down': '_onDownKey', 64 'down': '_onDownKey',
69 'esc': '_onEscKey', 65 'esc': '_onEscKey',
70 'enter': '_onEnterKey',
71 'shift+tab:keydown': '_onShiftTabDown' 66 'shift+tab:keydown': '_onShiftTabDown'
72 }, 67 },
73 68
69 attached: function() {
70 this._resetTabindices();
71 },
72
73 /**
74 * Selects the given value. If the `multi` property is true, then the select ed state of the
75 * `value` will be toggled; otherwise the `value` will be selected.
76 *
77 * @param {string} value the value to select.
78 */
79 select: function(value) {
80 if (this._defaultFocusAsync) {
81 this.cancelAsync(this._defaultFocusAsync);
82 this._defaultFocusAsync = null;
83 }
84 var item = this._valueToItem(value);
85 if (item && item.hasAttribute('disabled')) return;
86 this._setFocusedItem(item);
87 Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
88 },
89
90 /**
91 * Resets all tabindex attributes to the appropriate value based on the
92 * current selection state. The appropriate value is `0` (focusable) for
93 * the default selected item, and `-1` (not keyboard focusable) for all
94 * other items.
95 */
96 _resetTabindices: function() {
97 var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[ 0]) : this.selectedItem;
98
99 this.items.forEach(function(item) {
100 item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
101 }, this);
102 },
103
104 /**
105 * Sets appropriate ARIA based on whether or not the menu is meant to be
106 * multi-selectable.
107 *
108 * @param {boolean} multi True if the menu should be multi-selectable.
109 */
74 _updateMultiselectable: function(multi) { 110 _updateMultiselectable: function(multi) {
75 if (multi) { 111 if (multi) {
76 this.setAttribute('aria-multiselectable', 'true'); 112 this.setAttribute('aria-multiselectable', 'true');
77 } else { 113 } else {
78 this.removeAttribute('aria-multiselectable'); 114 this.removeAttribute('aria-multiselectable');
79 } 115 }
80 }, 116 },
81 117
82 _onShiftTabDown: function() { 118 /**
83 var oldTabIndex; 119 * Given a KeyboardEvent, this method will focus the appropriate item in the
120 * menu (if there is a relevant item, and it is possible to focus it).
121 *
122 * @param {KeyboardEvent} event A KeyboardEvent.
123 */
124 _focusWithKeyboardEvent: function(event) {
125 for (var i = 0, item; item = this.items[i]; i++) {
126 var attr = this.attrForItemTitle || 'textContent';
127 var title = item[attr] || item.getAttribute(attr);
84 128
85 Polymer.IronMenuBehaviorImpl._shiftTabPressed = true; 129 if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCod e(event.keyCode).toLowerCase()) {
86 130 this._setFocusedItem(item);
87 oldTabIndex = this.getAttribute('tabindex'); 131 break;
88 132 }
89 this.setAttribute('tabindex', '-1'); 133 }
90
91 this.async(function() {
92 this.setAttribute('tabindex', oldTabIndex);
93 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
94 // Note: polymer/polymer#1305
95 }, 1);
96 }, 134 },
97 135
136 /**
137 * Focuses the previous item (relative to the currently focused item) in the
138 * menu.
139 */
140 _focusPrevious: function() {
141 var length = this.items.length;
142 var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length ;
143 this._setFocusedItem(this.items[index]);
144 },
145
146 /**
147 * Focuses the next item (relative to the currently focused item) in the
148 * menu.
149 */
150 _focusNext: function() {
151 var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.leng th;
152 this._setFocusedItem(this.items[index]);
153 },
154
155 /**
156 * Mutates items in the menu based on provided selection details, so that
157 * all items correctly reflect selection state.
158 *
159 * @param {Element} item An item in the menu.
160 * @param {boolean} isSelected True if the item should be shown in a
161 * selected state, otherwise false.
162 */
98 _applySelection: function(item, isSelected) { 163 _applySelection: function(item, isSelected) {
99 if (isSelected) { 164 if (isSelected) {
100 item.setAttribute('aria-selected', 'true'); 165 item.setAttribute('aria-selected', 'true');
101 } else { 166 } else {
102 item.removeAttribute('aria-selected'); 167 item.removeAttribute('aria-selected');
103 } 168 }
104
105 Polymer.IronSelectableBehavior._applySelection.apply(this, arguments); 169 Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
106 }, 170 },
107 171
172 /**
173 * Discretely updates tabindex values among menu items as the focused item
174 * changes.
175 *
176 * @param {Element} focusedItem The element that is currently focused.
177 * @param {?Element} old The last element that was considered focused, if
178 * applicable.
179 */
108 _focusedItemChanged: function(focusedItem, old) { 180 _focusedItemChanged: function(focusedItem, old) {
109 old && old.setAttribute('tabindex', '-1'); 181 old && old.setAttribute('tabindex', '-1');
110 if (focusedItem) { 182 if (focusedItem) {
111 focusedItem.setAttribute('tabindex', '0'); 183 focusedItem.setAttribute('tabindex', '0');
112 focusedItem.focus(); 184 focusedItem.focus();
113 } 185 }
114 }, 186 },
115 187
116 select: function(value) { 188 /**
117 if (this._defaultFocusAsync) { 189 * A handler that responds to mutation changes related to the list of items
118 this.cancelAsync(this._defaultFocusAsync); 190 * in the menu.
119 this._defaultFocusAsync = null; 191 *
192 * @param {CustomEvent} event An event containing mutation records as its
193 * detail.
194 */
195 _onIronItemsChanged: function(event) {
196 var mutations = event.detail;
197 var mutation;
198 var index;
199
200 for (index = 0; index < mutations.length; ++index) {
201 mutation = mutations[index];
202
203 if (mutation.addedNodes.length) {
204 this._resetTabindices();
205 break;
206 }
120 } 207 }
121 var item = this._valueToItem(value);
122 this._setFocusedItem(item);
123 Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
124 }, 208 },
125 209
210 /**
211 * Handler that is called when a shift+tab keypress is detected by the menu.
212 *
213 * @param {CustomEvent} event A key combination event.
214 */
215 _onShiftTabDown: function(event) {
216 var oldTabIndex = this.getAttribute('tabindex');
217
218 Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
219
220 this._setFocusedItem(null);
221
222 this.setAttribute('tabindex', '-1');
223
224 this.async(function() {
225 this.setAttribute('tabindex', oldTabIndex);
226 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
227 // NOTE(cdata): polymer/polymer#1305
228 }, 1);
229 },
230
231 /**
232 * Handler that is called when the menu receives focus.
233 *
234 * @param {FocusEvent} event A focus event.
235 */
126 _onFocus: function(event) { 236 _onFocus: function(event) {
127 if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) { 237 if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
238 // do not focus the menu itself
128 return; 239 return;
129 } 240 }
130 // do not focus the menu itself 241
131 this.blur(); 242 this.blur();
243
132 // clear the cached focus item 244 // clear the cached focus item
133 this._setFocusedItem(null);
134 this._defaultFocusAsync = this.async(function() { 245 this._defaultFocusAsync = this.async(function() {
135 // focus the selected item when the menu receives focus, or the first it em 246 // focus the selected item when the menu receives focus, or the first it em
136 // if no item is selected 247 // if no item is selected
137 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem s[0]) : this.selectedItem; 248 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem s[0]) : this.selectedItem;
249
250 this._setFocusedItem(null);
251
138 if (selectedItem) { 252 if (selectedItem) {
139 this._setFocusedItem(selectedItem); 253 this._setFocusedItem(selectedItem);
140 } else { 254 } else {
141 this._setFocusedItem(this.items[0]); 255 this._setFocusedItem(this.items[0]);
142 } 256 }
143 // async 100ms to wait for `select` to get called from `_itemActivate` 257 // async 1ms to wait for `select` to get called from `_itemActivate`
144 }, 100); 258 }, 1);
145 }, 259 },
146 260
147 _onUpKey: function() { 261 /**
262 * Handler that is called when the up key is pressed.
263 *
264 * @param {CustomEvent} event A key combination event.
265 */
266 _onUpKey: function(event) {
148 // up and down arrows moves the focus 267 // up and down arrows moves the focus
149 this._focusPrevious(); 268 this._focusPrevious();
150 }, 269 },
151 270
152 _onDownKey: function() { 271 /**
272 * Handler that is called when the down key is pressed.
273 *
274 * @param {CustomEvent} event A key combination event.
275 */
276 _onDownKey: function(event) {
153 this._focusNext(); 277 this._focusNext();
154 }, 278 },
155 279
156 _onEscKey: function() { 280 /**
281 * Handler that is called when the esc key is pressed.
282 *
283 * @param {CustomEvent} event A key combination event.
284 */
285 _onEscKey: function(event) {
157 // esc blurs the control 286 // esc blurs the control
158 this.focusedItem.blur(); 287 this.focusedItem.blur();
159 }, 288 },
160 289
161 _onEnterKey: function(event) { 290 /**
162 // enter activates the item unless it is disabled 291 * Handler that is called when a keydown event is detected.
163 this._activateFocused(event.detail.keyboardEvent); 292 *
293 * @param {KeyboardEvent} event A keyboard event.
294 */
295 _onKeydown: function(event) {
296 if (!this.keyboardEventMatchesKeys(event, 'up down esc')) {
297 // all other keys focus the menu item starting with that character
298 this._focusWithKeyboardEvent(event);
299 }
300 event.stopPropagation();
164 }, 301 },
165 302
166 _onKeydown: function(event) { 303 // override _activateHandler
167 if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) { 304 _activateHandler: function(event) {
168 return; 305 Polymer.IronSelectableBehavior._activateHandler.call(this, event);
169 } 306 event.stopPropagation();
170
171 // all other keys focus the menu item starting with that character
172 this._focusWithKeyboardEvent(event);
173 },
174
175 _focusWithKeyboardEvent: function(event) {
176 for (var i = 0, item; item = this.items[i]; i++) {
177 var attr = this.attrForItemTitle || 'textContent';
178 var title = item[attr] || item.getAttribute(attr);
179 if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCod e(event.keyCode).toLowerCase()) {
180 this._setFocusedItem(item);
181 break;
182 }
183 }
184 },
185
186 _activateFocused: function(event) {
187 if (!this.focusedItem.hasAttribute('disabled')) {
188 this._activateHandler(event);
189 }
190 },
191
192 _focusPrevious: function() {
193 var length = this.items.length;
194 var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length ;
195 this._setFocusedItem(this.items[index]);
196 },
197
198 _focusNext: function() {
199 var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.leng th;
200 this._setFocusedItem(this.items[index]);
201 } 307 }
202
203 }; 308 };
204 309
205 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; 310 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
206 311
207 /** @polymerBehavior Polymer.IronMenuBehavior */ 312 /** @polymerBehavior Polymer.IronMenuBehavior */
208 Polymer.IronMenuBehavior = [ 313 Polymer.IronMenuBehavior = [
209 Polymer.IronMultiSelectableBehavior, 314 Polymer.IronMultiSelectableBehavior,
210 Polymer.IronA11yKeysBehavior, 315 Polymer.IronA11yKeysBehavior,
211 Polymer.IronMenuBehaviorImpl 316 Polymer.IronMenuBehaviorImpl
212 ]; 317 ];
213 318
214 </script> 319 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698