[Summary view] [Print] [Text view]

   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 );