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 grid of focusable elements in a 2D grid. For example, | 7 * A class to manage grid of focusable elements in a 2D grid. For example, |
8 * given this grid: | 8 * given this grid: |
9 * | 9 * |
10 * focusable [focused] focusable (row: 0, col: 1) | 10 * focusable [focused] focusable (row: 0, col: 1) |
(...skipping 25 matching lines...) Expand all Loading... | |
36 this.eventTracker_.add(cr.doc, 'focusin', this.onFocusin_.bind(this)); | 36 this.eventTracker_.add(cr.doc, 'focusin', this.onFocusin_.bind(this)); |
37 | 37 |
38 /** @private {cr.ui.FocusRow.Delegate} */ | 38 /** @private {cr.ui.FocusRow.Delegate} */ |
39 this.delegate_ = new FocusGrid.RowDelegate(this); | 39 this.delegate_ = new FocusGrid.RowDelegate(this); |
40 } | 40 } |
41 | 41 |
42 /** | 42 /** |
43 * Row delegate to overwrite the behavior of a mouse click to deselect any row | 43 * Row delegate to overwrite the behavior of a mouse click to deselect any row |
44 * that wasn't clicked. | 44 * that wasn't clicked. |
45 * @param {cr.ui.FocusGrid} focusGrid | 45 * @param {cr.ui.FocusGrid} focusGrid |
46 * @constructor | |
46 * @implements {cr.ui.FocusRow.Delegate} | 47 * @implements {cr.ui.FocusRow.Delegate} |
47 */ | 48 */ |
48 FocusGrid.RowDelegate = function(focusGrid) { | 49 FocusGrid.RowDelegate = function(focusGrid) { |
49 /** @private {cr.ui.FocusGrid} */ | 50 /** @private {cr.ui.FocusGrid} */ |
50 this.focusGrid_ = focusGrid; | 51 this.focusGrid_ = focusGrid; |
51 }; | 52 }; |
52 | 53 |
53 FocusGrid.RowDelegate.prototype = { | 54 FocusGrid.RowDelegate.prototype = { |
54 /** @override */ | 55 /** @override */ |
55 onKeydown: function(row, e) { return false; }, | 56 onKeydown: function(row, e) { return false; }, |
56 | 57 |
57 /** @override */ | 58 /** @override */ |
58 onMousedown: function(row, e) { | 59 onMousedown: function(row, e) { |
59 // Only care about left mouse click. | 60 // Only care about left mouse click. |
60 if (e.button) | 61 if (e.button) |
61 return false; | 62 return false; |
62 | 63 |
63 // Only the clicked row should be active. | 64 // Only the clicked row should be active. |
64 this.focusGrid_.rows.forEach(function(row) { | 65 this.focusGrid_.rows.forEach(function(row) { |
65 row.makeRowActive(row.contains(e.target)); | 66 row.makeRowActive(row.contains(/** @type {Node} */ (e.target))); |
Dan Beam
2015/02/04 17:08:05
how do you know this is a node?
hcarmona
2015/02/04 19:19:55
Changed casts to assertInstanceof and verified tha
| |
66 }); | 67 }); |
67 | 68 |
68 e.preventDefault(); | 69 e.preventDefault(); |
69 return true; | 70 return true; |
70 }, | 71 }, |
71 }; | 72 }; |
72 | 73 |
73 FocusGrid.prototype = { | 74 FocusGrid.prototype = { |
74 /** | 75 /** |
75 * Unregisters event handlers and removes all |this.rows|. | 76 * Unregisters event handlers and removes all |this.rows|. |
76 */ | 77 */ |
77 destroy: function() { | 78 destroy: function() { |
78 this.rows.forEach(function(row) { row.destroy(); }); | 79 this.rows.forEach(function(row) { row.destroy(); }); |
79 this.rows.length = 0; | 80 this.rows.length = 0; |
80 }, | 81 }, |
81 | 82 |
82 /** | 83 /** |
83 * @param {EventTarget} target A target item to find in this grid. | 84 * @param {EventTarget} target A target item to find in this grid. |
84 * @return {number} The row index. -1 if not found. | 85 * @return {number} The row index. -1 if not found. |
85 */ | 86 */ |
86 getRowIndexForTarget: function(target) { | 87 getRowIndexForTarget: function(target) { |
87 for (var i = 0; i < this.rows.length; ++i) { | 88 for (var i = 0; i < this.rows.length; ++i) { |
88 if (this.rows[i].contains(target)) | 89 if (this.rows[i].contains(/** @type {Node} */ (target))) |
Dan Beam
2015/02/04 17:08:05
how do you know this is a node?
hcarmona
2015/02/04 19:19:55
This function doesn't know where it will be called
| |
89 return i; | 90 return i; |
90 } | 91 } |
91 return -1; | 92 return -1; |
92 }, | 93 }, |
93 | 94 |
94 /** | 95 /** |
95 * Handles keyboard shortcuts to move up/down in the grid. | 96 * Handles keyboard shortcuts to move up/down in the grid. |
96 * @param {Event} e The key event. | 97 * @param {Event} e The key event. |
97 * @private | 98 * @private |
98 */ | 99 */ |
(...skipping 16 matching lines...) Expand all Loading... | |
115 var rowToFocus = this.rows[row]; | 116 var rowToFocus = this.rows[row]; |
116 if (rowToFocus) { | 117 if (rowToFocus) { |
117 this.ignoreFocusChange_ = true; | 118 this.ignoreFocusChange_ = true; |
118 rowToFocus.getEquivalentElement(this.lastFocused).focus(); | 119 rowToFocus.getEquivalentElement(this.lastFocused).focus(); |
119 e.preventDefault(); | 120 e.preventDefault(); |
120 } | 121 } |
121 }, | 122 }, |
122 | 123 |
123 /** | 124 /** |
124 * Keep track of the last column that the user manually focused. | 125 * Keep track of the last column that the user manually focused. |
125 * @param {Event} The focusin event. | 126 * @param {Event} e The focusin event. |
126 * @private | 127 * @private |
127 */ | 128 */ |
128 onFocusin_: function(e) { | 129 onFocusin_: function(e) { |
129 if (this.ignoreFocusChange_) { | 130 if (this.ignoreFocusChange_) { |
130 this.ignoreFocusChange_ = false; | 131 this.ignoreFocusChange_ = false; |
131 return; | 132 return; |
132 } | 133 } |
133 | 134 |
134 if (this.getRowIndexForTarget(e.target) != -1) | 135 if (this.getRowIndexForTarget(e.target) != -1) |
135 this.lastFocused = e.target; | 136 this.lastFocused = e.target; |
(...skipping 23 matching lines...) Expand all Loading... | |
159 | 160 |
160 // Add the row after its initial focus is set. | 161 // Add the row after its initial focus is set. |
161 this.rows.push(row); | 162 this.rows.push(row); |
162 }, | 163 }, |
163 }; | 164 }; |
164 | 165 |
165 return { | 166 return { |
166 FocusGrid: FocusGrid, | 167 FocusGrid: FocusGrid, |
167 }; | 168 }; |
168 }); | 169 }); |
OLD | NEW |