OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 This implements a table control. | 6 * @fileoverview This implements a table control. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('cr.ui', function() { | 9 cr.define('cr.ui', function() { |
10 /** @const */ var ListSelectionModel = cr.ui.ListSelectionModel; | 10 /** @const */ var ListSelectionModel = cr.ui.ListSelectionModel; |
(...skipping 14 matching lines...) Expand all Loading... |
25 Table.prototype = { | 25 Table.prototype = { |
26 __proto__: HTMLDivElement.prototype, | 26 __proto__: HTMLDivElement.prototype, |
27 | 27 |
28 columnModel_: new TableColumnModel([]), | 28 columnModel_: new TableColumnModel([]), |
29 | 29 |
30 /** | 30 /** |
31 * The table data model. | 31 * The table data model. |
32 * | 32 * |
33 * @type {cr.ui.ArrayDataModel} | 33 * @type {cr.ui.ArrayDataModel} |
34 */ | 34 */ |
35 get dataModel() { return this.list_.dataModel; }, | 35 get dataModel() { |
| 36 return this.list_.dataModel; |
| 37 }, |
36 set dataModel(dataModel) { | 38 set dataModel(dataModel) { |
37 if (this.list_.dataModel != dataModel) { | 39 if (this.list_.dataModel != dataModel) { |
38 if (this.list_.dataModel) { | 40 if (this.list_.dataModel) { |
39 this.list_.dataModel.removeEventListener( | 41 this.list_.dataModel.removeEventListener( |
40 'sorted', this.boundHandleSorted_); | 42 'sorted', this.boundHandleSorted_); |
41 this.list_.dataModel.removeEventListener( | 43 this.list_.dataModel.removeEventListener( |
42 'change', this.boundHandleChangeList_); | 44 'change', this.boundHandleChangeList_); |
43 this.list_.dataModel.removeEventListener( | 45 this.list_.dataModel.removeEventListener( |
44 'splice', this.boundHandleChangeList_); | 46 'splice', this.boundHandleChangeList_); |
45 } | 47 } |
46 this.list_.dataModel = dataModel; | 48 this.list_.dataModel = dataModel; |
47 if (this.list_.dataModel) { | 49 if (this.list_.dataModel) { |
48 this.list_.dataModel.addEventListener( | 50 this.list_.dataModel.addEventListener( |
49 'sorted', this.boundHandleSorted_); | 51 'sorted', this.boundHandleSorted_); |
50 this.list_.dataModel.addEventListener( | 52 this.list_.dataModel.addEventListener( |
51 'change', this.boundHandleChangeList_); | 53 'change', this.boundHandleChangeList_); |
52 this.list_.dataModel.addEventListener( | 54 this.list_.dataModel.addEventListener( |
53 'splice', this.boundHandleChangeList_); | 55 'splice', this.boundHandleChangeList_); |
54 } | 56 } |
55 this.header_.redraw(); | 57 this.header_.redraw(); |
56 } | 58 } |
57 }, | 59 }, |
58 | 60 |
59 /** | 61 /** |
60 * The list of table. | 62 * The list of table. |
61 * | 63 * |
62 * @type {cr.ui.List} | 64 * @type {cr.ui.List} |
63 */ | 65 */ |
64 get list() { return this.list_; }, | 66 get list() { |
| 67 return this.list_; |
| 68 }, |
65 | 69 |
66 /** | 70 /** |
67 * The table column model. | 71 * The table column model. |
68 * | 72 * |
69 * @type {cr.ui.table.TableColumnModel} | 73 * @type {cr.ui.table.TableColumnModel} |
70 */ | 74 */ |
71 get columnModel() { return this.columnModel_; }, | 75 get columnModel() { |
| 76 return this.columnModel_; |
| 77 }, |
72 set columnModel(columnModel) { | 78 set columnModel(columnModel) { |
73 if (this.columnModel_ != columnModel) { | 79 if (this.columnModel_ != columnModel) { |
74 if (this.columnModel_) | 80 if (this.columnModel_) |
75 this.columnModel_.removeEventListener('resize', this.boundResize_); | 81 this.columnModel_.removeEventListener('resize', this.boundResize_); |
76 this.columnModel_ = columnModel; | 82 this.columnModel_ = columnModel; |
77 | 83 |
78 if (this.columnModel_) | 84 if (this.columnModel_) |
79 this.columnModel_.addEventListener('resize', this.boundResize_); | 85 this.columnModel_.addEventListener('resize', this.boundResize_); |
80 this.list_.invalidate(); | 86 this.list_.invalidate(); |
81 this.redraw(); | 87 this.redraw(); |
82 } | 88 } |
83 }, | 89 }, |
84 | 90 |
85 /** | 91 /** |
86 * The table selection model. | 92 * The table selection model. |
87 * | 93 * |
88 * @type | 94 * @type |
89 * {cr.ui.ListSelectionModel|cr.ui.ListSingleSelectionModel} | 95 * {cr.ui.ListSelectionModel|cr.ui.ListSingleSelectionModel} |
90 */ | 96 */ |
91 get selectionModel() { return this.list_.selectionModel; }, | 97 get selectionModel() { |
| 98 return this.list_.selectionModel; |
| 99 }, |
92 set selectionModel(selectionModel) { | 100 set selectionModel(selectionModel) { |
93 if (this.list_.selectionModel != selectionModel) { | 101 if (this.list_.selectionModel != selectionModel) { |
94 if (this.dataModel) | 102 if (this.dataModel) |
95 selectionModel.adjustLength(this.dataModel.length); | 103 selectionModel.adjustLength(this.dataModel.length); |
96 this.list_.selectionModel = selectionModel; | 104 this.list_.selectionModel = selectionModel; |
97 } | 105 } |
98 }, | 106 }, |
99 | 107 |
100 /** | 108 /** |
101 * The accessor to "autoExpands" property of the list. | 109 * The accessor to "autoExpands" property of the list. |
102 * | 110 * |
103 * @type {boolean} | 111 * @type {boolean} |
104 */ | 112 */ |
105 get autoExpands() { return this.list_.autoExpands; }, | 113 get autoExpands() { |
106 set autoExpands(autoExpands) { this.list_.autoExpands = autoExpands; }, | 114 return this.list_.autoExpands; |
| 115 }, |
| 116 set autoExpands(autoExpands) { |
| 117 this.list_.autoExpands = autoExpands; |
| 118 }, |
107 | 119 |
108 get fixedHeight() { return this.list_.fixedHeight; }, | 120 get fixedHeight() { |
109 set fixedHeight(fixedHeight) { this.list_.fixedHeight = fixedHeight; }, | 121 return this.list_.fixedHeight; |
| 122 }, |
| 123 set fixedHeight(fixedHeight) { |
| 124 this.list_.fixedHeight = fixedHeight; |
| 125 }, |
110 | 126 |
111 /** | 127 /** |
112 * Returns render function for row. | 128 * Returns render function for row. |
113 * @return {function(*, cr.ui.Table): HTMLElement} Render function. | 129 * @return {function(*, cr.ui.Table): HTMLElement} Render function. |
114 */ | 130 */ |
115 getRenderFunction: function() { return this.list_.renderFunction_; }, | 131 getRenderFunction: function() { |
| 132 return this.list_.renderFunction_; |
| 133 }, |
116 | 134 |
117 /** | 135 /** |
118 * Sets render function for row. | 136 * Sets render function for row. |
119 * @param {function(*, cr.ui.Table): HTMLElement} renderFunction Render | 137 * @param {function(*, cr.ui.Table): HTMLElement} renderFunction Render |
120 * function. | 138 * function. |
121 */ | 139 */ |
122 setRenderFunction: function(renderFunction) { | 140 setRenderFunction: function(renderFunction) { |
123 if (renderFunction === this.list_.renderFunction_) | 141 if (renderFunction === this.list_.renderFunction_) |
124 return; | 142 return; |
125 | 143 |
126 this.list_.renderFunction_ = renderFunction; | 144 this.list_.renderFunction_ = renderFunction; |
127 cr.dispatchSimpleEvent(this, 'change'); | 145 cr.dispatchSimpleEvent(this, 'change'); |
128 }, | 146 }, |
129 | 147 |
130 /** | 148 /** |
131 * The header of the table. | 149 * The header of the table. |
132 * | 150 * |
133 * @type {cr.ui.table.TableColumnModel} | 151 * @type {cr.ui.table.TableColumnModel} |
134 */ | 152 */ |
135 get header() { return this.header_; }, | 153 get header() { |
| 154 return this.header_; |
| 155 }, |
136 | 156 |
137 /** | 157 /** |
138 * Initializes the element. | 158 * Initializes the element. |
139 */ | 159 */ |
140 decorate: function() { | 160 decorate: function() { |
141 this.header_ = this.ownerDocument.createElement('div'); | 161 this.header_ = this.ownerDocument.createElement('div'); |
142 this.list_ = this.ownerDocument.createElement('list'); | 162 this.list_ = this.ownerDocument.createElement('list'); |
143 | 163 |
144 this.appendChild(this.header_); | 164 this.appendChild(this.header_); |
145 this.appendChild(this.list_); | 165 this.appendChild(this.list_); |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
192 resize: function() { | 212 resize: function() { |
193 // We resize columns only instead of full redraw. | 213 // We resize columns only instead of full redraw. |
194 this.list_.resize(); | 214 this.list_.resize(); |
195 this.header_.resize(); | 215 this.header_.resize(); |
196 }, | 216 }, |
197 | 217 |
198 /** | 218 /** |
199 * Ensures that a given index is inside the viewport. | 219 * Ensures that a given index is inside the viewport. |
200 * @param {number} i The index of the item to scroll into view. | 220 * @param {number} i The index of the item to scroll into view. |
201 */ | 221 */ |
202 scrollIndexIntoView: function(i) { this.list_.scrollIndexIntoView(i); }, | 222 scrollIndexIntoView: function(i) { |
| 223 this.list_.scrollIndexIntoView(i); |
| 224 }, |
203 | 225 |
204 /** | 226 /** |
205 * Find the list item element at the given index. | 227 * Find the list item element at the given index. |
206 * @param {number} index The index of the list item to get. | 228 * @param {number} index The index of the list item to get. |
207 * @return {cr.ui.ListItem} The found list item or null if not found. | 229 * @return {cr.ui.ListItem} The found list item or null if not found. |
208 */ | 230 */ |
209 getListItemByIndex: function(index) { | 231 getListItemByIndex: function(index) { |
210 return this.list_.getListItemByIndex(index); | 232 return this.list_.getListItemByIndex(index); |
211 }, | 233 }, |
212 | 234 |
213 /** | 235 /** |
214 * This handles data model 'sorted' event. | 236 * This handles data model 'sorted' event. |
215 * After sorting we need to redraw header | 237 * After sorting we need to redraw header |
216 * @param {Event} e The 'sorted' event. | 238 * @param {Event} e The 'sorted' event. |
217 */ | 239 */ |
218 handleSorted_: function(e) { this.header_.redraw(); }, | 240 handleSorted_: function(e) { |
| 241 this.header_.redraw(); |
| 242 }, |
219 | 243 |
220 /** | 244 /** |
221 * This handles data model 'change' and 'splice' events. | 245 * This handles data model 'change' and 'splice' events. |
222 * Since they may change the visibility of scrollbar, table may need to | 246 * Since they may change the visibility of scrollbar, table may need to |
223 * re-calculation the width of column headers. | 247 * re-calculation the width of column headers. |
224 * @param {Event} e The 'change' or 'splice' event. | 248 * @param {Event} e The 'change' or 'splice' event. |
225 */ | 249 */ |
226 handleChangeList_: function(e) { | 250 handleChangeList_: function(e) { |
227 requestAnimationFrame(this.header_.updateWidth.bind(this.header_)); | 251 requestAnimationFrame(this.header_.updateWidth.bind(this.header_)); |
228 }, | 252 }, |
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
344 /** | 368 /** |
345 * Whether the table or one of its descendents has focus. This is necessary | 369 * Whether the table or one of its descendents has focus. This is necessary |
346 * because table contents can contain controls that can be focused, and for | 370 * because table contents can contain controls that can be focused, and for |
347 * some purposes (e.g., styling), the table can still be conceptually focused | 371 * some purposes (e.g., styling), the table can still be conceptually focused |
348 * at that point even though it doesn't actually have the page focus. | 372 * at that point even though it doesn't actually have the page focus. |
349 */ | 373 */ |
350 cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR); | 374 cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR); |
351 | 375 |
352 return {Table: Table}; | 376 return {Table: Table}; |
353 }); | 377 }); |
OLD | NEW |