Init

js/file2/file.css

@@ -0,0 +1,103 @@
+/*.fileinput-btn
+{
+	color:#000; 
+	font-size: 13px;
+line-height: 20px; 
+	background:#f5f5f5; 
+	line-height:11px;
+	padding:1px 3px 5px 3px;
+	border:1px solid #f5f5f5; 
+	font-family: 'Arial'; 
+	cursor:pointer;
+	border-radius: 0;
+	margin-left: 10px;
+	text-shadow: none;
+	border-radius: 4px;
+	border-width: 1px;
+border-style: solid;
+border-color: #CCC #CCC #B3B3B3;
+padding: 4px 12px;
+}
+
+.fileinput-btn:hover
+{
+	background-color:#f5f5f5; 
+	border:1px solid #000;
+}
+*/
+  
+.fileinput-btn {
+	position: relative;
+	overflow: hidden;
+	margin-top: 10px;
+	background: #2b2d8f;
+	text-shadow: none;
+	padding: 6px 20px;
+	height: auto;
+}
+
+.fileinput-btn:hover{
+	background: #5254a3;
+}
+
+.fileinput-btn input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  opacity: 0;
+  -ms-filter: 'alpha(opacity=0)';
+  font-size: 200px;
+  direction: ltr;
+  cursor: pointer;
+}
+
+/* Fixes for IE < 8 */
+@media screen\9 {
+  .fileinput-btn input {
+    filter: alpha(opacity=0);
+    font-size: 100%;
+    height: 100%;
+  }
+}
+
+.sx-form-preview {
+	float: left;
+	margin-right: 5px;
+	position: relative;
+}
+
+.sx-form-preview .sx-remove-photo {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	
+}
+
+.sx-form-preview .sx-move-photo {
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	border: 1px solid #fff;
+	background: rgba(250,250,250,.4);
+}
+
+.sx-form-preview .sx-move-photo:hover {
+	background: rgba(250,250,250,.7);
+	cursor: move;
+}
+
+.sx-form-preview .sx-move-photo img {
+	width: 20px;
+	height: 20px;
+}
+
+.well {
+	    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+        border-radius: 4px;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}

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();
+            }
+        });
+    }
+
+	
+	
+}