[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( 'twentysixteen-color-scheme' ),
   9          colorSchemeKeys = [
  10              'background_color',
  11              'page_background_color',
  12              'link_color',
  13              'main_text_color',
  14              'secondary_text_color'
  15          ],
  16          colorSettings = [
  17              'background_color',
  18              'page_background_color',
  19              'link_color',
  20              'main_text_color',
  21              'secondary_text_color'
  22          ];
  23  
  24      api.controlConstructor.select = api.Control.extend( {
  25          ready: function() {
  26              if ( 'color_scheme' === this.id ) {
  27                  this.setting.bind( 'change', function( value ) {
  28                      var colors = colorScheme[value].colors;
  29  
  30                      // Update Background Color.
  31                      var color = colors[0];
  32                      api( 'background_color' ).set( color );
  33                      api.control( 'background_color' ).container.find( '.color-picker-hex' )
  34                          .data( 'data-default-color', color )
  35                          .wpColorPicker( 'defaultColor', color );
  36  
  37                      // Update Page Background Color.
  38                      color = colors[1];
  39                      api( 'page_background_color' ).set( color );
  40                      api.control( 'page_background_color' ).container.find( '.color-picker-hex' )
  41                          .data( 'data-default-color', color )
  42                          .wpColorPicker( 'defaultColor', color );
  43  
  44                      // Update Link Color.
  45                      color = colors[2];
  46                      api( 'link_color' ).set( color );
  47                      api.control( 'link_color' ).container.find( '.color-picker-hex' )
  48                          .data( 'data-default-color', color )
  49                          .wpColorPicker( 'defaultColor', color );
  50  
  51                      // Update Main Text Color.
  52                      color = colors[3];
  53                      api( 'main_text_color' ).set( color );
  54                      api.control( 'main_text_color' ).container.find( '.color-picker-hex' )
  55                          .data( 'data-default-color', color )
  56                          .wpColorPicker( 'defaultColor', color );
  57  
  58                      // Update Secondary Text Color.
  59                      color = colors[4];
  60                      api( 'secondary_text_color' ).set( color );
  61                      api.control( 'secondary_text_color' ).container.find( '.color-picker-hex' )
  62                          .data( 'data-default-color', color )
  63                          .wpColorPicker( 'defaultColor', color );
  64                  } );
  65              }
  66          }
  67      } );
  68  
  69      // Generate the CSS for the current Color Scheme.
  70  	function updateCSS() {
  71          var scheme = api( 'color_scheme' )(),
  72              css,
  73              colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
  74  
  75          // Merge in color scheme overrides.
  76          _.each( colorSettings, function( setting ) {
  77              colors[ setting ] = api( setting )();
  78          } );
  79  
  80          // Add additional color.
  81          // jscs:disable
  82          colors.border_color = Color( colors.main_text_color ).toCSS( 'rgba', 0.2 );
  83          // jscs:enable
  84  
  85          css = cssTemplate( colors );
  86  
  87          api.previewer.send( 'update-color-scheme-css', css );
  88      }
  89  
  90      // Update the CSS whenever a color setting is changed.
  91      _.each( colorSettings, function( setting ) {
  92          api( setting, function( setting ) {
  93              setting.bind( updateCSS );
  94          } );
  95      } );
  96  } )( wp.customize );