[Summary view] [Print] [Text view]

   1  /**
   2   * Customizer enhancements for a better user experience.
   3   *
   4   * Contains handlers to make Customizer preview reload changes asynchronously.
   5   * Things like site title, description, and background color changes.
   6   */
   7  
   8  ( function( $ ) {
   9      // Site title and description.
  10      wp.customize( 'blogname', function( value ) {
  11          value.bind( function( to ) {
  12              $( '.site-title a' ).text( to );
  13          } );
  14      } );
  15      wp.customize( 'blogdescription', function( value ) {
  16          value.bind( function( to ) {
  17              $( '.site-description' ).text( to );
  18          } );
  19      } );
  20  
  21      // Header text color.
  22      wp.customize( 'header_textcolor', function( value ) {
  23          value.bind( function( to ) {
  24              if ( 'blank' === to ) {
  25                  $( '.site-title, .site-title a, .site-description' ).css( {
  26                      'clip': 'rect(1px, 1px, 1px, 1px)',
  27                      'position': 'absolute'
  28                  } );
  29              } else {
  30                  $( '.site-title, .site-title a, .site-description' ).css( {
  31                      'clip': 'auto',
  32                      'color': to,
  33                      'position': 'relative'
  34                  } );
  35              }
  36          } );
  37      } );
  38  
  39      // Hook into background color/image change and adjust body class value as needed.
  40      wp.customize( 'background_color', function( value ) {
  41          value.bind( function( to ) {
  42              var body = $( 'body' );
  43  
  44              if ( ( '#ffffff' === to || '#fff' === to ) && 'none' === body.css( 'background-image' ) )
  45                  body.addClass( 'custom-background-white' );
  46              else if ( '' === to && 'none' === body.css( 'background-image' ) )
  47                  body.addClass( 'custom-background-empty' );
  48              else
  49                  body.removeClass( 'custom-background-empty custom-background-white' );
  50          } );
  51      } );
  52      wp.customize( 'background_image', function( value ) {
  53          value.bind( function( to ) {
  54              var body = $( 'body' );
  55  
  56              if ( '' !== to ) {
  57                  body.removeClass( 'custom-background-empty custom-background-white' );
  58              } else if ( 'rgb(255, 255, 255)' === body.css( 'background-color' ) ) {
  59                  body.addClass( 'custom-background-white' );
  60              } else if ( 'rgb(230, 230, 230)' === body.css( 'background-color' ) && '' === wp.customize.instance( 'background_color' ).get() ) {
  61                  body.addClass( 'custom-background-empty' );
  62              }
  63          } );
  64      } );
  65  } )( jQuery );