Theme Customizer: Fix IE8 drag/drop uploader incompatibility. see #20582, #19910.

Bind drag/drop support checks to individual plupload instances.
Add drag-over classes to wp.Uploader and corresponding styles to customize image controls.


git-svn-id: https://develop.svn.wordpress.org/trunk@20928 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/class-wp-customize-control.php

@@ -389,7 +389,9 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 		<div class="upload-dropzone">
 			<?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
 		</div>
-		<a class="button-secondary upload-fallback"><?php _e('Select File'); ?></a>
+		<div class="upload-fallback">
+			<span class="button-secondary"><?php _e('Select File'); ?></span>
+		</div>
 		<?php
 	}
 

wp-includes/css/customize-controls.dev.css

@@ -463,8 +463,14 @@ body {
 	border: 1px solid #dfdfdf;
 }
 
+.customize-section .customize-control-upload .upload-fallback,
+.customize-section .customize-control-image .upload-fallback {
+	display: none;
+}
+
 .customize-section .customize-control-upload .upload-dropzone,
 .customize-section .customize-control-image .upload-dropzone {
+	display: none;
 	padding: 15px 10px;
 	border: 3px dashed #dfdfdf;
 	margin: 5px auto;
@@ -473,11 +479,17 @@ body {
 	position: relative;
 }
 
-.customize-control-image .upload-dropzone,
-.uploader-drag-drop .customize-control-image .upload-fallback {
-	display: none;
+.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop,
+.customize-section .customize-control-image .upload-dropzone.supports-drag-drop {
+	display: block;
+	-webkit-transition: border-color 0.1s;
+	-moz-transition:    border-color 0.1s;
+	-ms-transition:     border-color 0.1s;
+	-o-transition:      border-color 0.1s;
+	transition:         border-color 0.1s;
 }
 
-.uploader-drag-drop .customize-control-image .upload-dropzone {
-	display: block;
+.customize-section .customize-control-upload .upload-dropzone.supports-drag-drop.drag-over,
+.customize-section .customize-control-image .upload-dropzone.supports-drag-drop.drag-over {
+	border-color: #83b4d8;
 }

wp-includes/js/customize-controls.dev.js

@@ -174,9 +174,21 @@
 			var control = this,
 				panels;
 
-			this.uploader = {};
-			if ( ! wp.Uploader.dragdrop )
-				this.uploader.browser = this.container.find( '.upload-fallback' );
+			this.uploader = {
+				init: function( up ) {
+					var fallback, button;
+
+					if ( up.features.dragdrop )
+						return;
+
+					// Maintain references while wrapping the fallback button.
+					fallback = control.container.find( '.upload-fallback' );
+					button   = fallback.children().detach();
+
+					this.browser.detach().empty().append( button );
+					fallback.append( this.browser ).show();
+				}
+			};
 
 			api.UploadControl.prototype.ready.call( this );
 

wp-includes/js/plupload/wp-plupload.dev.js

@@ -72,6 +72,35 @@ if ( typeof wp === 'undefined' )
 
 		this.uploader.init();
 
+		// Generate drag/drop helper classes.
+		(function( dropzone, supported ) {
+			var sensitivity = 50,
+				active;
+
+			if ( ! dropzone )
+				return;
+
+			dropzone.toggleClass( 'supports-drag-drop', !! supported );
+
+			if ( ! supported )
+				return dropzone.unbind('.wp-uploader');
+
+			// 'dragenter' doesn't fire correctly,
+			// simulate it with a limited 'dragover'
+			dropzone.bind( 'dragover.wp-uploader', function(){
+				if ( active )
+					return;
+
+				dropzone.addClass('drag-over');
+				active = true;
+			});
+
+			dropzone.bind('dragleave.wp-uploader, drop.wp-uploader', function(){
+				active = false;
+				dropzone.removeClass('drag-over');
+			});
+		}( this.dropzone, this.uploader.features.dragdrop ));
+
 		this.browser.on( 'mouseenter', this.refresh );
 
 		this.uploader.bind( 'UploadProgress', this.progress );
@@ -120,18 +149,6 @@ if ( typeof wp === 'undefined' )
 		});
 	};
 
-	Uploader.dragdrop = (function() {
-		// Thank you, Modernizr!
-		// http://modernizr.com/
-		var div = document.createElement('div');
-		return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
-	}());
-
-	$( function() {
-		if ( Uploader.dragdrop )
-			$( document.body ).addClass('uploader-drag-drop');
-	});
-
 	Uploader.uuid = 0;
 
 	Uploader.errorMap = {