From a20bfcd6b1150674eb0b960b41bfe5bce7a434f9 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Fri, 20 Apr 2012 02:39:55 +0000
Subject: [PATCH] Theme Customizer: Improve image picker control. see #19910.

Overhauled image pickers:
* Add support for drag and drop uploads to image controls.
* Improve the 'uploaded' tab in image controls: automatically add images uploaded during the current session, hide the tab when no uploaded images exist.
* Move the header image control to the WP_Customize_Header_Image_Control class. Remove wp_customize_print_uploaded_headers() and wp_customize_print_uploaded_headers() functions.
* Abstract the dropdown functionality from the color picker to the .dropdown class.
* In wp.Uploader, unset element keys if passed an empty jQuery collection.



git-svn-id: http://svn.automattic.com/wordpress/trunk@20545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/class-wp-customize-control.php | 116 ++++++++++---
 wp-includes/class-wp-customize.php         |  33 +---
 wp-includes/css/customize-controls.dev.css | 182 +++++++++++----------
 wp-includes/js/customize-controls.dev.js   | 102 ++++++++----
 wp-includes/js/plupload/wp-plupload.dev.js |   6 +
 5 files changed, 268 insertions(+), 171 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index c6b18fd496..b3d7c97d61 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/wp-includes/class-wp-customize-control.php
@@ -180,10 +180,10 @@ class WP_Customize_Control {
 				?>
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<a href="#" class="color-picker-toggle">
-						<div class="color-picker-spot"></div>
-						<div class="color-picker-dropdown"></div>
-					</a>
+					<div class="dropdown color-picker-toggle">
+						<div class="dropdown-content color-picker-spot"></div>
+						<div class="dropdown-arrow"></div>
+					</div>
 					<div class="color-picker-control color-picker-hex">
 						<span>#</span>
 						<input type="text" <?php $this->link(); ?> />
@@ -291,9 +291,17 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 
 class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 	public $type = 'image';
-	public $tabs = array();
 	public $get_url;
 
+	protected $tabs = array();
+
+	public function __construct( $manager, $id, $args ) {
+		parent::__construct( $manager, $id, $args );
+
+		$this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
+		$this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
+	}
+
 	public function render_content() {
 		$src = $this->value();
 		if ( isset( $this->get_url ) )
@@ -303,35 +311,99 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 		<label class="customize-image-picker">
 			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 
-			<div class="thumbnail">
-				<?php if ( empty( $src ) ): ?>
-					<img style="display:none;" />
-				<?php else: ?>
-					<img src="<?php echo esc_url( $src ); ?>" />
-				<?php endif; ?>
-			</div>
 
-			<div class="actions">
-				<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
-				<a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
-				<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+			<div class="dropdown preview-thumbnail">
+				<div class="dropdown-content">
+					<?php if ( empty( $src ) ): ?>
+						<img style="display:none;" />
+					<?php else: ?>
+						<img src="<?php echo esc_url( $src ); ?>" />
+					<?php endif; ?>
+				</div>
+				<div class="dropdown-arrow"></div>
 			</div>
 
 			<div class="library">
 				<ul>
-					<?php foreach ( $this->tabs as $tab ): ?>
-						<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-							<?php echo esc_html( $tab[1] ); ?>
+					<?php foreach ( $this->tabs as $id => $tab ): ?>
+						<li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
+							<?php echo esc_html( $tab['label'] ); ?>
 						</li>
 					<?php endforeach; ?>
 				</ul>
-				<?php foreach ( $this->tabs as $tab ): ?>
-					<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-						<?php call_user_func( $tab[2] ); ?>
+				<?php foreach ( $this->tabs as $id => $tab ): ?>
+					<div class="library-content" data-customize-tab='<?php echo esc_attr( $id ); ?>'>
+						<?php call_user_func( $tab['callback'] ); ?>
 					</div>
 				<?php endforeach; ?>
 			</div>
+
+			<div class="actions">
+				<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+			</div>
 		</label>
 		<?php
 	}
+
+	public function add_tab( $id, $label, $callback ) {
+		$this->tabs[ $id ] = array(
+			'label'    => $label,
+			'callback' => $callback,
+		);
+	}
+
+	public function remove_tab( $id ) {
+		unset( $this->tabs[ $id ] );
+	}
+
+	public function tab_upload_new() {
+		?>
+		<div class="upload-dropzone">
+			<?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
+		</div>
+		<?php
+	}
+
+	public function tab_uploaded() {
+		?>
+		<div class="uploaded-target"></div>
+		<?php
+	}
 }
+
+class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
+	public function __construct( $manager ) {
+		parent::__construct( $manager, 'header_image', array(
+			'label'   => __( 'Header Image' ),
+			'section' => 'header',
+			'context' => 'custom-header',
+			'removed' => 'remove-header',
+			'get_url' => 'get_header_image',
+		) );
+
+		$this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );
+	}
+
+	public function tab_uploaded() {
+		$headers = get_uploaded_header_images();
+
+		?><div class="uploaded-target"></div><?php
+
+		foreach ( $headers as $header ) : ?>
+			<a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
+				<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
+			</a>
+		<?php endforeach;
+	}
+
+	public function tab_default_headers() {
+		global $custom_image_header;
+		$custom_image_header->process_default_headers();
+
+		foreach ( $custom_image_header->default_headers as $header ) : ?>
+			<a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>">
+				<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
+			</a>
+		<?php endforeach;
+	}
+}
\ No newline at end of file
diff --git a/wp-includes/class-wp-customize.php b/wp-includes/class-wp-customize.php
index 330cfb5a63..f904d8f1c2 100644
--- a/wp-includes/class-wp-customize.php
+++ b/wp-includes/class-wp-customize.php
@@ -537,17 +537,7 @@ final class WP_Customize {
 			'theme_supports' => 'custom-header',
 		) );
 
-		$this->add_control( new WP_Customize_Image_Control( $this, 'header_image', array(
-			'label'          => 'Header Image',
-			'section'        => 'header',
-			'context'        => 'custom-header',
-			'removed'        => 'remove-header',
-			'get_url'        => 'get_header_image',
-			'tabs'           => array(
-				array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
-				array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
-			),
-		) ) );
+		$this->add_control( new WP_Customize_Header_Image_Control( $this ) );
 
 		/* Custom Background */
 
@@ -758,25 +748,4 @@ function sanitize_hexcolor( $color ) {
 		return $color;
 
 	return $color;
-}
-
-function wp_customize_print_uploaded_headers() {
-	$headers = get_uploaded_header_images();
-
-	foreach ( $headers as $header ) : ?>
-		<a href="<?php echo esc_url( $header['url'] ); ?>">
-			<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
-		</a>
-	<?php endforeach;
-}
-
-function wp_customize_print_included_headers() {
-	global $custom_image_header;
-	$custom_image_header->process_default_headers();
-
-	foreach ( $custom_image_header->default_headers as $header ) : ?>
-		<a href="<?php echo esc_url( $header['url'] ); ?>">
-			<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
-		</a>
-	<?php endforeach;
 }
\ No newline at end of file
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index a1eb48967d..ec40685e19 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -196,34 +196,37 @@ body {
 }
 
 /*
- * Color Picker
+ * Dropdowns
  */
-.customize-section .color-picker-toggle {
+.customize-section .dropdown {
 	float: left;
 	display: block;
+	position: relative;
+	cursor: pointer;
 
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 }
 
-.customize-section .color-picker-spot,
-.customize-section .color-picker-dropdown {
+.customize-section .dropdown-content {
+	overflow: hidden;
 	float: left;
+	min-width: 30px;
 	height: 24px;
 	line-height: 24px;
-}
-
-.customize-section .color-picker-spot {
-	min-width: 30px;
+	margin-right: 16px;
 	padding: 0 5px;
-	background-color: #fff;
-	border: 1px solid rgba( 0, 0, 0, 0.15 );
+	background-color: #eee;
+	border: 1px solid #ccc;
 	-webkit-border-radius: 3px 0 0 3px;
 	border-radius: 3px 0 0 3px;
 }
 
-.customize-section .color-picker-dropdown {
-	position: relative;
+.customize-control .dropdown-arrow {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
 	width: 15px;
 
 	border-color: #ccc;
@@ -233,43 +236,52 @@ body {
 	border-radius: 0 3px 3px 0;
 }
 
-.customize-section .color-picker-dropdown:after {
+.customize-control .dropdown-arrow:after {
 	content: '';
 	width: 0;
 	height: 0;
-	border-color: #ccc transparent transparent transparent;
+	border-color: #ccc transparent;
 	border-style: solid;
-	border-width: 4px;
+	border-width: 4px 4px 0 4px;
 	position: absolute;
-	top: 11px;
+	top: 50%;
+	margin-top: -1px;
 	right: 4px;
 	z-index: 1;
 }
 
-.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
-	border-color: transparent transparent #ccc transparent;
-	top: 6px;
+.customize-control.open .dropdown-arrow:after {
+	border-width: 0 4px 4px 4px;
+	margin-top: -2px;
 }
 
-.customize-section .color-picker-toggle:hover .color-picker-spot {
-	border-color: rgba( 0, 0, 0, 0.25 );
-}
-
-.customize-section .color-picker-toggle:hover .color-picker-dropdown {
+.customize-section .dropdown:hover .dropdown-content,
+.customize-control .dropdown:hover .dropdown-arrow {
 	border-color: #aaa;
 }
 
-.customize-section .color-picker-toggle:hover .color-picker-dropdown:after {
-	border-color: #aaa transparent transparent transparent;
+.customize-section .dropdown:hover .dropdown-arrow:after {
+	border-color: #aaa transparent;
 }
 
-.customize-section .color-picker-toggle.open:hover .color-picker-dropdown:after {
-	border-color: transparent transparent #aaa transparent;
-}
-
-.customize-section .color-picker-control {
+/*
+ * Color Picker
+ */
+.customize-control .color-picker-control {
 	display: none;
 }
+.customize-control.open .color-picker-control {
+	display: block;
+}
+
+.customize-control .dropdown .color-picker-spot {
+	background-color: #fff;
+	border: 1px solid rgba( 0, 0, 0, 0.15 );
+}
+
+.customize-section .dropdown:hover .color-picker-spot {
+	border-color: rgba( 0, 0, 0, 0.25 );
+}
 
 .customize-section .color-picker-hex {
 	float: left;
@@ -317,24 +329,31 @@ body {
 /*
  * Image Picker
  */
-.customize-section .customize-control-image .thumbnail {
-	float: right;
-	width: 138px;
-	min-height: 25px;
-	border: 1px solid #ccc;
-	margin-bottom: 5px;
-	background: #eee;
+
+.customize-control-image .library,
+.customize-control-image .actions {
+	display: none;
+}
+.customize-control-image.open .library,
+.customize-control-image.open .actions {
+	display: block;
 }
 
-.customize-section .customize-control-image .thumbnail img {
+.customize-section .customize-control-image .dropdown-content {
+	height: auto;
+	min-height: 24px;
+	min-width: 40px;
+	padding: 0;
+}
+
+.customize-section .customize-control-image .preview-thumbnail img {
 	display: block;
-	max-width: 138px;
+	max-width: 122px;
 	max-height: 98px;
 	margin: 0 auto;
 }
 
 .customize-section .customize-control-image .actions {
-	width: 140px;
 	float: right;
 }
 
@@ -342,39 +361,17 @@ body {
 	display: block;
 }
 
-.customize-section .customize-control-image .library {
-	display: none;
-/*	float: left;*/
-}
-
-/*.customize-section .customize-control-image .library label {
-	display: block;
-	position: relative;
-	float: left;
-	padding: 0 0 5px 20px;
-}
-.customize-section .customize-control-image .library input {
-	display: block;
-	position: absolute;
-	top: 50%;
-	left: 0;
-	margin-top: -7px;
-}*/
-/*.customize-section .customize-control-image .library .wp-tab-panel {
-	padding: 10px 10px 5px 8px;
-}*/
-
 .customize-section .customize-control-image .library ul {
 	border-bottom: 1px solid #dfdfdf;
 	float: left;
 	width: 100%;
-	margin: 5px 0;
+	margin: 10px 0 0;
 }
 
 .customize-section .customize-control-image .library li {
 	color: #999;
 	float: left;
-	padding: 4px 6px;
+	padding: 3px 5px;
 	margin: 0;
 	border-style: solid;
 	border-color: transparent;
@@ -382,38 +379,53 @@ body {
 }
 
 .customize-section .customize-control-image .library li.library-selected {
-	color: #777;
-	border-color: #dfdfdf;
-	background: #f5f5f5;
 	margin-bottom: -1px;
-	padding-bottom: 5px;
+	padding-bottom: 4px;
+
+	color: #777;
+	background: #f5f5f5;
+	border-color: #dfdfdf;
+	-webkit-border-radius: 3px 3px 0 0;
+	border-radius: 3px 3px 0 0 ;
 }
 
-.customize-section .customize-control-image .library div {
-	width: 100%;
+.customize-section .customize-control-image .library-content {
+	display: none;
+	width: 260px;
 	float: left;
+	padding: 10px 0;
 }
 
-.customize-section .customize-control-image .library a {
+.customize-section .customize-control-image .library-content.library-selected {
+	display: block;
+}
+
+.customize-section .customize-control-image .library .thumbnail {
+	display: block;
+	width: 100%;
+}
+
+.customize-section .customize-control-image .library .thumbnail:hover img {
+	border-color: #21759b;
+}
+
+.customize-section .customize-control-image .library .thumbnail img {
 	display: block;
 	max-width: 220px;
 	max-height: 80px;
+
 	margin: 5px auto;
 	padding: 4px;
 	background: #fff;
 	border: 1px solid #dfdfdf;
 }
 
-.customize-section .customize-control-image .library a:hover {
-	border-color: #21759b;
-}
-
-.customize-section .customize-control-image .library img {
-	display: block;
-	max-width: 220px;
-	max-height: 80px;
-}
-
-.customize-section .customize-control-image .library-content {
-	display: none;
-}
+.customize-section .customize-control-upload .upload-dropzone,
+.customize-section .customize-control-image .upload-dropzone {
+	padding: 15px 10px;
+	border: 3px dashed #dfdfdf;
+	margin: 5px auto;
+	text-align: center;
+	color: #777;
+	position: relative;
+}
\ 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 a1bc44b68e..6f596a8ed5 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -90,6 +90,12 @@
 					element.set( setting() );
 				});
 			});
+
+			// Support the .dropdown class to open/close complex elements
+			this.container.on( 'click', '.dropdown', function( event ) {
+				event.preventDefault();
+				control.container.toggleClass('open');
+			});
 		},
 		ready: function() {}
 	});
@@ -97,23 +103,15 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				toggle, spot, ui, text, update;
+				spot, text, update;
 
-			toggle = this.container.find( '.color-picker-toggle' );
-			spot   = toggle.find('.color-picker-spot');
-			ui     = this.container.find( '.color-picker-control' );
+			spot   = this.container.find('.color-picker-spot');
 			update = function( color ) {
 				color = '#' + color;
 				spot.css( 'background', color );
 				control.farbtastic.setColor( color );
 			};
 
-			toggle.on( 'click', function( event ) {
-				ui.toggle();
-				toggle.toggleClass( 'open' );
-				event.preventDefault();
-			});
-
 			this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
 				control.setting.set( color.replace( '#', '' ) );
 			});
@@ -129,11 +127,12 @@
 
 			this.params.removed = this.params.removed || '';
 
+			this.success = $.proxy( this.success, this );
+
 			this.uploader = new wp.Uploader({
-				browser: this.container.find('.upload'),
-				success: function( attachment ) {
-					control.setting.set( attachment.url );
-				}
+				browser:  this.container.find('.upload'),
+				dropzone: this.container.find('.upload-dropzone'),
+				success:  this.success
 			});
 
 			this.remover = this.container.find('.remove');
@@ -149,6 +148,9 @@
 			if ( this.params.context )
 				control.uploader.param( 'post_data[context]', this.params.context );
 		},
+		success: function( attachment ) {
+			this.setting.set( attachment.url );
+		},
 		removerVisibility: function( to ) {
 			this.remover.toggle( to != this.params.removed );
 		}
@@ -156,43 +158,79 @@
 
 	api.ImageControl = api.UploadControl.extend({
 		ready: function() {
-			var control = this;
+			var control = this,
+				panels;
 
 			api.UploadControl.prototype.ready.call( this );
 
-			this.thumbnail    = this.container.find('.thumbnail img');
+			this.thumbnail    = this.container.find('.preview-thumbnail img');
 			this.thumbnailSrc = $.proxy( this.thumbnailSrc, this );
 			this.setting.bind( this.thumbnailSrc );
 
 			this.library = this.container.find('.library');
-			this.changer = this.container.find('.change');
 
-			this.changer.click( function( event ) {
-				control.library.toggle();
-				event.preventDefault();
+			// Generate tab objects
+			this.tabs = {};
+			panels    = this.library.find('.library-content');
+
+			this.library.children('ul').children('li').each( function() {
+				var link  = $(this),
+					id    = link.data('customizeTab'),
+					panel = panels.filter('[data-customize-tab="' + id + '"]');
+
+				control.tabs[ id ] = {
+					both:  link.add( panel ),
+					link:  link,
+					panel: panel
+				};
 			});
 
-			this.library.on( 'click', 'li', function( event ) {
-				var tab = $(this),
-					id = tab.data('customizeTab');
+			// Select a tab
+			this.selected = this.tabs[ panels.first().data('customizeTab') ];
+			this.selected.both.addClass('library-selected');
+
+			// Bind tab switch events
+			this.library.children('ul').on( 'click', 'li', function( event ) {
+				var id  = $(this).data('customizeTab'),
+					tab = control.tabs[ id ];
 
 				event.preventDefault();
 
-				if ( tab.hasClass('library-selected') )
+				if ( tab.link.hasClass('library-selected') )
 					return;
 
-				tab.siblings('.library-selected').removeClass('library-selected');
-				tab.addClass('library-selected');
-
-				control.library.find('div').hide().filter( function() {
-					return $(this).data('customizeTab') === id;
-				}).show();
+				control.selected.both.removeClass('library-selected');
+				control.selected = tab;
+				control.selected.both.addClass('library-selected');
 			});
 
 			this.library.on( 'click', 'a', function( event ) {
-				control.setting.set( $(this).attr('href') );
-				event.preventDefault();
+				var value = $(this).data('customizeImageValue');
+
+				if ( value ) {
+					control.setting.set( value );
+					event.preventDefault();
+				}
 			});
+
+			if ( this.tabs.uploaded ) {
+				this.tabs.uploaded.target = this.library.find('.uploaded-target');
+				if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
+					this.tabs.uploaded.both.addClass('hidden');
+			}
+		},
+		success: function( attachment ) {
+			api.UploadControl.prototype.success.call( this, attachment );
+
+			// Add the uploaded image to the uploaded tab.
+			if ( this.tabs.uploaded && this.tabs.uploaded.target.length ) {
+				this.tabs.uploaded.both.removeClass('hidden');
+
+				$( '<a href="#" class="thumbnail"></a>' )
+					.data( 'customizeImageValue', attachment.url )
+					.append( '<img src="' +  attachment.url+ '" />' )
+					.appendTo( this.tabs.uploaded.target );
+			}
 		},
 		thumbnailSrc: function( to ) {
 			if ( /^(https?:)?\/\//.test( to ) )
diff --git a/wp-includes/js/plupload/wp-plupload.dev.js b/wp-includes/js/plupload/wp-plupload.dev.js
index bbd20ba0eb..f72c233123 100644
--- a/wp-includes/js/plupload/wp-plupload.dev.js
+++ b/wp-includes/js/plupload/wp-plupload.dev.js
@@ -47,6 +47,12 @@ if ( typeof wp === 'undefined' )
 				continue;
 
 			this[ key ] = $( this[ key ] ).first();
+
+			if ( ! this[ key ].length ) {
+				delete this[ key ];
+				continue;
+			}
+
 			if ( ! this[ key ].prop('id') )
 				this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ );
 			this.plupload[ elements[ key ] ] = this[ key ].prop('id');