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. | |
27 * @param {CustomEvent} event | |
michaelpg
2016/12/19 10:02:46
! (since IronMenubarBehaviorImpl assumes it's non-
Dan Beam
2016/12/20 07:07:57
Done.
| |
28 * @private | |
29 */ | |
30 _onLeftKey: function(event) { | |
31 if (this.ignoreModifiedKeyEvents && this.hasKeyModifiers_(event)) | |
32 return; | |
33 Polymer.IronMenubarBehaviorImpl._onLeftKey.call(this, event); | |
34 }, | |
35 | |
36 /** | |
37 * Handler that is called when right arrow key is pressed. Overrides | |
38 * IronMenubarBehaviorImpl#_onLeftKey. | |
michaelpg
2016/12/19 10:02:46
onRightKey
Dan Beam
2016/12/20 07:07:57
Done.
| |
39 * @param {CustomEvent} event | |
michaelpg
2016/12/19 10:02:46
!
Dan Beam
2016/12/20 07:07:57
Done.
| |
40 * @private | |
41 */ | |
42 _onRightKey: function(event) { | |
43 if (this.ignoreModifiedKeyEvents && this.hasKeyModifiers_(event)) | |
44 return; | |
45 Polymer.IronMenubarBehaviorImpl._onRightKey.call(this, event); | |
46 }, | |
47 | |
17 /** | 48 /** |
18 * Handler that is called when the up arrow key is pressed. | 49 * Handler that is called when the up arrow key is pressed. |
19 * @param {CustomEvent} event A key combination event. | 50 * @param {CustomEvent} event A key combination event. |
20 * @private | 51 * @private |
21 */ | 52 */ |
22 _onUpKey: function(event) { | 53 _onUpKey: function(event) { |
23 this.moveFocusRow_(-1); | 54 this.moveFocusRow_(-1); |
24 event.detail.keyboardEvent.preventDefault(); | 55 event.detail.keyboardEvent.preventDefault(); |
25 }, | 56 }, |
26 | 57 |
(...skipping 10 matching lines...) Expand all Loading... | |
37 /** | 68 /** |
38 * Handler that is called when the esc key is pressed. | 69 * Handler that is called when the esc key is pressed. |
39 * @param {CustomEvent} event A key combination event. | 70 * @param {CustomEvent} event A key combination event. |
40 * @private | 71 * @private |
41 */ | 72 */ |
42 _onEscKey: function(event) { | 73 _onEscKey: function(event) { |
43 // Override the original behavior by doing nothing. | 74 // Override the original behavior by doing nothing. |
44 }, | 75 }, |
45 | 76 |
46 /** | 77 /** |
78 * @param {!CustomEvent} event | |
79 * @return {boolean} Whether the key event has modifier keys pressed. | |
80 */ | |
81 hasKeyModifiers_: function(event) { | |
82 var keyEv = /** @type {!KeyboardEvent} */(event.detail.keyboardEvent); | |
83 return keyEv.altKey || keyEv.ctrlKey || keyEv.metaKey || keyEv.shiftKey; | |
michaelpg
2016/12/19 10:02:45
maybe it's time for a function in util.js? https:/
Dan Beam
2016/12/20 07:07:56
Done.
| |
84 }, | |
85 | |
86 /** | |
47 * Focuses an item on the same column as the currently focused item and on a | 87 * 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 | 88 * row below or above the focus row by the given offset. Focus wraps if |
49 * necessary. | 89 * necessary. |
50 * @param {number} offset | 90 * @param {number} offset |
51 * @private | 91 * @private |
52 */ | 92 */ |
53 moveFocusRow_: function(offset) { | 93 moveFocusRow_: function(offset) { |
54 var length = this.items.length; | 94 var length = this.items.length; |
55 var style = getComputedStyle(this); | 95 var style = getComputedStyle(this); |
56 var avatarSpacing = | 96 var avatarSpacing = |
57 parseInt(style.getPropertyValue('--avatar-spacing'), 10); | 97 parseInt(style.getPropertyValue('--avatar-spacing'), 10); |
58 var avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); | 98 var avatarSize = parseInt(style.getPropertyValue('--avatar-size'), 10); |
59 var rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); | 99 var rowSize = Math.floor(this.clientWidth / (avatarSpacing + avatarSize)); |
60 var rows = Math.ceil(length / rowSize); | 100 var rows = Math.ceil(length / rowSize); |
61 var gridSize = rows * rowSize; | 101 var gridSize = rows * rowSize; |
62 var focusIndex = this.indexOf(this.focusedItem); | 102 var focusIndex = this.indexOf(this.focusedItem); |
63 for (var i = offset; Math.abs(i) <= rows; i += offset) { | 103 for (var i = offset; Math.abs(i) <= rows; i += offset) { |
64 var item = this.items[(focusIndex + i * rowSize + gridSize) % gridSize]; | 104 var item = this.items[(focusIndex + i * rowSize + gridSize) % gridSize]; |
65 if (!item) | 105 if (!item) |
66 continue; | 106 continue; |
67 this._setFocusedItem(item); | 107 this._setFocusedItem(item); |
68 | 108 |
69 assert(Polymer.dom(item).getOwnerRoot().activeElement == item); | 109 assert(Polymer.dom(item).getOwnerRoot().activeElement == item); |
70 return; | 110 return; |
71 } | 111 } |
72 } | 112 } |
73 }); | 113 }); |
OLD | NEW |