ui/file_manager/gallery/js/ribbon.js

   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
   3 // found in the LICENSE file.
   4
   5 /**
   6  * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode.
   7  *
   8  * @param {!Document} document Document.
   9  * @param {!cr.ui.ArrayDataModel} dataModel Data model.
  10  * @param {!cr.ui.ListSelectionModel} selectionModel Selection model.
  11  * @param {!ThumbnailModel} thumbnailModel
  12  * @extends {HTMLDivElement}
  13  * @constructor
  14  * @suppress {checkStructDictInheritance}
  15  * @struct
  16  */
  17 function Ribbon(document, dataModel, selectionModel, thumbnailModel) {
  18   if (this instanceof Ribbon) {
  19     return Ribbon.call(/** @type {Ribbon} */ (document.createElement('div')),
  20         document, dataModel, selectionModel, thumbnailModel);
  21   }
  22
  23   this.__proto__ = Ribbon.prototype;
  24   this.className = 'ribbon';
  25
  26   /**
  27    * @private {!cr.ui.ArrayDataModel}
  28    * @const
  29    */
  30   this.dataModel_ = dataModel;
  31
  32   /**
  33    * @private {!cr.ui.ListSelectionModel}
  34    * @const
  35    */
  36   this.selectionModel_ = selectionModel;
  37
  38   /**
  39    * @private {!ThumbnailModel}
  40    * @const
  41    */
  42   this.thumbnailModel_ = thumbnailModel;
  43
  44   /**
  45    * @type {!Object}
  46    * @private
  47    */
  48   this.renderCache_ = {};
  49
  50   /**
  51    * @type {number}
  52    * @private
  53    */
  54   this.firstVisibleIndex_ = 0;
  55
  56   /**
  57    * @type {number}
  58    * @private
  59    */
  60   this.lastVisibleIndex_ = -1;
  61
  62   /**
  63    * @type {?function(!Event)}
  64    * @private
  65    */
  66   this.onContentBound_ = null;
  67
  68   /**
  69    * @type {?function(!Event)}
  70    * @private
  71    */
  72   this.onSpliceBound_ = null;
  73
  74   /**
  75    * @type {?function(!Event)}
  76    * @private
  77    */
  78   this.onSelectionBound_ = null;
  79
  80   /**
  81    * @type {?number}
  82    * @private
  83    */
  84   this.removeTimeout_ = null;
  85
  86   return this;
  87 }
  88
  89 /**
  90  * Inherit from HTMLDivElement.
  91  */
  92 Ribbon.prototype.__proto__ = HTMLDivElement.prototype;
  93
  94 /**
  95  * Max number of thumbnails in the ribbon.
  96  * @type {number}
  97  * @const
  98  */
  99 Ribbon.ITEMS_COUNT = 5;
 100
 101 /**
 102  * Force redraw the ribbon.
 103  */
 104 Ribbon.prototype.redraw = function() {
 105   this.onSelection_();
 106 };
 107
 108 /**
 109  * Clear all cached data to force full redraw on the next selection change.
 110  */
 111 Ribbon.prototype.reset = function() {
 112   this.renderCache_ = {};
 113   this.firstVisibleIndex_ = 0;
 114   this.lastVisibleIndex_ = -1;  // Zero thumbnails
 115 };
 116
 117 /**
 118  * Enable the ribbon.
 119  */
 120 Ribbon.prototype.enable = function() {
 121   this.onContentBound_ = this.onContentChange_.bind(this);
 122   this.dataModel_.addEventListener('content', this.onContentBound_);
 123
 124   this.onSpliceBound_ = this.onSplice_.bind(this);
 125   this.dataModel_.addEventListener('splice', this.onSpliceBound_);
 126
 127   this.onSelectionBound_ = this.onSelection_.bind(this);
 128   this.selectionModel_.addEventListener('change', this.onSelectionBound_);
 129
 130   this.reset();
 131   this.redraw();
 132 };
 133
 134 /**
 135  * Disable ribbon.
 136  */
 137 Ribbon.prototype.disable = function() {
 138   this.dataModel_.removeEventListener('content', this.onContentBound_);
 139   this.dataModel_.removeEventListener('splice', this.onSpliceBound_);
 140   this.selectionModel_.removeEventListener('change', this.onSelectionBound_);
 141
 142   this.removeVanishing_();
 143   this.textContent = '';
 144 };
 145
 146 /**
 147  * Data model splice handler.
 148  * @param {!Event} event Event.
 149  * @private
 150  */
 151 Ribbon.prototype.onSplice_ = function(event) {
 152   if (event.removed.length > 0 && event.added.length > 0) {
 153     console.error('Replacing is not implemented.');
 154     return;
 155   }
 156
 157   if (event.added.length > 0) {
 158     for (var i = 0; i < event.added.length; i++) {
 159       var index = this.dataModel_.indexOf(event.added[i]);
 160       if (index === -1)
 161         continue;
 162       var element = this.renderThumbnail_(index);
 163       var nextItem = this.dataModel_.item(index + 1);
 164       var nextElement =
 165           nextItem && this.renderCache_[nextItem.getEntry().toURL()];
 166       this.insertBefore(element, nextElement);
 167     }
 168     return;
 169   }
 170
 171   var persistentNodes = this.querySelectorAll('.ribbon-image:not([vanishing])');
 172   if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end.
 173     var lastNode = persistentNodes[persistentNodes.length - 1];
 174     if (lastNode.nextSibling) {
 175       // Pull back a vanishing node from the right.
 176       lastNode.nextSibling.removeAttribute('vanishing');
 177     } else {
 178       // Push a new item at the right end.
 179       this.appendChild(this.renderThumbnail_(this.lastVisibleIndex_));
 180     }
 181   } else {
 182     // No items to the right, move the window to the left.
 183     this.lastVisibleIndex_--;
 184     if (this.firstVisibleIndex_) {
 185       this.firstVisibleIndex_--;
 186       var firstNode = persistentNodes[0];
 187       if (firstNode.previousSibling) {
 188         // Pull back a vanishing node from the left.
 189         firstNode.previousSibling.removeAttribute('vanishing');
 190       } else {
 191         // Push a new item at the left end.
 192         var newThumbnail = this.renderThumbnail_(this.firstVisibleIndex_);
 193         newThumbnail.style.marginLeft = -(this.clientHeight - 2) + 'px';
 194         this.insertBefore(newThumbnail, this.firstChild);
 195         setTimeout(function() {
 196           newThumbnail.style.marginLeft = '0';
 197         }, 0);
 198       }
 199     }
 200   }
 201
 202   var removed = false;
 203   for (var i = 0; i < event.removed.length; i++) {
 204     var removedDom = this.renderCache_[event.removed[i].getEntry().toURL()];
 205     if (removedDom) {
 206       removedDom.removeAttribute('selected');
 207       removedDom.setAttribute('vanishing', 'smooth');
 208       removed = true;
 209     }
 210   }
 211
 212   if (removed)
 213     this.scheduleRemove_();
 214
 215   this.onSelection_();
 216 };
 217
 218 /**
 219  * Selection change handler.
 220  * @private
 221  */
 222 Ribbon.prototype.onSelection_ = function() {
 223   var indexes = this.selectionModel_.selectedIndexes;
 224   if (indexes.length == 0)
 225     return;  // Ignore temporary empty selection.
 226   var selectedIndex = indexes[0];
 227
 228   var length = this.dataModel_.length;
 229
 230   // TODO(dgozman): use margin instead of 2 here.
 231   var itemWidth = this.clientHeight - 2;
 232   var fullItems = Math.min(Ribbon.ITEMS_COUNT, length);
 233   var right = Math.floor((fullItems - 1) / 2);
 234
 235   var fullWidth = fullItems * itemWidth;
 236   this.style.width = fullWidth + 'px';
 237
 238   var lastIndex = selectedIndex + right;
 239   lastIndex = Math.max(lastIndex, fullItems - 1);
 240   lastIndex = Math.min(lastIndex, length - 1);
 241   var firstIndex = lastIndex - fullItems + 1;
 242
 243   if (this.firstVisibleIndex_ != firstIndex ||
 244       this.lastVisibleIndex_ != lastIndex) {
 245
 246     if (this.lastVisibleIndex_ == -1) {
 247       this.firstVisibleIndex_ = firstIndex;
 248       this.lastVisibleIndex_ = lastIndex;
 249     }
 250
 251     this.removeVanishing_();
 252
 253     this.textContent = '';
 254     var startIndex = Math.min(firstIndex, this.firstVisibleIndex_);
 255     // All the items except the first one treated equally.
 256     for (var index = startIndex + 1;
 257          index <= Math.max(lastIndex, this.lastVisibleIndex_);
 258          ++index) {
 259       // Only add items that are in either old or the new viewport.
 260       if (this.lastVisibleIndex_ < index && index < firstIndex ||
 261           lastIndex < index && index < this.firstVisibleIndex_)
 262         continue;
 263       var box = this.renderThumbnail_(index);
 264       box.style.marginLeft = '0';
 265       this.appendChild(box);
 266       if (index < firstIndex || index > lastIndex) {
 267         // If the node is not in the new viewport we only need it while
 268         // the animation is playing out.
 269         box.setAttribute('vanishing', 'slide');
 270       }
 271     }
 272
 273     var slideCount = this.childNodes.length + 1 - Ribbon.ITEMS_COUNT;
 274     var margin = itemWidth * slideCount;
 275     var startBox = this.renderThumbnail_(startIndex);
 276     if (startIndex == firstIndex) {
 277       // Sliding to the right.
 278       startBox.style.marginLeft = -margin + 'px';
 279       if (this.firstChild)
 280         this.insertBefore(startBox, this.firstChild);
 281       else
 282         this.appendChild(startBox);
 283       setTimeout(function() {
 284         startBox.style.marginLeft = '0';
 285       }, 0);
 286     } else {
 287       // Sliding to the left. Start item will become invisible and should be
 288       // removed afterwards.
 289       startBox.setAttribute('vanishing', 'slide');
 290       startBox.style.marginLeft = '0';
 291       if (this.firstChild)
 292         this.insertBefore(startBox, this.firstChild);
 293       else
 294         this.appendChild(startBox);
 295       setTimeout(function() {
 296         startBox.style.marginLeft = -margin + 'px';
 297       }, 0);
 298     }
 299
 300     ImageUtil.setClass(this, 'fade-left',
 301         firstIndex > 0 && selectedIndex != firstIndex);
 302
 303     ImageUtil.setClass(this, 'fade-right',
 304         lastIndex < length - 1 && selectedIndex != lastIndex);
 305
 306     this.firstVisibleIndex_ = firstIndex;
 307     this.lastVisibleIndex_ = lastIndex;
 308
 309     this.scheduleRemove_();
 310   }
 311
 312   var oldSelected = this.querySelector('[selected]');
 313   if (oldSelected)
 314     oldSelected.removeAttribute('selected');
 315
 316   var newSelected =
 317       this.renderCache_[this.dataModel_.item(selectedIndex).getEntry().toURL()];
 318   if (newSelected)
 319     newSelected.setAttribute('selected', true);
 320 };
 321
 322 /**
 323  * Schedule the removal of thumbnails marked as vanishing.
 324  * @private
 325  */
 326 Ribbon.prototype.scheduleRemove_ = function() {
 327   if (this.removeTimeout_)
 328     clearTimeout(this.removeTimeout_);
 329
 330   this.removeTimeout_ = setTimeout(function() {
 331     this.removeTimeout_ = null;
 332     this.removeVanishing_();
 333   }.bind(this), 200);
 334 };
 335
 336 /**
 337  * Remove all thumbnails marked as vanishing.
 338  * @private
 339  */
 340 Ribbon.prototype.removeVanishing_ = function() {
 341   if (this.removeTimeout_) {
 342     clearTimeout(this.removeTimeout_);
 343     this.removeTimeout_ = 0;
 344   }
 345   var vanishingNodes = this.querySelectorAll('[vanishing]');
 346   for (var i = 0; i != vanishingNodes.length; i++) {
 347     vanishingNodes[i].removeAttribute('vanishing');
 348     this.removeChild(vanishingNodes[i]);
 349   }
 350 };
 351
 352 /**
 353  * Create a DOM element for a thumbnail.
 354  *
 355  * @param {number} index Item index.
 356  * @return {!Element} Newly created element.
 357  * @private
 358  */
 359 Ribbon.prototype.renderThumbnail_ = function(index) {
 360   var item = assertInstanceof(this.dataModel_.item(index), Gallery.Item);
 361   var url = item.getEntry().toURL();
 362
 363   var cached = this.renderCache_[url];
 364   if (cached) {
 365     var img = cached.querySelector('img');
 366     if (img)
 367       img.classList.add('cached');
 368     return cached;
 369   }
 370
 371   var thumbnail = assertInstanceof(this.ownerDocument.createElement('div'),
 372       HTMLDivElement);
 373   thumbnail.className = 'ribbon-image';
 374   thumbnail.addEventListener('click', function() {
 375     var index = this.dataModel_.indexOf(item);
 376     this.selectionModel_.unselectAll();
 377     this.selectionModel_.setIndexSelected(index, true);
 378   }.bind(this));
 379
 380   util.createChild(thumbnail, 'image-wrapper');
 381
 382   this.setThumbnailImage_(thumbnail, item);
 383
 384   // TODO: Implement LRU eviction.
 385   // Never evict the thumbnails that are currently in the DOM because we rely
 386   // on this cache to find them by URL.
 387   this.renderCache_[url] = thumbnail;
 388   return thumbnail;
 389 };
 390
 391 /**
 392  * Set the thumbnail image.
 393  *
 394  * @param {!Element} thumbnail Thumbnail element.
 395  * @param {!Gallery.Item} item Gallery item.
 396  * @private
 397  */
 398 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) {
 399   this.thumbnailModel_.get([item.getEntry()]).then(function(metadataList) {
 400     var loader = new ThumbnailLoader(
 401         item.getEntry(),
 402         ThumbnailLoader.LoaderType.IMAGE,
 403         metadataList[0]);
 404     loader.load(
 405         thumbnail.querySelector('.image-wrapper'),
 406         ThumbnailLoader.FillMode.FILL /* fill */,
 407         ThumbnailLoader.OptimizationMode.NEVER_DISCARD);
 408   });
 409 };
 410
 411 /**
 412  * Content change handler.
 413  *
 414  * @param {!Event} event Event.
 415  * @private
 416  */
 417 Ribbon.prototype.onContentChange_ = function(event) {
 418   var url = event.item.getEntry().toURL();
 419   if (event.oldEntry.toURL() !== url)
 420     this.remapCache_(event.oldEntry.toURL(), url);
 421
 422   var thumbnail = this.renderCache_[url];
 423   if (thumbnail && event.item)
 424     this.setThumbnailImage_(thumbnail, event.item);
 425 };
 426
 427 /**
 428  * Update the thumbnail element cache.
 429  *
 430  * @param {string} oldUrl Old url.
 431  * @param {string} newUrl New url.
 432  * @private
 433  */
 434 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) {
 435   if (oldUrl != newUrl && (oldUrl in this.renderCache_)) {
 436     this.renderCache_[newUrl] = this.renderCache_[oldUrl];
 437     delete this.renderCache_[oldUrl];
 438   }
 439 };