OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 cr.define('cr.ui', function() { | 5 cr.define('cr.ui', function() { |
6 /** | 6 /** |
7 * A class to manage focus between given horizontally arranged elements. | 7 * A class to manage focus between given horizontally arranged elements. |
8 * | 8 * |
9 * Pressing left cycles backward and pressing right cycles forward in item | 9 * Pressing left cycles backward and pressing right cycles forward in item |
10 * order. Pressing Home goes to the beginning of the list and End goes to the | 10 * order. Pressing Home goes to the beginning of the list and End goes to the |
(...skipping 103 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
114 var element = this.root.querySelector(query); | 114 var element = this.root.querySelector(query); |
115 if (!element) | 115 if (!element) |
116 return false; | 116 return false; |
117 | 117 |
118 element.setAttribute('focus-type', type); | 118 element.setAttribute('focus-type', type); |
119 element.tabIndex = this.isActive() ? 0 : -1; | 119 element.tabIndex = this.isActive() ? 0 : -1; |
120 | 120 |
121 this.eventTracker.add(element, 'blur', this.onBlur_.bind(this)); | 121 this.eventTracker.add(element, 'blur', this.onBlur_.bind(this)); |
122 this.eventTracker.add(element, 'focus', this.onFocus_.bind(this)); | 122 this.eventTracker.add(element, 'focus', this.onFocus_.bind(this)); |
123 this.eventTracker.add(element, 'keydown', this.onKeydown_.bind(this)); | 123 this.eventTracker.add(element, 'keydown', this.onKeydown_.bind(this)); |
124 this.eventTracker.add(element, 'mousedown', | 124 this.eventTracker.add(element, 'mousedown', this.onMousedown_.bind(this)); |
125 this.onMousedown_.bind(this)); | |
126 return true; | 125 return true; |
127 }, | 126 }, |
128 | 127 |
129 /** Dereferences nodes and removes event handlers. */ | 128 /** Dereferences nodes and removes event handlers. */ |
130 destroy: function() { | 129 destroy: function() { this.eventTracker.removeAll(); }, |
131 this.eventTracker.removeAll(); | |
132 }, | |
133 | 130 |
134 /** | 131 /** |
135 * @param {!Element} sampleElement An element for to find an equivalent for. | 132 * @param {!Element} sampleElement An element for to find an equivalent for. |
136 * @return {!Element} An equivalent element to focus for |sampleElement|. | 133 * @return {!Element} An equivalent element to focus for |sampleElement|. |
137 * @protected | 134 * @protected |
138 */ | 135 */ |
139 getCustomEquivalent: function(sampleElement) { | 136 getCustomEquivalent: function(sampleElement) { |
140 return assert(this.getFirstFocusable()); | 137 return assert(this.getFirstFocusable()); |
141 }, | 138 }, |
142 | 139 |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
215 }); | 212 }); |
216 | 213 |
217 this.root.classList.toggle(FocusRow.ACTIVE_CLASS, active); | 214 this.root.classList.toggle(FocusRow.ACTIVE_CLASS, active); |
218 }, | 215 }, |
219 | 216 |
220 /** | 217 /** |
221 * @param {!Event} e | 218 * @param {!Event} e |
222 * @private | 219 * @private |
223 */ | 220 */ |
224 onBlur_: function(e) { | 221 onBlur_: function(e) { |
225 if (!this.boundary_.contains(/** @type {Element} */(e.relatedTarget))) | 222 if (!this.boundary_.contains(/** @type {Element} */ (e.relatedTarget))) |
226 return; | 223 return; |
227 | 224 |
228 var currentTarget = /** @type {!Element} */(e.currentTarget); | 225 var currentTarget = /** @type {!Element} */ (e.currentTarget); |
229 if (this.getFocusableElements().indexOf(currentTarget) >= 0) | 226 if (this.getFocusableElements().indexOf(currentTarget) >= 0) |
230 this.makeActive(false); | 227 this.makeActive(false); |
231 }, | 228 }, |
232 | 229 |
233 /** | 230 /** |
234 * @param {!Event} e | 231 * @param {!Event} e |
235 * @private | 232 * @private |
236 */ | 233 */ |
237 onFocus_: function(e) { | 234 onFocus_: function(e) { |
238 if (this.delegate) | 235 if (this.delegate) |
(...skipping 13 matching lines...) Expand all Loading... |
252 if (!e.currentTarget.disabled) | 249 if (!e.currentTarget.disabled) |
253 e.currentTarget.tabIndex = 0; | 250 e.currentTarget.tabIndex = 0; |
254 }, | 251 }, |
255 | 252 |
256 /** | 253 /** |
257 * @param {!Event} e The keydown event. | 254 * @param {!Event} e The keydown event. |
258 * @private | 255 * @private |
259 */ | 256 */ |
260 onKeydown_: function(e) { | 257 onKeydown_: function(e) { |
261 var elements = this.getFocusableElements(); | 258 var elements = this.getFocusableElements(); |
262 var currentElement = /** @type {!Element} */(e.currentTarget); | 259 var currentElement = /** @type {!Element} */ (e.currentTarget); |
263 var elementIndex = elements.indexOf(currentElement); | 260 var elementIndex = elements.indexOf(currentElement); |
264 assert(elementIndex >= 0); | 261 assert(elementIndex >= 0); |
265 | 262 |
266 if (this.delegate && this.delegate.onKeydown(this, e)) | 263 if (this.delegate && this.delegate.onKeydown(this, e)) |
267 return; | 264 return; |
268 | 265 |
269 if (hasKeyModifiers(e)) | 266 if (hasKeyModifiers(e)) |
270 return; | 267 return; |
271 | 268 |
272 var index = -1; | 269 var index = -1; |
(...skipping 12 matching lines...) Expand all Loading... |
285 this.getEquivalentElement(elementToFocus).focus(); | 282 this.getEquivalentElement(elementToFocus).focus(); |
286 e.preventDefault(); | 283 e.preventDefault(); |
287 } | 284 } |
288 }, | 285 }, |
289 }; | 286 }; |
290 | 287 |
291 return { | 288 return { |
292 FocusRow: FocusRow, | 289 FocusRow: FocusRow, |
293 }; | 290 }; |
294 }); | 291 }); |
OLD | NEW |