From 9675352d14cec090b25b65343df0ca8f5afcab8a Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Wed, 8 Oct 2014 08:29:34 +0200
Subject: [PATCH] Improved file drop zone behaviour.

---
 .../_application_controller_form.js.coffee    |  7 ++-
 .../app/controllers/ticket_zoom.js.coffee     |  3 +-
 .../javascripts/app/lib/base/html5Upload.js   | 52 +++++++++----------
 3 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee
index 7ece127f7..1658195ff 100644
--- a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee
@@ -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'
diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index badeaac07..56440bffa 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -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 },
diff --git a/app/assets/javascripts/app/lib/base/html5Upload.js b/app/assets/javascripts/app/lib/base/html5Upload.js
index 6331c4395..002edcafc 100644
--- a/app/assets/javascripts/app/lib/base/html5Upload.js
+++ b/app/assets/javascripts/app/lib/base/html5Upload.js
@@ -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')
-                    }
+                    inCounter++
+                    //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')
+                    inCounter--
+                    //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 () {