From 6d9357444c43ebaac18ffca2042a4116682248b9 Mon Sep 17 00:00:00 2001
From: Lance Willett <lancewillett@git.wordpress.org>
Date: Wed, 25 Jul 2012 19:42:55 +0000
Subject: [PATCH] Twenty Twelve: enable async body class value changes for
 custom background color changes in Theme Customizer. See #21226.

git-svn-id: https://develop.svn.wordpress.org/trunk@21343 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-content/themes/twentytwelve/functions.php       | 11 +++++++++++
 .../themes/twentytwelve/js/theme-customizer.js     | 14 ++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 wp-content/themes/twentytwelve/js/theme-customizer.js

diff --git a/wp-content/themes/twentytwelve/functions.php b/wp-content/themes/twentytwelve/functions.php
index 7c7c238ec7..72b72640e7 100644
--- a/wp-content/themes/twentytwelve/functions.php
+++ b/wp-content/themes/twentytwelve/functions.php
@@ -365,3 +365,14 @@ function twentytwelve_content_width() {
 	}
 }
 add_action( 'template_redirect', 'twentytwelve_content_width' );
+
+/**
+ * Bind JS handler to make Theme Customizer preview reload
+ * custom background `body_class` value changes asynchronously.
+ *
+ * @since Twenty Twelve 1.0
+ */
+function twentytwelve_customize_preview_js() {
+	wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true );
+}
+add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' );
\ No newline at end of file
diff --git a/wp-content/themes/twentytwelve/js/theme-customizer.js b/wp-content/themes/twentytwelve/js/theme-customizer.js
new file mode 100644
index 0000000000..e11d2b775d
--- /dev/null
+++ b/wp-content/themes/twentytwelve/js/theme-customizer.js
@@ -0,0 +1,14 @@
+( function( $ ){
+	// Hook into background color change and adjust body class value as needed.
+	wp.customize( 'background_color', function( value ) {
+		var body = $( 'body' );
+		value.bind( function( to ) {
+			if ( '#ffffff' == to || '#fff' == to || '' == to )
+				body.addClass( 'custom-background-white' );
+			else if ( '' == to )
+				body.addClass( 'custom-background-empty' );
+			else
+				body.removeClass( 'custom-background-empty custom-background-white' );
+		} );
+	} );
+} )( jQuery );
\ No newline at end of file