OLD | NEW |
---|---|
(Empty) | |
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 function Gallery(parentNode) { | |
6 this.parentNode_ = parentNode; | |
7 this.document_ = parentNode.ownerDocument; | |
8 | |
9 // The DOM element from the parent which had focus before we were displayed, | |
10 // so we can restore it when we're hidden. | |
11 this.previousActiveElement_ = null; | |
12 | |
13 // Entry corresponding to file being edited. | |
14 this.entry_ = null; | |
15 | |
16 this.initDom_(); | |
17 } | |
18 | |
19 // Anonymous "namespace". | |
20 (function() { | |
21 // TODO(dgozman): localization. | |
22 Gallery.CLOSE_LABEL = 'Close'; | |
23 Gallery.EDIT_LABEL = 'Edit'; | |
24 | |
25 Gallery.prototype.initDom_ = function() { | |
26 var doc = this.document_; | |
27 this.container_ = doc.createElement('div'); | |
28 this.container_.className = 'gallery-container'; | |
29 | |
30 this.closeButton_ = doc.createElement('div'); | |
31 this.closeButton_.className = 'gallery-close'; | |
32 this.closeButton_.textContent = Gallery.CLOSE_LABEL; | |
33 this.closeButton_.addEventListener('click', this.hide.bind(this)); | |
34 this.container_.appendChild(this.closeButton_); | |
35 | |
36 this.imageContainer_ = doc.createElement('div'); | |
37 this.imageContainer_.className = 'gallery-image-container'; | |
38 this.container_.appendChild(this.imageContainer_); | |
39 | |
40 // TODO(dgozman): introduce separate ribbon control. | |
41 this.ribbon_ = doc.createElement('div'); | |
42 this.ribbon_.className = 'gallery-ribbon'; | |
43 this.container_.appendChild(this.ribbon_); | |
44 | |
45 this.toolbar_ = doc.createElement('div'); | |
46 this.toolbar_.className = 'gallery-toolbar'; | |
47 this.container_.appendChild(this.toolbar_); | |
48 | |
49 this.toolsContainer_ = doc.createElement('div'); | |
50 this.toolsContainer_.className = 'gallery-tools-container'; | |
51 this.toolsContainer_.style.display = 'none'; | |
52 this.toolbar_.appendChild(this.toolsContainer_); | |
53 | |
54 this.editButton_ = doc.createElement('div'); | |
55 this.editButton_.className = 'gallery-edit'; | |
56 this.editButton_.textContent = Gallery.EDIT_LABEL; | |
57 this.editButton_.addEventListener('click', this.onEdit_.bind(this)); | |
58 this.toolbar_.appendChild(this.editButton_); | |
59 | |
60 this.editor_ = new ImageEditor(this.imageContainer_, | |
61 this.onSave_.bind(this), null /*closeCallback*/, this.toolsContainer_); | |
62 this.imageContainer_.addEventListener('resize', | |
63 this.editor_.resizeFrame.bind(this.editor_)); | |
64 }; | |
65 | |
66 Gallery.prototype.show = function(parentDirEntry, entries) { | |
67 this.toolsContainer_.style.display = 'none'; | |
68 | |
69 while (this.ribbon_.hasChildNodes()) | |
70 this.ribbon_.removeChild(this.ribbon_.lastChild); | |
71 for (var index = 0; index < entries.length; ++index) { | |
72 var img = this.document_.createElement('img'); | |
73 img.setAttribute('src', entries[index].toURL()); | |
74 img.className = 'gallery-ribbon-image'; | |
75 img.addEventListener('click', | |
76 this.onRibbonImageClick_.bind(this, entries[index])); | |
77 this.ribbon_.appendChild(img); | |
78 } | |
79 | |
80 this.previousActiveElement_ = this.document_.activeElement; | |
81 this.parentNode_.appendChild(this.container_); | |
82 this.container_.style.opacity = '1'; | |
83 | |
84 this.parentDirEntry_ = parentDirEntry; | |
85 if (entries.length == 0) | |
86 return; | |
87 | |
88 this.entry_ = entries[0]; | |
89 this.editor_.load(entries[0].toURL()); | |
90 this.editor_.resizeFrame(); | |
91 }; | |
92 | |
93 Gallery.prototype.hide = function() { | |
94 this.container_.style.opacity = '0'; | |
95 this.parentNode_.removeChild(this.container_); | |
96 if (this.previousActiveElement_) { | |
zel
2011/09/02 17:11:58
nit: no need for {}
dgozman
2011/09/06 14:18:47
Done.
| |
97 this.previousActiveElement_.focus(); | |
98 } else { | |
99 this.document_.body.focus(); | |
100 } | |
101 }; | |
102 | |
103 Gallery.prototype.onSave_ = function(blob) { | |
104 var name = this.entry_.name; | |
105 var ext = ''; | |
106 var index = name.lastIndexOf('.'); | |
107 if (index != -1) { | |
108 ext = name.substr(index); | |
109 name = name.substr(0, index); | |
110 } | |
111 var now = new Date(); | |
112 // TODO(dgozman): better name format. | |
113 name = name + '_Edited_' + now.getFullYear() + '_' + | |
114 (now.getMonth() + 1) + '_' + now.getDate() + '_' + | |
115 now.getHours() + '_' + now.getMinutes() + ext; | |
116 | |
117 function onError(error) { | |
118 console.log('Error saving from gallery: "' + name + '"'); | |
119 console.log(error); | |
120 } | |
121 | |
122 // TODO(dgozman): Check for existence. | |
123 this.parentDirEntry_.getFile( | |
124 name, {create: true, exclusive: true}, function(fileEntry) { | |
125 fileEntry.createWriter(function(fileWriter) { | |
126 fileWriter.onerror = onError; | |
127 fileWriter.onwritened = function() { | |
128 console.log('Saving from gallery succeeded: "' + name + '"'); | |
129 }; | |
130 fileWriter.write(blob); | |
131 }, onError); | |
132 }, onError); | |
133 }; | |
134 | |
135 Gallery.prototype.onRibbonImageClick_ = function(entry) { | |
136 this.entry_ = entry; | |
137 this.editor_.load(entry.toURL()); | |
138 }; | |
139 | |
140 Gallery.prototype.onEdit_ = function(event) { | |
141 // TODO(dgozman): nice animation. | |
142 if (this.toolsContainer_.style.display == 'none') { | |
143 var width = Math.round(this.container_.clientWidth * 0.8); | |
144 this.toolsContainer_.style.width = width + 'px'; | |
145 this.toolsContainer_.style.display = 'block'; | |
146 } else { | |
147 this.toolsContainer_.style.display = 'none'; | |
148 } | |
149 }; | |
150 })(); | |
OLD | NEW |