<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[20645] trunk/wp-includes: Theme Customizer: Migrate to an ajax-based solution for refreshing the preview and saving.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/20645">20645</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2012-04-30 15:46:17 +0000 (Mon, 30 Apr 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Theme Customizer: Migrate to an ajax-based solution for refreshing the preview and saving. see <a href="http://core.trac.wordpress.org/ticket/20507">#20507</a>, <a href="http://core.trac.wordpress.org/ticket/19910">#19910</a>.
* Use ajax-based saving, add saving indicator.
* Use ajax-based refreshing instead of form targets.
* Instead of using hidden inputs with prefixed names to track the canonical data, use the values stored in wp.customize. Encode the values as JSON before sending to avoid bugs with ids that contain square brackets (PHP mangles POST values with nested brackets).
* Use wp.customize.Previewer solely for the purpose of previewing; move the postMessage connection with the parent frame and other unrelated code snippets into the 'ready' handler.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpincludesclasswpcustomizesettingphp">trunk/wp-includes/class-wp-customize-setting.php</a></li>
<li><a href="#trunkwpincludesclasswpcustomizephp">trunk/wp-includes/class-wp-customize.php</a></li>
<li><a href="#trunkwpincludescsscustomizecontrolsdevcss">trunk/wp-includes/css/customize-controls.dev.css</a></li>
<li><a href="#trunkwpincludescustomizecontrolsphp">trunk/wp-includes/customize-controls.php</a></li>
<li><a href="#trunkwpincludesjscustomizebasedevjs">trunk/wp-includes/js/customize-base.dev.js</a></li>
<li><a href="#trunkwpincludesjscustomizecontrolsdevjs">trunk/wp-includes/js/customize-controls.dev.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpincludesclasswpcustomizesettingphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/class-wp-customize-setting.php (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/class-wp-customize-setting.php 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/class-wp-customize-setting.php 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -21,9 +21,6 @@
</span><span class="cx"> protected $id_data = array();
</span><span class="cx"> private $_post_value; // Cached, sanitized $_POST value.
</span><span class="cx">
</span><del>- // Prefix for $_POST values to prevent naming conflicts.
- const name_prefix = 'customize_';
-
</del><span class="cx"> /**
</span><span class="cx"> * Constructor.
</span><span class="cx"> *
</span><span class="lines">@@ -121,16 +118,8 @@
</span><span class="cx"> if ( isset( $this->_post_value ) )
</span><span class="cx"> return $this->_post_value;
</span><span class="cx">
</span><del>- $base = self::name_prefix . $this->id_data[ 'base' ];
</del><ins>+ $result = $this->manager->post_value( $this );
</ins><span class="cx">
</span><del>- if ( ! isset( $_POST[ $base ] ) )
- return $default;
-
- $result = $this->multidimensional_get( $_POST[ $base ], $this->id_data[ 'keys' ] );
- if ( ! isset( $result ) )
- return $default;
-
- $result = $this->sanitize( $result );
</del><span class="cx"> if ( isset( $result ) )
</span><span class="cx"> return $this->_post_value = $result;
</span><span class="cx"> else
</span></span></pre></div>
<a id="trunkwpincludesclasswpcustomizephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/class-wp-customize.php (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/class-wp-customize.php 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/class-wp-customize.php 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -17,6 +17,10 @@
</span><span class="cx"> protected $sections = array();
</span><span class="cx"> protected $controls = array();
</span><span class="cx">
</span><ins>+ protected $customized;
+
+ private $_post_values;
+
</ins><span class="cx"> /**
</span><span class="cx"> * Constructor.
</span><span class="cx"> *
</span><span class="lines">@@ -31,6 +35,8 @@
</span><span class="cx"> add_action( 'admin_init', array( $this, 'admin_init' ) );
</span><span class="cx"> add_action( 'wp_loaded', array( $this, 'wp_loaded' ) );
</span><span class="cx">
</span><ins>+ add_action( 'wp_ajax_customize_save', array( $this, 'save' ) );
+
</ins><span class="cx"> add_action( 'customize_register', array( $this, 'register_controls' ) );
</span><span class="cx"> add_action( 'customize_controls_init', array( $this, 'prepare_controls' ) );
</span><span class="cx"> add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_control_scripts' ) );
</span><span class="lines">@@ -149,6 +155,24 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * Decode the $_POST attribute used to override the WP_Customize_Setting values.
+ *
+ * @since 3.4.0
+ */
+ public function post_value( $setting ) {
+ if ( ! isset( $this->_post_values ) ) {
+ if ( isset( $_POST['customized'] ) )
+ $this->_post_values = json_decode( stripslashes( $_POST['customized'] ), true );
+ else
+ $this->_post_values = false;
+ }
+
+ if ( isset( $this->_post_values[ $setting->id ] ) )
+ return $setting->sanitize( $this->_post_values[ $setting->id ] );
+ }
+
+
+ /**
</ins><span class="cx"> * Print javascript settings.
</span><span class="cx"> *
</span><span class="cx"> * @since 3.4.0
</span><span class="lines">@@ -267,9 +291,6 @@
</span><span class="cx"> * @since 3.4.0
</span><span class="cx"> */
</span><span class="cx"> public function admin_init() {
</span><del>- if ( isset( $_REQUEST['save_customize_controls'] ) )
- $this->save();
-
</del><span class="cx"> if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -297,14 +318,14 @@
</span><span class="cx"> */
</span><span class="cx"> public function save() {
</span><span class="cx"> if ( ! $this->is_preview() )
</span><del>- return;
</del><ins>+ die;
</ins><span class="cx">
</span><del>- check_admin_referer( 'customize_controls' );
</del><ins>+ check_ajax_referer( 'customize_controls', 'nonce' );
</ins><span class="cx">
</span><span class="cx"> // Do we have to switch themes?
</span><span class="cx"> if ( $this->get_stylesheet() != $this->original_stylesheet ) {
</span><span class="cx"> if ( ! current_user_can( 'switch_themes' ) )
</span><del>- return;
</del><ins>+ die;
</ins><span class="cx">
</span><span class="cx"> // Temporarily stop previewing the theme to allow switch_themes()
</span><span class="cx"> // to operate properly.
</span><span class="lines">@@ -320,6 +341,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> add_action( 'admin_notices', array( $this, '_save_feedback' ) );
</span><ins>+
+ die;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span></span></pre></div>
<a id="trunkwpincludescsscustomizecontrolsdevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/css/customize-controls.dev.css (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/css/customize-controls.dev.css 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/css/customize-controls.dev.css 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -128,6 +128,16 @@
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#customize-footer-actions img {
+ display: none;
+ position: absolute;
+ top: 18px;
+ margin-left: 4px;
+}
+.saving #customize-footer-actions img {
+ display: inline;
+}
+
</ins><span class="cx"> .customize-control {
</span><span class="cx"> float: left;
</span><span class="cx"> clear: both;
</span></span></pre></div>
<a id="trunkwpincludescustomizecontrolsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/customize-controls.php (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/customize-controls.php 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/customize-controls.php 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -41,10 +41,8 @@
</span><span class="cx"> ?>
</span><span class="cx"> </head>
</span><span class="cx"> <body class="wp-full-overlay">
</span><del>- <form id="customize-controls" method="post" class="wrap wp-full-overlay-sidebar" target="_parent" action="<?php echo esc_url( add_query_arg( 'save_customize_controls', '1', admin_url( 'themes.php' ) ) ); ?>">
</del><ins>+ <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
</ins><span class="cx"> <?php wp_nonce_field( 'customize_controls' ); ?>
</span><del>- <input type="hidden" name="customize" value="on" />
- <input type="hidden" name="theme" value="<?php echo esc_attr( $this->get_stylesheet() ); ?>" />
</del><span class="cx"> <div id="customize-header-actions" class="customize-section wp-full-overlay-header">
</span><span class="cx"> <a class="back" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>">
</span><span class="cx"> <?php printf( __( '&larr; Return to %s' ), __('Manage Themes') ); ?>
</span><span class="lines">@@ -79,15 +77,15 @@
</span><span class="cx"> $save_text = $this->get_stylesheet() == $this->original_stylesheet ? __('Save') : __('Save and Activate');
</span><span class="cx"> submit_button( $save_text, 'primary', 'save', false );
</span><span class="cx"> ?>
</span><ins>+ <img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" />
+
</ins><span class="cx"> <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
</span><span class="cx"> <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
</span><span class="cx"> <span class="collapse-sidebar-arrow"></span>
</span><span class="cx"> </a>
</span><span class="cx"> </div>
</span><span class="cx"> </form>
</span><del>- <div id="customize-preview" class="wp-full-overlay-main">
- <iframe name="customize-target"></iframe>
- </div>
</del><ins>+ <div id="customize-preview" class="wp-full-overlay-main"></div>
</ins><span class="cx"> <?php
</span><span class="cx">
</span><span class="cx"> do_action( 'customize_controls_print_footer_scripts' );
</span><span class="lines">@@ -95,11 +93,12 @@
</span><span class="cx"> // Check current scheme and load the preview with the same scheme
</span><span class="cx"> $scheme = is_ssl() ? 'https' : 'http';
</span><span class="cx"> $settings = array(
</span><ins>+ 'theme' => $this->get_stylesheet(),
</ins><span class="cx"> 'preview' => esc_url( home_url( '/', $scheme ) ),
</span><span class="cx"> 'settings' => array(),
</span><span class="cx"> 'controls' => array(),
</span><del>- 'prefix' => WP_Customize_Setting::name_prefix,
</del><span class="cx"> 'parent' => esc_url( admin_url() ),
</span><ins>+ 'ajax' => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
</ins><span class="cx"> );
</span><span class="cx">
</span><span class="cx"> foreach ( $this->settings as $id => $setting ) {
</span></span></pre></div>
<a id="trunkwpincludesjscustomizebasedevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/customize-base.dev.js (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/customize-base.dev.js 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/js/customize-base.dev.js 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -265,6 +265,18 @@
</span><span class="cx"> return this._value[ id ];
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get: function() {
+ var result = {};
+
+ if ( arguments.length )
+ return this.pass( 'get', arguments );
+
+ $.each( this._value, function( key, obj ) {
+ result[ key ] = obj.get();
+ } );
+ return result;
+ },
+
</ins><span class="cx"> set: function( id ) {
</span><span class="cx"> if ( this.has( id ) )
</span><span class="cx"> return this.pass( 'set', arguments );
</span><span class="lines">@@ -326,7 +338,7 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- $.each( [ 'get', 'bind', 'unbind', 'link', 'unlink', 'sync', 'unsync', 'setter', 'resetSetter' ], function( i, method ) {
</del><ins>+ $.each( [ 'bind', 'unbind', 'link', 'unlink', 'sync', 'unsync', 'setter', 'resetSetter' ], function( i, method ) {
</ins><span class="cx"> api.Values.prototype[ method ] = function() {
</span><span class="cx"> return this.pass( method, arguments );
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkwpincludesjscustomizecontrolsdevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/customize-controls.dev.js (20644 => 20645)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/customize-controls.dev.js 2012-04-30 12:58:19 UTC (rev 20644)
+++ trunk/wp-includes/js/customize-controls.dev.js 2012-04-30 15:46:17 UTC (rev 20645)
</span><span class="lines">@@ -15,16 +15,6 @@
</span><span class="cx"> this.id = id;
</span><span class="cx"> this.transport = this.transport || 'refresh';
</span><span class="cx">
</span><del>- element = $( '<input />', {
- type: 'hidden',
- value: this.get(),
- name: api.settings.prefix + id
- });
-
- element.appendTo( this.previewer.form );
- this.element = new api.Element( element );
-
- this.sync( this.element );
</del><span class="cx"> this.bind( this.preview );
</span><span class="cx"> },
</span><span class="cx"> preview: function() {
</span><span class="lines">@@ -271,9 +261,8 @@
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Requires params:
</span><del>- * - iframe - a selector or jQuery element
- * - form - a selector or jQuery element
- * - url - the URL of preview frame
</del><ins>+ * - container - a selector or jQuery element
+ * - url - the URL of preview frame
</ins><span class="cx"> */
</span><span class="cx"> initialize: function( params, options ) {
</span><span class="cx"> var self = this;
</span><span class="lines">@@ -282,8 +271,6 @@
</span><span class="cx">
</span><span class="cx"> this.loaded = $.proxy( this.loaded, this );
</span><span class="cx">
</span><del>- this.loaderUuid = 0;
-
</del><span class="cx"> /*
</span><span class="cx"> * Wrap this.refresh to prevent it from hammering the servers:
</span><span class="cx"> *
</span><span class="lines">@@ -320,82 +307,51 @@
</span><span class="cx"> };
</span><span class="cx"> })( this );
</span><span class="cx">
</span><del>- this.iframe = api.ensure( params.iframe );
- this.form = api.ensure( params.form );
- this.name = this.iframe.prop('name');
</del><ins>+ this.container = api.ensure( params.container );
</ins><span class="cx">
</span><del>- this.container = this.iframe.parent();
</del><ins>+ api.Messenger.prototype.initialize.call( this, params.url );
</ins><span class="cx">
</span><del>- api.Messenger.prototype.initialize.call( this, params.url, this.iframe[0].contentWindow );
-
- this._formOriginalProps = {
- target: this.form.prop('target'),
- action: this.form.prop('action')
- };
-
</del><span class="cx"> this.bind( 'url', function( url ) {
</span><span class="cx"> // Bail if we're navigating to the current url, to a different origin, or wp-admin.
</span><del>- if ( this.url() == url || 0 !== url.indexOf( this.origin() + '/' ) || -1 !== url.indexOf( 'wp-admin' ) )
</del><ins>+ if ( this.url() == url || 0 !== url.indexOf( this.origin() + '/' ) || -1 !== url.indexOf( 'wp-admin' ) )
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.url( url );
</span><span class="cx"> this.refresh();
</span><span class="cx"> });
</span><del>-
- this.refresh();
-
- // Prevent the form from saving when enter is pressed.
- this.form.on( 'keydown', function( e ) {
- if ( 13 === e.which ) // Enter
- e.preventDefault();
- });
-
- // Create a potential postMessage connection with the parent frame.
- this.parent = new api.Messenger( api.settings.parent );
-
- // If we receive a 'back' event, we're inside an iframe.
- // Send any clicks to the 'Return' link to the parent page.
- this.parent.bind( 'back', function( text ) {
- self.form.find('.back').text( text ).click( function( event ) {
- event.preventDefault();
- self.parent.send( 'close' );
- });
- });
-
- // Initialize the connection with the parent frame.
- this.parent.send( 'ready' );
</del><span class="cx"> },
</span><span class="cx"> loader: function() {
</span><span class="cx"> if ( this.loading )
</span><span class="cx"> return this.loading;
</span><span class="cx">
</span><del>- this.loading = $('<iframe />', {
- name: this.name + '-loading-' + this.loaderUuid++
- }).appendTo( this.container );
</del><ins>+ this.loading = $('<iframe />').appendTo( this.container );
</ins><span class="cx">
</span><span class="cx"> return this.loading;
</span><span class="cx"> },
</span><span class="cx"> loaded: function() {
</span><del>- this.iframe.remove();
</del><ins>+ if ( this.iframe )
+ this.iframe.remove();
</ins><span class="cx"> this.iframe = this.loading;
</span><span class="cx"> delete this.loading;
</span><del>- this.iframe.prop( 'name', this.name );
</del><ins>+
</ins><span class="cx"> this.targetWindow( this.iframe[0].contentWindow );
</span><span class="cx"> },
</span><ins>+ query: function() {},
</ins><span class="cx"> refresh: function() {
</span><del>- this.loader().one( 'load', this.loaded );
</del><ins>+ var self = this;
</ins><span class="cx">
</span><del>- this.submit({
- target: this.loader().prop('name'),
- action: this.url()
</del><ins>+ if ( this.request )
+ this.request.abort();
+
+ this.request = $.post( this.url(), this.query() || {}, function( response ) {
+ var iframe = self.loader()[0].contentWindow;
+
+ self.loader().one( 'load', self.loaded );
+
+ iframe.document.open();
+ iframe.document.write( response );
+ iframe.document.close();
</ins><span class="cx"> });
</span><del>- },
- submit: function( props ) {
- if ( props )
- this.form.prop( props );
- this.form.submit();
- if ( props )
- this.form.prop( this._formOriginalProps );
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -415,12 +371,43 @@
</span><span class="cx">
</span><span class="cx"> // Initialize Previewer
</span><span class="cx"> var body = $( document.body ),
</span><del>- previewer = new api.Previewer({
- iframe: '#customize-preview iframe',
- form: '#customize-controls',
- url: api.settings.preview
- });
</del><ins>+ query, previewer, parent;
</ins><span class="cx">
</span><ins>+ // Prevent the form from saving when enter is pressed.
+ $('#customize-controls').on( 'keydown', function( e ) {
+ if ( 13 === e.which ) // Enter
+ e.preventDefault();
+ });
+
+ previewer = new api.Previewer({
+ container: '#customize-preview',
+ form: '#customize-controls',
+ url: api.settings.preview
+ }, {
+ query: function() {
+ return {
+ customize: 'on',
+ theme: api.settings.theme,
+ customized: JSON.stringify( api.get() )
+ };
+ },
+
+ nonce: $('#_wpnonce').val(),
+
+ save: function() {
+ var query = $.extend( this.query(), {
+ action: 'customize_save',
+ nonce: this.nonce
+ }),
+ request = $.post( api.settings.ajax, query );
+
+ body.addClass('saving');
+ request.always( function() {
+ body.removeClass('saving');
+ });
+ }
+ });
+
</ins><span class="cx"> $.each( api.settings.settings, function( id, data ) {
</span><span class="cx"> api.set( id, id, data.value, {
</span><span class="cx"> transport: data.transport,
</span><span class="lines">@@ -438,6 +425,9 @@
</span><span class="cx"> } ) );
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ // Load the preview frame.
+ previewer.refresh();
+
</ins><span class="cx"> // Temporary accordion code.
</span><span class="cx"> $('.customize-section-title').click( function() {
</span><span class="cx"> $( this ).parents('.customize-section').toggleClass( 'open' );
</span><span class="lines">@@ -446,7 +436,7 @@
</span><span class="cx">
</span><span class="cx"> // Button bindings.
</span><span class="cx"> $('#save').click( function( event ) {
</span><del>- previewer.submit();
</del><ins>+ previewer.save();
</ins><span class="cx"> event.preventDefault();
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -455,6 +445,21 @@
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ // Create a potential postMessage connection with the parent frame.
+ parent = new api.Messenger( api.settings.parent );
+
+ // If we receive a 'back' event, we're inside an iframe.
+ // Send any clicks to the 'Return' link to the parent page.
+ parent.bind( 'back', function( text ) {
+ $('.back').text( text ).click( function( event ) {
+ event.preventDefault();
+ parent.send( 'close' );
+ });
+ });
+
+ // Initialize the connection with the parent frame.
+ parent.send( 'ready' );
+
</ins><span class="cx"> // Control visibility for default controls
</span><span class="cx"> $.each({
</span><span class="cx"> 'background_image': {
</span></span></pre>
</div>
</div>
</body>
</html>