Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(852)

Side by Side Diff: chrome/browser/resources/shared/js/cr/ui/table.js

Issue 7038024: Move sorting logic from table to list. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 9 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698