WordPress.org

Make WordPress Core

Changeset 20899


Ignore:
Timestamp:
05/25/2012 05:42:06 PM (8 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/customize.php

    r20886 r20899  
    131131            'preview'       => esc_url( home_url( '/' ) ),
    132132            'parent'        => esc_url( admin_url() ),
     133            'activated'     => esc_url( admin_url( 'themes.php?activated=true' ) ),
    133134            'ajax'          => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
    134135            'allowed'       => array_map( 'esc_url', $allowed_urls ),
  • trunk/wp-admin/js/theme.dev.js

    r20813 r20899  
    1616        details.toggle();
    1717        event.preventDefault();
    18     });
    19 });
    20 
    21 /**
    22  * Theme Customizer
    23  *
    24  * Ensures the themes page is refreshed if the customizer switches the theme.
    25  */
    26 jQuery( function($) {
    27     var Loader, activated;
    28 
    29     if ( typeof wp === 'undefined' || ! wp.customize || ! ( Loader = wp.customize.Loader ) )
    30         return;
    31 
    32     // Strip the current URL of its query string and hash, add activated query string.
    33     activated = window.location.href.replace(/[#?].*$/, '') + '?activated=true';
    34 
    35     // When an instance of the customizer is loaded...
    36     Loader.bind( 'open', function() {
    37 
    38         // If the customizer triggers a theme switched event,
    39         // load the activated page when the customizer is closed.
    40         Loader.messenger.bind( 'switched', function() {
    41 
    42             Loader.unbind( 'close', Loader.overlay.hide );
    43             Loader.bind( 'close', function() {
    44                 window.location = activated;
    45             });
    46         });
    4718    });
    4819});
  • trunk/wp-includes/js/customize-controls.dev.js

    r20886 r20899  
    440440        api.l10n = window._wpCustomizeControlsL10n;
    441441
     442        // Check if we can run the customizer.
    442443        if ( ! api.settings )
    443444            return;
    444445
     446        // Redirect to the fallback preview if any incompatibilities are found.
    445447        if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) )
    446448            return window.location = api.settings.url.fallback;
    447449
    448         // Initialize Previewer
    449450        var body = $( document.body ),
    450451            query, previewer, parent;
     
    456457        });
    457458
     459        // Initialize Previewer
    458460        previewer = new api.Previewer({
    459461            container:   '#customize-preview',
     
    482484
    483485                body.addClass('saving');
     486
    484487                request.always( function() {
    485488                    body.removeClass('saving');
     489                });
     490
     491                request.done( function() {
     492                    api.trigger( 'saved' );
    486493                });
    487494            }
     
    507514        // Load the preview frame.
    508515        previewer.refresh();
     516
     517        // Save and activated states
     518        (function() {
     519            var state = new api.Values(),
     520                saved = state.create('saved'),
     521                activated = state.create('activated');
     522
     523            state.bind( 'change', function() {
     524                var save = $('#save'),
     525                    back = $('.back');
     526
     527                if ( ! activated() ) {
     528                    save.val( api.l10n.activate ).prop( 'disabled', false );
     529                    back.text( api.l10n.cancel );
     530
     531                } else if ( saved() ) {
     532                    save.val( api.l10n.saved ).prop( 'disabled', true );
     533                    back.text( api.l10n.close );
     534
     535                } else {
     536                    save.val( api.l10n.save ).prop( 'disabled', false );
     537                    back.text( api.l10n.cancel );
     538                }
     539            });
     540
     541            // Set default states.
     542            saved( true );
     543            activated( api.settings.theme.active );
     544
     545            api.bind( 'change', function() {
     546                state('saved').set( false );
     547            });
     548
     549            api.bind( 'saved', function() {
     550                state('saved').set( true );
     551                state('activated').set( true );
     552            });
     553
     554            activated.bind( function( to ) {
     555                if ( to )
     556                    api.trigger( 'activated' );
     557            });
     558
     559            // Expose states to the API.
     560            api.state = state;
     561        }());
     562
     563        api.bind( 'activated', function() {
     564            if ( api.settings.url.activated )
     565                window.location = api.settings.url.activated;
     566        });
    509567
    510568        // Temporary accordion code.
     
    539597        });
    540598
    541         // If the current theme isn't active, it will be activated on save,
    542         // rendering the previous page
    543         api.bind( 'save', function( request ) {
    544             request.done( function() {
    545                 parent.send( 'saved' );
    546 
    547                 if ( ! api.settings.theme.active ) {
    548                     parent.send( 'switched' );
    549                     $('#save').val( api.l10n.save );
    550                 }
    551 
    552                 api.settings.theme.active = true;
    553             });
    554         } );
     599        // Pass events through to the parent.
     600        $.each([ 'saved', 'activated' ], function( i, id ) {
     601            api.bind( id, function() {
     602                parent.send( id );
     603            });
     604        });
    555605
    556606        // Initialize the connection with the parent frame.
  • trunk/wp-includes/script-loader.php

    r20878 r20899  
    303303    $scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );
    304304    $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
    305         'save' => __( 'Save & Publish' ),
     305        'activate'  => __( 'Save & Activate' ),
     306        'save'      => __( 'Save & Publish' ),
     307        'saved'     => __( 'Saved' ),
     308        'cancel'    => __( 'Cancel' ),
     309        'close'     => __( 'Close' ),
    306310    ) );
    307311
Note: See TracChangeset for help on using the changeset viewer.