Improved file drop zone behaviour.

This commit is contained in:
Martin Edenhofer 2014-10-08 08:29:34 +02:00
parent 70739c1f44
commit 9675352d14
3 changed files with 29 additions and 33 deletions

View file

@ -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'

View file

@ -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 },

View file

@ -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)
if ( !$(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) {
inCounter++ inCounter++
} //console.log('in', inCounter, dropContainer)
if ( inCounter === 1 ) { showDropZone(dropContainer)
$(dropContainer).closest('.richtext').addClass('is-dropTarget') };
} stopEvent = function (e) {
e.preventDefault();
e.stopPropagation();
}; };
leaveEvent = function (e) { leaveEvent = function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
console.log('out', inCounter)
if ( $(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) {
inCounter-- inCounter--
} //console.log('out', inCounter)
if ( inCounter === 0 ) { if ( inCounter == 0 ) {
$(dropContainer).closest('.richtext').removeClass('is-dropTarget') 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) { 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 () {