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

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.
 
 /**
  * Image gallery for viewing and editing image files.
  *
  * @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);
 };
 
 // TODO(kaznacheev): localization.
 Gallery.displayStrings = {
   close: 'Close',
   edit: 'Edit',
   share: 'Share',
   autofix: 'Auto-fix',
   crop: 'Crop',
   exposure: 'Brightness / contrast',
   brightness: 'Brightness',
   contrast: 'Contrast',
   rotate: 'Rotate',
   undo: 'Undo'
 };
 
 
 Gallery.editorModes = [
   ImageEditor.Mode.InstantAutofix,
   ImageEditor.Mode.Crop,
   ImageEditor.Mode.Exposure,
   ImageEditor.Mode.InstantRotate
 ];
 
 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));
 
   this.closeButton_ = doc.createElement('div');
   this.closeButton_.className = 'close';
   this.closeButton_.textContent = Gallery.displayStrings['close'];
   this.closeButton_.addEventListener('click', this.onClose_.bind(this));
   this.container_.appendChild(this.closeButton_);
 
@@ skipping 15 matching lines @@
   this.editButton_ = doc.createElement('div');
   this.editButton_.className = 'button edit';
   this.editButton_.textContent = Gallery.displayStrings['edit'];
   this.editButton_.addEventListener('click', this.onEdit_.bind(this));
   this.toolbar_.appendChild(this.editButton_);
 
   this.shareButton_ = doc.createElement('div');
   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) {
+    this.toolbar_.appendChild(this.shareButton_);
+  }
 
   this.editBarMain_  = doc.createElement('div');
   this.editBarMain_.className = 'edit-main';
   this.editBarMain_.setAttribute('hidden', 'hidden');
   this.editBar_.appendChild(this.editBarMain_);
 
   this.editBarMode_  = doc.createElement('div');
   this.editBarMode_.className = 'edit-modal';
   this.editBarMode_.setAttribute('hidden', 'hidden');
   this.editBar_.appendChild(this.editBarMode_);
 
+  this.shareMenu_ = doc.createElement('div');
+  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);
+  }
+  if (shareActions.length > 0) {
+    this.container_.appendChild(this.shareMenu_);
+  }
+
   this.editor_ = new ImageEditor(
       this.imageContainer_,
       this.editBarMain_,
       this.editBarMode_,
       Gallery.editorModes,
       Gallery.displayStrings);
 };
 
 Gallery.prototype.load = function(parentDirEntry, urls) {
   this.editBar_.setAttribute('hidden', 'hidden');
   this.editBarMain_.setAttribute('hidden', 'hidden');
   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;
 
   // TODO(kaznacheev): instead of always selecting the 0-th url
   // select the url passed from the FileManager.
   this.ribbon_.load(urls, urls[0], this.metadataProvider_);
   this.parentDirEntry_ = parentDirEntry;
 
   this.initiateFading_();
@@ skipping 50 matching lines @@
       onError);
     }, onError);
   } else {
     // This branch is needed only for gallery_demo.js
     currentItem.onSaveSuccess(
         canvas.toDataURL(metadataEncoder.getMetadata().mimeType));
     if (opt_callback) opt_callback();
   }
 };
 
+Gallery.prototype.onActionExecute_ = function(action) {
+  var item = this.currentItem_;
+  if (item) {
+    this.onShare_();
+    this.saveChanges_(function() {
+      action.execute([item.getUrl()]);
+    });
+  }
+};
 
 Gallery.prototype.onClose_ = function() {
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
   this.saveChanges_(this.closeCallback_);
 };
 
 Gallery.prototype.onSelect_ = function(item) {
   if (this.currentItem_) {
     this.saveChanges_();
   }
 
   this.currentItem_ = item;
 
   this.editor_.load(this.currentItem_.getContent(),
                     ImageUtil.deepCopy(this.currentItem_.getMetadata()));
 };
 
 Gallery.prototype.onEdit_ = function(event) {
+  this.toolbar_.removeAttribute('hidden');
+
   var self = this;
   if (this.editing_) {
     this.editor_.onModeLeave();
     this.editBar_.setAttribute('hidden', 'hidden');
     this.editButton_.removeAttribute('pressed');
     this.editing_ = false;
     this.initiateFading_();
     window.setTimeout(function() {
       // Hide the toolbar, so it will not overlap with buttons.
       self.editBarMain_.setAttribute('hidden', 'hidden');
       self.ribbon_.redraw();
     }, 500);
   } else {
     this.cancelFading_();
     // Show the toolbar.
     this.editBarMain_.removeAttribute('hidden');
     // Use setTimeout, so computed style will be recomputed.
     window.setTimeout(function() {
       self.editBar_.removeAttribute('hidden');
       self.editButton_.setAttribute('pressed', 'pressed');
       self.editing_ = true;
       self.ribbon_.redraw();
     }, 0);
   }
 };
 
 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':
       this.ribbon_.scrollToFirst();
       break;
     case 'Left':
       this.ribbon_.scrollLeft();
       break;
     case 'Right':
       this.ribbon_.scrollRight();
       break;
     case 'End':
       this.ribbon_.scrollToLast();
       break;
   }
 };
 
 Gallery.prototype.onMouseMove_ = function(e) {
   this.cancelFading_();
   this.toolbar_.removeAttribute('hidden');
   this.initiateFading_();
 };
 
 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(
       this.onFadeTimeoutBound_, Gallery.FADE_TIMEOUT);
 };
 
 Gallery.prototype.cancelFading_ = function() {
   if (this.fadeTimeoutId_) {
     window.clearTimeout(this.fadeTimeoutId_);
     this.fadeTimeoutId_ = null;
@@ skipping 124 matching lines @@
   this.box_.addEventListener('click', selectClosure.bind(null, this));
   this.box_.appendChild(this.img_);
 
   this.original_ = true;
 };
 
 Ribbon.Item.prototype.getBox = function () { return this.box_ };
 
 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');
   else
     this.box_.removeAttribute('selected');
 };
 
 // TODO: Localize?
 Ribbon.Item.COPY_SIGNATURE = '_Edited_';
 
@@ skipping 86 matching lines @@
       metadata.imageTransform;
 
   this.box_.style.webkitTransform = transform ?
       ('scaleX(' + transform.scaleX + ') ' +
       'scaleY(' + transform.scaleY + ') ' +
       'rotate(' + transform.rotate90 * 90 + 'deg)') :
       '';
 
   this.img_.setAttribute('src', metadata.thumbnailURL || this.url_);
 };