[filebrowser] Enable sharing in gallery. For now, show all image-related extensions as 'Sharing'.

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

Index: chrome/browser/resources/file_manager/js/image_editor/gallery.js
===================================================================
--- chrome/browser/resources/file_manager/js/image_editor/gallery.js	(revision 102703)
+++ chrome/browser/resources/file_manager/js/image_editor/gallery.js	(working copy)
@@ -8,24 +8,27 @@
  * @param {HTMLDivElement} container
  * @param {function} closeCallback
  * @param {MetadataProvider} metadataProvider
+ * @param {Array.<Object>} shareActions
  */
-function Gallery(container, closeCallback, metadataProvider) {
+function Gallery(container, closeCallback, metadataProvider, shareActions) {
   this.container_ = container;
   this.document_ = container.ownerDocument;
   this.editing_ = false;
+  this.sharing_ = false;
   this.closeCallback_ = closeCallback;
   this.metadataProvider_ = metadataProvider;
   this.onFadeTimeoutBound_ = this.onFadeTimeout_.bind(this);
   this.fadeTimeoutId_ = null;
 
-  this.initDom_();
+  this.initDom_(shareActions);
 }
 
 Gallery.open = function(
-    parentDirEntry, urls, closeCallback, metadataProvider) {
+    parentDirEntry, urls, closeCallback, metadataProvider, shareActions) {
   var container = document.querySelector('.gallery');
   container.innerHTML = '';
-  var gallery = new Gallery(container, closeCallback, metadataProvider);
+  var gallery = new Gallery(container, closeCallback, metadataProvider,
+      shareActions);
   gallery.load(parentDirEntry, urls);
 };
 
@@ -53,7 +56,7 @@
 
 Gallery.FADE_TIMEOUT = 5000;
 
-Gallery.prototype.initDom_ = function() {
+Gallery.prototype.initDom_ = function(shareActions) {
   var doc = this.document_;
   this.container_.addEventListener('keydown', this.onKeyDown_.bind(this));
   this.container_.addEventListener('mousemove', this.onMouseMove_.bind(this));
@@ -89,7 +92,9 @@
   this.shareButton_.className = 'button share';
   this.shareButton_.textContent = Gallery.displayStrings['share'];
   this.shareButton_.addEventListener('click', this.onShare_.bind(this));
-  this.toolbar_.appendChild(this.shareButton_);
+  if (shareActions.length > 0) {

[Vladislav Kaznacheev, 2011/09/27 08:31:07]

Why not hide everything the above 4 lines behind the condition?

[dgozman, 2011/09/27 12:36:28]

this.shareButton_ is referenced through the code, and I don't want to add checks
there. So, it's created here, but not shown.

+    this.toolbar_.appendChild(this.shareButton_);
+  }
 
   this.editBarMain_  = doc.createElement('div');
   this.editBarMain_.className = 'edit-main';
@@ -101,6 +106,21 @@
   this.editBarMode_.setAttribute('hidden', 'hidden');
   this.editBar_.appendChild(this.editBarMode_);
 
+  this.shareMenu_ = doc.createElement('div');

[Vladislav Kaznacheev, 2011/09/27 08:31:07]

Why create a menu if shareActions is empty?

[dgozman, 2011/09/27 12:36:28]

Same as for shareButton. However, I guard appending it to container with the
same array length check.

+  this.shareMenu_.className = 'share-menu';
+  this.shareMenu_.setAttribute('hidden', 'hidden');
+  for (var index = 0; index < shareActions.length; index++) {
+    var action = shareActions[index];
+    var row = doc.createElement('div');
+    var img = doc.createElement('img');
+    img.src = action.iconUrl;
+    row.appendChild(img);
+    row.appendChild(doc.createTextNode(action.title));
+    row.addEventListener('click', this.onActionExecute_.bind(this, action));
+    this.shareMenu_.appendChild(row);
+  }
+  this.container_.appendChild(this.shareMenu_);
+
   this.editor_ = new ImageEditor(
       this.imageContainer_,
       this.editBarMain_,
@@ -115,7 +135,9 @@
   this.editButton_.removeAttribute('pressed');
   this.shareButton_.removeAttribute('pressed');
   this.toolbar_.removeAttribute('hidden');
+  this.shareMenu_.setAttribute('hidden', 'hidden');
   this.editing_ = false;
+  this.sharing_ = false;
 
   if (urls.length == 0)
     return;
@@ -186,6 +208,13 @@
   }
 };
 
+Gallery.prototype.onActionExecute_ = function(action) {
+  var item = this.currentItem_;
+  if (item) {
+    action.execute([item.getUrl()]);

[Vladislav Kaznacheev, 2011/09/27 08:31:07]

This would not work if the item has been edited but not saved. 
getUrl will give you you the old (pre-edit) url. You need to call saveChanges_
and invoke the action from the completion callback.

[dgozman, 2011/09/27 12:36:28]

Done.

+    this.onShare_();
+  }
+};
 
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
@@ -204,6 +233,8 @@
 };
 
 Gallery.prototype.onEdit_ = function(event) {
+  this.toolbar_.removeAttribute('hidden');
+
   var self = this;
   if (this.editing_) {
     this.editor_.onModeLeave();
@@ -231,11 +262,18 @@
 };
 
 Gallery.prototype.onShare_ = function(event) {
-  // TODO(dgozman): implement.
+  this.toolbar_.removeAttribute('hidden');
+
+  if (this.sharing_) {
+    this.shareMenu_.setAttribute('hidden', 'hidden');
+  } else {
+    this.shareMenu_.removeAttribute('hidden');
+  }
+  this.sharing_ = !this.sharing_;
 };
 
 Gallery.prototype.onKeyDown_ = function(event) {
-  if (this.editing_)
+  if (this.editing_ || this.sharing_)
     return;
   switch (event.keyIdentifier) {
     case 'Home':
@@ -261,11 +299,12 @@
 
 Gallery.prototype.onFadeTimeout_ = function() {
   this.fadeTimeoutId_ = null;
+  if (this.editing_ || this.sharing_) return;
   this.toolbar_.setAttribute('hidden', 'hidden');
 };
 
 Gallery.prototype.initiateFading_ = function() {
-  if (this.editing_ || this.fadeTimeoutId_) {
+  if (this.editing_ || this.sharing_ || this.fadeTimeoutId_) {
     return;
   }
   this.fadeTimeoutId_ = window.setTimeout(
@@ -410,6 +449,8 @@
 
 Ribbon.Item.prototype.isOriginal = function () { return this.original_ };
 
+Ribbon.Item.prototype.getUrl = function () { return this.url_ };
+
 Ribbon.Item.prototype.select = function(on) {
   if (on)
     this.box_.setAttribute('selected', 'selected');