| 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 |