Theme Customizer: Add 'choose image' functionality to image controls. Rough first pass, using header images as an example. see #19910.

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

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

@@ -437,8 +437,23 @@ class WP_Customize_Setting {
 						</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>
+						<div class="library">
+							<ul>
+								<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
+									<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+										<?php echo esc_html( $tab[1] ); ?>
+									</li>
+								<?php endforeach; ?>
+							</ul>
+							<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
+								<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+									<?php call_user_func( $tab[2] ); ?>
+								</div>
+							<?php endforeach; ?>
+						</div>
 					</div>
 				</label>
 				<?php

wp-includes/class-wp-customize.php

@@ -542,6 +542,10 @@ final class WP_Customize {
 				'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' ),
+				),
 			),
 		) );
 
@@ -719,3 +723,24 @@ function sanitize_hexcolor( $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;
+}

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

@@ -104,7 +104,8 @@ body {
 	padding-bottom: 60px;
 }
 
-#customize-theme-controls ul {
+#customize-theme-controls > ul,
+#customize-theme-controls .customize-section-content {
 	margin: 0;
 }
 
@@ -328,3 +329,69 @@ body {
 .customize-section .customize-image-picker .actions a {
 	display: block;
 }
+.customize-section .customize-image-picker .library {
+	display: none;
+/*	float: left;*/
+}
+/*.customize-section .customize-image-picker .library label {
+	display: block;
+	position: relative;
+	float: left;
+	padding: 0 0 5px 20px;
+}
+.customize-section .customize-image-picker .library input {
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	margin-top: -7px;
+}*/
+/*.customize-section .customize-image-picker .library .wp-tab-panel {
+	padding: 10px 10px 5px 8px;
+}*/
+.customize-section .customize-image-picker .library ul {
+	border-bottom: 1px solid #dfdfdf;
+	float: left;
+	width: 100%;
+	margin: 5px 0;
+}
+.customize-section .customize-image-picker .library li {
+	color: #999;
+	float: left;
+	padding: 4px 6px;
+	margin: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 1px 1px 0 1px;
+}
+.customize-section .customize-image-picker .library li.library-selected {
+	color: #777;
+	border-color: #dfdfdf;
+	background: #f5f5f5;
+	margin-bottom: -1px;
+	padding-bottom: 5px;
+}
+.customize-section .customize-image-picker .library div {
+	width: 100%;
+	float: left;
+}
+.customize-section .customize-image-picker .library a {
+	display: block;
+	max-width: 220px;
+	max-height: 80px;
+	margin: 5px auto;
+	padding: 4px;
+	background: #fff;
+	border: 1px solid #dfdfdf;
+}
+.customize-section .customize-image-picker .library a:hover {
+	border-color: #21759b;
+}
+.customize-section .customize-image-picker .library img {
+	display: block;
+	max-width: 220px;
+	max-height: 80px;
+}
+.customize-section .customize-image-picker .library-content {
+	display: none;
+}

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

@@ -104,13 +104,45 @@
 
 	api.ImageControl = api.UploadControl.extend({
 		initialize: function( id, value, options ) {
+			var control = this;
+
 			api.UploadControl.prototype.initialize.call( this, id, value, options );
 
 			this.thumbnail = this.container.find('.thumbnail img');
 			this.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();
+			});
+
+			this.library.on( 'click', 'li', function( event ) {
+				var tab = $(this),
+					id = tab.data('customizeTab');
+
+				event.preventDefault();
+
+				if ( tab.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();
+			});
+
+			this.library.on( 'click', 'a', function( event ) {
+				control.set( $(this).attr('href') );
+				event.preventDefault();
+			});
 		},
 		thumbnailSrc: function( to ) {
-			if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
+			if ( /^(https?:)?\/\//.test( to ) )
 				this.thumbnail.prop( 'src', to ).show();
 			else
 				this.thumbnail.hide();