Changeset 20899

Timestamp:

05/25/2012 05:42:06 PM (14 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve activate and publish flow, make customizer states easier to track. fixes #20743, see #19910.

Location:

trunk

Files:

• wp-admin/customize.php (modified) (1 diff)
• wp-admin/js/theme.dev.js (modified) (1 diff)
• wp-includes/js/customize-controls.dev.js (modified) (5 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/wp-admin/customize.php

@@ -131 +131 @@
                         '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 ),

trunk/wp-admin/js/theme.dev.js

@@ -16 +16 @@
                 details.toggle();
                 event.preventDefault();
-        });
-});
-
-/**
- * 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;
-                        });
-                });
         });
 });

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

@@ -440 +440 @@
                 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;
@@ -456 +457 @@
                 });
 
+                // Initialize Previewer
                 previewer = new api.Previewer({
                         container:   '#customize-preview',
@@ -482 +484 @@
 
                                 body.addClass('saving');
+
                                 request.always( function() {
                                         body.removeClass('saving');
+                                });
+
+                                request.done( function() {
+                                        api.trigger( 'saved' );
                                 });
                         }
@@ -507 +514 @@
                 // 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.
@@ -539 +597 @@
                 });
 
-                // 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.

trunk/wp-includes/script-loader.php

@@ -303 +303 @@
         $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' ),
         ) );