Limit the drag/drop upload only to newer browsers (IE10+), add a fullscreen dropzone in DFW mode, props kovshenin, see #19845

Built from https://develop.svn.wordpress.org/trunk@27464


git-svn-id: http://core.svn.wordpress.org/trunk@27309 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.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 {
 	right: 10px;
 	left: 10px;
 	bottom: 10px;
-	pointer-events: none;
 }
 
 #poststuff .uploader-editor-content h3 {
-	margin: -0.5em 0 0;
 	position: absolute;
 	top: 50%;
 	right: 0;
@@ -635,7 +639,6 @@ span.wp-media-buttons-icon:before {
 	color: #fff;
 	padding: 0;
 	display: none;
-	pointer-events: none;
 }
 
 .uploader-editor.droppable {

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 {

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 );
 		}
 	});