Improved file drop zone behaviour.
This commit is contained in:
parent
70739c1f44
commit
9675352d14
3 changed files with 29 additions and 33 deletions
|
@ -754,10 +754,9 @@ class App.ControllerForm extends App.Controller
|
|||
@attachmentPlaceholder = item.find('.attachmentPlaceholder')
|
||||
@attachmentUpload = item.find('.attachmentUpload')
|
||||
@attachmentsHolder = item.find('.attachments')
|
||||
html5Upload.initialize(
|
||||
u = => html5Upload.initialize(
|
||||
uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload',
|
||||
dropContainer: item.get(0),
|
||||
dropContainer1: item.find('.dropArea').get(0),
|
||||
dropContainer: item.closest('form').get(0),
|
||||
inputField: item.find( 'input' ).get(0),
|
||||
key: 'File',
|
||||
data: { form_id: @form_id },
|
||||
|
@ -788,7 +787,7 @@ class App.ControllerForm extends App.Controller
|
|||
console.log('uploadProgress ', parseInt(progress))
|
||||
)
|
||||
)
|
||||
|
||||
App.Delay.set( u, 100, undefined, 'form_upload' )
|
||||
|
||||
# textarea
|
||||
else if attribute.tag is 'textarea'
|
||||
|
|
|
@ -807,8 +807,7 @@ class Edit extends App.Controller
|
|||
|
||||
html5Upload.initialize(
|
||||
uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload',
|
||||
dropContainer: @$('.article-attachment').get(0),
|
||||
#dropContainer1: @$('.dropArea').get(0),
|
||||
dropContainer: @el.get(0),
|
||||
inputField: @$('.article-attachment input').get(0),
|
||||
key: 'File',
|
||||
data: { form_id: @form_id },
|
||||
|
|
|
@ -11,7 +11,6 @@
|
|||
function UploadManager(options) {
|
||||
var self = this;
|
||||
self.dropContainer = options.dropContainer;
|
||||
self.dropContainer1 = options.dropContainer1;
|
||||
self.inputField = options.inputField;
|
||||
self.uploadsQueue = [];
|
||||
self.activeUploads = 0;
|
||||
|
@ -68,51 +67,50 @@
|
|||
console.log('Initializing upload manager');
|
||||
var manager = this,
|
||||
dropContainer = manager.dropContainer,
|
||||
dropContainer1 = manager.dropContainer1,
|
||||
inputField = manager.inputField,
|
||||
inCounter = 0,
|
||||
cancelEvent = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('in', inCounter)
|
||||
if ( !$(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) {
|
||||
inCounter++
|
||||
}
|
||||
if ( inCounter === 1 ) {
|
||||
$(dropContainer).closest('.richtext').addClass('is-dropTarget')
|
||||
}
|
||||
//console.log('in', inCounter, dropContainer)
|
||||
showDropZone(dropContainer)
|
||||
};
|
||||
stopEvent = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
leaveEvent = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('out', inCounter)
|
||||
if ( $(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) {
|
||||
inCounter--
|
||||
}
|
||||
if ( inCounter === 0 ) {
|
||||
$(dropContainer).closest('.richtext').removeClass('is-dropTarget')
|
||||
//console.log('out', inCounter)
|
||||
if ( inCounter == 0 ) {
|
||||
hideDropZone(dropContainer)
|
||||
}
|
||||
};
|
||||
showDropZone = function(dropContainer) {
|
||||
if ( !$(dropContainer).find('.article-content, .richtext').hasClass('is-dropTarget') ) {
|
||||
$(dropContainer).find('.article-content, .richtext').addClass('is-dropTarget')
|
||||
}
|
||||
}
|
||||
hideDropZone = function(dropContainer) {
|
||||
if ( $(dropContainer).find('.article-content, .richtext').hasClass('is-dropTarget') ) {
|
||||
$(dropContainer).find('.article-content, .richtext').removeClass('is-dropTarget')
|
||||
}
|
||||
}
|
||||
|
||||
if (dropContainer) {
|
||||
manager.on(dropContainer, 'dragleave', leaveEvent);
|
||||
manager.on(dropContainer, 'dragover', cancelEvent);
|
||||
manager.on(dropContainer, 'dragover', stopEvent);
|
||||
manager.on(dropContainer, 'dragenter', cancelEvent);
|
||||
manager.on(dropContainer, 'drop', function (e) {
|
||||
leaveEvent(e);
|
||||
inCounter = 0
|
||||
stopEvent(e);
|
||||
hideDropZone(dropContainer)
|
||||
manager.processFiles(e.dataTransfer.files);
|
||||
});
|
||||
}
|
||||
if (dropContainer1) {
|
||||
manager.on(dropContainer1, 'dragleave', leaveEvent);
|
||||
manager.on(dropContainer1, 'dragover', cancelEvent);
|
||||
manager.on(dropContainer1, 'dragenter', cancelEvent);
|
||||
manager.on(dropContainer1, 'drop', function (e) {
|
||||
leaveEvent(e);
|
||||
manager.processFiles(e.dataTransfer.files);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (inputField) {
|
||||
manager.on(inputField, 'change', function () {
|
||||
|
|
Loading…
Reference in a new issue