OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 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 /** | 5 /** |
6 * @fileoverview 'cr-profile-avatar-selector-grid' is an accessible control for | 6 * @fileoverview 'cr-profile-avatar-selector-grid' is an accessible control for |
7 * profile avatar icons that allows keyboard navigation with all arrow keys. | 7 * profile avatar icons that allows keyboard navigation with all arrow keys. |
8 */ | 8 */ |
9 | 9 |
10 Polymer({ | 10 Polymer({ |
11 is: 'cr-profile-avatar-selector-grid', | 11 is: 'cr-profile-avatar-selector-grid', |
12 | 12 |
13 behaviors: [ | 13 behaviors: [ |
14 Polymer.IronMenubarBehavior, | 14 Polymer.IronMenubarBehavior, |
15 ], | 15 ], |
16 | 16 |
| 17 properties: { |
| 18 ignoreModifiedKeyEvents: { |
| 19 type: Boolean, |
| 20 value: false, |
| 21 }, |
| 22 }, |
| 23 |
| 24 /** |
| 25 * Handler that is called when left arrow key is pressed. Overrides |
| 26 * IronMenubarBehaviorImpl#_onLeftKey and ignores keys likely to be browser |
| 27 * shortcuts (like Alt+Left for back). |
| 28 * @param {!CustomEvent} event |
| 29 * @private |
| 30 */ |
| 31 _onLeftKey: function(event) { |
| 32 if (this.ignoreModifiedKeyEvents && this.hasKeyModifiers_(event)) |
| 33 return; |
| 34 Polymer.IronMenubarBehaviorImpl._onLeftKey.call(this, event); |
| 35 }, |
| 36 |
| 37 /** |
| 38 * Handler that is called when right arrow key is pressed. Overrides |
| 39 * IronMenubarBehaviorImpl#_onRightKey and ignores keys likely to be browser |
| 40 * shortcuts (like Alt+Right for forward). |
| 41 * @param {!CustomEvent} event |
| 42 * @private |
| 43 */ |
| 44 _onRightKey: function(event) { |
| 45 if (this.ignoreModifiedKeyEvents && this.hasKeyModifiers_(event)) |
| 46 return; |
| 47 Polymer.IronMenubarBehaviorImpl._onRightKey.call(this, event); |
| 48 }, |
| 49 |
17 /** | 50 /** |
18 * Handler that is called when the up arrow key is pressed. | 51 * Handler that is called when the up arrow key is pressed. |
19 * @param {CustomEvent} event A key combination event. | 52 * @param {CustomEvent} event A key combination event. |
20 * @private | 53 * @private |
21 */ | 54 */ |
22 _onUpKey: function(event) { | 55 _onUpKey: function(event) { |
23 this.moveFocusRow_(-1); | 56 this.moveFocusRow_(-1); |
24 event.detail.keyboardEvent.preventDefault(); | 57 event.detail.keyboardEvent.preventDefault(); |
25 }, | 58 }, |
26 | 59 |
(...skipping 10 matching lines...) Expand all Loading... |
37 /** | 70 /** |
38 * Handler that is called when the esc key is pressed. | 71 * Handler that is called when the esc key is pressed. |
39 * @param {CustomEvent} event A key combination event. | 72 * @param {CustomEvent} event A key combination event. |
40 * @private | 73 * @private |
41 */ | 74 */ |
42 _onEscKey: function(event) { | 75 _onEscKey: function(event) { |
43 // Override the original behavior by doing nothing. | 76 // Override the original behavior by doing nothing. |
44 }, | 77 }, |
45 | 78 |
46 /** | 79 /** |
| 80 * @param {!CustomEvent} event |
| 81 * @return {boolean} Whether the key event has modifier keys pressed. |
| 82 */ |
| 83 hasKeyModifiers_: function(event) { |
| 84 return hasKeyModifiers(assertInstanceof(event.detail.keyboardEvent, Event)); |
| 85 }, |
| 86 |
| 87 /** |
47 * Focuses an item on the same column as the currently focused item and on a | 88 * Focuses an item on the same column as the currently focused item and on a |
48 * row below or above the focus row by the given offset. Focus wraps if | 89 * row below or above the focus row by the given offset. Focus wraps if |
49 * necessary. | 90 * necessary. |
50 * @param {number} offset | 91 * @param {number} offset |
51 * @private | 92 * @private |
52 */ | 93 */ |
53 moveFocusRow_: function(offset) { | 94 moveFocusRow_: function(offset) { |
54 var length = this.items.length; | 95 var length = this.items.length; |
55 var style = getComputedStyle(this); | 96 var style = getComputedStyle(this); |
56 var avatarSpacing = | 97 var avatarSpacing = |
57 parseInt(style.getPropertyValue('--avatar-spacing'), 10); | 98 parseInt(style.getPropertyValue('--avatar-spacing'), 10); |
58 var avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); | 99 var avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); |
59 var rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); | 100 var rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); |
60 var rows = Math.ceil(length / rowSize); | 101 var rows = Math.ceil(length / rowSize); |
61 var gridSize = rows * rowSize; | 102 var gridSize = rows * rowSize; |
62 var focusIndex = this.indexOf(this.focusedItem); | 103 var focusIndex = this.indexOf(this.focusedItem); |
63 for (var i = offset; Math.abs(i) <= rows; i += offset) { | 104 for (var i = offset; Math.abs(i) <= rows; i += offset) { |
64 var item = this.items[(focusIndex + i * rowSize + gridSize) % gridSize]; | 105 var item = this.items[(focusIndex + i * rowSize + gridSize) % gridSize]; |
65 if (!item) | 106 if (!item) |
66 continue; | 107 continue; |
67 this._setFocusedItem(item); | 108 this._setFocusedItem(item); |
68 | 109 |
69 assert(Polymer.dom(item).getOwnerRoot().activeElement == item); | 110 assert(Polymer.dom(item).getOwnerRoot().activeElement == item); |
70 return; | 111 return; |
71 } | 112 } |
72 } | 113 } |
73 }); | 114 }); |
OLD | NEW |