wp-content/themes/twentytwelve/js/theme-customizer.js

   1 /**
   2  * Theme Customizer enhancements for a better user experience.
   3  *
   4  * Contains handlers to make Theme 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' ) && '' == _wpCustomizeSettings.values.background_color )
  61                                 body.addClass( 'custom-background-empty' );
  62                 } );
  63         } );
  64 } )( jQuery );