1 
  2 var YDrawed={
  3 	"_abstract":function(){
  4 		this.canvas=0,this.context=0,this.url=0;
  5 		this.makeurl=function(size){
  6 			this.canvas		= YDom.create('canvas',{width:size[0],height:size[1]});
  7 			this.context	= this.canvas.getContext('2d');
  8 			this.draw(size);
  9 			this.url		= this.canvas.toDataURL();
 10 			document.body.appendChild(this.canvas);
 11 			return this.url;
 12 		};
 13 		this.draw=function(size){
 14 			// draw code here
 15 		};
 16 	},
 17 	"checker":function(rgb1,rgb2){
 18 		YDrawed["_abstract"].call(this);
 19 		this.draw=function(size){
 20 			for(var x=0;x<2;x++){
 21 				for(var y=0;y<2;y++){
 22 					this.context.beginPath();
 23 					this.context.rect(size[0]*0.5*x,size[1]*0.5*y, size[0]*0.5, size[1]*0.5);
 24 					this.context.fillStyle = "rgb("+((x+y)%2==0?rgb1:rgb2)+")";
 25 					this.context.fill();
 26 				}
 27 			}
 28 		};
 29 	}
 30 };
 31 //alert(chkrbg);
 32 //
 33 var YFileDrop=function(onDropLoad,requesturl){
 34 	var scope=this;
 35 	this.previews	= [];
 36 	var tests = {
 37 	  "FileReader API"	: typeof FileReader != 'undefined',
 38 	  "dnd"				: 'draggable' in document.createElement('span'),
 39 	  "XHR2 formdata"	: !!window.FormData
 40 //	  "XHR2 progress"	: "upload" in new XMLHttpRequest
 41 	};
 42 	var acceptedTypes = {
 43 	  'image/png'		: true,
 44 	  'image/jpeg'		: true,
 45 	  'image/gif'		: true,
 46 	  'image/svg+xml'	: true,
 47 	  'application/rar'	: true,
 48 	  'application/x-shockwave-flash'	: true,
 49 	  'text/php'		: true,
 50 	  'text/css'		: true,
 51 	  'flash/fla'		: true,
 52 	  'application/x-javascript'	: true
 53 	};
 54 	for(var i in YMime.types){
 55 		acceptedTypes[YMime.types[i]]=true;
 56 	}
 57 	this.acceptOnly = function(str,enable){
 58 		this.accept("all",!enable);
 59 		this.accept(str,enable);
 60 	};
 61 	this.accept = function(str,enable){
 62 		for(var i in acceptedTypes){
 63 			if(str=="all"){
 64 				acceptedTypes[i]=enable;
 65 			}else if(str.split("/").length>1){
 66 				if(str==i)acceptedTypes[i]=enable;
 67 			}else{
 68 				if(i.split("/")[0]==str||i.split("/")[1]==str)
 69 					acceptedTypes[i]=enable;
 70 			}
 71 		}
 72 	};
 73 	// ----------------------------------------------------------------------------------------------------
 74 	var on_drop_load=function(preview){
 75 		scope.previews.push(preview);
 76 		if(typeof(onDropLoad)=="function")onDropLoad(preview);
 77 	};
 78 	var file_type=function(file){
 79 		if(file.type.length)return file.type;
 80 		var ext=file.name.split(".").pop().toLowerCase();
 81 		for(var type in acceptedTypes){
 82 			if(type.split("/")[1]==ext)return type;
 83 		}
 84 		return 'undefined/undefined';
 85 	};
 86 	// ----------------------------------------------------------------------------------------------------
 87 	var uploaded_pile=[];
 88 	var uploading_pile=[];
 89 	var upload_flush=function(preview){
 90 		if(typeof(requesturl)=="string"){
 91 			var line = {
 92 				preview		: preview,
 93 				uploaded	: false,
 94 				uploading	: false,
 95 				formData	: new FormData(),
 96 				xhr			: new XMLHttpRequest(),
 97 				flushme		: function(){
 98 					this.formData.append('file', this.preview.file);
 99 					this.xhr.open('POST', requesturl);
100 					this.xhr.send(this.formData);
101 				}
102 			};
103 			line.xhr.onload = function() {
104 				uploading_pile[0].preview.onuploaded(this.responseText);
105 				
106 				uploaded_pile.push(uploading_pile.pop());
107 				if(uploading_pile.length>0)uploading_pile[0].flushme();
108 				//onuploaded
109 			};
110 			if("upload" in new XMLHttpRequest){
111 				line.xhr.upload.onprogress = function(event) {
112 					if (event.lengthComputable) {
113 						var perc = event.loaded / event.total;
114 					//	var complete = (event.loaded / event.total * 100 | 0);
115 						uploading_pile[0].preview.onuploaded(perc);
116 					}
117 				};
118 			}
119 			uploading_pile.push(line);
120 			if(uploading_pile==1)line.flushme();
121 			
122 		}
123 	};
124 	// ----------------------------------------------------------------------------------------------------
125 	var ondrag	= {
126 		ondragover	: function () { ; return false; },
127 		ondragend	: function () { ; return false; },
128 		ondrop		: function (e) {
129 			e.preventDefault();
130 			readfiles(e.dataTransfer.files,this);
131 		}
132 	};
133 	function readfiles(files,droptarget) {
134 		for (var i = 0; i < files.length; i++) {
135 		//	alert(objToStr(files[i],0,2));
136 		//	alert(file_type(files[i]));
137 			if(acceptedTypes[YMime.fileType(files[i])] === true){
138 				
139 				if(scope.Preview[YMime.fileType(files[i]).split("/")[0]]){
140 					new scope.Preview[YMime.fileType(files[i]).split("/")[0]](files[i],droptarget);
141 				}else{
142 					new scope.Preview['file'](files[i],droptarget);
143 				}
144 			}
145 		}
146 	};
147 	// ----------------------------------------------------------------------------------------------------
148 	this.PreviewAbstract	= function(file,droptarget){
149 		var pfscope		= this;
150 		this.file		= file;
151 		this.target		= droptarget;
152 		this.type		= YMime.fileType(file);
153 		this.mime		= this.type.split("/")[0];
154 		this.onload		= function(result){};
155 		this.onupload	= function(percent){};
156 		this.onuploaded	= function(response){};
157 		this.data		= null;
158 		this.result		= null;
159 		var on_after_load=function on_after_load(result){
160 			pfscope.result	= result;
161 			pfscope.onload(result);
162 			on_drop_load(pfscope);
163 		}
164 		var on_load=function on_load(result){
165 			pfscope.data = result;
166 			if(pfscope.mime=="text"||pfscope.type=="application/x-javascript"){
167 				var xhr = new XMLHttpRequest();
168 				xhr.onload = function() {	on_after_load(this.responseText);	};
169 				xhr.open('POST', result);
170 				xhr.send(null);
171 			}else if(pfscope.mime=="video"){//audio
172 				
173 				var video = YDom.create('video',{autoplay:false,controls:"controls"},[]);
174 				video.src		= result;
175 				video.type	= pfscope.type;
176 				video.load();
177 				video.oncanplay = function() {		};
178 				on_after_load(video);
179 				
180 			}else if(pfscope.mime=="image"){
181 				var image = new Image();
182 				image.onload = function() {	on_after_load(this);	};
183 				image.src = result;
184 			}else{
185 				on_after_load(result);
186 			}
187 			upload_flush(pfscope);
188 		};
189 		var reader = new FileReader();
190 		reader.onload = function onreaderload(event) {	on_load( event.target.result);	};
191 		reader.readAsDataURL(file);
192 	};
193 	this.Preview={
194 		file	: function(file,droptarget){
195 			scope.PreviewAbstract.call(this,file,droptarget);
196 			var name = YDom.create('div',{innerHTML:file.name});
197 			var text = YDom.create('div',{});
198 			var label = YDom.create('div',{innerHTML:""+this.type+" ("+file.size+" octets)"});
199 			this.dom = YDom.create('div',{},[name,text,label]);
200 			this.onload=function(result){
201 				result=result+"";
202 				var str = result.length>100?result.substr(0,100)+" ...":result;
203 				text.innerHTML=str.split("<").join("<").split(">").join(">");
204 			};
205 		},
206 		text	: function(file,droptarget){
207 			scope.PreviewAbstract.call(this,file,droptarget);
208 			var name = YDom.create('div',{innerHTML:file.name});
209 			var text = YDom.create('div',{});
210 			var label = YDom.create('div',{innerHTML:""+this.type+" ("+file.size+" octets)"});
211 			this.dom = YDom.create('div',{},[name,text,label]);
212 			this.onload=function(result){
213 				var str = result.length>100?result.substr(0,100)+" ...":result;
214 				text.innerHTML=str.split("<").join("<").split(">").join(">");
215 			};
216 		},
217 		image	: function(file,droptarget){
218 			scope.PreviewAbstract.call(this,file,droptarget);
219 			var name = YDom.create('div',{innerHTML:file.name});
220 			this.dom = YDom.create('div',{},[name]);
221 			this.onload=function(image){
222 				var label = YDom.create('div',{innerHTML:"["+image.width+","+image.height+"]<br/>"+
223 								this.type+" ("+file.size+" octets)"});
224 				this.dom.appendChild(YDom.create('div',{},[image]));
225 				this.dom.appendChild(label);
226 			};
227 		}
228 	};
229 	this.Preview['video']=this.Preview['image'];
230 	// ----------------------------------------------------------------------------------------------------
231 	this.addTarget=function(target){
232 		if(typeof(target)=="string")target=document.getElementById(target);
233 		for(var i in ondrag)target[i]=ondrag[i];
234 	};
235 	this.test=function(){
236 //		var ok = true;for(var i in tests)if(i!="dnd")ok=ok&&tests[i];return ok;
237 		var ok = true;for(var i in tests)ok=ok&&tests[i];return ok;
238 	};
239 };
240 
241 // ----------------------------------------------------------------------------------------------------
242 // requires YFileDrop.js
243 var YDropGallery=function(className){
244 	var scope			= this;
245 	this.sortmode		= "sorted";// none name sorted
246 	this.dom			= YDom.create('div',{className:className});
247 	this.previewList	= [];
248 	var dropppers	= [];
249 	
250 	var chkr = new YDrawed.checker([255,255,255],[220,220,220]);
251 	var chkrbg = "url("+chkr.makeurl([8,8])+")";
252 
253 	var add_dropper = function(){
254 		var inter = YDom.create('div',{className:className+"_drop"});
255 		scope.dom.appendChild(inter);
256 		dropppers.push(inter);
257 		if(scope.previewList.length==0)inter.style.width="100%";
258 		scope.FD.addTarget(inter);
259 	};
260 	var refresh_dom=function(){
261 		//preview.target
262 		scope.dom.innerHTML="";
263 		if(scope.sortmode=="sorted"){
264 			dropppers=[];add_dropper();
265 		}
266 	//	alert("length "+scope.previewList.length);
267 		for(var i in scope.previewList){
268 			var node = scope.previewList[i].dom;
269 			node.childNodes[1].style.backgroundImage=chkrbg;
270 			node.className=className+"_block";
271 			scope.dom.appendChild(node);
272 			if(scope.sortmode=="sorted"){	add_dropper();	}
273 		}
274 	};
275 	var on_drop_load=function(preview){
276 		var indx=0;for(indx in dropppers)if(dropppers[indx]==preview.target)break;
277 		if(indx==dropppers.length)scope.previewList.push(preview);
278 		else scope.previewList.splice(indx,0,preview);
279 	//	alert("odl "+indx+" "+scope.previewList.length);
280 		refresh_dom();
281 		//preview.target
282 	};
283 	this.FD = new YFileDrop(on_drop_load,null);
284 	refresh_dom();
285 };