Init

js/file2/file.js

@@ -0,0 +1,122 @@
+sxFormFile = function(){
+	
+	var self = this;
+	var url = '';
+	
+	this.init = function(article_id, url){
+
+		this.article_id = article_id;
+		
+		this.url = url || '/simpla/ajax/file.php';
+
+		this.$input = $('#art-files-input');
+		this.$filesDiv = $('.sx-form-images');
+		this.initFiles();		
+
+		this.$filesDiv.on('click', '.sx-form-image-remove', function(){
+			self.removeFile($(this).attr('data-id'));
+		});
+		
+		this.setFilesSortable();
+
+	}
+	
+	this.saveFiles = function(dfd){
+		var i, flag = true;
+		dfd = dfd || $.Deferred();
+		for(i=0;i<self.files.length;++i){
+			if(self.files[i].uploaded) continue;
+			flag = false;
+			self.files[i].uploaded = true;
+			self.files[i].formData.id = i;
+				self.files[i].submit().done(function(){			
+				self.saveFiles(dfd);
+			});
+			break;
+		}
+		if(flag) dfd.resolve();
+		return dfd.promise();
+	}
+	
+	this.initFiles = function(){
+		
+		this.$input.fileupload({
+			url: self.url,
+			autoUpload: true,
+			acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+			maxFileSize: 10000000,
+	        previewMaxWidth: 120,
+	        previewMaxHeight: 120,
+	        disableImageResize: false,
+	        imageMaxWidth: 1600,
+    		imageMaxHeight: 1600,
+	        previewCrop: true,
+	        formData: {article_id: self.article_id}
+		}).on('fileuploadadd', function (e, data) {
+
+		}).on('fileuploadprocessalways', function (e, data, x) {
+			self.fileReady(data);
+			
+		});
+		this.$input.bind('fileuploaddone',function(e, data){
+			$('.sx-form-images [data-id='+data.files[0]._id+']').attr('data-id', data.result);
+			self.reorder();
+			self.setFilesSortable();
+		});
+	}
+	
+	this.fileReady = function(data){
+
+		if(data.files[0].error) return;
+
+		if(!data._id) data._id = data.files[0]._id = Math.floor(Math.random() * 100000);;
+		this.getPreview(data.files[0]).done(function(img){
+			var div = $('<div title="'+data.files[0].name+'" class="sx-form-preview" style="display:none" data-id="'+data._id+'"/>');
+			div.append(img);
+			div.append('<div class="sx-move-photo"><img src="/images/move.png"></div>');		
+			div.append('<div class="sx-remove-photo"><button type="button" class="btn btn-danger btn-xs sx-form-image-remove" data-id="'+data._id+'"><b>X</b></button></div>');
+			self.$filesDiv.append(div);
+			div.fadeIn('fast');
+			data.div = div; 
+			data.uploaded = false;
+			
+		});
+	}
+	
+	this.reorder = function(){
+		var ids = [];
+		this.$filesDiv.find('.sx-form-preview').each(function(){
+			ids.push( $(this).attr('data-id') );
+		});
+		$.post(this.url, {action: 'reorder', ids: ids});
+	}
+	
+	this.getPreview = function(file){
+		var dfd = $.Deferred();
+		dfd.resolve(file.preview);                             
+		return dfd.promise();
+	}
+
+	
+	this.removeFile = function(id){
+		$('.sx-form-preview[data-id='+id+']').fadeOut('fast', function(){
+			$('.sx-form-preview[data-id='+id+']').remove();
+		});
+		$.post(this.url, {action: 'remove', id: id});
+	}
+	
+	
+	this.setFilesSortable = function(){
+        this.$filesDiv.sortable({
+            handle: '.sx-move-photo',
+            cursor: "move",
+            items: '.sx-form-preview',
+            stop: (event, ui) => {
+                self.reorder();
+            }
+        });
+    }
+
+	
+	
+}