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 header. | 6 * @fileoverview This implements a table header. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('cr.ui.table', function() { | 9 cr.define('cr.ui.table', function() { |
10 /** @const */ var TableSplitter = cr.ui.TableSplitter; | 10 /** @const */ var TableSplitter = cr.ui.TableSplitter; |
(...skipping 13 matching lines...) Expand all Loading... |
24 | 24 |
25 /** | 25 /** |
26 * Initializes the element. | 26 * Initializes the element. |
27 */ | 27 */ |
28 decorate: function() { | 28 decorate: function() { |
29 this.className = 'table-header'; | 29 this.className = 'table-header'; |
30 | 30 |
31 this.headerInner_ = this.ownerDocument.createElement('div'); | 31 this.headerInner_ = this.ownerDocument.createElement('div'); |
32 this.headerInner_.className = 'table-header-inner'; | 32 this.headerInner_.className = 'table-header-inner'; |
33 this.appendChild(this.headerInner_); | 33 this.appendChild(this.headerInner_); |
34 this.addEventListener('touchstart', | 34 this.addEventListener( |
35 this.handleTouchStart_.bind(this), false); | 35 'touchstart', this.handleTouchStart_.bind(this), false); |
36 }, | 36 }, |
37 | 37 |
38 /** | 38 /** |
39 * Updates table header width. Header width depends on list having a | 39 * Updates table header width. Header width depends on list having a |
40 * vertical scrollbar. | 40 * vertical scrollbar. |
41 */ | 41 */ |
42 updateWidth: function() { | 42 updateWidth: function() { |
43 // Header should not span over the vertical scrollbar of the list. | 43 // Header should not span over the vertical scrollbar of the list. |
44 var list = this.table_.querySelector('list'); | 44 var list = this.table_.querySelector('list'); |
45 this.headerInner_.style.width = list.clientWidth + 'px'; | 45 this.headerInner_.style.width = list.clientWidth + 'px'; |
(...skipping 11 matching lines...) Expand all Loading... |
57 | 57 |
58 var cm = this.table_.columnModel; | 58 var cm = this.table_.columnModel; |
59 for (var i = 0; i < cm.size; i++) { | 59 for (var i = 0; i < cm.size; i++) { |
60 headerCells[i].style.width = cm.getWidth(i) + 'px'; | 60 headerCells[i].style.width = cm.getWidth(i) + 'px'; |
61 } | 61 } |
62 this.placeSplitters_(this.querySelectorAll('.table-header-splitter')); | 62 this.placeSplitters_(this.querySelectorAll('.table-header-splitter')); |
63 }, | 63 }, |
64 | 64 |
65 batchCount_: 0, | 65 batchCount_: 0, |
66 | 66 |
67 startBatchUpdates: function() { | 67 startBatchUpdates: function() { this.batchCount_++; }, |
68 this.batchCount_++; | |
69 }, | |
70 | 68 |
71 endBatchUpdates: function() { | 69 endBatchUpdates: function() { |
72 this.batchCount_--; | 70 this.batchCount_--; |
73 if (this.batchCount_ == 0) | 71 if (this.batchCount_ == 0) |
74 this.redraw(); | 72 this.redraw(); |
75 }, | 73 }, |
76 | 74 |
77 /** | 75 /** |
78 * Redraws table header. | 76 * Redraws table header. |
79 */ | 77 */ |
80 redraw: function() { | 78 redraw: function() { |
81 if (this.batchCount_ != 0) | 79 if (this.batchCount_ != 0) |
82 return; | 80 return; |
83 | 81 |
84 var cm = this.table_.columnModel; | 82 var cm = this.table_.columnModel; |
85 var dm = this.table_.dataModel; | 83 var dm = this.table_.dataModel; |
86 | 84 |
87 this.updateWidth(); | 85 this.updateWidth(); |
88 this.headerInner_.textContent = ''; | 86 this.headerInner_.textContent = ''; |
89 | 87 |
90 if (!cm || ! dm) { | 88 if (!cm || !dm) { |
91 return; | 89 return; |
92 } | 90 } |
93 | 91 |
94 for (var i = 0; i < cm.size; i++) { | 92 for (var i = 0; i < cm.size; i++) { |
95 var cell = this.ownerDocument.createElement('div'); | 93 var cell = this.ownerDocument.createElement('div'); |
96 cell.style.width = cm.getWidth(i) + 'px'; | 94 cell.style.width = cm.getWidth(i) + 'px'; |
97 // Don't display cells for hidden columns. Don't omit the cell | 95 // Don't display cells for hidden columns. Don't omit the cell |
98 // completely, as it's much simpler if the number of cell elements and | 96 // completely, as it's much simpler if the number of cell elements and |
99 // columns are in sync. | 97 // columns are in sync. |
100 cell.hidden = !cm.isVisible(i); | 98 cell.hidden = !cm.isVisible(i); |
101 cell.className = 'table-header-cell'; | 99 cell.className = 'table-header-cell'; |
102 if (dm.isSortable(cm.getId(i))) | 100 if (dm.isSortable(cm.getId(i))) |
103 cell.addEventListener('click', | 101 cell.addEventListener( |
104 this.createSortFunction_(i).bind(this)); | 102 'click', this.createSortFunction_(i).bind(this)); |
105 | 103 |
106 cell.appendChild(this.createHeaderLabel_(i)); | 104 cell.appendChild(this.createHeaderLabel_(i)); |
107 this.headerInner_.appendChild(cell); | 105 this.headerInner_.appendChild(cell); |
108 } | 106 } |
109 this.appendSplitters_(); | 107 this.appendSplitters_(); |
110 }, | 108 }, |
111 | 109 |
112 /** | 110 /** |
113 * Appends column splitters to the table header. | 111 * Appends column splitters to the table header. |
114 */ | 112 */ |
115 appendSplitters_: function() { | 113 appendSplitters_: function() { |
116 var cm = this.table_.columnModel; | 114 var cm = this.table_.columnModel; |
117 var splitters = []; | 115 var splitters = []; |
118 for (var i = 0; i < cm.size; i++) { | 116 for (var i = 0; i < cm.size; i++) { |
119 // splitter should use CSS for background image. | 117 // splitter should use CSS for background image. |
120 var splitter = new TableSplitter({table: this.table_}); | 118 var splitter = new TableSplitter({table: this.table_}); |
121 splitter.columnIndex = i; | 119 splitter.columnIndex = i; |
122 splitter.addEventListener('dblclick', | 120 splitter.addEventListener( |
123 this.handleDblClick_.bind(this, i)); | 121 'dblclick', this.handleDblClick_.bind(this, i)); |
124 // Don't display splitters for hidden columns. Don't omit the splitter | 122 // Don't display splitters for hidden columns. Don't omit the splitter |
125 // completely, as it's much simpler if the number of splitter elements | 123 // completely, as it's much simpler if the number of splitter elements |
126 // and columns are in sync. | 124 // and columns are in sync. |
127 splitter.hidden = !cm.isVisible(i); | 125 splitter.hidden = !cm.isVisible(i); |
128 | 126 |
129 this.headerInner_.appendChild(splitter); | 127 this.headerInner_.appendChild(splitter); |
130 splitters.push(splitter); | 128 splitters.push(splitter); |
131 } | 129 } |
132 this.placeSplitters_(splitters); | 130 this.placeSplitters_(splitters); |
133 }, | 131 }, |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
175 } | 173 } |
176 labelDiv.appendChild(span); | 174 labelDiv.appendChild(span); |
177 return labelDiv; | 175 return labelDiv; |
178 }, | 176 }, |
179 | 177 |
180 /** | 178 /** |
181 * Creates sort function for given column. | 179 * Creates sort function for given column. |
182 * @param {number} index The index of the column to sort by. | 180 * @param {number} index The index of the column to sort by. |
183 */ | 181 */ |
184 createSortFunction_: function(index) { | 182 createSortFunction_: function(index) { |
185 return function() { | 183 return function() { this.table_.sort(index); }.bind(this); |
186 this.table_.sort(index); | |
187 }.bind(this); | |
188 }, | 184 }, |
189 | 185 |
190 /** | 186 /** |
191 * Handles the touchstart event. If the touch happened close enough | 187 * Handles the touchstart event. If the touch happened close enough |
192 * to a splitter starts dragging. | 188 * to a splitter starts dragging. |
193 * @param {Event} e The touch event. | 189 * @param {Event} e The touch event. |
194 */ | 190 */ |
195 handleTouchStart_: function(e) { | 191 handleTouchStart_: function(e) { |
196 e = /** @type {TouchEvent} */ (e); | 192 e = /** @type {TouchEvent} */ (e); |
197 if (e.touches.length != 1) | 193 if (e.touches.length != 1) |
(...skipping 20 matching lines...) Expand all Loading... |
218 // Splitter itself shouldn't handle this event. | 214 // Splitter itself shouldn't handle this event. |
219 e.stopPropagation(); | 215 e.stopPropagation(); |
220 }, | 216 }, |
221 | 217 |
222 /** | 218 /** |
223 * Handles the double click on a column separator event. | 219 * Handles the double click on a column separator event. |
224 * Adjusts column width. | 220 * Adjusts column width. |
225 * @param {number} index Column index. | 221 * @param {number} index Column index. |
226 * @param {Event} e The double click event. | 222 * @param {Event} e The double click event. |
227 */ | 223 */ |
228 handleDblClick_: function(index, e) { | 224 handleDblClick_: function(index, e) { this.table_.fitColumn(index); }, |
229 this.table_.fitColumn(index); | |
230 }, | |
231 | 225 |
232 /** | 226 /** |
233 * Determines whether a full redraw is required. | 227 * Determines whether a full redraw is required. |
234 * @param {!NodeList} headerCells | 228 * @param {!NodeList} headerCells |
235 * @return {boolean} | 229 * @return {boolean} |
236 */ | 230 */ |
237 needsFullRedraw_: function(headerCells) { | 231 needsFullRedraw_: function(headerCells) { |
238 var cm = this.table_.columnModel; | 232 var cm = this.table_.columnModel; |
239 // If the number of columns in the model has changed, a full redraw is | 233 // If the number of columns in the model has changed, a full redraw is |
240 // needed. | 234 // needed. |
(...skipping 13 matching lines...) Expand all Loading... |
254 * @type {cr.ui.Table} | 248 * @type {cr.ui.Table} |
255 */ | 249 */ |
256 cr.defineProperty(TableHeader, 'table'); | 250 cr.defineProperty(TableHeader, 'table'); |
257 | 251 |
258 /** | 252 /** |
259 * Rectangular area around the splitters sensitive to touch events | 253 * Rectangular area around the splitters sensitive to touch events |
260 * (in pixels). | 254 * (in pixels). |
261 */ | 255 */ |
262 TableHeader.TOUCH_DRAG_AREA_WIDTH = 30; | 256 TableHeader.TOUCH_DRAG_AREA_WIDTH = 30; |
263 | 257 |
264 return { | 258 return {TableHeader: TableHeader}; |
265 TableHeader: TableHeader | |
266 }; | |
267 }); | 259 }); |
OLD | NEW |