| OLD | NEW |
|---|
| (Empty) |
| 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 'use strict'; | |
| 6 | |
| 7 /** | |
| 8 * Namespace for utility functions. | |
| 9 */ | |
| 10 var filelist = {}; | |
| 11 | |
| 12 /** | |
| 13 * Custom column model for advanced auto-resizing. | |
| 14 * | |
| 15 * @param {Array.<cr.ui.table.TableColumn>} tableColumns Table columns. | |
| 16 * @extends {cr.ui.table.TableColumnModel} | |
| 17 * @constructor | |
| 18 */ | |
| 19 function FileTableColumnModel(tableColumns) { | |
| 20 cr.ui.table.TableColumnModel.call(this, tableColumns); | |
| 21 } | |
| 22 | |
| 23 /** | |
| 24 * The columns whose index is less than the constant are resizable. | |
| 25 * @const | |
| 26 * @type {number} | |
| 27 * @private | |
| 28 */ | |
| 29 FileTableColumnModel.RESIZABLE_LENGTH_ = 4; | |
| 30 | |
| 31 /** | |
| 32 * Inherits from cr.ui.TableColumnModel. | |
| 33 */ | |
| 34 FileTableColumnModel.prototype.__proto__ = | |
| 35 cr.ui.table.TableColumnModel.prototype; | |
| 36 | |
| 37 /** | |
| 38 * Minimum width of column. | |
| 39 * @const | |
| 40 * @type {number} | |
| 41 * @private | |
| 42 */ | |
| 43 FileTableColumnModel.MIN_WIDTH_ = 10; | |
| 44 | |
| 45 /** | |
| 46 * Sets column width so that the column dividers move to the specified position. | |
| 47 * This function also check the width of each column and keep the width larger | |
| 48 * than MIN_WIDTH_. | |
| 49 * | |
| 50 * @private | |
| 51 * @param {Array.<number>} newPos Positions of each column dividers. | |
| 52 */ | |
| 53 FileTableColumnModel.prototype.applyColumnPositions_ = function(newPos) { | |
| 54 // Check the minimum width and adjust the positions. | |
| 55 for (var i = 0; i < newPos.length - 2; i++) { | |
| 56 if (newPos[i + 1] - newPos[i] < FileTableColumnModel.MIN_WIDTH_) { | |
| 57 newPos[i + 1] = newPos[i] + FileTableColumnModel.MIN_WIDTH_; | |
| 58 } | |
| 59 } | |
| 60 for (var i = newPos.length - 1; i >= 2; i--) { | |
| 61 if (newPos[i] - newPos[i - 1] < FileTableColumnModel.MIN_WIDTH_) { | |
| 62 newPos[i - 1] = newPos[i] - FileTableColumnModel.MIN_WIDTH_; | |
| 63 } | |
| 64 } | |
| 65 // Set the new width of columns | |
| 66 for (var i = 0; i < FileTableColumnModel.RESIZABLE_LENGTH_; i++) { | |
| 67 this.columns_[i].width = newPos[i + 1] - newPos[i]; | |
| 68 } | |
| 69 }; | |
| 70 | |
| 71 /** | |
| 72 * Normalizes widths to make their sum 100% if possible. Uses the proportional | |
| 73 * approach with some additional constraints. | |
| 74 * | |
| 75 * @param {number} contentWidth Target width. | |
| 76 * @override | |
| 77 */ | |
| 78 FileTableColumnModel.prototype.normalizeWidths = function(contentWidth) { | |
| 79 var totalWidth = 0; | |
| 80 var fixedWidth = 0; | |
| 81 // Some columns have fixed width. | |
| 82 for (var i = 0; i < this.columns_.length; i++) { | |
| 83 if (i < FileTableColumnModel.RESIZABLE_LENGTH_) | |
| 84 totalWidth += this.columns_[i].width; | |
| 85 else | |
| 86 fixedWidth += this.columns_[i].width; | |
| 87 } | |
| 88 var newTotalWidth = Math.max(contentWidth - fixedWidth, 0); | |
| 89 var positions = [0]; | |
| 90 var sum = 0; | |
| 91 for (var i = 0; i < FileTableColumnModel.RESIZABLE_LENGTH_; i++) { | |
| 92 var column = this.columns_[i]; | |
| 93 sum += column.width; | |
| 94 // Faster alternative to Math.floor for non-negative numbers. | |
| 95 positions[i + 1] = ~~(newTotalWidth * sum / totalWidth); | |
| 96 } | |
| 97 this.applyColumnPositions_(positions); | |
| 98 }; | |
| 99 | |
| 100 /** | |
| 101 * Handles to the start of column resizing by splitters. | |
| 102 */ | |
| 103 FileTableColumnModel.prototype.handleSplitterDragStart = function() { | |
| 104 this.columnPos_ = [0]; | |
| 105 for (var i = 0; i < this.columns_.length; i++) { | |
| 106 this.columnPos_[i + 1] = this.columns_[i].width + this.columnPos_[i]; | |
| 107 } | |
| 108 }; | |
| 109 | |
| 110 /** | |
| 111 * Handles to the end of column resizing by splitters. | |
| 112 */ | |
| 113 FileTableColumnModel.prototype.handleSplitterDragEnd = function() { | |
| 114 this.columnPos_ = null; | |
| 115 }; | |
| 116 | |
| 117 /** | |
| 118 * Sets the width of column with keeping the total width of table. | |
| 119 * @param {number} columnIndex Index of column that is resized. | |
| 120 * @param {number} columnWidth New width of the column. | |
| 121 */ | |
| 122 FileTableColumnModel.prototype.setWidthAndKeepTotal = function( | |
| 123 columnIndex, columnWidth) { | |
| 124 // Skip to resize 'selection' column | |
| 125 if (columnIndex < 0 || | |
| 126 columnIndex >= FileTableColumnModel.RESIZABLE_LENGTH_ || | |
| 127 !this.columnPos_) { | |
| 128 return; | |
| 129 } | |
| 130 | |
| 131 // Calculate new positions of column splitters. | |
| 132 var newPosStart = | |
| 133 this.columnPos_[columnIndex] + Math.max(columnWidth, | |
| 134 FileTableColumnModel.MIN_WIDTH_); | |
| 135 var newPos = []; | |
| 136 var posEnd = this.columnPos_[FileTableColumnModel.RESIZABLE_LENGTH_]; | |
| 137 for (var i = 0; i < columnIndex + 1; i++) { | |
| 138 newPos[i] = this.columnPos_[i]; | |
| 139 } | |
| 140 for (var i = columnIndex + 1; | |
| 141 i < FileTableColumnModel.RESIZABLE_LENGTH_; | |
| 142 i++) { | |
| 143 var posStart = this.columnPos_[columnIndex + 1]; | |
| 144 newPos[i] = (posEnd - newPosStart) * | |
| 145 (this.columnPos_[i] - posStart) / | |
| 146 (posEnd - posStart) + | |
| 147 newPosStart; | |
| 148 // Faster alternative to Math.floor for non-negative numbers. | |
| 149 newPos[i] = ~~newPos[i]; | |
| 150 } | |
| 151 newPos[columnIndex] = this.columnPos_[columnIndex]; | |
| 152 newPos[FileTableColumnModel.RESIZABLE_LENGTH_] = posEnd; | |
| 153 this.applyColumnPositions_(newPos); | |
| 154 | |
| 155 // Notifiy about resizing | |
| 156 cr.dispatchSimpleEvent(this, 'resize'); | |
| 157 }; | |
| 158 | |
| 159 /** | |
| 160 * Custom splitter that resizes column with retaining the sum of all the column | |
| 161 * width. | |
| 162 */ | |
| 163 var FileTableSplitter = cr.ui.define('div'); | |
| 164 | |
| 165 /** | |
| 166 * Inherits from cr.ui.TableSplitter. | |
| 167 */ | |
| 168 FileTableSplitter.prototype.__proto__ = cr.ui.TableSplitter.prototype; | |
| 169 | |
| 170 /** | |
| 171 * Handles the drag start event. | |
| 172 */ | |
| 173 FileTableSplitter.prototype.handleSplitterDragStart = function() { | |
| 174 cr.ui.TableSplitter.prototype.handleSplitterDragStart.call(this); | |
| 175 this.table_.columnModel.handleSplitterDragStart(); | |
| 176 }; | |
| 177 | |
| 178 /** | |
| 179 * Handles the drag move event. | |
| 180 * @param {number} deltaX Horizontal mouse move offset. | |
| 181 */ | |
| 182 FileTableSplitter.prototype.handleSplitterDragMove = function(deltaX) { | |
| 183 this.table_.columnModel.setWidthAndKeepTotal(this.columnIndex, | |
| 184 this.columnWidth_ + deltaX, | |
| 185 true); | |
| 186 }; | |
| 187 | |
| 188 /** | |
| 189 * Handles the drag end event. | |
| 190 */ | |
| 191 FileTableSplitter.prototype.handleSplitterDragEnd = function() { | |
| 192 cr.ui.TableSplitter.prototype.handleSplitterDragEnd.call(this); | |
| 193 this.table_.columnModel.handleSplitterDragEnd(); | |
| 194 }; | |
| 195 | |
| 196 /** | |
| 197 * File list Table View. | |
| 198 * @constructor | |
| 199 */ | |
| 200 function FileTable() { | |
| 201 throw new Error('Designed to decorate elements'); | |
| 202 } | |
| 203 | |
| 204 /** | |
| 205 * Inherits from cr.ui.Table. | |
| 206 */ | |
| 207 FileTable.prototype.__proto__ = cr.ui.Table.prototype; | |
| 208 | |
| 209 /** | |
| 210 * Decorates the element. | |
| 211 * @param {HTMLElement} self Table to decorate. | |
| 212 * @param {MetadataCache} metadataCache To retrieve metadata. | |
| 213 * @param {boolean} fullPage True if it's full page File Manager, | |
| 214 * False if a file open/save dialog. | |
| 215 */ | |
| 216 FileTable.decorate = function(self, metadataCache, fullPage) { | |
| 217 cr.ui.Table.decorate(self); | |
| 218 self.__proto__ = FileTable.prototype; | |
| 219 self.metadataCache_ = metadataCache; | |
| 220 self.collator_ = Intl.Collator([], {numeric: true, sensitivity: 'base'}); | |
| 221 | |
| 222 var columns = [ | |
| 223 new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'), | |
| 224 fullPage ? 386 : 324), | |
| 225 new cr.ui.table.TableColumn('size', str('SIZE_COLUMN_LABEL'), | |
| 226 110, true), | |
| 227 new cr.ui.table.TableColumn('type', str('TYPE_COLUMN_LABEL'), | |
| 228 fullPage ? 110 : 110), | |
| 229 new cr.ui.table.TableColumn('modificationTime', | |
| 230 str('DATE_COLUMN_LABEL'), | |
| 231 fullPage ? 150 : 210) | |
| 232 ]; | |
| 233 | |
| 234 columns[0].renderFunction = self.renderName_.bind(self); | |
| 235 columns[1].renderFunction = self.renderSize_.bind(self); | |
| 236 columns[1].defaultOrder = 'desc'; | |
| 237 columns[2].renderFunction = self.renderType_.bind(self); | |
| 238 columns[3].renderFunction = self.renderDate_.bind(self); | |
| 239 columns[3].defaultOrder = 'desc'; | |
| 240 | |
| 241 var tableColumnModelClass; | |
| 242 tableColumnModelClass = FileTableColumnModel; | |
| 243 | |
| 244 var columnModel = Object.create(tableColumnModelClass.prototype, { | |
| 245 /** | |
| 246 * The number of columns. | |
| 247 * @type {number} | |
| 248 */ | |
| 249 size: { | |
| 250 /** | |
| 251 * @this {FileTableColumnModel} | |
| 252 * @return {number} Number of columns. | |
| 253 */ | |
| 254 get: function() { | |
| 255 return this.totalSize; | |
| 256 } | |
| 257 }, | |
| 258 | |
| 259 /** | |
| 260 * The number of columns. | |
| 261 * @type {number} | |
| 262 */ | |
| 263 totalSize: { | |
| 264 /** | |
| 265 * @this {FileTableColumnModel} | |
| 266 * @return {number} Number of columns. | |
| 267 */ | |
| 268 get: function() { | |
| 269 return columns.length; | |
| 270 } | |
| 271 }, | |
| 272 | |
| 273 /** | |
| 274 * Obtains a column by the specified horizontal position. | |
| 275 */ | |
| 276 getHitColumn: { | |
| 277 /** | |
| 278 * @this {FileTableColumnModel} | |
| 279 * @param {number} x Horizontal position. | |
| 280 * @return {object} The object that contains column index, column width, | |
| 281 * and hitPosition where the horizontal position is hit in the column. | |
| 282 */ | |
| 283 value: function(x) { | |
| 284 for (var i = 0; x >= this.columns_[i].width; i++) { | |
| 285 x -= this.columns_[i].width; | |
| 286 } | |
| 287 if (i >= this.columns_.length) | |
| 288 return null; | |
| 289 return {index: i, hitPosition: x, width: this.columns_[i].width}; | |
| 290 } | |
| 291 } | |
| 292 }); | |
| 293 | |
| 294 tableColumnModelClass.call(columnModel, columns); | |
| 295 self.columnModel = columnModel; | |
| 296 self.setDateTimeFormat(true); | |
| 297 self.setRenderFunction(self.renderTableRow_.bind(self, | |
| 298 self.getRenderFunction())); | |
| 299 | |
| 300 self.scrollBar_ = MainPanelScrollBar(); | |
| 301 self.scrollBar_.initialize(self, self.list); | |
| 302 // Keep focus on the file list when clicking on the header. | |
| 303 self.header.addEventListener('mousedown', function(e) { | |
| 304 self.list.focus(); | |
| 305 e.preventDefault(); | |
| 306 }); | |
| 307 | |
| 308 self.relayoutAggregation_ = | |
| 309 new AsyncUtil.Aggregation(self.relayoutImmediately_.bind(self)); | |
| 310 | |
| 311 // Override header#redraw to use FileTableSplitter. | |
| 312 self.header_.redraw = function() { | |
| 313 this.__proto__.redraw.call(this); | |
| 314 // Extend table splitters | |
| 315 var splitters = this.querySelectorAll('.table-header-splitter'); | |
| 316 for (var i = 0; i < splitters.length; i++) { | |
| 317 if (splitters[i] instanceof FileTableSplitter) | |
| 318 continue; | |
| 319 FileTableSplitter.decorate(splitters[i]); | |
| 320 } | |
| 321 }; | |
| 322 | |
| 323 // Save the last selection. This is used by shouldStartDragSelection. | |
| 324 self.list.addEventListener('mousedown', function(e) { | |
| 325 this.lastSelection_ = this.selectionModel.selectedIndexes; | |
| 326 }.bind(self), true); | |
| 327 self.list.shouldStartDragSelection = | |
| 328 self.shouldStartDragSelection_.bind(self); | |
| 329 | |
| 330 /** | |
| 331 * Obtains the index list of elements that are hit by the point or the | |
| 332 * rectangle. | |
| 333 * | |
| 334 * @param {number} x X coordinate value. | |
| 335 * @param {number} y Y coordinate value. | |
| 336 * @param {=number} opt_width Width of the coordinate. | |
| 337 * @param {=number} opt_height Height of the coordinate. | |
| 338 * @return {Array.<number>} Index list of hit elements. | |
| 339 */ | |
| 340 self.list.getHitElements = function(x, y, opt_width, opt_height) { | |
| 341 var currentSelection = []; | |
| 342 var bottom = y + (opt_height || 0); | |
| 343 for (var i = 0; i < this.selectionModel_.length; i++) { | |
| 344 var itemMetrics = this.getHeightsForIndex_(i); | |
| 345 if (itemMetrics.top < bottom && itemMetrics.top + itemMetrics.height >= y) | |
| 346 currentSelection.push(i); | |
| 347 } | |
| 348 return currentSelection; | |
| 349 }; | |
| 350 }; | |
| 351 | |
| 352 /** | |
| 353 * Sets date and time format. | |
| 354 * @param {boolean} use12hourClock True if 12 hours clock, False if 24 hours. | |
| 355 */ | |
| 356 FileTable.prototype.setDateTimeFormat = function(use12hourClock) { | |
| 357 this.timeFormatter_ = Intl.DateTimeFormat( | |
| 358 [] /* default locale */, | |
| 359 {hour: 'numeric', minute: 'numeric', | |
| 360 hour12: use12hourClock}); | |
| 361 this.dateFormatter_ = Intl.DateTimeFormat( | |
| 362 [] /* default locale */, | |
| 363 {year: 'numeric', month: 'short', day: 'numeric', | |
| 364 hour: 'numeric', minute: 'numeric', | |
| 365 hour12: use12hourClock}); | |
| 366 }; | |
| 367 | |
| 368 /** | |
| 369 * Obtains if the drag selection should be start or not by referring the mouse | |
| 370 * event. | |
| 371 * @param {MouseEvent} event Drag start event. | |
| 372 * @return {boolean} True if the mouse is hit to the background of the list. | |
| 373 * @private | |
| 374 */ | |
| 375 FileTable.prototype.shouldStartDragSelection_ = function(event) { | |
| 376 // If the shift key is pressed, it should starts drag selection. | |
| 377 if (event.shiftKey) | |
| 378 return true; | |
| 379 | |
| 380 // If the position values are negative, it points the out of list. | |
| 381 // It should start the drag selection. | |
| 382 var pos = DragSelector.getScrolledPosition(this.list, event); | |
| 383 if (!pos) | |
| 384 return false; | |
| 385 if (pos.x < 0 || pos.y < 0) | |
| 386 return true; | |
| 387 | |
| 388 // If the item index is out of range, it should start the drag selection. | |
| 389 var itemHeight = this.list.measureItem().height; | |
| 390 // Faster alternative to Math.floor for non-negative numbers. | |
| 391 var itemIndex = ~~(pos.y / itemHeight); | |
| 392 if (itemIndex >= this.list.dataModel.length) | |
| 393 return true; | |
| 394 | |
| 395 // If the pointed item is already selected, it should not start the drag | |
| 396 // selection. | |
| 397 if (this.lastSelection_.indexOf(itemIndex) !== -1) | |
| 398 return false; | |
| 399 | |
| 400 // If the horizontal value is not hit to column, it should start the drag | |
| 401 // selection. | |
| 402 var hitColumn = this.columnModel.getHitColumn(pos.x); | |
| 403 if (!hitColumn) | |
| 404 return true; | |
| 405 | |
| 406 // Check if the point is on the column contents or not. | |
| 407 var item = this.list.getListItemByIndex(itemIndex); | |
| 408 switch (this.columnModel.columns_[hitColumn.index].id) { | |
| 409 case 'name': | |
| 410 var spanElement = item.querySelector('.filename-label span'); | |
| 411 var spanRect = spanElement.getBoundingClientRect(); | |
| 412 // The this.list.cachedBounds_ object is set by | |
| 413 // DragSelector.getScrolledPosition. | |
| 414 if (!this.list.cachedBounds) | |
| 415 return true; | |
| 416 var textRight = | |
| 417 spanRect.left - this.list.cachedBounds.left + spanRect.width; | |
| 418 return textRight <= hitColumn.hitPosition; | |
| 419 default: | |
| 420 return true; | |
| 421 } | |
| 422 }; | |
| 423 | |
| 424 /** | |
| 425 * Prepares the data model to be sorted by columns. | |
| 426 * @param {cr.ui.ArrayDataModel} dataModel Data model to prepare. | |
| 427 */ | |
| 428 FileTable.prototype.setupCompareFunctions = function(dataModel) { | |
| 429 dataModel.setCompareFunction('name', | |
| 430 this.compareName_.bind(this)); | |
| 431 dataModel.setCompareFunction('modificationTime', | |
| 432 this.compareMtime_.bind(this)); | |
| 433 dataModel.setCompareFunction('size', | |
| 434 this.compareSize_.bind(this)); | |
| 435 dataModel.setCompareFunction('type', | |
| 436 this.compareType_.bind(this)); | |
| 437 }; | |
| 438 | |
| 439 /** | |
| 440 * Render the Name column of the detail table. | |
| 441 * | |
| 442 * Invoked by cr.ui.Table when a file needs to be rendered. | |
| 443 * | |
| 444 * @param {Entry} entry The Entry object to render. | |
| 445 * @param {string} columnId The id of the column to be rendered. | |
| 446 * @param {cr.ui.Table} table The table doing the rendering. | |
| 447 * @return {HTMLDivElement} Created element. | |
| 448 * @private | |
| 449 */ | |
| 450 FileTable.prototype.renderName_ = function(entry, columnId, table) { | |
| 451 var label = this.ownerDocument.createElement('div'); | |
| 452 label.appendChild(this.renderIconType_(entry, columnId, table)); | |
| 453 label.entry = entry; | |
| 454 label.className = 'detail-name'; | |
| 455 label.appendChild(filelist.renderFileNameLabel(this.ownerDocument, entry)); | |
| 456 return label; | |
| 457 }; | |
| 458 | |
| 459 /** | |
| 460 * Render the Size column of the detail table. | |
| 461 * | |
| 462 * @param {Entry} entry The Entry object to render. | |
| 463 * @param {string} columnId The id of the column to be rendered. | |
| 464 * @param {cr.ui.Table} table The table doing the rendering. | |
| 465 * @return {HTMLDivElement} Created element. | |
| 466 * @private | |
| 467 */ | |
| 468 FileTable.prototype.renderSize_ = function(entry, columnId, table) { | |
| 469 var div = this.ownerDocument.createElement('div'); | |
| 470 div.className = 'size'; | |
| 471 this.updateSize_( | |
| 472 div, entry, this.metadataCache_.getCached(entry, 'filesystem')); | |
| 473 | |
| 474 return div; | |
| 475 }; | |
| 476 | |
| 477 /** | |
| 478 * Sets up or updates the size cell. | |
| 479 * | |
| 480 * @param {HTMLDivElement} div The table cell. | |
| 481 * @param {Entry} entry The corresponding entry. | |
| 482 * @param {Object} filesystemProps Metadata. | |
| 483 * @private | |
| 484 */ | |
| 485 FileTable.prototype.updateSize_ = function(div, entry, filesystemProps) { | |
| 486 if (!filesystemProps) { | |
| 487 div.textContent = '...'; | |
| 488 } else if (filesystemProps.size === -1) { | |
| 489 div.textContent = '--'; | |
| 490 } else if (filesystemProps.size === 0 && | |
| 491 FileType.isHosted(entry)) { | |
| 492 div.textContent = '--'; | |
| 493 } else { | |
| 494 div.textContent = util.bytesToString(filesystemProps.size); | |
| 495 } | |
| 496 }; | |
| 497 | |
| 498 /** | |
| 499 * Render the Type column of the detail table. | |
| 500 * | |
| 501 * @param {Entry} entry The Entry object to render. | |
| 502 * @param {string} columnId The id of the column to be rendered. | |
| 503 * @param {cr.ui.Table} table The table doing the rendering. | |
| 504 * @return {HTMLDivElement} Created element. | |
| 505 * @private | |
| 506 */ | |
| 507 FileTable.prototype.renderType_ = function(entry, columnId, table) { | |
| 508 var div = this.ownerDocument.createElement('div'); | |
| 509 div.className = 'type'; | |
| 510 div.textContent = FileType.typeToString(FileType.getType(entry)); | |
| 511 return div; | |
| 512 }; | |
| 513 | |
| 514 /** | |
| 515 * Render the Date column of the detail table. | |
| 516 * | |
| 517 * @param {Entry} entry The Entry object to render. | |
| 518 * @param {string} columnId The id of the column to be rendered. | |
| 519 * @param {cr.ui.Table} table The table doing the rendering. | |
| 520 * @return {HTMLDivElement} Created element. | |
| 521 * @private | |
| 522 */ | |
| 523 FileTable.prototype.renderDate_ = function(entry, columnId, table) { | |
| 524 var div = this.ownerDocument.createElement('div'); | |
| 525 div.className = 'date'; | |
| 526 | |
| 527 this.updateDate_(div, | |
| 528 this.metadataCache_.getCached(entry, 'filesystem')); | |
| 529 return div; | |
| 530 }; | |
| 531 | |
| 532 /** | |
| 533 * Sets up or updates the date cell. | |
| 534 * | |
| 535 * @param {HTMLDivElement} div The table cell. | |
| 536 * @param {Object} filesystemProps Metadata. | |
| 537 * @private | |
| 538 */ | |
| 539 FileTable.prototype.updateDate_ = function(div, filesystemProps) { | |
| 540 if (!filesystemProps) { | |
| 541 div.textContent = '...'; | |
| 542 return; | |
| 543 } | |
| 544 | |
| 545 var modTime = filesystemProps.modificationTime; | |
| 546 var today = new Date(); | |
| 547 today.setHours(0); | |
| 548 today.setMinutes(0); | |
| 549 today.setSeconds(0); | |
| 550 today.setMilliseconds(0); | |
| 551 | |
| 552 /** | |
| 553 * Number of milliseconds in a day. | |
| 554 */ | |
| 555 var MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000; | |
| 556 | |
| 557 if (modTime >= today && | |
| 558 modTime < today.getTime() + MILLISECONDS_IN_DAY) { | |
| 559 div.textContent = strf('TIME_TODAY', this.timeFormatter_.format(modTime)); | |
| 560 } else if (modTime >= today - MILLISECONDS_IN_DAY && modTime < today) { | |
| 561 div.textContent = strf('TIME_YESTERDAY', | |
| 562 this.timeFormatter_.format(modTime)); | |
| 563 } else { | |
| 564 div.textContent = | |
| 565 this.dateFormatter_.format(filesystemProps.modificationTime); | |
| 566 } | |
| 567 }; | |
| 568 | |
| 569 /** | |
| 570 * Updates the file metadata in the table item. | |
| 571 * | |
| 572 * @param {Element} item Table item. | |
| 573 * @param {Entry} entry File entry. | |
| 574 */ | |
| 575 FileTable.prototype.updateFileMetadata = function(item, entry) { | |
| 576 var props = this.metadataCache_.getCached(entry, 'filesystem'); | |
| 577 this.updateDate_(item.querySelector('.date'), props); | |
| 578 this.updateSize_(item.querySelector('.size'), entry, props); | |
| 579 }; | |
| 580 | |
| 581 /** | |
| 582 * Updates list items 'in place' on metadata change. | |
| 583 * @param {string} type Type of metadata change. | |
| 584 * @param {Object.<string, Object>} propsMap Map from entry URLs to metadata | |
| 585 * properties. | |
| 586 */ | |
| 587 FileTable.prototype.updateListItemsMetadata = function(type, propsMap) { | |
| 588 var forEachCell = function(selector, callback) { | |
| 589 var cells = this.querySelectorAll(selector); | |
| 590 for (var i = 0; i < cells.length; i++) { | |
| 591 var cell = cells[i]; | |
| 592 var listItem = this.list_.getListItemAncestor(cell); | |
| 593 var entry = this.dataModel.item(listItem.listIndex); | |
| 594 if (entry) { | |
| 595 var props = propsMap[entry.toURL()]; | |
| 596 if (props) | |
| 597 callback.call(this, cell, entry, props, listItem); | |
| 598 } | |
| 599 } | |
| 600 }.bind(this); | |
| 601 if (type === 'filesystem') { | |
| 602 forEachCell('.table-row-cell > .date', function(item, entry, props) { | |
| 603 this.updateDate_(item, props); | |
| 604 }); | |
| 605 forEachCell('.table-row-cell > .size', function(item, entry, props) { | |
| 606 this.updateSize_(item, entry, props); | |
| 607 }); | |
| 608 } else if (type === 'drive') { | |
| 609 // The cell name does not matter as the entire list item is needed. | |
| 610 forEachCell('.table-row-cell > .date', | |
| 611 function(item, entry, props, listItem) { | |
| 612 filelist.updateListItemDriveProps(listItem, props); | |
| 613 }); | |
| 614 } | |
| 615 }; | |
| 616 | |
| 617 /** | |
| 618 * Compare by mtime first, then by name. | |
| 619 * @param {Entry} a First entry. | |
| 620 * @param {Entry} b Second entry. | |
| 621 * @return {number} Compare result. | |
| 622 * @private | |
| 623 */ | |
| 624 FileTable.prototype.compareName_ = function(a, b) { | |
| 625 return this.collator_.compare(a.name, b.name); | |
| 626 }; | |
| 627 | |
| 628 /** | |
| 629 * Compare by mtime first, then by name. | |
| 630 * @param {Entry} a First entry. | |
| 631 * @param {Entry} b Second entry. | |
| 632 * @return {number} Compare result. | |
| 633 * @private | |
| 634 */ | |
| 635 FileTable.prototype.compareMtime_ = function(a, b) { | |
| 636 var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem'); | |
| 637 var aTime = aCachedFilesystem ? aCachedFilesystem.modificationTime : 0; | |
| 638 | |
| 639 var bCachedFilesystem = this.metadataCache_.getCached(b, 'filesystem'); | |
| 640 var bTime = bCachedFilesystem ? bCachedFilesystem.modificationTime : 0; | |
| 641 | |
| 642 if (aTime > bTime) | |
| 643 return 1; | |
| 644 | |
| 645 if (aTime < bTime) | |
| 646 return -1; | |
| 647 | |
| 648 return this.collator_.compare(a.name, b.name); | |
| 649 }; | |
| 650 | |
| 651 /** | |
| 652 * Compare by size first, then by name. | |
| 653 * @param {Entry} a First entry. | |
| 654 * @param {Entry} b Second entry. | |
| 655 * @return {number} Compare result. | |
| 656 * @private | |
| 657 */ | |
| 658 FileTable.prototype.compareSize_ = function(a, b) { | |
| 659 var aCachedFilesystem = this.metadataCache_.getCached(a, 'filesystem'); | |
| 660 var aSize = aCachedFilesystem ? aCachedFilesystem.size : 0; | |
| 661 | |
| 662 var bCachedFilesystem = this.metadataCache_.getCached(b, 'filesystem'); | |
| 663 var bSize = bCachedFilesystem ? bCachedFilesystem.size : 0; | |
| 664 | |
| 665 if (aSize !== bSize) return aSize - bSize; | |
| 666 return this.collator_.compare(a.name, b.name); | |
| 667 }; | |
| 668 | |
| 669 /** | |
| 670 * Compare by type first, then by subtype and then by name. | |
| 671 * @param {Entry} a First entry. | |
| 672 * @param {Entry} b Second entry. | |
| 673 * @return {number} Compare result. | |
| 674 * @private | |
| 675 */ | |
| 676 FileTable.prototype.compareType_ = function(a, b) { | |
| 677 // Directories precede files. | |
| 678 if (a.isDirectory !== b.isDirectory) | |
| 679 return Number(b.isDirectory) - Number(a.isDirectory); | |
| 680 | |
| 681 var aType = FileType.typeToString(FileType.getType(a)); | |
| 682 var bType = FileType.typeToString(FileType.getType(b)); | |
| 683 | |
| 684 var result = this.collator_.compare(aType, bType); | |
| 685 if (result !== 0) | |
| 686 return result; | |
| 687 | |
| 688 return this.collator_.compare(a.name, b.name); | |
| 689 }; | |
| 690 | |
| 691 /** | |
| 692 * Renders table row. | |
| 693 * @param {function(Entry, cr.ui.Table)} baseRenderFunction Base renderer. | |
| 694 * @param {Entry} entry Corresponding entry. | |
| 695 * @return {HTMLLiElement} Created element. | |
| 696 * @private | |
| 697 */ | |
| 698 FileTable.prototype.renderTableRow_ = function(baseRenderFunction, entry) { | |
| 699 var item = baseRenderFunction(entry, this); | |
| 700 filelist.decorateListItem(item, entry, this.metadataCache_); | |
| 701 return item; | |
| 702 }; | |
| 703 | |
| 704 /** | |
| 705 * Render the type column of the detail table. | |
| 706 * | |
| 707 * Invoked by cr.ui.Table when a file needs to be rendered. | |
| 708 * | |
| 709 * @param {Entry} entry The Entry object to render. | |
| 710 * @param {string} columnId The id of the column to be rendered. | |
| 711 * @param {cr.ui.Table} table The table doing the rendering. | |
| 712 * @return {HTMLDivElement} Created element. | |
| 713 * @private | |
| 714 */ | |
| 715 FileTable.prototype.renderIconType_ = function(entry, columnId, table) { | |
| 716 var icon = this.ownerDocument.createElement('div'); | |
| 717 icon.className = 'detail-icon'; | |
| 718 icon.setAttribute('file-type-icon', FileType.getIcon(entry)); | |
| 719 return icon; | |
| 720 }; | |
| 721 | |
| 722 /** | |
| 723 * Sets the margin height for the transparent preview panel at the bottom. | |
| 724 * @param {number} margin Margin to be set in px. | |
| 725 */ | |
| 726 FileTable.prototype.setBottomMarginForPanel = function(margin) { | |
| 727 this.list_.style.paddingBottom = margin + 'px'; | |
| 728 this.scrollBar_.setBottomMarginForPanel(margin); | |
| 729 }; | |
| 730 | |
| 731 /** | |
| 732 * Redraws the UI. Skips multiple consecutive calls. | |
| 733 */ | |
| 734 FileTable.prototype.relayout = function() { | |
| 735 this.relayoutAggregation_.run(); | |
| 736 }; | |
| 737 | |
| 738 /** | |
| 739 * Redraws the UI immediately. | |
| 740 * @private | |
| 741 */ | |
| 742 FileTable.prototype.relayoutImmediately_ = function() { | |
| 743 if (this.clientWidth > 0) | |
| 744 this.normalizeColumns(); | |
| 745 this.redraw(); | |
| 746 cr.dispatchSimpleEvent(this.list, 'relayout'); | |
| 747 }; | |
| 748 | |
| 749 /** | |
| 750 * Common item decoration for table's and grid's items. | |
| 751 * @param {ListItem} li List item. | |
| 752 * @param {Entry} entry The entry. | |
| 753 * @param {MetadataCache} metadataCache Cache to retrieve metadada. | |
| 754 */ | |
| 755 filelist.decorateListItem = function(li, entry, metadataCache) { | |
| 756 li.classList.add(entry.isDirectory ? 'directory' : 'file'); | |
| 757 // The metadata may not yet be ready. In that case, the list item will be | |
| 758 // updated when the metadata is ready via updateListItemsMetadata. For files | |
| 759 // not on Drive, driveProps is not available. | |
| 760 var driveProps = metadataCache.getCached(entry, 'drive'); | |
| 761 if (driveProps) | |
| 762 filelist.updateListItemDriveProps(li, driveProps); | |
| 763 | |
| 764 // Overriding the default role 'list' to 'listbox' for better | |
| 765 // accessibility on ChromeOS. | |
| 766 li.setAttribute('role', 'option'); | |
| 767 | |
| 768 Object.defineProperty(li, 'selected', { | |
| 769 /** | |
| 770 * @this {ListItem} | |
| 771 * @return {boolean} True if the list item is selected. | |
| 772 */ | |
| 773 get: function() { | |
| 774 return this.hasAttribute('selected'); | |
| 775 }, | |
| 776 | |
| 777 /** | |
| 778 * @this {ListItem} | |
| 779 */ | |
| 780 set: function(v) { | |
| 781 if (v) | |
| 782 this.setAttribute('selected', ''); | |
| 783 else | |
| 784 this.removeAttribute('selected'); | |
| 785 } | |
| 786 }); | |
| 787 }; | |
| 788 | |
| 789 /** | |
| 790 * Render filename label for grid and list view. | |
| 791 * @param {HTMLDocument} doc Owner document. | |
| 792 * @param {Entry} entry The Entry object to render. | |
| 793 * @return {HTMLDivElement} The label. | |
| 794 */ | |
| 795 filelist.renderFileNameLabel = function(doc, entry) { | |
| 796 // Filename need to be in a '.filename-label' container for correct | |
| 797 // work of inplace renaming. | |
| 798 var box = doc.createElement('div'); | |
| 799 box.className = 'filename-label'; | |
| 800 var fileName = doc.createElement('span'); | |
| 801 fileName.textContent = entry.name; | |
| 802 box.appendChild(fileName); | |
| 803 | |
| 804 return box; | |
| 805 }; | |
| 806 | |
| 807 /** | |
| 808 * Updates grid item or table row for the driveProps. | |
| 809 * @param {cr.ui.ListItem} li List item. | |
| 810 * @param {Object} driveProps Metadata. | |
| 811 */ | |
| 812 filelist.updateListItemDriveProps = function(li, driveProps) { | |
| 813 if (li.classList.contains('file')) { | |
| 814 if (driveProps.availableOffline) | |
| 815 li.classList.remove('dim-offline'); | |
| 816 else | |
| 817 li.classList.add('dim-offline'); | |
| 818 // TODO(mtomasz): Consider adding some vidual indication for files which | |
| 819 // are not cached on LTE. Currently we show them as normal files. | |
| 820 // crbug.com/246611. | |
| 821 } | |
| 822 | |
| 823 if (driveProps.customIconUrl) { | |
| 824 var iconDiv = li.querySelector('.detail-icon'); | |
| 825 if (!iconDiv) | |
| 826 return; | |
| 827 iconDiv.style.backgroundImage = 'url(' + driveProps.customIconUrl + ')'; | |
| 828 } | |
| 829 }; | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 247123002:
Move Files.app files to ui/file_manager (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src