Ticket #19845: 19845.6.diff

src/wp-admin/css/edit.css

@@ -612 +612 @@
         text-align: center;
 }
 
+.wp-fullscreen-wrap .uploader-editor {
+        background: rgba( 0, 86, 132, 0.9 );
+        position: fixed;
+        z-index: 150060; /* above the editor toolbar */
+}
+
 .uploader-editor-content {
         border: 1px dashed #fff;
         position: absolute;
@@ -619 +625 @@
         left: 10px;
         right: 10px;
         bottom: 10px;
-        pointer-events: none;
 }
 
 #poststuff .uploader-editor-content h3 {
-        margin: -0.5em 0 0;
         position: absolute;
         top: 50%;
         left: 0;
         right: 0;
+        -webkit-transform: translateY( -50% );
+        -ms-transform: translateY( -50% );
         transform: translateY( -50% );
         font-size: 40px;
         color: #fff;
         padding: 0;
         display: none;
-        pointer-events: none;
 }
 
 .uploader-editor.droppable {

src/wp-includes/css/editor.css

@@ -1514 +1514 @@
         right: 0;
         bottom: 30px;
         top: 60px;
-        z-index: 150010;
+        z-index: 150070;
 
 }
 

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

@@ -2808 +2808 @@
                 template:  media.template( 'uploader-editor' ),
 
                 initialize: function() {
+                        this.initialized = false;
+
+                        // Bail if UA does not support drag'n'drop or File API.
+                        if ( ! this.browserSupport() )
+                                return this;
+
                         this.$document = $(document);
                         this.dropzones = [];
                         this.files = [];
@@ -2819 +2825 @@
                         this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
                         this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
 
+                        this.initialized = true;
                         return this;
                 },
 
-                refresh: function() {
+                browserSupport: function() {
+                        var supports = false, div = document.createElement('div');
+
+                        supports = ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div );
+                        supports = supports && !! ( window.File && window.FileList && window.FileReader );
+                        return supports;
+                },
+
+                refresh: function( e ) {
                         var dropzone_id;
                         for ( dropzone_id in this.dropzones ) {
                                 // Hide the dropzones only if dragging has left the screen.
                                 this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
                         }
+
+                        if ( ! _.isUndefined( e ) ) {
+                                $( e.target ).closest( '.uploader-editor' ).toggleClass( 'droppable', this.overDropzone );
+                        }
+
                         return this;
                 },
 
                 render: function() {
+                        if ( ! this.initialized )
+                                return this;
+
                         media.View.prototype.render.apply( this, arguments );
                         $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
                         return this;
@@ -2899 +2922 @@
                 },
 
                 dropzoneDragover: function( e ) {
-                        $( e.target ).addClass( 'droppable' );
                         this.overDropzone = true;
-                        _.defer( _.bind( this.refresh, this ) );
+                        this.refresh( e );
                         return false;
                 },
 
                 dropzoneDragleave: function( e ) {
-                        $( e.target ).removeClass( 'droppable' );
                         this.overDropzone = false;
-                        this.refresh();
+                        _.delay( _.bind( this.refresh, this, e ), 50 );
                 }
         });