Changeset 20899

Timestamp:

05/25/2012 05:42:06 PM (12 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' ),
     ) );