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

Side by Side Diff: ui/webui/resources/js/cr/ui/table/table_header.js

Issue 2597013002: Run clang-format on ui/webui/resources (Closed)
Patch Set: remove cr_shared_menu.js Created 3 years, 12 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
OLDNEW
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
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
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
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698