[filebrowser] First step to image editor.

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

Index: chrome/browser/resources/file_manager/js/gallery.js
===================================================================
--- chrome/browser/resources/file_manager/js/gallery.js	(revision 0)
+++ chrome/browser/resources/file_manager/js/gallery.js	(revision 0)
@@ -0,0 +1,150 @@
+// 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.
+
+function Gallery(parentNode) {
+  this.parentNode_ = parentNode;
+  this.document_ = parentNode.ownerDocument;
+
+  // The DOM element from the parent which had focus before we were displayed,
+  // so we can restore it when we're hidden.
+  this.previousActiveElement_ = null;
+
+  // Entry corresponding to file being edited.
+  this.entry_ = null;
+
+  this.initDom_();
+}
+
+// Anonymous "namespace".
+(function() {
+  // TODO(dgozman): localization.
+  Gallery.CLOSE_LABEL = 'Close';
+  Gallery.EDIT_LABEL = 'Edit';
+
+  Gallery.prototype.initDom_ = function() {
+    var doc = this.document_;
+    this.container_ = doc.createElement('div');
+    this.container_.className = 'gallery-container';
+
+    this.closeButton_ = doc.createElement('div');
+    this.closeButton_.className = 'gallery-close';
+    this.closeButton_.textContent = Gallery.CLOSE_LABEL;
+    this.closeButton_.addEventListener('click', this.hide.bind(this));
+    this.container_.appendChild(this.closeButton_);
+
+    this.imageContainer_ = doc.createElement('div');
+    this.imageContainer_.className = 'gallery-image-container';
+    this.container_.appendChild(this.imageContainer_);
+
+    // TODO(dgozman): introduce separate ribbon control.
+    this.ribbon_ = doc.createElement('div');
+    this.ribbon_.className = 'gallery-ribbon';
+    this.container_.appendChild(this.ribbon_);
+
+    this.toolbar_ = doc.createElement('div');
+    this.toolbar_.className = 'gallery-toolbar';
+    this.container_.appendChild(this.toolbar_);
+
+    this.toolsContainer_ = doc.createElement('div');
+    this.toolsContainer_.className = 'gallery-tools-container';
+    this.toolsContainer_.style.display = 'none';
+    this.toolbar_.appendChild(this.toolsContainer_);
+
+    this.editButton_ = doc.createElement('div');
+    this.editButton_.className = 'gallery-edit';
+    this.editButton_.textContent = Gallery.EDIT_LABEL;
+    this.editButton_.addEventListener('click', this.onEdit_.bind(this));
+    this.toolbar_.appendChild(this.editButton_);
+
+    this.editor_ = new ImageEditor(this.imageContainer_,
+        this.onSave_.bind(this), null /*closeCallback*/, this.toolsContainer_);
+    this.imageContainer_.addEventListener('resize',
+        this.editor_.resizeFrame.bind(this.editor_));
+  };
+
+  Gallery.prototype.show = function(parentDirEntry, entries) {
+    this.toolsContainer_.style.display = 'none';
+
+    while (this.ribbon_.hasChildNodes())
+      this.ribbon_.removeChild(this.ribbon_.lastChild);
+    for (var index = 0; index < entries.length; ++index) {
+      var img = this.document_.createElement('img');
+      img.setAttribute('src', entries[index].toURL());
+      img.className = 'gallery-ribbon-image';
+      img.addEventListener('click',
+          this.onRibbonImageClick_.bind(this, entries[index]));
+      this.ribbon_.appendChild(img);
+    }
+
+    this.previousActiveElement_ = this.document_.activeElement;
+    this.parentNode_.appendChild(this.container_);
+    this.container_.style.opacity = '1';
+
+    this.parentDirEntry_ = parentDirEntry;
+    if (entries.length == 0)
+      return;
+
+    this.entry_ = entries[0];
+    this.editor_.load(entries[0].toURL());
+    this.editor_.resizeFrame();
+  };
+
+  Gallery.prototype.hide = function() {
+    this.container_.style.opacity = '0';
+    this.parentNode_.removeChild(this.container_);
+    if (this.previousActiveElement_) {

[zel, 2011/09/02 17:11:58]

nit: no need for {}

[dgozman, 2011/09/06 14:18:47]

Done.

+      this.previousActiveElement_.focus();
+    } else {
+      this.document_.body.focus();
+    }
+  };
+
+  Gallery.prototype.onSave_ = function(blob) {
+    var name = this.entry_.name;
+    var ext = '';
+    var index = name.lastIndexOf('.');
+    if (index != -1) {
+      ext = name.substr(index);
+      name = name.substr(0, index);
+    }
+    var now = new Date();
+    // TODO(dgozman): better name format.
+    name = name + '_Edited_' + now.getFullYear() + '_' +
+        (now.getMonth() + 1) + '_' + now.getDate() + '_' +
+        now.getHours() + '_' + now.getMinutes() + ext;
+
+    function onError(error) {
+      console.log('Error saving from gallery: "' + name + '"');
+      console.log(error);
+    }
+
+    // TODO(dgozman): Check for existence.
+    this.parentDirEntry_.getFile(
+        name, {create: true, exclusive: true}, function(fileEntry) {
+      fileEntry.createWriter(function(fileWriter) {
+        fileWriter.onerror = onError;
+        fileWriter.onwritened = function() {
+          console.log('Saving from gallery succeeded: "' + name + '"');
+        };
+        fileWriter.write(blob);
+      }, onError);
+    }, onError);
+  };
+
+  Gallery.prototype.onRibbonImageClick_ = function(entry) {
+    this.entry_ = entry;
+    this.editor_.load(entry.toURL());
+  };
+
+  Gallery.prototype.onEdit_ = function(event) {
+    // TODO(dgozman): nice animation.
+    if (this.toolsContainer_.style.display == 'none') {
+      var width = Math.round(this.container_.clientWidth * 0.8);
+      this.toolsContainer_.style.width = width + 'px';
+      this.toolsContainer_.style.display = 'block';
+    } else {
+      this.toolsContainer_.style.display = 'none';
+    }
+  };
+})();