Changeset 20123

Timestamp:

03/06/2012 02:49:02 AM (14 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk/wp-includes

Files:

• class-wp-customize.php (modified) (1 diff)
• js/customize-base.dev.js (modified) (3 diffs)
• js/customize-controls.dev.js (modified) (5 diffs)
• js/customize-preview.dev.js (modified) (1 diff)

trunk/wp-includes/class-wp-customize.php

@@ -123 +123 @@
             // @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">

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

@@ -439 +439 @@
         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' );
@@ -454 +455 @@
             var message;
 
-            console.log( 'messenger receiveMessage', arguments );
-
             // @todo: remove, this is done in the postMessage plugin.
             // if ( this.origin && event.origin !== this.origin )
@@ -471 +470 @@
                 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 ) {

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

@@ -60 +60 @@
             this.container = this.iframe.parent();
 
-            api.Messenger.prototype.initialize.call( this, params.url, {
-                targetWindow: this.iframe[0].contentWindow
-            });
+            api.Messenger.prototype.initialize.call( this, params.url, this.iframe[0].contentWindow );
 
             this._formOriginalProps = {
@@ -101 +99 @@
             delete this.loading;
             this.iframe.prop( 'name', this.name );
+            this.targetWindow( this.iframe[0].contentWindow );
         },
         refresh: function() {
@@ -128 +127 @@
 
         var controls = $('[name^="' + api.settings.prefix + '"]'),
-            previewer, pickers, validateColor;
+            previewer, pickers, validateColor, sendSetting;
 
         // Initialize Previewer
@@ -147 +146 @@
 
             setting.bind( previewer.refresh );
+
+
         });
 
@@ -197 +198 @@
         });
 
-        // Fetch prefixed settings.
-        $('[name^="' + api.settings.prefix + '"]').each( function() {
-            // console.log( this.name );
+        // Background color uses postMessage by default
+        api('background_color').unbind( previewer.refresh ).bind( function() {
+            previewer.send( 'setting', [ 'background_color', this() ] );
         });
     });

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

@@ -52 +52 @@
 
     $( 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 );
+        });
     });