| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode. | 6 * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode. |
| 7 * | 7 * |
| 8 * @param {Document} document Document. | 8 * @param {!Document} document Document. |
| 9 * @param {cr.ui.ArrayDataModel} dataModel Data model. | 9 * @param {!cr.ui.ArrayDataModel} dataModel Data model. |
| 10 * @param {cr.ui.ListSelectionModel} selectionModel Selection model. | 10 * @param {!cr.ui.ListSelectionModel} selectionModel Selection model. |
| 11 * @return {Element} Ribbon element. | 11 * @return {!HTMLElement} Ribbon element. |
| 12 * @extends {HTMLElement} |
| 12 * @constructor | 13 * @constructor |
| 14 * @suppress {checkStructDictInheritance} |
| 15 * @struct |
| 13 */ | 16 */ |
| 14 function Ribbon(document, dataModel, selectionModel) { | 17 function Ribbon(document, dataModel, selectionModel) { |
| 15 var self = document.createElement('div'); | 18 var self = assertInstanceof(document.createElement('div'), HTMLElement); |
| 16 Ribbon.decorate(self, dataModel, selectionModel); | 19 Ribbon.decorate(self, dataModel, selectionModel); |
| 17 return self; | 20 return self; |
| 18 } | 21 } |
| 19 | 22 |
| 20 /** | 23 /** |
| 21 * Inherit from HTMLDivElement. | 24 * Inherit from HTMLDivElement. |
| 22 */ | 25 */ |
| 23 Ribbon.prototype.__proto__ = HTMLDivElement.prototype; | 26 Ribbon.prototype.__proto__ = HTMLDivElement.prototype; |
| 24 | 27 |
| 25 /** | 28 /** |
| 26 * Decorate a Ribbon instance. | 29 * Decorate a Ribbon instance. |
| 27 * | 30 * |
| 28 * @param {Ribbon} self Self pointer. | 31 * @param {!HTMLElement} self Self pointer. |
| 29 * @param {cr.ui.ArrayDataModel} dataModel Data model. | 32 * @param {!cr.ui.ArrayDataModel} dataModel Data model. |
| 30 * @param {cr.ui.ListSelectionModel} selectionModel Selection model. | 33 * @param {!cr.ui.ListSelectionModel} selectionModel Selection model. |
| 31 */ | 34 */ |
| 32 Ribbon.decorate = function(self, dataModel, selectionModel) { | 35 Ribbon.decorate = function(self, dataModel, selectionModel) { |
| 33 self.__proto__ = Ribbon.prototype; | 36 self.__proto__ = Ribbon.prototype; |
| 37 self = /** @type {!Ribbon} */ (self); |
| 34 self.dataModel_ = dataModel; | 38 self.dataModel_ = dataModel; |
| 35 self.selectionModel_ = selectionModel; | 39 self.selectionModel_ = selectionModel; |
| 36 | 40 |
| 41 /** @type {!Object} */ |
| 42 self.renderCache_ = {}; |
| 43 |
| 44 /** @type {number} */ |
| 45 self.firstVisibleIndex_ = 0; |
| 46 |
| 47 /** @type {number} */ |
| 48 self.lastVisibleIndex_ = -1; |
| 49 |
| 50 /** @type {?function(!Event)} */ |
| 51 self.onContentBound_ = null; |
| 52 |
| 53 /** @type {?function(!Event)} */ |
| 54 self.onSpliceBound_ = null; |
| 55 |
| 56 /** @type {?function(!Event)} */ |
| 57 self.onSelectionBound_ = null; |
| 58 |
| 59 /** @type {?number} */ |
| 60 self.removeTimeout_ = null; |
| 61 |
| 37 self.className = 'ribbon'; | 62 self.className = 'ribbon'; |
| 38 }; | 63 }; |
| 39 | 64 |
| 40 /** | 65 /** |
| 41 * Max number of thumbnails in the ribbon. | 66 * Max number of thumbnails in the ribbon. |
| 42 * @type {number} | 67 * @type {number} |
| 68 * @const |
| 43 */ | 69 */ |
| 44 Ribbon.ITEMS_COUNT = 5; | 70 Ribbon.ITEMS_COUNT = 5; |
| 45 | 71 |
| 46 /** | 72 /** |
| 47 * Force redraw the ribbon. | 73 * Force redraw the ribbon. |
| 48 */ | 74 */ |
| 49 Ribbon.prototype.redraw = function() { | 75 Ribbon.prototype.redraw = function() { |
| 50 this.onSelection_(); | 76 this.onSelection_(); |
| 51 }; | 77 }; |
| 52 | 78 |
| (...skipping 30 matching lines...) Expand all Loading... |
| 83 this.dataModel_.removeEventListener('content', this.onContentBound_); | 109 this.dataModel_.removeEventListener('content', this.onContentBound_); |
| 84 this.dataModel_.removeEventListener('splice', this.onSpliceBound_); | 110 this.dataModel_.removeEventListener('splice', this.onSpliceBound_); |
| 85 this.selectionModel_.removeEventListener('change', this.onSelectionBound_); | 111 this.selectionModel_.removeEventListener('change', this.onSelectionBound_); |
| 86 | 112 |
| 87 this.removeVanishing_(); | 113 this.removeVanishing_(); |
| 88 this.textContent = ''; | 114 this.textContent = ''; |
| 89 }; | 115 }; |
| 90 | 116 |
| 91 /** | 117 /** |
| 92 * Data model splice handler. | 118 * Data model splice handler. |
| 93 * @param {Event} event Event. | 119 * @param {!Event} event Event. |
| 94 * @private | 120 * @private |
| 95 */ | 121 */ |
| 96 Ribbon.prototype.onSplice_ = function(event) { | 122 Ribbon.prototype.onSplice_ = function(event) { |
| 97 if (event.removed.length > 1) { | 123 if (event.removed.length > 1) { |
| 98 console.error('Cannot remove multiple items.'); | 124 console.error('Cannot remove multiple items.'); |
| 99 return; | 125 return; |
| 100 } | 126 } |
| 101 | 127 |
| 102 if (event.removed.length > 0 && event.added.length > 0) { | 128 if (event.removed.length > 0 && event.added.length > 0) { |
| 103 console.error('Replacing is not implemented.'); | 129 console.error('Replacing is not implemented.'); |
| (...skipping 187 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 291 for (var i = 0; i != vanishingNodes.length; i++) { | 317 for (var i = 0; i != vanishingNodes.length; i++) { |
| 292 vanishingNodes[i].removeAttribute('vanishing'); | 318 vanishingNodes[i].removeAttribute('vanishing'); |
| 293 this.removeChild(vanishingNodes[i]); | 319 this.removeChild(vanishingNodes[i]); |
| 294 } | 320 } |
| 295 }; | 321 }; |
| 296 | 322 |
| 297 /** | 323 /** |
| 298 * Create a DOM element for a thumbnail. | 324 * Create a DOM element for a thumbnail. |
| 299 * | 325 * |
| 300 * @param {number} index Item index. | 326 * @param {number} index Item index. |
| 301 * @return {Element} Newly created element. | 327 * @return {!Element} Newly created element. |
| 302 * @private | 328 * @private |
| 303 */ | 329 */ |
| 304 Ribbon.prototype.renderThumbnail_ = function(index) { | 330 Ribbon.prototype.renderThumbnail_ = function(index) { |
| 305 var item = this.dataModel_.item(index); | 331 var item = this.dataModel_.item(index); |
| 306 var url = item.getEntry().toURL(); | 332 var url = item.getEntry().toURL(); |
| 307 | 333 |
| 308 var cached = this.renderCache_[url]; | 334 var cached = this.renderCache_[url]; |
| 309 if (cached) { | 335 if (cached) { |
| 310 var img = cached.querySelector('img'); | 336 var img = cached.querySelector('img'); |
| 311 if (img) | 337 if (img) |
| (...skipping 16 matching lines...) Expand all Loading... |
| 328 // TODO: Implement LRU eviction. | 354 // TODO: Implement LRU eviction. |
| 329 // Never evict the thumbnails that are currently in the DOM because we rely | 355 // Never evict the thumbnails that are currently in the DOM because we rely |
| 330 // on this cache to find them by URL. | 356 // on this cache to find them by URL. |
| 331 this.renderCache_[url] = thumbnail; | 357 this.renderCache_[url] = thumbnail; |
| 332 return thumbnail; | 358 return thumbnail; |
| 333 }; | 359 }; |
| 334 | 360 |
| 335 /** | 361 /** |
| 336 * Set the thumbnail image. | 362 * Set the thumbnail image. |
| 337 * | 363 * |
| 338 * @param {Element} thumbnail Thumbnail element. | 364 * @param {!Element} thumbnail Thumbnail element. |
| 339 * @param {Gallery.Item} item Gallery item. | 365 * @param {!Gallery.Item} item Gallery item. |
| 340 * @private | 366 * @private |
| 341 */ | 367 */ |
| 342 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) { | 368 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) { |
| 343 var loader = new ThumbnailLoader( | 369 var loader = new ThumbnailLoader( |
| 344 item.getEntry(), | 370 item.getEntry(), |
| 345 ThumbnailLoader.LoaderType.IMAGE, | 371 ThumbnailLoader.LoaderType.IMAGE, |
| 346 item.getMetadata()); | 372 item.getMetadata()); |
| 347 loader.load( | 373 loader.load( |
| 348 thumbnail.querySelector('.image-wrapper'), | 374 thumbnail.querySelector('.image-wrapper'), |
| 349 ThumbnailLoader.FillMode.FILL /* fill */, | 375 ThumbnailLoader.FillMode.FILL /* fill */, |
| 350 ThumbnailLoader.OptimizationMode.NEVER_DISCARD); | 376 ThumbnailLoader.OptimizationMode.NEVER_DISCARD); |
| 351 }; | 377 }; |
| 352 | 378 |
| 353 /** | 379 /** |
| 354 * Content change handler. | 380 * Content change handler. |
| 355 * | 381 * |
| 356 * @param {Event} event Event. | 382 * @param {!Event} event Event. |
| 357 * @private | 383 * @private |
| 358 */ | 384 */ |
| 359 Ribbon.prototype.onContentChange_ = function(event) { | 385 Ribbon.prototype.onContentChange_ = function(event) { |
| 360 var url = event.item.getEntry().toURL(); | 386 var url = event.item.getEntry().toURL(); |
| 361 if (event.oldEntry.toURL() !== url) | 387 if (event.oldEntry.toURL() !== url) |
| 362 this.remapCache_(event.oldEntry.toURL(), url); | 388 this.remapCache_(event.oldEntry.toURL(), url); |
| 363 | 389 |
| 364 var thumbnail = this.renderCache_[url]; | 390 var thumbnail = this.renderCache_[url]; |
| 365 if (thumbnail && event.item) | 391 if (thumbnail && event.item) |
| 366 this.setThumbnailImage_(thumbnail, event.item); | 392 this.setThumbnailImage_(thumbnail, event.item); |
| 367 }; | 393 }; |
| 368 | 394 |
| 369 /** | 395 /** |
| 370 * Update the thumbnail element cache. | 396 * Update the thumbnail element cache. |
| 371 * | 397 * |
| 372 * @param {string} oldUrl Old url. | 398 * @param {string} oldUrl Old url. |
| 373 * @param {string} newUrl New url. | 399 * @param {string} newUrl New url. |
| 374 * @private | 400 * @private |
| 375 */ | 401 */ |
| 376 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) { | 402 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) { |
| 377 if (oldUrl != newUrl && (oldUrl in this.renderCache_)) { | 403 if (oldUrl != newUrl && (oldUrl in this.renderCache_)) { |
| 378 this.renderCache_[newUrl] = this.renderCache_[oldUrl]; | 404 this.renderCache_[newUrl] = this.renderCache_[oldUrl]; |
| 379 delete this.renderCache_[oldUrl]; | 405 delete this.renderCache_[oldUrl]; |
| 380 } | 406 } |
| 381 }; | 407 }; |
| OLD | NEW |