From b3c12bada3ab8c469fa2ce027e325a90b7c2839f Mon Sep 17 00:00:00 2001 From: koopersmith Date: Fri, 25 May 2012 17:42:06 +0000 Subject: [PATCH] Theme Customizer: Improve activate and publish flow, make customizer states easier to track. fixes #20743, see #19910. git-svn-id: http://core.svn.wordpress.org/trunk@20899 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/customize.php | 1 + wp-admin/js/theme.dev.js | 29 --------- wp-includes/js/customize-controls.dev.js | 78 +++++++++++++++++++----- wp-includes/script-loader.php | 6 +- 4 files changed, 70 insertions(+), 44 deletions(-) diff --git a/wp-admin/customize.php b/wp-admin/customize.php index 80e14b773c..7eedff8105 100644 --- a/wp-admin/customize.php +++ b/wp-admin/customize.php @@ -130,6 +130,7 @@ do_action( 'customize_controls_print_scripts' ); 'url' => array( 'preview' => esc_url( home_url( '/' ) ), 'parent' => esc_url( admin_url() ), + 'activated' => esc_url( admin_url( 'themes.php?activated=true' ) ), 'ajax' => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ), 'allowed' => array_map( 'esc_url', $allowed_urls ), 'isCrossDomain' => $cross_domain, diff --git a/wp-admin/js/theme.dev.js b/wp-admin/js/theme.dev.js index dbc521743b..3188c61746 100644 --- a/wp-admin/js/theme.dev.js +++ b/wp-admin/js/theme.dev.js @@ -18,35 +18,6 @@ jQuery( function($) { }); }); -/** - * Theme Customizer - * - * Ensures the themes page is refreshed if the customizer switches the theme. - */ -jQuery( function($) { - var Loader, activated; - - if ( typeof wp === 'undefined' || ! wp.customize || ! ( Loader = wp.customize.Loader ) ) - return; - - // Strip the current URL of its query string and hash, add activated query string. - activated = window.location.href.replace(/[#?].*$/, '') + '?activated=true'; - - // When an instance of the customizer is loaded... - Loader.bind( 'open', function() { - - // If the customizer triggers a theme switched event, - // load the activated page when the customizer is closed. - Loader.messenger.bind( 'switched', function() { - - Loader.unbind( 'close', Loader.overlay.hide ); - Loader.bind( 'close', function() { - window.location = activated; - }); - }); - }); -}); - /** * Theme Install * diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js index 34fb08995c..d313d83174 100644 --- a/wp-includes/js/customize-controls.dev.js +++ b/wp-includes/js/customize-controls.dev.js @@ -439,13 +439,14 @@ api.settings = window._wpCustomizeSettings; api.l10n = window._wpCustomizeControlsL10n; + // Check if we can run the customizer. if ( ! api.settings ) return; + // Redirect to the fallback preview if any incompatibilities are found. if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) ) return window.location = api.settings.url.fallback; - // Initialize Previewer var body = $( document.body ), query, previewer, parent; @@ -455,6 +456,7 @@ e.preventDefault(); }); + // Initialize Previewer previewer = new api.Previewer({ container: '#customize-preview', form: '#customize-controls', @@ -481,9 +483,14 @@ api.trigger( 'save', request ); body.addClass('saving'); + request.always( function() { body.removeClass('saving'); }); + + request.done( function() { + api.trigger( 'saved' ); + }); } }); @@ -507,6 +514,57 @@ // Load the preview frame. previewer.refresh(); + // Save and activated states + (function() { + var state = new api.Values(), + saved = state.create('saved'), + activated = state.create('activated'); + + state.bind( 'change', function() { + var save = $('#save'), + back = $('.back'); + + if ( ! activated() ) { + save.val( api.l10n.activate ).prop( 'disabled', false ); + back.text( api.l10n.cancel ); + + } else if ( saved() ) { + save.val( api.l10n.saved ).prop( 'disabled', true ); + back.text( api.l10n.close ); + + } else { + save.val( api.l10n.save ).prop( 'disabled', false ); + back.text( api.l10n.cancel ); + } + }); + + // Set default states. + saved( true ); + activated( api.settings.theme.active ); + + api.bind( 'change', function() { + state('saved').set( false ); + }); + + api.bind( 'saved', function() { + state('saved').set( true ); + state('activated').set( true ); + }); + + activated.bind( function( to ) { + if ( to ) + api.trigger( 'activated' ); + }); + + // Expose states to the API. + api.state = state; + }()); + + api.bind( 'activated', function() { + if ( api.settings.url.activated ) + window.location = api.settings.url.activated; + }); + // Temporary accordion code. $('.customize-section-title').click( function() { var clicked = $( this ).parents( '.customize-section' ); @@ -538,20 +596,12 @@ }); }); - // If the current theme isn't active, it will be activated on save, - // rendering the previous page - api.bind( 'save', function( request ) { - request.done( function() { - parent.send( 'saved' ); - - if ( ! api.settings.theme.active ) { - parent.send( 'switched' ); - $('#save').val( api.l10n.save ); - } - - api.settings.theme.active = true; + // Pass events through to the parent. + $.each([ 'saved', 'activated' ], function( i, id ) { + api.bind( id, function() { + parent.send( id ); }); - } ); + }); // Initialize the connection with the parent frame. parent.send( 'ready' ); diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 46786d462a..7ce9c698d9 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -302,7 +302,11 @@ function wp_default_scripts( &$scripts ) { $scripts->add( 'customize-preview', "/wp-includes/js/customize-preview$suffix.js", array( 'customize-base' ), false, 1 ); $scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 ); $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array( - 'save' => __( 'Save & Publish' ), + 'activate' => __( 'Save & Activate' ), + 'save' => __( 'Save & Publish' ), + 'saved' => __( 'Saved' ), + 'cancel' => __( 'Cancel' ), + 'close' => __( 'Close' ), ) ); if ( is_admin() ) {