Gallery.app: Update the ribbon control when the item is inserted.

ui/file_manager/gallery/js/ribbon.js

 // Copyright 2014 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.
 
 'use strict';
 
 /**
  * Scrollable thumbnail ribbon at the bottom of the Gallery in the Slide mode.
  *
  * @param {Document} document Document.
@@ skipping 78 matching lines @@
   this.removeVanishing_();
   this.textContent = '';
 };
 
 /**
  * Data model splice handler.
  * @param {Event} event Event.
  * @private
  */
 Ribbon.prototype.onSplice_ = function(event) {
-  if (event.removed.length == 0)
-    return;
-
   if (event.removed.length > 1) {
-    console.error('Cannot remove multiple items');
+    console.error('Cannot remove multiple items.');
     return;
   }
 
+  if (event.removed.length > 0 && event.added.length > 0) {
+    console.error('Replacing is not implemented.');
+    return;
+  }
+
+  if (event.added.length > 0) {
+    for (var i = 0; i < event.added.length; i++) {
+      var index = this.dataModel_.indexOf(event.added[i]);
+      if (index === -1)
+        continue;
+      var element = this.renderThumbnail_(index);
+      var nextItem = this.dataModel_.item(index + 1);
+      var nextElement =
+          nextItem && this.renderCache_[nextItem.getEntry().toURL()];
+      this.insertBefore(element, nextElement);

[yoshiki, 2014/07/09 03:49:01]

if nextElement is null, it may fail.

[hirono, 2014/07/09 04:04:54]

The reference element can be null.
https://developer.mozilla.org/en/docs/Web/API/Node.insertBefore

+    }
+    return;
+  }
+
   var removed = this.renderCache_[event.removed[0].getEntry().toURL()];
   if (!removed || !removed.parentNode || !removed.hasAttribute('selected')) {
     console.error('Can only remove the selected item');
     return;
   }
 
   var persistentNodes = this.querySelectorAll('.ribbon-image:not([vanishing])');
   if (this.lastVisibleIndex_ < this.dataModel_.length) { // Not at the end.
     var lastNode = persistentNodes[persistentNodes.length - 1];
     if (lastNode.nextSibling) {
@@ skipping 36 matching lines @@
 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, length);
+  var fullItems = Math.min(Ribbon.ITEMS_COUNT, 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, length - 1);
   var firstIndex = lastIndex - fullItems + 1;
 
@@ skipping 60 matching lines @@
     ImageUtil.setClass(this, 'fade-right',
         lastIndex < length - 1 && selectedIndex != lastIndex);
 
     this.firstVisibleIndex_ = firstIndex;
     this.lastVisibleIndex_ = lastIndex;
 
     this.scheduleRemove_();
   }
 
   var oldSelected = this.querySelector('[selected]');
-  if (oldSelected) oldSelected.removeAttribute('selected');
+  if (oldSelected)
+    oldSelected.removeAttribute('selected');
 
   var newSelected =
       this.renderCache_[this.dataModel_.item(selectedIndex).getEntry().toURL()];
-  if (newSelected) newSelected.setAttribute('selected', true);
+  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_);
 
@@ skipping 97 matching lines @@
  * @param {string} oldUrl Old url.
  * @param {string} newUrl New url.
  * @private
  */
 Ribbon.prototype.remapCache_ = function(oldUrl, newUrl) {
   if (oldUrl != newUrl && (oldUrl in this.renderCache_)) {
     this.renderCache_[newUrl] = this.renderCache_[oldUrl];
     delete this.renderCache_[oldUrl];
   }
 };