diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index e042f5fbfa..6eb542c54b 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -612,6 +612,12 @@ span.wp-media-buttons-icon:before { text-align: center; } +.wp-fullscreen-wrap .uploader-editor { + background: rgba( 0, 86, 132, 0.9 ); + position: fixed; + z-index: 100050; /* above the editor toolbar */ +} + .uploader-editor-content { border: 1px dashed #fff; position: absolute; @@ -619,11 +625,9 @@ span.wp-media-buttons-icon:before { 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; @@ -635,7 +639,6 @@ span.wp-media-buttons-icon:before { color: #fff; padding: 0; display: none; - pointer-events: none; } .uploader-editor.droppable { diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 76f689b377..457a38e609 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -3423,6 +3423,13 @@ 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 = []; @@ -3434,19 +3441,37 @@ 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; @@ -3514,16 +3539,14 @@ }, 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 ); } });