From d8513a5ebbcf7dec2a952f7b6485e8ec188a54c8 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Sun, 25 Mar 2012 21:18:32 +0000 Subject: [PATCH] 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 | 15 +++++ wp-includes/class-wp-customize.php | 25 ++++++++ wp-includes/css/customize-controls.dev.css | 69 +++++++++++++++++++++- wp-includes/js/customize-controls.dev.js | 34 ++++++++++- 4 files changed, 141 insertions(+), 2 deletions(-) diff --git a/wp-includes/class-wp-customize-setting.php b/wp-includes/class-wp-customize-setting.php index 0046d0726a..e38d7fc6db 100644 --- a/wp-includes/class-wp-customize-setting.php +++ b/wp-includes/class-wp-customize-setting.php @@ -437,8 +437,23 @@ class WP_Customize_Setting {
+
+
+ + control_params['tabs'] as $tab ): ?> +
+ +
+ +
'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 ) : ?> + + + + process_default_headers(); + + foreach ( $custom_image_header->default_headers as $header ) : ?> + + + + ul, +#customize-theme-controls .customize-section-content { margin: 0; } @@ -327,4 +328,70 @@ 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; } \ 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 d950743ea4..4fc0c6f37f 100644 --- a/wp-includes/js/customize-controls.dev.js +++ b/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();