wp-content/themes/twentysixteen/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( '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 );