rlm@3
|
1 /*
|
rlm@3
|
2 Script: Uploader.js
|
rlm@3
|
3 MooTools FileManager - Implements Upload functionality into the FileManager based on [FancyUpload](http://digitarald.de)
|
rlm@3
|
4
|
rlm@3
|
5 License:
|
rlm@3
|
6 MIT-style license.
|
rlm@3
|
7
|
rlm@3
|
8 Copyright:
|
rlm@3
|
9 Copyright (c) 2009 [Christoph Pojer](http://og5.net/christoph).
|
rlm@3
|
10
|
rlm@3
|
11 Dependencies:
|
rlm@3
|
12 - FileManager.js
|
rlm@3
|
13
|
rlm@3
|
14 Options:
|
rlm@3
|
15 - upload: (boolean, defaults to *true*)
|
rlm@3
|
16 - uploadAuthData: (object) Data to be send with the GET-Request of an Upload as Flash ignores authenticated clients
|
rlm@3
|
17 - resizeImages: (boolean, defaults to *true*) Whether to show the option to resize big images or not
|
rlm@3
|
18 */
|
rlm@3
|
19
|
rlm@3
|
20 FileManager.implement({
|
rlm@3
|
21
|
rlm@3
|
22 options: {
|
rlm@3
|
23 resizeImages: false,
|
rlm@3
|
24 upload: true,
|
rlm@3
|
25 uploadAuthData: {}
|
rlm@3
|
26 },
|
rlm@3
|
27
|
rlm@3
|
28 hooks: {
|
rlm@3
|
29 show: {
|
rlm@3
|
30 upload: function(){
|
rlm@3
|
31 this.startUpload();
|
rlm@3
|
32 }
|
rlm@3
|
33 },
|
rlm@3
|
34
|
rlm@3
|
35 cleanup: {
|
rlm@3
|
36 upload: function(){
|
rlm@3
|
37 if(!this.options.upload || !this.upload) return;
|
rlm@3
|
38
|
rlm@3
|
39 if(this.upload.uploader) this.upload.uploader.set('opacity', 0).dispose();
|
rlm@3
|
40 }
|
rlm@3
|
41 }
|
rlm@3
|
42 },
|
rlm@3
|
43
|
rlm@3
|
44 onDialogOpen: function(){
|
rlm@3
|
45 if(this.swf && this.swf.box) this.swf.box.setStyle('visibility', 'hidden');
|
rlm@3
|
46 },
|
rlm@3
|
47
|
rlm@3
|
48 onDialogClose: function(){
|
rlm@3
|
49 if(this.swf && this.swf.box) this.swf.box.setStyle('visibility', 'visible');
|
rlm@3
|
50 },
|
rlm@3
|
51
|
rlm@3
|
52 startUpload: function(){
|
rlm@3
|
53 if(!this.options.upload || this.swf) return;
|
rlm@3
|
54
|
rlm@3
|
55 var self = this;
|
rlm@3
|
56 this.upload = {
|
rlm@3
|
57 button: this.addMenuButton('upload').addEvents({
|
rlm@3
|
58 click: function(){
|
rlm@3
|
59 return false;
|
rlm@3
|
60 },
|
rlm@3
|
61 mouseenter: function(){
|
rlm@3
|
62 this.addClass('hover');
|
rlm@3
|
63 },
|
rlm@3
|
64 mouseleave: function(){
|
rlm@3
|
65 this.removeClass('hover');
|
rlm@3
|
66 this.blur();
|
rlm@3
|
67 },
|
rlm@3
|
68 mousedown: function(){
|
rlm@3
|
69 this.focus();
|
rlm@3
|
70 }
|
rlm@3
|
71 }),
|
rlm@3
|
72 list: new Element('ul', {'class': 'filemanager-uploader-list'}),
|
rlm@3
|
73 uploader: new Element('div', {opacity: 0}).adopt(
|
rlm@3
|
74 new Element('h2', {text: this.language.upload}),
|
rlm@3
|
75 new Element('div', {'class': 'filemanager-uploader'})
|
rlm@3
|
76 )
|
rlm@3
|
77 };
|
rlm@3
|
78 this.upload.uploader.getElement('div').adopt(this.upload.list);
|
rlm@3
|
79 this.closeIcon.appearOn(this.upload.button, 0.8);
|
rlm@3
|
80
|
rlm@3
|
81 if(this.options.resizeImages){
|
rlm@3
|
82 var resizer = new Element('div', {'class': 'checkbox'}),
|
rlm@3
|
83 check = (function(){ this.toggleClass('checkboxChecked'); }).bind(resizer);
|
rlm@3
|
84 check();
|
rlm@3
|
85 this.upload.label = new Element('label').adopt(
|
rlm@3
|
86 resizer, new Element('span', {text: this.language.resizeImages})
|
rlm@3
|
87 ).addEvent('click', check).inject(this.menu);
|
rlm@3
|
88 }
|
rlm@3
|
89
|
rlm@3
|
90 var File = new Class({
|
rlm@3
|
91
|
rlm@3
|
92 Extends: Swiff.Uploader.File,
|
rlm@3
|
93
|
rlm@3
|
94 initialize: function(base, data){
|
rlm@3
|
95 this.parent(base, data);
|
rlm@3
|
96 this.setOptions({
|
rlm@3
|
97 url: self.options.url+'?'+Hash.toQueryString($merge({}, self.options.uploadAuthData, {
|
rlm@3
|
98 event: 'upload',
|
rlm@3
|
99 directory: self.normalize(self.Directory),
|
rlm@3
|
100 resize: self.options.resizeImages && resizer.hasClass('checkboxChecked') ? 1 : 0
|
rlm@3
|
101 }))
|
rlm@3
|
102 });
|
rlm@3
|
103 },
|
rlm@3
|
104
|
rlm@3
|
105 render: function(){
|
rlm@3
|
106 if(this.invalid){
|
rlm@3
|
107 var message = self.language.uploader.unknown, sub = {
|
rlm@3
|
108 name: this.name,
|
rlm@3
|
109 size: Swiff.Uploader.formatUnit(this.size, 'b')
|
rlm@3
|
110 };
|
rlm@3
|
111
|
rlm@3
|
112 if(self.language.uploader[this.validationError])
|
rlm@3
|
113 message = self.language.uploader[this.validationError];
|
rlm@3
|
114
|
rlm@3
|
115 if(this.validationError=='sizeLimitMin')
|
rlm@3
|
116 sub.size_min = Swiff.Uploader.formatUnit(this.base.options.fileSizeMin, 'b');
|
rlm@3
|
117 else if(this.validationError=='sizeLimitMax')
|
rlm@3
|
118 sub.size_max = Swiff.Uploader.formatUnit(this.base.options.fileSizeMax, 'b');
|
rlm@3
|
119
|
rlm@3
|
120 new Dialog(new Element('div', {html: message.substitute(sub, /\\?\$\{([^{}]+)\}/g)}) , {language: {confirm: self.language.ok}, buttons: ['confirm']});
|
rlm@3
|
121 return this;
|
rlm@3
|
122 }
|
rlm@3
|
123
|
rlm@3
|
124 this.addEvents({
|
rlm@3
|
125 open: this.onOpen,
|
rlm@3
|
126 remove: this.onRemove,
|
rlm@3
|
127 requeue: this.onRequeue,
|
rlm@3
|
128 progress: this.onProgress,
|
rlm@3
|
129 stop: this.onStop,
|
rlm@3
|
130 complete: this.onComplete
|
rlm@3
|
131 });
|
rlm@3
|
132
|
rlm@3
|
133 this.ui = {};
|
rlm@3
|
134 this.ui.icon = new Asset.image(self.options.assetBasePath+'Icons/'+this.extension+'.png', {
|
rlm@3
|
135 onerror: function(){ new Asset.image(self.options.assetBasePath+'Icons/default.png').replaces(this); }
|
rlm@3
|
136 });
|
rlm@3
|
137 this.ui.element = new Element('li', {'class': 'file', id: 'file-' + this.id});
|
rlm@3
|
138 this.ui.title = new Element('span', {'class': 'file-title', text: this.name});
|
rlm@3
|
139 this.ui.size = new Element('span', {'class': 'file-size', text: Swiff.Uploader.formatUnit(this.size, 'b')});
|
rlm@3
|
140
|
rlm@3
|
141 var tips, file = this;
|
rlm@3
|
142 this.ui.cancel = new Asset.image(self.options.assetBasePath+'cancel.png', {'class': 'file-cancel', title: self.language.cancel}).addEvent('click', function(){
|
rlm@3
|
143 file.remove();
|
rlm@3
|
144 tips.hide();
|
rlm@3
|
145 tips.detach(this);
|
rlm@3
|
146 });
|
rlm@3
|
147 tips = new FileManager.Tips(this.ui.cancel);
|
rlm@3
|
148
|
rlm@3
|
149 var progress = new Element('img', {'class': 'file-progress', src: self.options.assetBasePath+'bar.gif'});
|
rlm@3
|
150
|
rlm@3
|
151 this.ui.element.adopt(
|
rlm@3
|
152 this.ui.cancel,
|
rlm@3
|
153 progress,
|
rlm@3
|
154 this.ui.icon,
|
rlm@3
|
155 this.ui.title,
|
rlm@3
|
156 this.ui.size
|
rlm@3
|
157 ).inject(self.upload.list).highlight();
|
rlm@3
|
158
|
rlm@3
|
159 this.ui.progress = new Fx.ProgressBar(progress).set(0);
|
rlm@3
|
160
|
rlm@3
|
161 this.base.reposition();
|
rlm@3
|
162
|
rlm@3
|
163 return this.parent();
|
rlm@3
|
164 },
|
rlm@3
|
165
|
rlm@3
|
166 onOpen: function(){
|
rlm@3
|
167 this.ui.element.addClass('file-running');
|
rlm@3
|
168 },
|
rlm@3
|
169
|
rlm@3
|
170 onRemove: function(){
|
rlm@3
|
171 this.ui = this.ui.element.destroy();
|
rlm@3
|
172 },
|
rlm@3
|
173
|
rlm@3
|
174 onProgress: function(){
|
rlm@3
|
175 this.ui.progress.start(this.progress.percentLoaded);
|
rlm@3
|
176 },
|
rlm@3
|
177
|
rlm@3
|
178 onStop: function(){
|
rlm@3
|
179 this.remove();
|
rlm@3
|
180 },
|
rlm@3
|
181
|
rlm@3
|
182 onComplete: function(){
|
rlm@3
|
183 this.ui.progress = this.ui.progress.cancel().element.destroy();
|
rlm@3
|
184 this.ui.cancel = this.ui.cancel.destroy();
|
rlm@3
|
185
|
rlm@3
|
186 var response = JSON.decode(this.response.text);
|
rlm@3
|
187 if(!response.status)
|
rlm@3
|
188 new Dialog((''+response.error).substitute(self.language, /\\?\$\{([^{}]+)\}/g) , {language: {confirm: self.language.ok}, buttons: ['confirm']});
|
rlm@3
|
189
|
rlm@3
|
190 this.ui.element.set('tween', {duration: 2000}).highlight(response.status ? '#e6efc2' : '#f0c2c2');
|
rlm@3
|
191 (function(){
|
rlm@3
|
192 this.ui.element.setStyle('overflow', 'hidden').morph({
|
rlm@3
|
193 opacity: 0,
|
rlm@3
|
194 height: 0
|
rlm@3
|
195 }).get('morph').chain(function(){
|
rlm@3
|
196 this.element.destroy();
|
rlm@3
|
197 if(!self.upload.list.getElements('li').length)
|
rlm@3
|
198 self.upload.uploader.fade(0).get('tween').chain(function(){
|
rlm@3
|
199 self.fillInfo();
|
rlm@3
|
200 });
|
rlm@3
|
201 });
|
rlm@3
|
202 }).delay(5000, this);
|
rlm@3
|
203 }
|
rlm@3
|
204
|
rlm@3
|
205 });
|
rlm@3
|
206
|
rlm@3
|
207 this.swf = new Swiff.Uploader({
|
rlm@3
|
208 id: 'SwiffFileManagerUpload',
|
rlm@3
|
209 path: this.options.assetBasePath+'Swiff.Uploader.swf',
|
rlm@3
|
210 queued: false,
|
rlm@3
|
211 target: this.upload.button,
|
rlm@3
|
212 allowDuplicates: true,
|
rlm@3
|
213 instantStart: true,
|
rlm@3
|
214 fileClass: File,
|
rlm@3
|
215 fileSizeMax: 25 * 1024 * 1024,
|
rlm@3
|
216 onBrowse: function(){},
|
rlm@3
|
217 onCancel: function(){},
|
rlm@3
|
218 zIndex: this.SwiffZIndex || 9999,
|
rlm@3
|
219 onSelectSuccess: function(){
|
rlm@3
|
220 self.fillInfo();
|
rlm@3
|
221 self.info.getElement('h2.filemanager-headline').setStyle('display', 'none');
|
rlm@3
|
222 self.preview.adopt(self.upload.uploader);
|
rlm@3
|
223 self.upload.uploader.fade(1);
|
rlm@3
|
224 },
|
rlm@3
|
225 onComplete: function(){
|
rlm@3
|
226 self.load(self.Directory, true);
|
rlm@3
|
227 },
|
rlm@3
|
228 onFail: function(error){
|
rlm@3
|
229 $$(self.upload.button, self.upload.label).dispose();
|
rlm@3
|
230 new Dialog(new Element('div', {html: self.language.flash[error] || self.language.flash.flash}), {language: {confirm: self.language.ok}, buttons: ['confirm']});
|
rlm@3
|
231 }
|
rlm@3
|
232 });
|
rlm@3
|
233 }
|
rlm@3
|
234
|
rlm@3
|
235 }); |