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 |