Theme Customizer: Add statuses to the color and image controls. see #19910.

Move the color control from the switch statement to WP_Customize_Color_Control.
Markup improvements.


git-svn-id: http://svn.automattic.com/wordpress/trunk@20598 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -64,14 +64,7 @@ class WP_Customize_Control {
 	 *
 	 * @since 3.4.0
 	 */
-	public function enqueue() {
+	public function enqueue() {}
-		switch( $this->type ) {
-			case 'color':
-				wp_enqueue_script( 'farbtastic' );
-				wp_enqueue_style( 'farbtastic' );
-				break;
-		}
-	}
 
 
 	/**
@@ -176,27 +169,11 @@ class WP_Customize_Control {
 				</label>
 				<?php
 				break;
-			case 'color':
-				?>
-				<label>
-					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<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(); ?> />
-					</div>
-					<div class="color-picker-control farbtastic-placeholder"></div>
-				</label>
-				<?php
-				break;
 			case 'checkbox':
 				?>
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> class="customize-control-content" />
+					<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
 				</label>
 				<?php
 				break;
@@ -225,7 +202,7 @@ class WP_Customize_Control {
 				?>
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<select <?php $this->link(); ?> class="customize-control-content">
+					<select <?php $this->link(); ?>>
 						<?php
 						foreach ( $this->choices as $value => $label )
 							echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
@@ -258,6 +235,47 @@ class WP_Customize_Control {
 	}
 }
 
+class WP_Customize_Color_Control extends WP_Customize_Control {
+	public $type = 'color';
+	public $statuses;
+
+	public function __construct( $manager, $id, $args = array() ) {
+		$this->statuses = array( '' => __('Default') );
+		parent::__construct( $manager, $id, $args );
+	}
+
+	public function enqueue() {
+		wp_enqueue_script( 'farbtastic' );
+		wp_enqueue_style( 'farbtastic' );
+	}
+
+	public function to_json() {
+		parent::to_json();
+		$this->json['statuses'] = $this->statuses;
+	}
+
+	public function render_content() {
+		?>
+		<label>
+			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+			<div class="customize-control-content">
+				<div class="dropdown">
+					<div class="dropdown-content">
+						<div class="dropdown-status"></div>
+					</div>
+					<div class="dropdown-arrow"></div>
+				</div>
+				<div class="color-picker-hex">
+					<span>#</span>
+					<input type="text" <?php $this->link(); ?> />
+				</div>
+			</div>
+			<div class="farbtastic-placeholder"></div>
+		</label>
+		<?php
+	}
+}
+
 class WP_Customize_Upload_Control extends WP_Customize_Control {
 	public $type    = 'upload';
 	public $removed = '';
@@ -292,16 +310,24 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 	public $type = 'image';
 	public $get_url;
+	public $statuses;
 
 	protected $tabs = array();
 
 	public function __construct( $manager, $id, $args ) {
+		$this->statuses = array( '' => __('No Image') );
+
 		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 to_json() {
+		parent::to_json();
+		$this->json['statuses'] = $this->statuses;
+	}
+
 	public function render_content() {
 		$src = $this->value();
 		if ( isset( $this->get_url ) )
@@ -311,16 +337,18 @@ 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="customize-control-content">
-			<div class="dropdown preview-thumbnail">
+				<div class="dropdown preview-thumbnail">
-				<div class="dropdown-content">
+					<div class="dropdown-content">
-					<?php if ( empty( $src ) ): ?>
+						<?php if ( empty( $src ) ): ?>
-						<img style="display:none;" />
+							<img style="display:none;" />
-					<?php else: ?>
+						<?php else: ?>
-						<img src="<?php echo esc_url( $src ); ?>" />
+							<img src="<?php echo esc_url( $src ); ?>" />
-					<?php endif; ?>
+						<?php endif; ?>
+						<div class="dropdown-status"></div>
+					</div>
+					<div class="dropdown-arrow"></div>
 				</div>
-				<div class="dropdown-arrow"></div>
 			</div>
 
 			<div class="library">
@@ -374,11 +402,17 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 	public function __construct( $manager ) {
 		parent::__construct( $manager, 'header_image', array(
-			'label'   => __( 'Header Image' ),
+			'label'    => __( 'Header Image' ),
-			'section' => 'header',
+			'section'  => 'header',
-			'context' => 'custom-header',
+			'context'  => 'custom-header',
-			'removed' => 'remove-header',
+			'removed'  => 'remove-header',
-			'get_url' => 'get_header_image',
+			'get_url'  => 'get_header_image',
+			'statuses' => array(
+				''                      => __('Default'),
+				'remove-header'         => __('No Image'),
+				'random-default-image'  => __('Random Default Image'),
+				'random-uploaded-image' => __('Random Uploaded Image'),
+			)
 		) );
 
 		$this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );

wp-includes/class-wp-customize.php

@@ -539,7 +539,6 @@ final class WP_Customize {
 		$this->add_setting( 'header_textcolor', array(
 			// @todo: replace with a new accept() setting method
 			// 'sanitize_callback' => 'sanitize_hexcolor',
-			'control'        => 'color',
 			'theme_supports' => array( 'custom-header', 'header-text' ),
 			'default'        => get_theme_support( 'custom-header', 'default-text-color' ),
 		) );
@@ -551,11 +550,10 @@ final class WP_Customize {
 			'type'     => 'checkbox',
 		) );
 
-		$this->add_control( 'header_textcolor', array(
+		$this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
 			'label'   => __( 'Text Color' ),
 			'section' => 'header',
-			'type'    => 'color',
+		) ) );
-		) );
 
 		// Input type: checkbox
 		// With custom value
@@ -583,21 +581,19 @@ final class WP_Customize {
 			'transport'         => 'postMessage',
 		) );
 
-		$this->add_control( 'background_color', array(
+		$this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array(
 			'label'   => __( 'Background Color' ),
 			'section' => 'background',
-			'type'    => 'color',
+		) ) );
-		) );
 
 		$this->add_setting( 'background_image', array(
 			'default'        => get_theme_support( 'custom-background', 'default-image' ),
 			'theme_supports' => 'custom-background',
 		) );
 
-		$this->add_control( new WP_Customize_Upload_Control( $this, 'background_image', array(
+		$this->add_control( new WP_Customize_Image_Control( $this, 'background_image', array(
 			'label'          => __( 'Background Image' ),
 			'section'        => 'background',
-			'type'           => 'upload',
 			'context'        => 'custom-background',
 		) ) );
 

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

@@ -141,6 +141,10 @@ body {
 	margin-right: 10px;
 	line-height: 28px;
 }
+.customize-control-content {
+	float: right;
+	width: 140px;
+}
 
 .customize-control-text input,
 .customize-control-select select,
@@ -217,14 +221,18 @@ body {
 	overflow: hidden;
 	float: left;
 	min-width: 30px;
-	height: 24px;
+	height: 16px;
-	line-height: 24px;
+	line-height: 16px;
 	margin-right: 16px;
-	padding: 0 5px;
+	padding: 4px 5px;
 	background-color: #eee;
 	border: 1px solid #ccc;
 	-webkit-border-radius: 3px 0 0 3px;
 	border-radius: 3px 0 0 3px;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
 }
 
 .customize-control .dropdown-arrow {
@@ -269,29 +277,41 @@ body {
 	border-color: #aaa transparent;
 }
 
+.customize-control .dropdown-status {
+	display: none;
+	max-width: 112px;
+	color: #999;
+}
+
 /*
  * Color Picker
  */
-.customize-control .color-picker-control {
+.customize-control-color .color-picker-hex,
+.customize-control-color .farbtastic-placeholder {
 	display: none;
 }
-.customize-control.open .color-picker-control {
+.customize-control-color.open .color-picker-hex,
+.customize-control-color.open .farbtastic-placeholder {
 	display: block;
 }
 
-.customize-control .dropdown .color-picker-spot {
+.customize-control-color .dropdown {
+	margin-right: 5px;
+	margin-bottom: 5px;
+}
+
+.customize-control-color .dropdown .dropdown-content {
 	background-color: #fff;
 	border: 1px solid rgba( 0, 0, 0, 0.15 );
 }
 
-.customize-section .dropdown:hover .color-picker-spot {
+.customize-control-color .dropdown:hover .dropdown-content {
 	border-color: rgba( 0, 0, 0, 0.25 );
 }
 
 .customize-section .color-picker-hex {
 	float: left;
 	width: 70px;
-	margin-left: 5px;
 	font-family: monospace;
 	background-color: #fff;
 	color: #777;
@@ -322,13 +342,13 @@ body {
 	border-radius: 0 3px 3px 0;
 }
 
-.customize-section .color-picker-control.farbtastic-placeholder {
+.customize-control-color .farbtastic-placeholder {
 	width: 235px;
 	margin: 5px 0 10px 25px;
 	float: left;
 }
 
-.customize-section .color-picker-control .farbtastic {
+.customize-control-color .farbtastic {
 	margin: 0 auto;
 }
 
@@ -339,6 +359,7 @@ body {
 .customize-control-image .library,
 .customize-control-image .actions {
 	display: none;
+	float: left;
 }
 .customize-control-image.open .library,
 .customize-control-image.open .actions {
@@ -352,6 +373,10 @@ body {
 	padding: 0;
 }
 
+.customize-section .customize-control-image .dropdown-status {
+	padding: 4px 5px;
+}
+
 .customize-section .customize-control-image .preview-thumbnail img {
 	display: block;
 	max-width: 122px;
@@ -397,7 +422,7 @@ body {
 
 .customize-section .customize-control-image .library-content {
 	display: none;
-	width: 260px;
+	width: 100%;
 	float: left;
 	padding: 10px 0;
 }

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

@@ -90,14 +90,30 @@
 					element.set( setting() );
 				});
 			});
+		},
+
+		ready: function() {},
+
+		dropdownInit: function() {
+			var control  = this,
+				statuses = this.container.find('.dropdown-status'),
+				params   = this.params,
+				update   = function( to ) {
+					if ( typeof	to === 'string' && params.statuses && params.statuses[ to ] )
+						statuses.html( params.statuses[ to ] ).show();
+					else
+						statuses.hide();
+				};
 
 			// Support the .dropdown class to open/close complex elements
 			this.container.on( 'click', '.dropdown', function( event ) {
 				event.preventDefault();
 				control.container.toggleClass('open');
 			});
-		},
+
-		ready: function() {}
+			this.setting.bind( update );
+			update( this.setting() );
+		}
 	});
 
 	api.ColorControl = api.Control.extend({
@@ -105,9 +121,9 @@
 			var control = this,
 				spot, text, update;
 
-			spot   = this.container.find('.color-picker-spot');
+			spot   = this.container.find('.dropdown-content');
 			update = function( color ) {
-				color = '#' + color;
+				color = color ? '#' + color : '';
 				spot.css( 'background', color );
 				control.farbtastic.setColor( color );
 			};
@@ -118,6 +134,8 @@
 
 			this.setting.bind( update );
 			update( this.setting() );
+
+			this.dropdownInit();
 		}
 	});
 
@@ -218,6 +236,8 @@
 				if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
 					this.tabs.uploaded.both.addClass('hidden');
 			}
+
+			this.dropdownInit();
 		},
 		success: function( attachment ) {
 			api.UploadControl.prototype.success.call( this, attachment );

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

@@ -50,7 +50,7 @@
 		// Auto update background color by default
 		api( 'background_color', function( value ) {
 			value.bind( function( to ) {
-				body.css( 'background-color', '#' + to );
+				body.css( 'background-color', to ? '#' + to : '' );
 			});
 		});
 	});