| 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 'use strict'; | 5 'use strict'; |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode. | 8 * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode. |
| 9 * | 9 * |
| 10 * @param {Document} document Document. | 10 * @param {Document} document Document. |
| (...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 100 */ | 100 */ |
| 101 Ribbon.prototype.onSplice_ = function(event) { | 101 Ribbon.prototype.onSplice_ = function(event) { |
| 102 if (event.removed.length == 0) | 102 if (event.removed.length == 0) |
| 103 return; | 103 return; |
| 104 | 104 |
| 105 if (event.removed.length > 1) { | 105 if (event.removed.length > 1) { |
| 106 console.error('Cannot remove multiple items'); | 106 console.error('Cannot remove multiple items'); |
| 107 return; | 107 return; |
| 108 } | 108 } |
| 109 | 109 |
| 110 var removed = this.renderCache_[event.removed[0].getUrl()]; | 110 var removed = this.renderCache_[event.removed[0].getEntry().toURL()]; |
| 111 if (!removed || !removed.parentNode || !removed.hasAttribute('selected')) { | 111 if (!removed || !removed.parentNode || !removed.hasAttribute('selected')) { |
| 112 console.error('Can only remove the selected item'); | 112 console.error('Can only remove the selected item'); |
| 113 return; | 113 return; |
| 114 } | 114 } |
| 115 | 115 |
| 116 var persistentNodes = this.querySelectorAll('.ribbon-image:not([vanishing])'); | 116 var persistentNodes = this.querySelectorAll('.ribbon-image:not([vanishing])'); |
| 117 if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end. | 117 if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end. |
| 118 var lastNode = persistentNodes[persistentNodes.length - 1]; | 118 var lastNode = persistentNodes[persistentNodes.length - 1]; |
| 119 if (lastNode.nextSibling) { | 119 if (lastNode.nextSibling) { |
| 120 // Pull back a vanishing node from the right. | 120 // Pull back a vanishing node from the right. |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 241 this.firstVisibleIndex_ = firstIndex; | 241 this.firstVisibleIndex_ = firstIndex; |
| 242 this.lastVisibleIndex_ = lastIndex; | 242 this.lastVisibleIndex_ = lastIndex; |
| 243 | 243 |
| 244 this.scheduleRemove_(); | 244 this.scheduleRemove_(); |
| 245 } | 245 } |
| 246 | 246 |
| 247 var oldSelected = this.querySelector('[selected]'); | 247 var oldSelected = this.querySelector('[selected]'); |
| 248 if (oldSelected) oldSelected.removeAttribute('selected'); | 248 if (oldSelected) oldSelected.removeAttribute('selected'); |
| 249 | 249 |
| 250 var newSelected = | 250 var newSelected = |
| 251 this.renderCache_[this.dataModel_.item(selectedIndex).getUrl()]; | 251 this.renderCache_[this.dataModel_.item(selectedIndex).getEntry().toURL()]; |
| 252 if (newSelected) newSelected.setAttribute('selected', true); | 252 if (newSelected) newSelected.setAttribute('selected', true); |
| 253 }; | 253 }; |
| 254 | 254 |
| 255 /** | 255 /** |
| 256 * Schedule the removal of thumbnails marked as vanishing. | 256 * Schedule the removal of thumbnails marked as vanishing. |
| 257 * @private | 257 * @private |
| 258 */ | 258 */ |
| 259 Ribbon.prototype.scheduleRemove_ = function() { | 259 Ribbon.prototype.scheduleRemove_ = function() { |
| 260 if (this.removeTimeout_) | 260 if (this.removeTimeout_) |
| 261 clearTimeout(this.removeTimeout_); | 261 clearTimeout(this.removeTimeout_); |
| (...skipping 22 matching lines...) Expand all Loading... |
| 284 | 284 |
| 285 /** | 285 /** |
| 286 * Create a DOM element for a thumbnail. | 286 * Create a DOM element for a thumbnail. |
| 287 * | 287 * |
| 288 * @param {number} index Item index. | 288 * @param {number} index Item index. |
| 289 * @return {Element} Newly created element. | 289 * @return {Element} Newly created element. |
| 290 * @private | 290 * @private |
| 291 */ | 291 */ |
| 292 Ribbon.prototype.renderThumbnail_ = function(index) { | 292 Ribbon.prototype.renderThumbnail_ = function(index) { |
| 293 var item = this.dataModel_.item(index); | 293 var item = this.dataModel_.item(index); |
| 294 var url = item.getUrl(); | 294 var url = item.getEntry().toURL(); |
| 295 | 295 |
| 296 var cached = this.renderCache_[url]; | 296 var cached = this.renderCache_[url]; |
| 297 if (cached) { | 297 if (cached) { |
| 298 var img = cached.querySelector('img'); | 298 var img = cached.querySelector('img'); |
| 299 if (img) | 299 if (img) |
| 300 img.classList.add('cached'); | 300 img.classList.add('cached'); |
| 301 return cached; | 301 return cached; |
| 302 } | 302 } |
| 303 | 303 |
| 304 var thumbnail = this.ownerDocument.createElement('div'); | 304 var thumbnail = this.ownerDocument.createElement('div'); |
| 305 thumbnail.className = 'ribbon-image'; | 305 thumbnail.className = 'ribbon-image'; |
| 306 thumbnail.addEventListener('click', function() { | 306 thumbnail.addEventListener('click', function() { |
| 307 var index = this.dataModel_.indexOf(item); | 307 var index = this.dataModel_.indexOf(item); |
| 308 this.selectionModel_.unselectAll(); | 308 this.selectionModel_.unselectAll(); |
| 309 this.selectionModel_.setIndexSelected(index, true); | 309 this.selectionModel_.setIndexSelected(index, true); |
| 310 }.bind(this)); | 310 }.bind(this)); |
| 311 | 311 |
| 312 util.createChild(thumbnail, 'image-wrapper'); | 312 util.createChild(thumbnail, 'image-wrapper'); |
| 313 | 313 |
| 314 this.metadataCache_.get(url, Gallery.METADATA_TYPE, | 314 this.metadataCache_.get(item.getEntry().toURL(), Gallery.METADATA_TYPE, |
| 315 this.setThumbnailImage_.bind(this, thumbnail, url)); | 315 this.setThumbnailImage_.bind(this, thumbnail, url)); |
| 316 | 316 |
| 317 // TODO: Implement LRU eviction. | 317 // TODO: Implement LRU eviction. |
| 318 // Never evict the thumbnails that are currently in the DOM because we rely | 318 // Never evict the thumbnails that are currently in the DOM because we rely |
| 319 // on this cache to find them by URL. | 319 // on this cache to find them by URL. |
| 320 this.renderCache_[url] = thumbnail; | 320 this.renderCache_[url] = thumbnail; |
| 321 return thumbnail; | 321 return thumbnail; |
| 322 }; | 322 }; |
| 323 | 323 |
| 324 /** | 324 /** |
| (...skipping 11 matching lines...) Expand all Loading... |
| 336 ThumbnailLoader.OptimizationMode.NEVER_DISCARD); | 336 ThumbnailLoader.OptimizationMode.NEVER_DISCARD); |
| 337 }; | 337 }; |
| 338 | 338 |
| 339 /** | 339 /** |
| 340 * Content change handler. | 340 * Content change handler. |
| 341 * | 341 * |
| 342 * @param {Event} event Event. | 342 * @param {Event} event Event. |
| 343 * @private | 343 * @private |
| 344 */ | 344 */ |
| 345 Ribbon.prototype.onContentChange_ = function(event) { | 345 Ribbon.prototype.onContentChange_ = function(event) { |
| 346 var url = event.item.getUrl(); | 346 var url = event.item.getEntry().toURL(); |
| 347 this.remapCache_(event.oldUrl, url); | 347 this.remapCache_(event.oldUrl, url); |
| 348 | 348 |
| 349 var thumbnail = this.renderCache_[url]; | 349 var thumbnail = this.renderCache_[url]; |
| 350 if (thumbnail && event.metadata) | 350 if (thumbnail && event.metadata) |
| 351 this.setThumbnailImage_(thumbnail, url, event.metadata); | 351 this.setThumbnailImage_(thumbnail, url, event.metadata); |
| 352 }; | 352 }; |
| 353 | 353 |
| 354 /** | 354 /** |
| 355 * Update the thumbnail element cache. | 355 * Update the thumbnail element cache. |
| 356 * | 356 * |
| 357 * @param {string} oldUrl Old url. | 357 * @param {string} oldUrl Old url. |
| 358 * @param {string} newUrl New url. | 358 * @param {string} newUrl New url. |
| 359 * @private | 359 * @private |
| 360 */ | 360 */ |
| 361 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) { | 361 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) { |
| 362 if (oldUrl != newUrl && (oldUrl in this.renderCache_)) { | 362 if (oldUrl != newUrl && (oldUrl in this.renderCache_)) { |
| 363 this.renderCache_[newUrl] = this.renderCache_[oldUrl]; | 363 this.renderCache_[newUrl] = this.renderCache_[oldUrl]; |
| 364 delete this.renderCache_[oldUrl]; | 364 delete this.renderCache_[oldUrl]; |
| 365 } | 365 } |
| 366 }; | 366 }; |
| OLD | NEW |