AtomicOld/feedback/js/feedback.js

var feedback = {
	
	maxImages: 5,
	images: [],
	id: 0,
	
	init: function(){
		var self = this;		
		
		$('#f_form').submit(function(){ self.submit(); return false; });
		self.initImages();
		$('#f_images').on('click','.f-image-remove', function(){
			self.removeImage(this);
		});
		$('.fileinput-btn').attr('disabled', false);
		$('#f_submit_btn').attr('disabled', false);
		$('#f_form input').val('');
		$('#f_form textarea').val('');
	},
	
	submit: function(){
		var self = this;
		$('#f_form .f-error').hide();
		var post = this.getFormData(); 

		if(post.name.length < 3) return $('#f_name_error').show();
		if(post.text.length < 10) return $('#f_text_error').show();
		
		$('#f_submit_btn').html('<i class="fa fa-spin fa-refresh"></i> Отправка...').attr('disabled', true);
		
		post.images = self.images.length;
		$.post('/feedback/save.php', post, function(id){
			self.id = id;
			self.saveImages().done(function(){
				$('#f_form').remove();
				$('#f_success').show();
				$('body,html').animate({
					scrollTop: 0
				}, 800);
			});
		});
	},
	
	
	
	getFormData: function(){
		var i, data, post = {};
		data = $('#f_form').serializeArray();
		for(i in data) post[data[i].name] = data[i].value;
		return post;
	},
	
	saveImages: function(dfd){
		var i, flag = true, self = this;
		dfd = dfd || $.Deferred();
		for(i in self.images){ //console.log(self.images[i])
			if(self.images[i].uploaded) continue;
			flag = false;
			self.images[i].uploaded = true;
			self.images[i].formData.id = self.id;
				self.images[i].submit().done(function(){			
				self.saveImages(dfd);
			});
			break;
		}
		if(flag) dfd.resolve();
		return dfd.promise();
	},
	
	initImages: function(){
		var self = this;
		$('.fileinput-btn').fileupload({
			url: '/feedback/uploader.php',
			autoUpload: false,
			acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
			maxFileSize: 10000000,
	        previewMaxWidth: 112,
	        previewMaxHeight: 112,
	        disableImageResize: false,
	        imageMaxWidth: 1024,
    		imageMaxHeight: 1024,
	        previewCrop: true,
	        formData: {}
		}).on('fileuploadadd', function (e, data) {

		}).on('fileuploadprocessalways', function (e, data) {
			self.imgReady(data);
		});
		$('.fileinput-btn').bind('fileuploaddone',function(e, data){ 
			//self.uploaded(data.result);
		});
	},
	
	imgReady: function(data){
		if(this.images.length >= this.maxImages) return this.disableImages();
		var id = this.images.length;
		var div = $('<div class="f-preview" style="display:none" data-id="'+id+'"/>');
		div.append(data.files[0].preview);
		div.append('<div><button type="button" class="btn btn-danger btn-xs f-image-remove" data-id="'+id+'"><b>X</b></button></div>');
		$('#f_images').append(div);
		div.fadeIn('fast');
		data.div = div;
		data.uploaded = false;
		this.images.push(data);
		if(this.images.length >= this.maxImages) this.disableImages();
	},
	
	disableImages: function(){
		$('.fileinput-btn').attr('disabled', true);
	},
	
	removeImage: function(btn){
		var i, imgs = [], id = $(btn).attr('data-id'), self = this;
		for(i in this.images){ 
			if(i == id) continue;
				imgs.push(this.images[i]);
				this.images[i].div.attr('data-id', imgs.length-1);
				this.images[i].div.find('.f-image-remove').attr('data-id', imgs.length-1);
		}
		this.images[id].div.fadeOut('fast', function(){
			self.images[id].div.remove();
			self.images = imgs;
		});
		
		$('.fileinput-btn').attr('disabled', false);
	}
}

$(function(){ feedback.init(); });