122 lines
3.1 KiB
JavaScript
122 lines
3.1 KiB
JavaScript
|
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();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|