Changeset 30126

Timestamp:

10/31/2014 08:44:19 PM (10 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:

• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-content/themes/twentyfifteen/js/color-scheme-control.js (modified) (2 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -870 +870 @@
                 }
             });
+
+            this.setting.bind( function ( value ) {
+                picker.val( value );
+                picker.wpColorPicker( 'color', value );
+            });
         }
     });

trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

@@ -6 +6 @@
  */
 
-( function( wp ) {
-    wp.customize.controlConstructor.select = wp.customize.Control.extend( {
+( function( api ) {
+    api.controlConstructor.select = api.Control.extend( {
         ready: function() {
             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 ) {
-                    // if Header Text is not hidden, update value
-                    if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
-                        wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
-                        headerTextColor.val( colorScheme[value].colors[4] )
+                    // If Header Text is not hidden, update value.
+                    if ( 'blank' !== api( 'header_textcolor' ).get() ) {
+                        api( 'header_textcolor' ).set( colorScheme[value].colors[4] );
+                        api.control( 'header_textcolor' ).container.find( '.color-picker-hex' )
                             .data( 'data-default-color', colorScheme[value].colors[4] )
-                            .wpColorPicker( 'color', colorScheme[value].colors[4] )
                             .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
                     }
 
-                    // update Background Color
-                    wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
-                    backgroundColor.val( colorScheme[value].colors[0] )
+                    // Update Background Color.
+                    api( 'background_color' ).set( colorScheme[value].colors[0] );
+                    api.control( 'background_color' ).container.find( '.color-picker-hex' )
                         .data( 'data-default-color', colorScheme[value].colors[0] )
-                        .wpColorPicker( 'color', colorScheme[value].colors[0] )
                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
 
-                    // update Header/Sidebar Background Color
-                    wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
-                    sidebarColor.val( colorScheme[value].colors[1] )
+                    // Update Header/Sidebar Background Color.
+                    api( 'header_background_color' ).set( colorScheme[value].colors[1] );
+                    api.control( 'header_background_color' ).container.find( '.color-picker-hex' )
                         .data( 'data-default-color', colorScheme[value].colors[1] )
-                        .wpColorPicker( 'color', colorScheme[value].colors[1] )
                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
 
-                    // update Sidebar Text Color
-                    wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
-                    sidebarTextColor.val( colorScheme[value].colors[4] )
+                    // Update Sidebar Text Color.
+                    api( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
+                    api.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
                         .data( 'data-default-color', colorScheme[value].colors[4] )
-                        .wpColorPicker( 'color', colorScheme[value].colors[4] )
                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
                 } );
@@ -50 +40 @@
         }
     } );
-} )( this.wp );
+} )( wp.customize );