Customizer: Improve `ColorControl`'s `wpColorPicker` to update UI based on setting changes.

Update Twenty Fifteen's `colorScheme` control to properly interact with the API, using `wp.customize.control()` instead of traversing DOM for other controls' container elements and stop manually updating color control UIs.

props westonruter.
fixes #30031.
Built from https://develop.svn.wordpress.org/trunk@30126


git-svn-id: http://core.svn.wordpress.org/trunk@30126 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling 2014-10-31 20:45:22 +00:00
parent 7eefc4d1e1
commit 461507452a
4 changed files with 23 additions and 28 deletions

View File

@ -869,6 +869,11 @@
control.setting.set( false ); control.setting.set( false );
} }
}); });
this.setting.bind( function ( value ) {
picker.val( value );
picker.wpColorPicker( 'color', value );
});
} }
}); });

File diff suppressed because one or more lines are too long

View File

@ -5,48 +5,38 @@
* Adds listener to Color Scheme control to update other color controls with new values/defaults * Adds listener to Color Scheme control to update other color controls with new values/defaults
*/ */
( function( wp ) { ( function( api ) {
wp.customize.controlConstructor.select = wp.customize.Control.extend( { api.controlConstructor.select = api.Control.extend( {
ready: function() { ready: function() {
if ( 'color_scheme' === this.id ) { if ( 'color_scheme' === this.id ) {
var parentSection = this.container.closest( '.control-section' ),
headerTextColor = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
backgroundColor = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
sidebarColor = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
this.setting.bind( 'change', function( value ) { this.setting.bind( 'change', function( value ) {
// if Header Text is not hidden, update value // If Header Text is not hidden, update value.
if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) { if ( 'blank' !== api( 'header_textcolor' ).get() ) {
wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] ); api( 'header_textcolor' ).set( colorScheme[value].colors[4] );
headerTextColor.val( colorScheme[value].colors[4] ) api.control( 'header_textcolor' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', colorScheme[value].colors[4] ) .data( 'data-default-color', colorScheme[value].colors[4] )
.wpColorPicker( 'color', colorScheme[value].colors[4] )
.wpColorPicker( 'defaultColor', colorScheme[value].colors[4] ); .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
} }
// update Background Color // Update Background Color.
wp.customize( 'background_color' ).set( colorScheme[value].colors[0] ); api( 'background_color' ).set( colorScheme[value].colors[0] );
backgroundColor.val( colorScheme[value].colors[0] ) api.control( 'background_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', colorScheme[value].colors[0] ) .data( 'data-default-color', colorScheme[value].colors[0] )
.wpColorPicker( 'color', colorScheme[value].colors[0] )
.wpColorPicker( 'defaultColor', colorScheme[value].colors[0] ); .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
// update Header/Sidebar Background Color // Update Header/Sidebar Background Color.
wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] ); api( 'header_background_color' ).set( colorScheme[value].colors[1] );
sidebarColor.val( colorScheme[value].colors[1] ) api.control( 'header_background_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', colorScheme[value].colors[1] ) .data( 'data-default-color', colorScheme[value].colors[1] )
.wpColorPicker( 'color', colorScheme[value].colors[1] )
.wpColorPicker( 'defaultColor', colorScheme[value].colors[1] ); .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
// update Sidebar Text Color // Update Sidebar Text Color.
wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] ); api( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
sidebarTextColor.val( colorScheme[value].colors[4] ) api.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', colorScheme[value].colors[4] ) .data( 'data-default-color', colorScheme[value].colors[4] )
.wpColorPicker( 'color', colorScheme[value].colors[4] )
.wpColorPicker( 'defaultColor', colorScheme[value].colors[4] ); .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
} ); } );
} }
} }
} ); } );
} )( this.wp ); } )( wp.customize );

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.1-alpha-30125'; $wp_version = '4.1-alpha-30126';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.