Theme Customizer: First pass at using postMessage for background color. Fix instance where preview.targetWindow would become inaccurate. Initialize setting values in customize-preview.js. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20123 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-customize.php

@@ -122,7 +122,13 @@ final class WP_Customize {
 		$settings = array(
 			// @todo: Perhaps grab the URL via $_POST?
 			'parent' => esc_url( admin_url( 'themes.php' ) ),
+			'values' => array(),
 		);
+
+		foreach ( $this->settings as $id => $setting ) {
+			$settings['values'][ $id ] = $setting->value();
+		}
+
 		?>
 		<script type="text/javascript">
 			(function() {

wp-includes/js/customize-base.dev.js

@@ -438,10 +438,11 @@ if ( typeof wp === 'undefined' )
 	api.Messenger = api.Class.extend({
 		add: api.ValueFactory(),
 
-		initialize: function( url, options ) {
+		initialize: function( url, targetWindow, options ) {
 			$.extend( this, options || {} );
 
 			this.add( 'url', url );
+			this.add( 'targetWindow', targetWindow || null );
 			this.add( 'origin' ).link( 'url', function( url ) {
 				return url().replace( /([^:]+:\/\/[^\/]+).*/, '$1' );
 			});
@@ -453,8 +454,6 @@ if ( typeof wp === 'undefined' )
 		receive: function( event ) {
 			var message;
 
-			console.log( 'messenger receiveMessage', arguments );
-
 			// @todo: remove, this is done in the postMessage plugin.
 			// if ( this.origin && event.origin !== this.origin )
 			// 	return;
@@ -470,9 +469,8 @@ if ( typeof wp === 'undefined' )
 			if ( ! this.url() )
 				return;
 
-			console.log( 'sending message', id, data );
 			message = JSON.stringify({ id: id, data: data });
-			$.postMessage( message, this.url(), this.targetWindow || null );
+			$.postMessage( message, this.url(), this.targetWindow() );
 		},
 		bind: function( id, callback ) {
 			var topic = this.topics[ id ] || ( this.topics[ id ] = $.Callbacks() );

wp-includes/js/customize-controls.dev.js

@@ -59,9 +59,7 @@
 
 			this.container = this.iframe.parent();
 
-			api.Messenger.prototype.initialize.call( this, params.url, {
+			api.Messenger.prototype.initialize.call( this, params.url, this.iframe[0].contentWindow );
-				targetWindow: this.iframe[0].contentWindow
-			});
 
 			this._formOriginalProps = {
 				target: this.form.prop('target'),
@@ -100,6 +98,7 @@
 			this.iframe = this.loading;
 			delete this.loading;
 			this.iframe.prop( 'name', this.name );
+			this.targetWindow( this.iframe[0].contentWindow );
 		},
 		refresh: function() {
 			this.loader().one( 'load', this.loaded );
@@ -127,7 +126,7 @@
 			return;
 
 		var controls = $('[name^="' + api.settings.prefix + '"]'),
-			previewer, pickers, validateColor;
+			previewer, pickers, validateColor, sendSetting;
 
 		// Initialize Previewer
 		previewer = new api.Previewer({
@@ -146,6 +145,8 @@
 			setting.link( setting.control );
 
 			setting.bind( previewer.refresh );
+
+
 		});
 
 		// Temporary accordion code.
@@ -196,9 +197,9 @@
 			$(this).siblings('div').toggle();
 		});
 
-		// Fetch prefixed settings.
+		// Background color uses postMessage by default
-		$('[name^="' + api.settings.prefix + '"]').each( function() {
+		api('background_color').unbind( previewer.refresh ).bind( function() {
-			// console.log( this.name );
+			previewer.send( 'setting', [ 'background_color', this() ] );
 		});
 	});
 

wp-includes/js/customize-preview.dev.js

@@ -51,9 +51,26 @@
 	});
 
 	$( function() {
-		var preview;
+		if ( ! api.settings )
+			return;
+
+		var preview, body;
 
 		preview = new api.Preview( api.settings.parent );
+
+		$.each( api.settings.values, function( id, value ) {
+			api.set( id, value );
+		});
+
+		preview.bind( 'setting', function( args ) {
+			api.set.apply( api, args );
+		});
+
+		body = $(document.body);
+		// Auto update background color by default
+		api.bind( 'background_color', function( to ) {
+			body.css( 'background-color', '#' + to );
+		});
 	});
 
 })( wp, jQuery );