Init

feedback/js/feedback.js

@@ -0,0 +1,129 @@
+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(); });