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'; |
+ } |
+ }; |
+})(); |