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

   1 /* global colorScheme, Color */
   2 /**
   3  * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
   4  * Also trigger an update of the Color Scheme CSS when a color is changed.
   5  */
   6
   7 ( function( api ) {
   8         var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
   9                 colorSchemeKeys = [
  10                         'background_color',
  11                         'header_background_color',
  12                         'box_background_color',
  13                         'textcolor',
  14                         'sidebar_textcolor',
  15                         'meta_box_background_color'
  16                 ],
  17                 colorSettings = [
  18                         'background_color',
  19                         'header_background_color',
  20                         'sidebar_textcolor'
  21                 ];
  22
  23         api.controlConstructor.select = api.Control.extend( {
  24                 ready: function() {
  25                         if ( 'color_scheme' === this.id ) {
  26                                 this.setting.bind( 'change', function( value ) {
  27                                         // Update Background Color.
  28                                         api( 'background_color' ).set( colorScheme[value].colors[0] );
  29                                         api.control( 'background_color' ).container.find( '.color-picker-hex' )
  30                                                 .data( 'data-default-color', colorScheme[value].colors[0] )
  31                                                 .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
  32
  33                                         // Update Header/Sidebar Background Color.
  34                                         api( 'header_background_color' ).set( colorScheme[value].colors[1] );
  35                                         api.control( 'header_background_color' ).container.find( '.color-picker-hex' )
  36                                                 .data( 'data-default-color', colorScheme[value].colors[1] )
  37                                                 .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
  38
  39                                         // Update Header/Sidebar Text Color.
  40                                         api( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
  41                                         api.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
  42                                                 .data( 'data-default-color', colorScheme[value].colors[4] )
  43                                                 .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
  44                                 } );
  45                         }
  46                 }
  47         } );
  48
  49         // Generate the CSS for the current Color Scheme.
  50         function updateCSS() {
  51                 var scheme = api( 'color_scheme' )(), css,
  52                         colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
  53
  54                 // Merge in color scheme overrides.
  55                 _.each( colorSettings, function( setting ) {
  56                         colors[ setting ] = api( setting )();
  57                 });
  58
  59                 // Add additional colors.
  60                 colors.secondary_textcolor = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
  61                 colors.border_color = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
  62                 colors.border_focus_color = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
  63                 colors.secondary_sidebar_textcolor = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
  64                 colors.sidebar_border_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
  65                 colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
  66
  67                 css = cssTemplate( colors );
  68
  69                 api.previewer.send( 'update-color-scheme-css', css );
  70         }
  71
  72         // Update the CSS whenever a color setting is changed.
  73         _.each( colorSettings, function( setting ) {
  74                 api( setting, function( setting ) {
  75                         setting.bind( updateCSS );
  76                 } );
  77         } );
  78 } )( wp.customize );