First cut of the updated Photo Editor UI

chrome/browser/resources/file_manager/js/photo/ribbon.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode.
  *
  * @param {Document} document Document.
  * @param {MetadataCache} metadataCache MetadataCache instance.
- * @param {function(number)} selectFunc Selection function.
+ * @param {cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  * @return {Element} Ribbon element.
  * @constructor
  */
-function Ribbon(document, metadataCache, selectFunc) {
+function Ribbon(document, metadataCache, dataModel, selectionModel) {
   var self = document.createElement('div');
-  Ribbon.decorate(self, metadataCache, selectFunc);
+  Ribbon.decorate(self, metadataCache, dataModel, selectionModel);
   return self;
 }
 
 /**
  * Inherit from HTMLDivElement.
  */
 Ribbon.prototype.__proto__ = HTMLDivElement.prototype;
 
 /**
  * Decorate a Ribbon instance.
  *
  * @param {Ribbon} self Self pointer.
  * @param {MetadataCache} metadataCache MetadataCache instance.
- * @param {function(number)} selectFunc Selection function.
+ * @param {cr.ui.ArrayDataModel} dataModel Data model.
+ * @param {cr.ui.ListSelectionModel} selectionModel Selection model.
  */
-Ribbon.decorate = function(self, metadataCache, selectFunc) {
+Ribbon.decorate = function(self, metadataCache, dataModel, selectionModel) {
   self.__proto__ = Ribbon.prototype;
   self.metadataCache_ = metadataCache;
-  self.selectFunc_ = selectFunc;
+  self.dataModel_ = dataModel;
+  self.selectionModel_ = selectionModel;
 
   self.className = 'ribbon';
 
-  self.firstVisibleIndex_ = 0;
-  self.lastVisibleIndex_ = -1;  // Zero thumbnails
-
   self.renderCache_ = {};
 };
 
 /**
  * Max number of thumbnails in the ribbon.
  * @type {Number}
  */
 Ribbon.ITEMS_COUNT = 5;
 
 /**
- * Update the ribbon.
- *
- * @param {Array.<Gallery.Item>} items Array of items.
- * @param {number} selectedIndex Selected index.
+ * Enable the ribbon.
  */
-Ribbon.prototype.update = function(items, selectedIndex) {
-  // Never show a single thumbnail.
-  if (items.length == 1)
+Ribbon.prototype.enable = function() {
+  this.firstVisibleIndex_ = 0;
+  this.lastVisibleIndex_ = -1;  // Zero thumbnails
+
+  this.onSpliceBound_ = this.onSplice_.bind(this);
+  this.dataModel_.addEventListener('splice', this.onSpliceBound_);
+
+  this.onSelectionBound_ = this.onSelection_.bind(this);
+  this.selectionModel_.addEventListener('change', this.onSelectionBound_);
+
+  this.onSelection_();
+};
+
+/**
+ * Disable ribbon.
+ */
+Ribbon.prototype.disable = function() {
+  this.dataModel_.removeEventListener('splice', this.onSpliceBound_);
+  this.selectionModel_.removeEventListener('change', this.onSelectionBound_);
+
+  this.removeVanishing_();
+  this.textContent = '';
+};
+
+/**
+ * Data model splice handler.
+ * @param {Event} event Event.
+ * @private
+ */
+Ribbon.prototype.onSplice_ = function(event) {
+  if (event.removed.length != 1)
     return;

[dgozman, 2012/08/27 13:23:42]

console.error too?

[Vladislav Kaznacheev, 2012/08/27 14:49:08]

Done.

 
+  var removed = this.renderCache_[event.removed[0].getUrl()];
+  if (!removed || !removed.parentNode || !removed.hasAttribute('selected')) {
+    console.error('Can only remove the selected item');
+    return;
+  }
+
+  var persistentNodes = this.querySelectorAll(':not([vanishing])');

[dgozman, 2012/08/27 13:23:42]

You need only immediate childs, don't you?

[Vladislav Kaznacheev, 2012/08/27 14:49:08]

Yes of course! Fixed.
On 2012/08/27 13:23:42, dgozman wrote:

+  if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end.
+    var lastNode = persistentNodes[persistentNodes.length - 1];
+    if (lastNode.nextSibling) {
+      // Pull back a vanishing node from the right.
+      lastNode.nextSibling.removeAttribute('vanishing');
+    } else {
+      // Push a new item at the right end.
+      this.appendChild(this.renderThumbnail_(this.lastVisibleIndex_));
+    }
+  } else {
+    // No items to the right, move the window to the left.
+    this.lastVisibleIndex_--;
+    if (this.firstVisibleIndex_) {
+      this.firstVisibleIndex_--;
+      var firstNode = persistentNodes[0];
+      if (firstNode.previousSibling) {
+        // Pull back a vanishing node from the left.
+        firstNode.previousSibling.removeAttribute('vanishing');
+      } else {
+        // Push a new item at the left end.
+        var newThumbnail = this.renderThumbnail_(this.firstVisibleIndex_);
+        newThumbnail.style.marginLeft = -(this.clientHeight - 2) + 'px';
+        this.insertBefore(newThumbnail, this.firstChild);
+        setTimeout(function() {
+          newThumbnail.style.marginLeft = '0';
+        }, 0);
+      }
+    }
+  }
+
+  removed.removeAttribute('selected');
+  removed.setAttribute('vanishing', 'smooth');
+  this.scheduleRemove_();
+};
+
+/**
+ * Selection change handler.
+ * @private
+ */
+Ribbon.prototype.onSelection_ = function() {
+  var indexes = this.selectionModel_.selectedIndexes;
+  if (indexes.length == 0)
+    return;  // Ignore temporary empty selection.
+  var selectedIndex = indexes[0];
+
+  var length = this.dataModel_.length;
+
   // TODO(dgozman): use margin instead of 2 here.
   var itemWidth = this.clientHeight - 2;
   var fullItems = Ribbon.ITEMS_COUNT;
-  fullItems = Math.min(fullItems, items.length);
+  fullItems = Math.min(fullItems, length);
   var right = Math.floor((fullItems - 1) / 2);
 
   var fullWidth = fullItems * itemWidth;
   this.style.width = fullWidth + 'px';
 
   var lastIndex = selectedIndex + right;
   lastIndex = Math.max(lastIndex, fullItems - 1);
-  lastIndex = Math.min(lastIndex, items.length - 1);
+  lastIndex = Math.min(lastIndex, length - 1);
   var firstIndex = lastIndex - fullItems + 1;
 
   if (this.firstVisibleIndex_ != firstIndex ||
       this.lastVisibleIndex_ != lastIndex) {
 
     if (this.lastVisibleIndex_ == -1) {
       this.firstVisibleIndex_ = firstIndex;
       this.lastVisibleIndex_ = lastIndex;
     }
 
+    this.removeVanishing_();

[dgozman, 2012/08/27 13:23:42]

If you click right arrow with 100ms interval, this call may remove 'vanishing'
attribute from some items that needs to be vanished.

Consider removing attribute only for items from the new viewport.

[Vladislav Kaznacheev, 2012/08/27 14:49:08]

The next line will remove all children from the ribbon and stop all the
animations that are in progress. 

The purpose of this call is actually clearing the 'vanishing' attribute from the
nodes that have it.

On 2012/08/27 13:23:42, dgozman wrote:

+
     this.textContent = '';
     var startIndex = Math.min(firstIndex, this.firstVisibleIndex_);
-    var toRemove = [];
     // All the items except the first one treated equally.
     for (var index = startIndex + 1;
          index <= Math.max(lastIndex, this.lastVisibleIndex_);
          ++index) {
-      var box = this.renderThumbnail_(index, items);
+      // Only add items that are in either old or the new viewport.
+      if (this.lastVisibleIndex_ < index && index < firstIndex ||
+          lastIndex < index && index < this.firstVisibleIndex_)
+        continue;
+      var box = this.renderThumbnail_(index);
       box.style.marginLeft = '0';
       this.appendChild(box);
       if (index < firstIndex || index > lastIndex) {
-        toRemove.push(box);
+        // If the node is not in the new viewport we only need it while
+        // the animation is playing out.
+        box.setAttribute('vanishing', 'slide');
       }
     }
 
-    var margin = itemWidth * Math.abs(firstIndex - this.firstVisibleIndex_);
-    var startBox = this.renderThumbnail_(startIndex, items);
+    var slideCount = this.childNodes.length + 1 - Ribbon.ITEMS_COUNT;
+    var margin = itemWidth * slideCount;
+    var startBox = this.renderThumbnail_(startIndex);
     if (startIndex == firstIndex) {
       // Sliding to the right.
       startBox.style.marginLeft = -margin + 'px';
       if (this.firstChild)
         this.insertBefore(startBox, this.firstChild);
       else
         this.appendChild(startBox);
       setTimeout(function() {
         startBox.style.marginLeft = '0';
       }, 0);
     } else {
       // Sliding to the left. Start item will become invisible and should be
       // removed afterwards.
-      toRemove.push(startBox);
+      startBox.setAttribute('vanishing', 'slide');
       startBox.style.marginLeft = '0';
       if (this.firstChild)
         this.insertBefore(startBox, this.firstChild);
       else
         this.appendChild(startBox);
       setTimeout(function() {
         startBox.style.marginLeft = -margin + 'px';
       }, 0);
     }
 
     ImageUtil.setClass(this, 'fade-left',
         firstIndex > 0 && selectedIndex != firstIndex);
 
     ImageUtil.setClass(this, 'fade-right',
-        lastIndex < items.length - 1 && selectedIndex != lastIndex);
+        lastIndex < length - 1 && selectedIndex != lastIndex);
 
     this.firstVisibleIndex_ = firstIndex;
     this.lastVisibleIndex_ = lastIndex;
 
-    if (this.removeTimeout_)
-      clearTimeout(this.removeTimeout_);
-
-    this.removeTimeout_ = setTimeout(function() {
-      this.removeTimeout_ = null;
-      for (var i = 0; i < toRemove.length; i++) {
-        var box = toRemove[i];
-        if (box.parentNode == this)
-          this.removeChild(box);
-      }
-    }.bind(this), 200);
+    this.scheduleRemove_();
   }
 
   var oldSelected = this.querySelector('[selected]');
   if (oldSelected) oldSelected.removeAttribute('selected');
 
-  var newSelected = this.getThumbnail_(selectedIndex);
+  var newSelected =
+      this.renderCache_[this.dataModel_.item(selectedIndex).getUrl()];
   if (newSelected) newSelected.setAttribute('selected', true);
 };
 
 /**
+ * Schedule the removal of thumbnails marked as vanishing.
+ * @private
+ */
+Ribbon.prototype.scheduleRemove_ = function() {
+  if (this.removeTimeout_)
+    clearTimeout(this.removeTimeout_);
+
+  this.removeTimeout_ = setTimeout(function() {
+    this.removeTimeout_ = null;
+    this.removeVanishing_();
+  }.bind(this), 200);
+};
+
+/**
+ * Remove all thumbnails marked as vanishing.
+ * @private
+ */
+Ribbon.prototype.removeVanishing_ = function() {
+  if (this.removeTimeout_) {
+    clearTimeout(this.removeTimeout_);
+    this.removeTimeout_ = 0;
+  }
+  var vanishingNodes = this.querySelectorAll('[vanishing]');
+  for (var i = 0; i != vanishingNodes.length; i++) {
+    vanishingNodes[i].removeAttribute('vanishing');
+    this.removeChild(vanishingNodes[i]);
+  }
+};
+
+/**
  * Create a DOM element for a thumbnail.
  *
  * @param {number} index Item index.
- * @param {Array.<Gallery.Item>} items Items array.
  * @return {Element} Newly created element.
  * @private
  */
-Ribbon.prototype.renderThumbnail_ = function(index, items) {
-  var url = items[index].getUrl();
+Ribbon.prototype.renderThumbnail_ = function(index) {
+  var item = this.dataModel_.item(index);
+  var url = item.getUrl();
 
   var cached = this.renderCache_[url];
   if (cached)
     return cached;
 
   var thumbnail = this.ownerDocument.createElement('div');
   thumbnail.className = 'ribbon-image';
-  thumbnail.addEventListener('click', this.selectFunc_.bind(null, index));
-  thumbnail.setAttribute('index', index);
+  thumbnail.addEventListener('click', function() {
+    var index = this.dataModel_.slice().indexOf(item);
+    this.selectionModel_.unselectAll();
+    this.selectionModel_.setIndexSelected(index, true);
+  }.bind(this));
 
   util.createChild(thumbnail, 'image-wrapper');
 
   this.metadataCache_.get(url, Gallery.METADATA_TYPE,
       this.setThumbnailImage_.bind(this, thumbnail, url));
 
+  // TODO: Implement LRU eviction.
+  // Never evict the thumbnails that are currently in the DOM because we rely
+  // on this cache to find them by URL.
   this.renderCache_[url] = thumbnail;
   return thumbnail;
 };
 
 /**
  * Set the thumbnail image.
  *
  * @param {Element} thumbnail Thumbnail element
  * @param {string} url Image url.
  * @param {Object} metadata Metadata.
  * @private
  */
 Ribbon.prototype.setThumbnailImage_ = function(thumbnail, url, metadata) {
   new ThumbnailLoader(url, metadata).load(
      thumbnail.querySelector('.image-wrapper'), true /* fill */);
 };
 
 /**
  * Update the thumbnail image.
  *
- * @param {number} index Item index.
  * @param {string} url Image url.
  * @param {Object} metadata Metadata.
  */
-Ribbon.prototype.updateThumbnail = function(index, url, metadata) {
-  var thumbnail = this.getThumbnail_(index) || this.renderCache_[url];
+Ribbon.prototype.updateThumbnail = function(url, metadata) {
+  var thumbnail = this.renderCache_[url];
   if (thumbnail)
     this.setThumbnailImage_(thumbnail, url, metadata);
 };
 
 /**
- * @param {number} index Thumbnail index.
- * @return {Element} Thumbnail element or null if not rendered.
- * @private
- */
-Ribbon.prototype.getThumbnail_ = function(index) {
-  return this.querySelector('[index="' + index + '"]');
-};
-
-/**
  * Update the thumbnail element cache.
  *
  * @param {string} oldUrl Old url.
  * @param {string} newUrl New url.
  */
 Ribbon.prototype.remapCache = function(oldUrl, newUrl) {
   if (oldUrl != newUrl && (oldUrl in this.renderCache_)) {
     this.renderCache_[newUrl] = this.renderCache_[oldUrl];
     delete this.renderCache_[oldUrl];
   }
 };