--- /dev/null
+/* global colorScheme, Color */
+/**
+ * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
+ * Also trigger an update of the Color Scheme CSS when a color is changed.
+ */
+
+( function( api ) {
+ var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
+ colorSchemeKeys = [
+ 'background_color',
+ 'header_background_color',
+ 'box_background_color',
+ 'textcolor',
+ 'sidebar_textcolor',
+ 'meta_box_background_color'
+ ],
+ colorSettings = [
+ 'background_color',
+ 'header_background_color',
+ 'sidebar_textcolor'
+ ];
+
+ api.controlConstructor.select = api.Control.extend( {
+ ready: function() {
+ if ( 'color_scheme' === this.id ) {
+ this.setting.bind( 'change', function( value ) {
+ // 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( 'defaultColor', colorScheme[value].colors[0] );
+
+ // 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( 'defaultColor', colorScheme[value].colors[1] );
+
+ // Update Header/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( 'defaultColor', colorScheme[value].colors[4] );
+ } );
+ }
+ }
+ } );
+
+ // Generate the CSS for the current Color Scheme.
+ function updateCSS() {
+ var scheme = api( 'color_scheme' )(), css,
+ colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
+
+ // Merge in color scheme overrides.
+ _.each( colorSettings, function( setting ) {
+ colors[ setting ] = api( setting )();
+ });
+
+ // Add additional colors.
+ colors.secondary_textcolor = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
+ colors.border_color = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
+ colors.border_focus_color = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
+ colors.secondary_sidebar_textcolor = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
+ colors.sidebar_border_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
+ colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
+
+ css = cssTemplate( colors );
+
+ api.previewer.send( 'update-color-scheme-css', css );
+ }
+
+ // Update the CSS whenever a color setting is changed.
+ _.each( colorSettings, function( setting ) {
+ api( setting, function( setting ) {
+ setting.bind( updateCSS );
+ } );
+ } );
+} )( wp.customize );