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