WordPress.org

Make WordPress Core

Changeset 30126


Ignore:
Timestamp:
10/31/2014 08:44:19 PM (6 years ago)
Author:
ocean90
Message:

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.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r30102 r30126  
    870870                }
    871871            });
     872
     873            this.setting.bind( function ( value ) {
     874                picker.val( value );
     875                picker.wpColorPicker( 'color', value );
     876            });
    872877        }
    873878    });
  • trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

    r30046 r30126  
    66 */
    77
    8 ( function( wp ) {
    9     wp.customize.controlConstructor.select = wp.customize.Control.extend( {
     8( function( api ) {
     9    api.controlConstructor.select = api.Control.extend( {
    1010        ready: function() {
    1111            if ( 'color_scheme' === this.id ) {
    12                 var parentSection    = this.container.closest( '.control-section' ),
    13                     headerTextColor  = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
    14                     backgroundColor  = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
    15                     sidebarColor     = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
    16                     sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
    17 
    1812                this.setting.bind( 'change', function( value ) {
    19                     // if Header Text is not hidden, update value
    20                     if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
    21                         wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
    22                         headerTextColor.val( colorScheme[value].colors[4] )
     13                    // If Header Text is not hidden, update value.
     14                    if ( 'blank' !== api( 'header_textcolor' ).get() ) {
     15                        api( 'header_textcolor' ).set( colorScheme[value].colors[4] );
     16                        api.control( 'header_textcolor' ).container.find( '.color-picker-hex' )
    2317                            .data( 'data-default-color', colorScheme[value].colors[4] )
    24                             .wpColorPicker( 'color', colorScheme[value].colors[4] )
    2518                            .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    2619                    }
    2720
    28                     // update Background Color
    29                     wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
    30                     backgroundColor.val( colorScheme[value].colors[0] )
     21                    // Update Background Color.
     22                    api( 'background_color' ).set( colorScheme[value].colors[0] );
     23                    api.control( 'background_color' ).container.find( '.color-picker-hex' )
    3124                        .data( 'data-default-color', colorScheme[value].colors[0] )
    32                         .wpColorPicker( 'color', colorScheme[value].colors[0] )
    3325                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
    3426
    35                     // update Header/Sidebar Background Color
    36                     wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
    37                     sidebarColor.val( colorScheme[value].colors[1] )
     27                    // Update Header/Sidebar Background Color.
     28                    api( 'header_background_color' ).set( colorScheme[value].colors[1] );
     29                    api.control( 'header_background_color' ).container.find( '.color-picker-hex' )
    3830                        .data( 'data-default-color', colorScheme[value].colors[1] )
    39                         .wpColorPicker( 'color', colorScheme[value].colors[1] )
    4031                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
    4132
    42                     // update Sidebar Text Color
    43                     wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
    44                     sidebarTextColor.val( colorScheme[value].colors[4] )
     33                    // Update Sidebar Text Color.
     34                    api( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
     35                    api.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
    4536                        .data( 'data-default-color', colorScheme[value].colors[4] )
    46                         .wpColorPicker( 'color', colorScheme[value].colors[4] )
    4737                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    4838                } );
     
    5040        }
    5141    } );
    52 } )( this.wp );
     42} )( wp.customize );
Note: See TracChangeset for help on using the changeset viewer.