From 83c45f9d049278fc40229a674f59d5783421cf86 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Sat, 26 May 2012 05:55:40 +0000
Subject: [PATCH] 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 |  4 ++-
 wp-includes/css/customize-controls.dev.css | 24 +++++++++----
 wp-includes/js/customize-controls.dev.js   | 18 ++++++++--
 wp-includes/js/plupload/wp-plupload.dev.js | 41 +++++++++++++++-------
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index 9368da1b95..554aa35931 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/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
 	}
 
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 5144d7d4a8..d9aeaae619 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 901e0d873c..57f4c70000 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/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 );
 
diff --git a/wp-includes/js/plupload/wp-plupload.dev.js b/wp-includes/js/plupload/wp-plupload.dev.js
index 9f69220106..5b33ea9236 100644
--- a/wp-includes/js/plupload/wp-plupload.dev.js
+++ b/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 = {