[Summary view] [Print] [Text view]

   1  /**
   2   * File customize-preview.js.
   3   *
   4   * Theme Customizer enhancements for a better user experience.
   5   *
   6   * Contains handlers to make Theme Customizer preview reload changes asynchronously.
   7   */
   8  
   9  (function( $ ) {
  10  
  11      // Primary color.
  12      wp.customize( 'primary_color', function( value ) {
  13          value.bind( function( to ) {
  14              // Update custom color CSS.
  15              var style = $( '#custom-theme-colors' ),
  16                  hue = style.data( 'hue' ),
  17                  css = style.html(),
  18                  color;
  19  
  20              if( 'custom' === to ){
  21                  // If a custom primary color is selected, use the currently set primary_color_hue.
  22                  color = wp.customize.get().primary_color_hue;
  23              } else {
  24                  // If the "default" option is selected, get the default primary_color_hue.
  25                  color = 199;
  26              }
  27  
  28              // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
  29              css = css.split( hue + ',' ).join( color + ',' );
  30              style.html( css ).data( 'hue', color );
  31          });
  32      });
  33  
  34      // Primary color hue.
  35      wp.customize( 'primary_color_hue', function( value ) {
  36          value.bind( function( to ) {
  37  
  38              // Update custom color CSS.
  39              var style = $( '#custom-theme-colors' ),
  40                  hue = style.data( 'hue' ),
  41                  css = style.html();
  42  
  43              // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
  44              css = css.split( hue + ',' ).join( to + ',' );
  45              style.html( css ).data( 'hue', to );
  46          });
  47      });
  48  
  49      // Image filter.
  50      wp.customize( 'image_filter', function( value ) {
  51          value.bind( function( to ) {
  52              if ( to ) {
  53                  $( 'body' ).addClass( 'image-filters-enabled' );
  54              } else {
  55                  $( 'body' ).removeClass( 'image-filters-enabled' );
  56              }
  57          } );
  58      } );
  59  
  60  })( jQuery );