Changeset 27531

Timestamp:

03/14/2014 12:41:12 AM (11 years ago)

Author:

azaozz

Message:

Drag/drop upload: don't trigger on "local" dragging, hide the overlay on click. Props kovshenin, fixes #19845

Location:

trunk/src/wp-includes/js

Files:

• media-views.js (modified) (6 diffs)
• tinymce/plugins/wordpress/plugin.js (modified) (1 diff)

trunk/src/wp-includes/js/media-views.js

@@ -3476 +3476 @@
         template:  media.template( 'uploader-editor' ),
 
+        localDrag: false,
+        overContainer: false,
+        overDropzone: false,
+
         initialize: function() {
+            var self = this;
+
             this.initialized = false;
 
@@ -3491 +3497 @@
             this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
             this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
+            this.$document.on( 'click', '.uploader-editor', _.bind( this.click, this ) );
 
             this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
             this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
+
+            this.$document.on( 'dragstart dragend drop', function( event ) {
+                self.localDrag = event.type === 'dragstart';
+            });
 
             this.initialized = true;
@@ -3542 +3553 @@
             var $wrap = null;
 
-            this.files = event.originalEvent.dataTransfer.files;
-            if ( this.files.length < 1 )
-                return;
-
             this.containerDragleave( event );
             this.dropzoneDragleave( event );
 
+            this.files = event.originalEvent.dataTransfer.files;
+            if ( this.files.length < 1 ) {
+                return;
+            }
+
             // Set the active editor to the drop target.
             $wrap = $( event.target ).parents( '.wp-editor-wrap' );
-            if ( $wrap.length > 0 ) {
+            if ( $wrap.length > 0 && $wrap[0].id ) {
                 window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
             }
@@ -3581 +3593 @@
 
         containerDragover: function() {
+            if ( this.localDrag ) {
+                return;
+            }
+
             this.overContainer = true;
             this.refresh();
@@ -3593 +3609 @@
 
         dropzoneDragover: function( e ) {
+            if ( this.localDrag ) {
+                return;
+            }
+
             this.overDropzone = true;
             this.refresh( e );
@@ -3601 +3621 @@
             this.overDropzone = false;
             _.delay( _.bind( this.refresh, this, e ), 50 );
+        },
+
+        click: function( e ) {
+            // In the rare case where the dropzone gets stuck, hide it on click.
+            this.containerDragleave( e );
+            this.dropzoneDragleave( e );
+            this.localDrag = false;
         }
     });

trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -380 +380 @@
         }
 
-        dom.bind( doc, 'dragover', function( event ) {
+        dom.bind( doc, 'dragstart dragend dragover drop', function( event ) {
             if ( typeof window.jQuery !== 'undefined' ) {
-                // Propagate the event to its container for the parent window to catch.
-                window.jQuery( editor.getContainer() ).trigger( event );
+                // Trigger the jQuery handlers.
+                window.jQuery( document ).triggerHandler( event.type );
             }
         });