WordPress.org

Make WordPress Core

Changeset 20123


Ignore:
Timestamp:
03/06/2012 02:49:02 AM (8 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize.php

    r20110 r20123  
    123123            // @todo: Perhaps grab the URL via $_POST?
    124124            'parent' => esc_url( admin_url( 'themes.php' ) ),
     125            'values' => array(),
    125126        );
     127
     128        foreach ( $this->settings as $id => $setting ) {
     129            $settings['values'][ $id ] = $setting->value();
     130        }
     131
    126132        ?>
    127133        <script type="text/javascript">
  • trunk/wp-includes/js/customize-base.dev.js

    r20034 r20123  
    439439        add: api.ValueFactory(),
    440440
    441         initialize: function( url, options ) {
     441        initialize: function( url, targetWindow, options ) {
    442442            $.extend( this, options || {} );
    443443
    444444            this.add( 'url', url );
     445            this.add( 'targetWindow', targetWindow || null );
    445446            this.add( 'origin' ).link( 'url', function( url ) {
    446447                return url().replace( /([^:]+:\/\/[^\/]+).*/, '$1' );
     
    454455            var message;
    455456
    456             console.log( 'messenger receiveMessage', arguments );
    457 
    458457            // @todo: remove, this is done in the postMessage plugin.
    459458            // if ( this.origin && event.origin !== this.origin )
     
    471470                return;
    472471
    473             console.log( 'sending message', id, data );
    474472            message = JSON.stringify({ id: id, data: data });
    475             $.postMessage( message, this.url(), this.targetWindow || null );
     473            $.postMessage( message, this.url(), this.targetWindow() );
    476474        },
    477475        bind: function( id, callback ) {
  • trunk/wp-includes/js/customize-controls.dev.js

    r20121 r20123  
    6060            this.container = this.iframe.parent();
    6161
    62             api.Messenger.prototype.initialize.call( this, params.url, {
    63                 targetWindow: this.iframe[0].contentWindow
    64             });
     62            api.Messenger.prototype.initialize.call( this, params.url, this.iframe[0].contentWindow );
    6563
    6664            this._formOriginalProps = {
     
    10199            delete this.loading;
    102100            this.iframe.prop( 'name', this.name );
     101            this.targetWindow( this.iframe[0].contentWindow );
    103102        },
    104103        refresh: function() {
     
    128127
    129128        var controls = $('[name^="' + api.settings.prefix + '"]'),
    130             previewer, pickers, validateColor;
     129            previewer, pickers, validateColor, sendSetting;
    131130
    132131        // Initialize Previewer
     
    147146
    148147            setting.bind( previewer.refresh );
     148
     149
    149150        });
    150151
     
    197198        });
    198199
    199         // Fetch prefixed settings.
    200         $('[name^="' + api.settings.prefix + '"]').each( function() {
    201             // console.log( this.name );
     200        // Background color uses postMessage by default
     201        api('background_color').unbind( previewer.refresh ).bind( function() {
     202            previewer.send( 'setting', [ 'background_color', this() ] );
    202203        });
    203204    });
  • trunk/wp-includes/js/customize-preview.dev.js

    r19995 r20123  
    5252
    5353    $( function() {
    54         var preview;
     54        if ( ! api.settings )
     55            return;
     56
     57        var preview, body;
    5558
    5659        preview = new api.Preview( api.settings.parent );
     60
     61        $.each( api.settings.values, function( id, value ) {
     62            api.set( id, value );
     63        });
     64
     65        preview.bind( 'setting', function( args ) {
     66            api.set.apply( api, args );
     67        });
     68
     69        body = $(document.body);
     70        // Auto update background color by default
     71        api.bind( 'background_color', function( to ) {
     72            body.css( 'background-color', '#' + to );
     73        });
    5774    });
    5875
Note: See TracChangeset for help on using the changeset viewer.