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 3 // found in the LICENSE file. 4 5 /** 6 * @fileoverview This is a table column model 7 */ 8 cr.define('cr.ui.table', function() { 9 /** @const */ var EventTarget = cr.EventTarget; 10 /** @const */ var Event = cr.Event; 11 12 /** 13 * A table column model that wraps table columns array 14 * This implementation supports widths in percents. 15 * @param {!Array<cr.ui.table.TableColumn>} columnIds Array of table columns. 16 * @constructor 17 * @extends {EventTarget} 18 */ 19 function TableColumnModel(tableColumns) { 20 this.columns_ = []; 21 for (var i = 0; i < tableColumns.length; i++) { 22 this.columns_.push(tableColumns[i].clone()); 23 } 24 this.normalizeWidths_(); 25 } 26 27 TableColumnModel.prototype = { 28 __proto__: EventTarget.prototype, 29 30 /** 31 * The number of the columns. 32 * @type {number} 33 */ 34 get size() { 35 return this.columns_.length; 36 }, 37 38 /** 39 * Returns id of column at the given index. 40 * @param {number} index The index of the column. 41 * @return {string} Column id. 42 */ 43 getId: function(index) { 44 return this.columns_[index].id; 45 }, 46 47 /** 48 * Returns name of column at the given index. Name is used as column header 49 * label. 50 * @param {number} index The index of the column. 51 * @return {string} Column name. 52 */ 53 getName: function(index) { 54 return this.columns_[index].name; 55 }, 56 57 /** 58 * Sets name of column at the given index. 59 * @param {number} index The index of the column. 60 * @param {string} Column name. 61 */ 62 setName: function(index, name) { 63 if (index < 0 || index >= this.columns_.size - 1) 64 return; 65 if (name != this.columns_[index].name) 66 return; 67 68 this.columns_[index].name = name; 69 cr.dispatchSimpleEvent('change'); 70 }, 71 72 /** 73 * Returns width (in percent) of column at the given index. 74 * @param {number} index The index of the column. 75 * @return {string} Column width. 76 */ 77 getWidth: function(index) { 78 return this.columns_[index].width; 79 }, 80 81 /** 82 * Check if the column at the given index should align to the end. 83 * @param {number} index The index of the column. 84 * @return {boolean} True if the column is aligned to end. 85 */ 86 isEndAlign: function(index) { 87 return this.columns_[index].endAlign; 88 }, 89 90 /** 91 * Sets width of column at the given index. 92 * @param {number} index The index of the column. 93 * @param {number} Column width. 94 */ 95 setWidth: function(index, width) { 96 if (index < 0 || index >= this.columns_.size - 1) 97 return; 98 99 var minWidth = 3; 100 var currentPlusNextWidth = this.columns_[index + 1].width + 101 this.columns_[index].width; 102 var nextWidth = currentPlusNextWidth - width; 103 if (width < minWidth) { 104 width = minWidth; 105 nextWidth = currentPlusNextWidth - minWidth; 106 } 107 if (nextWidth < minWidth) { 108 width = currentPlusNextWidth - minWidth; 109 nextWidth = minWidth; 110 } 111 if (width == this.columns_[index].width) 112 return; 113 114 this.columns_[index].width = width; 115 this.columns_[index + 1].width = nextWidth; 116 cr.dispatchSimpleEvent(this, 'resize'); 117 }, 118 119 /** 120 * Returns render function for the column at the given index. 121 * @param {number} index The index of the column. 122 * @return {Function(*, string, cr.ui.Table): HTMLElement} Render function. 123 */ 124 getRenderFunction: function(index) { 125 return this.columns_[index].renderFunction; 126 }, 127 128 /** 129 * Sets render function for the column at the given index. 130 * @param {number} index The index of the column. 131 * @param {Function(*, string, cr.ui.Table): HTMLElement} Render function. 132 */ 133 setRenderFunction: function(index, renderFunction) { 134 if (index < 0 || index >= this.columns_.size - 1) 135 return; 136 if (renderFunction !== this.columns_[index].renderFunction) 137 return; 138 139 this.columns_[index].renderFunction = renderFunction; 140 cr.dispatchSimpleEvent(this, 'change'); 141 }, 142 143 /** 144 * Render the column header. 145 * @param {number} index The index of the column. 146 * @param {cr.ui.Table} Owner table. 147 */ 148 renderHeader: function(index, table) { 149 var c = this.columns_[index]; 150 return c.headerRenderFunction.call(c, table); 151 }, 152 153 /** 154 * The total width of the columns. 155 * @type {number} 156 */ 157 get totalWidth() { 158 return this.totalWidth_; 159 }, 160 161 /** 162 * Normalizes widths to make their sum 100%. 163 */ 164 normalizeWidths_: function() { 165 var total = 0; 166 for (var i = 0; i < this.size; i++) { 167 total += this.columns_[i].width; 168 } 169 for (var i = 0; i < this.size; i++) { 170 this.columns_[i].width = this.columns_[i].width * 100 / total; 171 } 172 }, 173 174 /** 175 * Returns index of the column with given id. 176 * @param {string} id The id to find. 177 * @return {number} The index of column with given id or -1 if not found. 178 */ 179 indexOf: function(id) { 180 for (var i = 0; i < this.size; i++) { 181 if (element.id == id) 182 return i; 183 } 184 return -1; 185 }, 186 }; 187 188 return { 189 TableColumnModel: TableColumnModel 190 }; 191 }); 192
