OLD | NEW |
---|---|
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 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 TableSelectionModel = cr.ui.table.TableSelectionModel; | 10 const ListSelectionModel = cr.ui.ListSelectionModel; |
11 const ListSelectionController = cr.ui.ListSelectionController; | 11 const ListSelectionController = cr.ui.ListSelectionController; |
12 const ArrayDataModel = cr.ui.ArrayDataModel; | 12 const ArrayDataModel = cr.ui.ArrayDataModel; |
13 const TableColumnModel = cr.ui.table.TableColumnModel; | 13 const TableColumnModel = cr.ui.table.TableColumnModel; |
14 const TableList = cr.ui.table.TableList; | 14 const TableList = cr.ui.table.TableList; |
15 const TableHeader = cr.ui.table.TableHeader; | 15 const TableHeader = cr.ui.table.TableHeader; |
16 | 16 |
17 /** | 17 /** |
18 * Creates a new table element. | 18 * Creates a new table element. |
19 * @param {Object=} opt_propertyBag Optional properties. | 19 * @param {Object=} opt_propertyBag Optional properties. |
20 * @constructor | 20 * @constructor |
21 * @extends {HTMLDivElement} | 21 * @extends {HTMLDivElement} |
22 */ | 22 */ |
23 var Table = cr.ui.define('div'); | 23 var Table = cr.ui.define('div'); |
24 | 24 |
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.table.TableDataModel} | 33 * @type {cr.ui.ArrayDataModel} |
34 */ | 34 */ |
35 get dataModel() { | 35 get dataModel() { |
36 return this.list_.dataModel; | 36 return this.list_.dataModel; |
37 }, | 37 }, |
38 set dataModel(dataModel) { | 38 set dataModel(dataModel) { |
39 if (this.list_.dataModel != dataModel) { | 39 if (this.list_.dataModel != dataModel) { |
40 this.list_.dataModel = dataModel; | |
41 if (this.list_.dataModel) { | 40 if (this.list_.dataModel) { |
42 this.list_.dataModel.removeEventListener('splice', this.boundRedraw_); | |
43 this.list_.dataModel.removeEventListener('sorted', | 41 this.list_.dataModel.removeEventListener('sorted', |
44 this.boundHandleSorted_); | 42 this.boundHandleSorted_); |
45 } | 43 } |
46 this.list_.dataModel = dataModel; | 44 this.list_.dataModel = dataModel; |
47 this.list_.dataModel.table = this; | |
48 | |
49 | |
50 if (this.list_.dataModel) { | 45 if (this.list_.dataModel) { |
51 this.list_.dataModel.addEventListener('splice', this.boundRedraw_); | |
52 this.list_.dataModel.addEventListener('sorted', | 46 this.list_.dataModel.addEventListener('sorted', |
53 this.boundHandleSorted_); | 47 this.boundHandleSorted_); |
54 } | 48 } |
55 this.header_.redraw(); | 49 this.header_.redraw(); |
56 } | 50 } |
57 }, | 51 }, |
58 | 52 |
59 /** | 53 /** |
60 * The table column model. | 54 * The table column model. |
61 * | 55 * |
62 * @type {cr.ui.table.TableColumnModel} | 56 * @type {cr.ui.table.TableColumnModel} |
63 */ | 57 */ |
64 get columnModel() { | 58 get columnModel() { |
65 return this.columnModel_; | 59 return this.columnModel_; |
66 }, | 60 }, |
67 set columnModel(columnModel) { | 61 set columnModel(columnModel) { |
68 if (this.columnModel_ != columnModel) { | 62 if (this.columnModel_ != columnModel) { |
69 if (this.columnModel_) { | 63 if (this.columnModel_) |
70 this.columnModel_.removeEventListener('change', this.boundRedraw_); | |
71 this.columnModel_.removeEventListener('resize', this.boundResize_); | 64 this.columnModel_.removeEventListener('resize', this.boundResize_); |
72 } | |
73 this.columnModel_ = columnModel; | 65 this.columnModel_ = columnModel; |
74 | 66 |
75 if (this.columnModel_) { | 67 if (this.columnModel_) |
76 this.columnModel_.addEventListener('change', this.boundRedraw_); | |
77 this.columnModel_.addEventListener('resize', this.boundResize_); | 68 this.columnModel_.addEventListener('resize', this.boundResize_); |
78 } | 69 this.invalidateAndRedraw(); |
79 this.redraw(); | |
80 } | 70 } |
81 }, | 71 }, |
82 | 72 |
83 /** | 73 /** |
84 * The table selection model. | 74 * The table selection model. |
85 * | 75 * |
86 * @type | 76 * @type |
87 * {cr.ui.table.TableSelectionModel|cr.ui.table.TableSingleSelectionModel} | 77 * {cr.ui.ListSelectionModel|cr.ui.table.ListSingleSelectionModel} |
88 */ | 78 */ |
89 get selectionModel() { | 79 get selectionModel() { |
90 return this.list_.selectionModel; | 80 return this.list_.selectionModel; |
91 }, | 81 }, |
92 set selectionModel(selectionModel) { | 82 set selectionModel(selectionModel) { |
93 if (this.list_.selectionModel != selectionModel) { | 83 if (this.list_.selectionModel != selectionModel) { |
94 if (this.dataModel) | 84 if (this.dataModel) |
95 selectionModel.adjust(0, 0, this.dataModel.length); | 85 selectionModel.adjust(0, 0, this.dataModel.length); |
96 this.list_.selectionModel = selectionModel; | 86 this.list_.selectionModel = selectionModel; |
97 this.redraw(); | 87 this.invalidateAndRedraw(); |
98 } | 88 } |
99 }, | 89 }, |
100 | 90 |
101 /** | 91 /** |
102 * Sets width of the column at the given index. | 92 * Sets width of the column at the given index. |
103 * | 93 * |
104 * @param {number} index The index of the column. | 94 * @param {number} index The index of the column. |
105 * @param {number} Column width. | 95 * @param {number} Column width. |
106 */ | 96 */ |
107 setColumnWidth: function(index, width) { | 97 setColumnWidth: function(index, width) { |
108 this.columnWidths_[index] = width; | 98 this.columnWidths_[index] = width; |
109 }, | 99 }, |
110 | 100 |
111 /** | 101 /** |
112 * Initializes the element. | 102 * Initializes the element. |
113 */ | 103 */ |
114 decorate: function() { | 104 decorate: function() { |
115 this.list_ = this.ownerDocument.createElement('list'); | 105 this.list_ = this.ownerDocument.createElement('list'); |
116 TableList.decorate(this.list_); | 106 TableList.decorate(this.list_); |
117 this.list_.selectionModel = new TableSelectionModel(this); | 107 this.list_.selectionModel = new ListSelectionModel(this); |
118 this.list_.table = this; | 108 this.list_.table = this; |
119 | 109 |
120 this.header_ = this.ownerDocument.createElement('div'); | 110 this.header_ = this.ownerDocument.createElement('div'); |
121 TableHeader.decorate(this.header_); | 111 TableHeader.decorate(this.header_); |
122 this.header_.table = this; | 112 this.header_.table = this; |
123 | 113 |
124 this.classList.add('table'); | 114 this.classList.add('table'); |
125 this.appendChild(this.header_); | 115 this.appendChild(this.header_); |
126 this.appendChild(this.list_); | 116 this.appendChild(this.list_); |
127 this.ownerDocument.defaultView.addEventListener( | 117 this.ownerDocument.defaultView.addEventListener( |
128 'resize', this.header_.updateWidth.bind(this.header_)); | 118 'resize', this.header_.updateWidth.bind(this.header_)); |
129 | 119 |
130 this.boundRedraw_ = this.redraw.bind(this); | |
131 this.boundResize_ = this.resize.bind(this); | 120 this.boundResize_ = this.resize.bind(this); |
132 this.boundHandleSorted_ = this.handleSorted_.bind(this); | 121 this.boundHandleSorted_ = this.handleSorted_.bind(this); |
133 | 122 |
134 // Make table focusable | 123 // Make table focusable |
135 if (!this.hasAttribute('tabindex')) | 124 if (!this.hasAttribute('tabindex')) |
136 this.tabIndex = 0; | 125 this.tabIndex = 0; |
137 this.addEventListener('focus', this.handleElementFocus_, true); | 126 this.addEventListener('focus', this.handleElementFocus_, true); |
138 this.addEventListener('blur', this.handleElementBlur_, true); | 127 this.addEventListener('blur', this.handleElementBlur_, true); |
139 }, | 128 }, |
140 | 129 |
(...skipping 21 matching lines...) Expand all Loading... | |
162 * @return {ListItem} The found list item or null if not found. | 151 * @return {ListItem} The found list item or null if not found. |
163 */ | 152 */ |
164 getListItemByIndex: function(index) { | 153 getListItemByIndex: function(index) { |
165 return this.list_.getListItemByIndex(index); | 154 return this.list_.getListItemByIndex(index); |
166 }, | 155 }, |
167 | 156 |
168 /** | 157 /** |
169 * Redraws the table. | 158 * Redraws the table. |
170 * This forces the list to remove all cached items. | 159 * This forces the list to remove all cached items. |
171 */ | 160 */ |
172 redraw: function() { | 161 invalidateAndRedraw: function() { |
173 this.list_.startBatchUpdates(); | 162 this.list_.startBatchUpdates(); |
174 if (this.list_.dataModel) { | 163 if (this.list_.dataModel) { |
175 for (var i = 0; i < this.list_.dataModel.length; i++) { | 164 for (var i = 0; i < this.list_.dataModel.length; i++) { |
rginda
2011/05/18 23:45:19
Apparently in chrome js code we're only supposed t
| |
176 this.list_.redrawItem(i); | 165 this.list_.redrawItem(i); |
177 } | 166 } |
178 } | 167 } |
179 this.list_.endBatchUpdates(); | 168 this.list_.endBatchUpdates(); |
180 this.list_.redraw(); | 169 this.list_.redraw(); |
181 this.header_.redraw(); | 170 this.header_.redraw(); |
182 }, | 171 }, |
183 | 172 |
184 /** | 173 /** |
185 * This handles data model 'sorted' event. | 174 * This handles data model 'sorted' event. |
186 * After sorting we need to | 175 * After sorting we need to redraw header |
187 * - adjust selection | |
188 * - redraw all the items | |
189 * - scroll the list to show selection. | |
190 * @param {Event} e The 'sorted' event. | 176 * @param {Event} e The 'sorted' event. |
191 */ | 177 */ |
192 handleSorted_: function(e) { | 178 handleSorted_: function(e) { |
193 var sm = this.list_.selectionModel; | 179 this.header_.redraw(); |
194 sm.adjustToReordering(e.sortPermutation); | |
195 | |
196 this.redraw(); | |
197 if (sm.leadIndex != -1) | |
198 this.list_.scrollIndexIntoView(sm.leadIndex) | |
199 }, | 180 }, |
200 | 181 |
201 /** | 182 /** |
202 * Sort data by the given column. | 183 * Sort data by the given column. |
203 * @param {number} index The index of the column to sort by. | 184 * @param {number} index The index of the column to sort by. |
204 */ | 185 */ |
205 sort: function(i) { | 186 sort: function(i) { |
206 var cm = this.columnModel_; | 187 var cm = this.columnModel_; |
207 var sortStatus = this.list_.dataModel.sortStatus; | 188 var sortStatus = this.list_.dataModel.sortStatus; |
208 if (sortStatus.field == cm.getId(i)) { | 189 if (sortStatus.field == cm.getId(i)) { |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
257 * because table contents can contain controls that can be focused, and for | 238 * because table contents can contain controls that can be focused, and for |
258 * some purposes (e.g., styling), the table can still be conceptually focused | 239 * some purposes (e.g., styling), the table can still be conceptually focused |
259 * at that point even though it doesn't actually have the page focus. | 240 * at that point even though it doesn't actually have the page focus. |
260 */ | 241 */ |
261 cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR); | 242 cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR); |
262 | 243 |
263 return { | 244 return { |
264 Table: Table | 245 Table: Table |
265 }; | 246 }; |
266 }); | 247 }); |
OLD | NEW |