[filebrowser] Support renaming in Gallery.

chrome/browser/resources/file_manager/js/image_editor/gallery.js

 // Copyright (c) 2011 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.
 
 /*
  * Base class that Ribbon uses to display photos.
  */
 
 function RibbonClient() {}
 
@@ skipping 19 matching lines @@
   this.closeCallback_ = closeCallback;
   this.metadataProvider_ = metadataProvider;
 
   this.displayStringFunction_ = function(id) {
     return displayStringFunction('GALLERY_' + id.toUpperCase());
   };
 
   this.onFadeTimeoutBound_ = this.onFadeTimeout_.bind(this);
   this.fadeTimeoutId_ = null;
   this.mouseOverTool_ = false;
+  this.imageChanges_ = 0;
 
   this.initDom_(shareActions);
 }
 
 Gallery.prototype = { __proto__: RibbonClient.prototype };
 
 Gallery.open = function(parentDirEntry, items, selectedItem,
    closeCallback, metadataProvider, shareActions, displayStringFunction) {
   var container = document.querySelector('.gallery');
   container.innerHTML = '';
@@ skipping 39 matching lines @@
   this.container_.appendChild(this.closeButton_);
 
   this.imageContainer_ = doc.createElement('div');
   this.imageContainer_.className = 'image-container';
   this.container_.appendChild(this.imageContainer_);
 
   this.toolbar_ = doc.createElement('div');
   this.toolbar_.className = 'toolbar tool dimmable';
   this.container_.appendChild(this.toolbar_);
 
+  var filenameSpacer = doc.createElement('div');
+  filenameSpacer.className = 'filename-spacer';
+  this.toolbar_.appendChild(filenameSpacer);
+
+  this.filenameEdit_ = doc.createElement('input');
+  this.filenameEdit_.setAttribute('type', 'text');
+  this.filenameEdit_.addEventListener('blur',
+      this.updateFilename_.bind(this));
+  this.filenameEdit_.addEventListener('keydown',
+      this.onFilenameEditKeydown_.bind(this));
+  filenameSpacer.appendChild(this.filenameEdit_);
+
   this.ribbonSpacer_ = doc.createElement('div');
   this.ribbonSpacer_.className = 'ribbon-spacer';
   this.toolbar_.appendChild(this.ribbonSpacer_);
 
   this.arrowBox_ = this.document_.createElement('div');
   this.arrowBox_.className = 'arrow-box';
   this.container_.appendChild(this.arrowBox_);
 
   this.arrowLeft_ = this.document_.createElement('div');
   this.arrowLeft_.className = 'arrow left tool dimmable';
@@ skipping 37 matching lines @@
 
   this.editor_ = new ImageEditor(
       this.container_,
       this.imageContainer_,
       this.editBarMain_,
       this.editBarModeWrapper_,
       Gallery.editorModes,
       this.displayStringFunction_);
 
   this.imageView_ = this.editor_.getImageView();
+  this.imageView_.addContentCallback(this.onImageContentChanged_.bind(this));
 
   this.editor_.trackWindow(doc.defaultView);
 
   if (shareActions.length > 0) {
     this.shareMode_ = new ShareMode(
         this.container_, this.toolbar_, shareActions,
         this.onShare_.bind(this), this.onActionExecute_.bind(this),
         this.displayStringFunction_);
 
   } else {
@@ skipping 39 matching lines @@
   function initRibbon() {
     self.ribbon_.load(urls, selectedIndex);
     // Flash the ribbon briefly to let the user know it is there.
     self.cancelFading_();
     self.initiateFading_(Gallery.FIRST_FADE_TIMEOUT);
   }
 
   var selectedURL = urls[selectedIndex];
   // Initialize the ribbon only after the selected image is fully loaded.
   this.metadataProvider_.fetch(selectedURL, function (metadata) {
+    // The first change is load, we should not count it.
+    self.imageChanges_ = -1;
+    self.filenameEdit_.value = ImageUtil.getFileNameFromUrl(selectedURL);
     self.editor_.openSession(
         selectedIndex, selectedURL, metadata, 0, initRibbon);
   });
 };
 
+Gallery.prototype.onImageContentChanged_ = function() {
+  this.imageChanges_++;
+  if (this.imageChanges_ == 1)
+    this.ribbon_.getSelectedItem().setCopyName();
+  this.updateFilename_();
+};
+
 Gallery.prototype.saveItem_ = function(item, callback, canvas, modified) {
   if (modified) {
     item.save(
         this.parentDirEntry_, this.metadataProvider_, canvas, callback);
   } else {
     if (callback) callback();
   }
 };
 
 Gallery.prototype.saveChanges_ = function(opt_callback) {
+  this.imageChanges_ = 0;
   this.editor_.requestImage(
       this.saveItem_.bind(this, this.ribbon_.getSelectedItem(), opt_callback));
 };
 
 Gallery.prototype.onActionExecute_ = function(action) {
   var url = this.ribbon_.getSelectedItem().getUrl();
   // saveChanges_ makes the editor leave the mode and close the sharing menu.
   this.saveChanges_(action.execute.bind(action, [url]));
 };
 
+Gallery.prototype.updateFilename_ = function() {
+  var item = this.ribbon_.getSelectedItem();
+  if (!item)
+    return;
+
+  var fullName = item.getCopyName() ||
+      ImageUtil.getFullNameFromUrl(item.getUrl());
+  this.filenameEdit_.value = ImageUtil.getFileNameFromFullName(fullName);
+};
+
+Gallery.prototype.onFilenameEditKeydown_ = function() {
+  switch (event.keyCode) {
+    case 27:  // Escape
+      this.filenameEdit_.blur();
+      break;
+
+    case 13:  // Enter
+      if (this.filenameEdit_.value) {
+        this.renameItem_(this.ribbon_.getSelectedItem(),
+            this.filenameEdit_.value);
+        this.filenameEdit_.blur();
+      }
+      break;
+  }
+  event.stopPropagation();
+};
+
+Gallery.prototype.renameItem_ = function(item, name) {
+  var dir = this.parentDirEntry_;
+  var self = this;
+  var newName;
+
+  if (this.imageChanges_ > 0) {
+    // We are editing the file.
+    newName = ImageUtil.replaceFileNameInFullName(
+        item.getCopyName(), name);
+  } else {
+    newName = ImageUtil.replaceFileNameInFullName(
+        ImageUtil.getFullNameFromUrl(item.getUrl()), name);
+  }
+
+  function onError() {
+    console.log('Rename error: "' +
+        ImageUtil.getFullNameFromUrl(item.getUrl()) + '" to "' + name + '"');
+  }
+
+  function onSuccess(entry) {
+    item.setUrl(entry.toURL());
+    self.updateFilename_();
+  }
+
+  function doRename() {
+    if (self.imageChanges_ > 0) {
+      // User this name in the next save operation.
+      item.setCopyName(newName);
+      self.updateFilename_();
+    } else {
+      // Rename file in place.
+      dir.getFile(
+          ImageUtil.getFullNameFromUrl(item.getUrl()),
+          {create: false},
+          function(entry) { entry.moveTo(dir, newName, onSuccess, onError); },
+          onError);
+    }
+  }
+
+  function onVictimFound(victim) {
+    self.editor_.getPrompt().show('file_exists', 3000);
+  }
+
+  dir.getFile(newName, {create: false, exclusive: false},
+      onVictimFound, doRename);
+};
+
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
   this.saveChanges_(this.closeCallback_);
 };
 
 Gallery.prototype.prefetchImage = function(id, content, metadata) {
   this.editor_.prefetchImage(id, content, metadata);
 };
 
 Gallery.prototype.openImage = function(id, content, metadata, slide, callback) {
+  // The first change is load, we should not count it.
+  this.imageChanges_ = -1;
+  this.updateFilename_();
   this.editor_.openSession(id, content, metadata, slide, callback);
 };
 
 Gallery.prototype.closeImage = function(item) {
   this.editor_.closeSession(this.saveItem_.bind(this, item, null));
 };
 
 Gallery.prototype.isEditing_ = function() {
   return this.container_.hasAttribute('editing');
 };
@@ skipping 117 matching lines @@
  * @param {MetadataProvider} metadataProvider
  * @param {HTMLElement} arrowLeft
  * @param {HTMLElement} arrowRight
  */
 function Ribbon(container, client, metadataProvider, arrowLeft, arrowRight) {
   this.container_ = container;
   this.document_ = container.ownerDocument;
   this.client_ = client;
   this.metadataProvider_ = metadataProvider;
 
+  this.items_ = [];
+  this.selectedIndex_ = -1;
+
   this.arrowLeft_ = arrowLeft;
   this.arrowLeft_.
       addEventListener('click', this.selectNext.bind(this, -1, null));
 
   this.arrowRight_ = arrowRight;
   this.arrowRight_.
       addEventListener('click', this.selectNext.bind(this, 1, null));
 
   this.fadeLeft_ = this.document_.createElement('div');
   this.fadeLeft_.className = 'fade left';
@@ skipping 274 matching lines @@
 
     var img = document.createElement('img');
     wrapper.appendChild(img);
 
     this.boxes_.push(box);
     this.wrappers_.push(wrapper);
     this.imgs_.push(img);
   }
 
   this.original_ = true;
+  this.copyName_ = null;
 };
 
 Ribbon.Item.prototype.getIndex = function () { return this.index_ };
 
 Ribbon.Item.prototype.getBox = function (index) { return this.boxes_[index] };
 
 Ribbon.Item.prototype.isOriginal = function () { return this.original_ };
 
 Ribbon.Item.prototype.getUrl = function () { return this.url_ };
+Ribbon.Item.prototype.setUrl = function (url) { this.url_ = url };
+
+Ribbon.Item.prototype.getCopyName = function () { return this.copyName_ };
 
 Ribbon.Item.prototype.isSelected = function() {
   return this.boxes_[0].hasAttribute('selected');
 };
 
 Ribbon.Item.prototype.select = function(on) {
   for (var i = 0; i < 2; i++) {
     ImageUtil.setAttribute(this.boxes_[i], 'selected', on);
   }
 };
@@ skipping 18 matching lines @@
 
   if (!dirEntry) {  // Happens only in gallery_demo.js
     self.onSaveSuccess(
         window.webkitURL.createObjectURL(
             ImageEncoder.getBlob(canvas, metadataEncoder)));
     if (opt_callback) opt_callback();
     return;
   }
 
   var newFile = this.isOriginal();
-  var name = this.getCopyName();
+  var name = this.copyName_;
+  this.original_ = false;
+  this.copyName_ = '';
 
   function onSuccess(url) {
     console.log('Saved from gallery', name);
     // Force the metadata provider to reread the metadata from the file.
     metadataProvider.reset(url);
     self.onSaveSuccess(url);
     if (opt_callback) opt_callback();
   }
 
   function onError(error) {
@@ skipping 15 matching lines @@
           } else {
             fileWriter.onwriteend = writeContent;
             fileWriter.truncate(0);
           }
         },
     onError);
   }, onError);
 };
 
 // TODO: Localize?
-Ribbon.Item.COPY_SIGNATURE = '_Edited_';
+Ribbon.Item.COPY_SIGNATURE = 'Copy of ';
 
-Ribbon.Item.prototype.getCopyName = function () {
+Ribbon.Item.prototype.createCopyName_ = function () {
   // When saving a modified image we never overwrite the original file (the one
   // that existed prior to opening the Gallery. Instead we save to a file named
   // <original-name>_Edited_<date-stamp>.<original extension>.
 
   var name = this.url_.substr(this.url_.lastIndexOf('/') + 1);
 
   // If the item represents a file created during the current Gallery session
   // we reuse it for subsequent saves instead of creating multiple copies.
   if (!this.original_)
     return name;
 
-  this.original_ = false;
-
   var ext = '';
   var index = name.lastIndexOf('.');
   if (index != -1) {
     ext = name.substr(index);
     name = name.substr(0, index);
   }
-  var signaturePos = name.indexOf(Ribbon.Item.COPY_SIGNATURE);
-  if (signaturePos >= 0) {
-    // The file is likely to be a copy created during a previous session.
-    // Replace the signature instead of appending a new one.
-    name = name.substr(0, signaturePos);
+
+  if (name.indexOf(Ribbon.Item.COPY_SIGNATURE) == 0) {
+    // TODO(dgozman): add a number to form 'Copy (X) of File.jpg'.
+    name = name.substr(Ribbon.Item.COPY_SIGNATURE.length);
   }
 
   var mimeType = this.metadata_.mimeType.toLowerCase();
   if (mimeType != 'image/jpeg') {
     // Chrome can natively encode only two formats: JPEG and PNG.
     // All non-JPEG images are saved in PNG, hence forcing the file extension.
     if (mimeType == 'image/png') {
       ext = '.png';
     } else {
       // All non-JPEG images get 'image/png' mimeType (see
       // ImageEncoder.MetadataEncoder constructor).
       // This code can be reached only if someone has added a metadata parser
       // for a format other than JPEG or PNG. The message below is to remind
       // that one must also come up with the way to encode the image data.
       console.error('Image encoding for ' + mimeType + ' is not supported');
     }
   }
 
-  function twoDigits(n) { return (n < 10 ? '0' : '' ) + n }
+  return Ribbon.Item.COPY_SIGNATURE + name + ext;
+};
 
-  var now = new Date();
-
-  // Datestamp the copy with YYYYMMDD_HHMMSS (similar to what many cameras do)
-  return name +
-      Ribbon.Item.COPY_SIGNATURE +
-      now.getFullYear() +
-      twoDigits(now.getMonth() + 1) +
-      twoDigits(now.getDate()) +
-      '_' +
-      twoDigits(now.getHours()) +
-      twoDigits(now.getMinutes()) +
-      twoDigits(now.getSeconds()) +
-      ext;
+Ribbon.Item.prototype.setCopyName = function(opt_name) {
+  if (opt_name) {
+    this.copyName_ = opt_name;
+  } else {
+    this.copyName_ = this.createCopyName_();
+  }
 };
 
 // The url and metadata stored in the item are not valid while the modified
 // image is being saved. Use the results of the latest edit instead.
 
 Ribbon.Item.prototype.overrideContent = function(canvas, metadata) {
   this.canvas_ = canvas;
   this.backupMetadata_ = this.metadata_;
   this.setMetadata(metadata);
 };
@@ skipping 142 matching lines @@
 ShareMode.prototype.setUp = function() {
   ImageEditor.Mode.prototype.setUp.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', false);
   ImageUtil.setAttribute(this.button_, 'pressed', false);
 };
 
 ShareMode.prototype.cleanUpUI = function() {
   ImageEditor.Mode.prototype.cleanUpUI.apply(this, arguments);
   ImageUtil.setAttribute(this.menu_, 'hidden', true);
 };