From a33829d1d080d456f7e12d31f4948f689eac763c Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Fri, 14 Mar 2014 00:41:12 +0000 Subject: [PATCH] Drag/drop upload: don't trigger on "local" dragging, hide the overlay on click. Props kovshenin, fixes #19845 git-svn-id: https://develop.svn.wordpress.org/trunk@27531 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/media-views.js | 37 ++++++++++++++++--- .../js/tinymce/plugins/wordpress/plugin.js | 6 +-- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 36a47727dc..fd65937794 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -3475,7 +3475,13 @@ className: 'uploader-editor', template: media.template( 'uploader-editor' ), + localDrag: false, + overContainer: false, + overDropzone: false, + initialize: function() { + var self = this; + this.initialized = false; // Bail if UA does not support drag'n'drop or File API. @@ -3490,10 +3496,15 @@ this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) ); 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; return this; }, @@ -3541,16 +3552,17 @@ drop: function( event ) { 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 ); } @@ -3580,6 +3592,10 @@ }, containerDragover: function() { + if ( this.localDrag ) { + return; + } + this.overContainer = true; this.refresh(); }, @@ -3592,6 +3608,10 @@ }, dropzoneDragover: function( e ) { + if ( this.localDrag ) { + return; + } + this.overDropzone = true; this.refresh( e ); return false; @@ -3600,6 +3620,13 @@ dropzoneDragleave: function( e ) { 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; } }); diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js index 3534e6aa62..51f26dcdb8 100644 --- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js @@ -379,10 +379,10 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { }); } - 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 ); } }); });