mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-22 07:56:16 +08:00
152 lines
4.6 KiB
Plaintext
152 lines
4.6 KiB
Plaintext
|
(function(global) {
|
||
|
'use strict';
|
||
|
|
||
|
global.DragNDrop = (function() {
|
||
|
var droppedFiles = [];
|
||
|
var filesValid = true;
|
||
|
var totalSize = 0;
|
||
|
|
||
|
function init(files, action) {
|
||
|
for(var i = 0; i < files.length; i++) {
|
||
|
droppedFiles.push(files[i]);
|
||
|
}
|
||
|
if(action === 'select') {
|
||
|
listItems();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// return the status of files if they are ready to submit
|
||
|
function filesStatus() {
|
||
|
return filesValid;
|
||
|
}
|
||
|
|
||
|
// loops through a list of files and display each file in a separate panel
|
||
|
function listItems() {
|
||
|
$('.panel-step-attachment-new').remove();
|
||
|
_dragNdropAssetsOff();
|
||
|
for(var i = 0; i < droppedFiles.length; i++) {
|
||
|
$('#new-step-assets')
|
||
|
.append(_uploadedAseetPreview(droppedFiles[i], i))
|
||
|
.promise()
|
||
|
.done(function() {
|
||
|
_removeItemHandler(i);
|
||
|
});
|
||
|
}
|
||
|
_validateTotalSize();
|
||
|
dragNdropAssetsInit();
|
||
|
}
|
||
|
|
||
|
// appent the files to the form before submit
|
||
|
function appendFilesToForm(ev) {
|
||
|
var regex = /step\[assets_attributes\]\[[0-9]*\]\[id\]/;
|
||
|
var prevEls = $('input').filter(function() {
|
||
|
return this.name.match(regex);
|
||
|
});
|
||
|
|
||
|
var fd = new FormData($(ev.target).closest('form').get(0));
|
||
|
for(var i = 0; i < droppedFiles.length; i++) {
|
||
|
var index = i + prevEls.length;
|
||
|
var name = 'step[assets_attributes][' + index + '][file]';
|
||
|
fd.append(name, droppedFiles[i]);
|
||
|
}
|
||
|
droppedFiles = [];
|
||
|
filesValid = true;
|
||
|
totalSize = 0;
|
||
|
_dragNdropAssetsOff();
|
||
|
return fd;
|
||
|
}
|
||
|
|
||
|
function _validateFilesSize(file) {
|
||
|
if((file.size/1048576) > <%= Constants::FILE_MAX_SIZE_MB %> && filesValid) {
|
||
|
return "<p><%= I18n.t 'general.file.size_exceeded', file_size: Constants::FILE_MAX_SIZE_MB %></p>";
|
||
|
}
|
||
|
totalSize += parseInt(file.size/1048576);
|
||
|
return '';
|
||
|
}
|
||
|
|
||
|
function _validateTotalSize() {
|
||
|
if(totalSize > <%= Constants::FILE_MAX_SIZE_MB %>) {
|
||
|
filesValid = false;
|
||
|
$.each($('.panel-step-attachment-new'), function() {
|
||
|
$(this)
|
||
|
.find('.panel-body')
|
||
|
.append("<p class='dnd-error'><%= I18n.t('general.file.total_size', size: Constants::FILE_MAX_SIZE_MB) %></p>");
|
||
|
});
|
||
|
} else {
|
||
|
$('.dnd-error').remove();
|
||
|
filesValid = true;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function _uploadedAseetPreview(asset, i) {
|
||
|
var html = '<div class="panel panel-default panel-step-attachment-new">';
|
||
|
html += '<div class="panel-heading">';
|
||
|
html += '<span class="glyphicon glyphicon-file"></span>';
|
||
|
html += 'File';
|
||
|
html += '<div class="pull-right">';
|
||
|
html += '<a data-item-id="' + i + '" href="#">';
|
||
|
html += '<span class="glyphicon glyphicon-remove"></span></a></div></div>';
|
||
|
html += '<div class="panel-body">';
|
||
|
html += '<label class="control-label">';
|
||
|
html += '<%= I18n.t 'assets.drag_n_drop.file_label' %></label> ';
|
||
|
html += truncateLongString(asset.name,
|
||
|
<%= Constants::FILENAME_TRUNCATION_LENGTH %>);
|
||
|
html += _validateFilesSize(asset);
|
||
|
html += '</div></div>';
|
||
|
return html;
|
||
|
}
|
||
|
|
||
|
function _removeItemHandler(id) {
|
||
|
$('[data-item-id="' + id +'"]').off('click').on('click', function(e) {
|
||
|
e.preventDefault();
|
||
|
e.stopImmediatePropagation();
|
||
|
e.stopPropagation();
|
||
|
var $el = $(this);
|
||
|
var index = $el.data('item-id');
|
||
|
totalSize -= parseInt(droppedFiles[index]/1048576);
|
||
|
droppedFiles.splice(parseInt(index), 1);
|
||
|
$el.closest('.panel-step-attachment-new').remove();
|
||
|
_validateTotalSize();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function _dragNdropAssetsOff() {
|
||
|
$('body').off('drag dragstart dragend dragover dragenter dragleave drop');
|
||
|
$('.is-dragover').hide();
|
||
|
}
|
||
|
|
||
|
return Object.freeze({
|
||
|
init: init,
|
||
|
appendFilesToForm: appendFilesToForm,
|
||
|
listItems: listItems,
|
||
|
filesStatus: filesStatus
|
||
|
})
|
||
|
})();
|
||
|
|
||
|
global.dragNdropAssetsInit = function() {
|
||
|
var in_window = true;
|
||
|
|
||
|
$('body').on('drag dragstart dragend dragover dragenter dragleave drop',
|
||
|
function(e) {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
}).on('dragover', function() {
|
||
|
in_window = true;
|
||
|
$('.is-dragover').show();
|
||
|
}).on('dragleave', function() {
|
||
|
in_window = false;
|
||
|
setTimeout(function() {
|
||
|
if(!in_window) {
|
||
|
$('.is-dragover').hide();
|
||
|
}
|
||
|
}, 5000);
|
||
|
|
||
|
}).on('drop', function(e) {
|
||
|
$('.is-dragover').hide();
|
||
|
DragNDrop.init(e.originalEvent.dataTransfer.files);
|
||
|
DragNDrop.listItems();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
})(window);
|