Chromium Code Reviews| 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 |