Make WordPress Core

Changeset 20802


Ignore:
Timestamp:
05/16/2012 05:55:54 AM (12 years ago)
Author:
koopersmith
Message:

Theme Customizer: Properly change state when theme is switched. fixes #20610, see #19910.

  • Causes the Manage Themes page to refresh if the customizer is closed after the active theme is switched.
  • Changes the text of the 'Save and Activate' button once the theme has been activated.
  • Improves the naming of the customize control settings.
  • Add events to customize.Loader and make callbacks more flexible.
  • Makes the customize-loader l10n compatible with non-admin settings.
  • Adds WP_Customize->is_current_theme_active().
  • Minor style corrections, including jQuery.attr/prop changes.
Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/theme.dev.js

    r20730 r20802  
    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 */
     26jQuery( 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        });
    1847    });
    1948});
  • trunk/wp-includes/class-wp-customize.php

    r20794 r20802  
    143143
    144144        do_action( 'stop_previewing_theme', $this );
     145    }
     146
     147    /**
     148     * Checks if the current theme is active.
     149     *
     150     * @since 3.4.0
     151     */
     152    public function is_current_theme_active() {
     153        return $this->get_stylesheet() == $this->original_stylesheet;
    145154    }
    146155
  • trunk/wp-includes/customize-controls.php

    r20793 r20802  
    7777        <div id="customize-footer-actions" class="wp-full-overlay-footer">
    7878            <?php
    79             $save_text = $this->get_stylesheet() == $this->original_stylesheet ? __('Save') : __('Save and Activate');
     79            $save_text = $this->is_current_theme_active() ? __('Save') : __('Save and Activate');
    8080            submit_button( $save_text, 'primary', 'save', false );
    8181            ?>
     
    9494
    9595    $settings = array(
    96         'theme'    => $this->get_stylesheet(),
    97         'preview'  => esc_url( home_url( '/' ) ),
     96        'theme'    => array(
     97            'stylesheet' => $this->get_stylesheet(),
     98            'active'     => $this->is_current_theme_active(),
     99        ),
     100        'url'      => array(
     101            'preview'  => esc_url( home_url( '/' ) ),
     102            'parent'   => esc_url( admin_url() ),
     103            'ajax'     => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
     104        ),
    98105        'settings' => array(),
    99106        'controls' => array(),
    100         'parent'   => esc_url( admin_url() ),
    101         'ajax'     => esc_url( admin_url( 'admin-ajax.php', 'relative' ) ),
    102107    );
    103108
  • trunk/wp-includes/js/customize-controls.dev.js

    r20798 r20802  
    393393    $( function() {
    394394        api.settings = window._wpCustomizeSettings;
     395        api.l10n = window._wpCustomizeControlsL10n;
     396
    395397        if ( ! api.settings )
    396398            return;
     
    409411            container: '#customize-preview',
    410412            form:      '#customize-controls',
    411             url:       api.settings.preview
     413            url:       api.settings.url.preview
    412414        }, {
    413415            query: function() {
    414416                return {
    415417                    customize:  'on',
    416                     theme:      api.settings.theme,
     418                    theme:      api.settings.theme.stylesheet,
    417419                    customized: JSON.stringify( api.get() )
    418420                };
     
    426428                        nonce:  this.nonce
    427429                    }),
    428                     request = $.post( api.settings.ajax, query );
     430                    request = $.post( api.settings.url.ajax, query );
     431
     432                api.trigger( 'save', request );
    429433
    430434                body.addClass('saving');
     
    473477
    474478        // Create a potential postMessage connection with the parent frame.
    475         parent = new api.Messenger( api.settings.parent );
     479        parent = new api.Messenger( api.settings.url.parent );
    476480
    477481        // If we receive a 'back' event, we're inside an iframe.
    478482        // Send any clicks to the 'Return' link to the parent page.
    479483        parent.bind( 'back', function( text ) {
    480             $('.back').text( text ).click( function( event ) {
     484            var back = $('.back');
     485
     486            if ( text )
     487                back.text( text );
     488
     489            back.on( 'click.back', function( event ) {
    481490                event.preventDefault();
    482491                parent.send( 'close' );
    483492            });
    484493        });
     494
     495        // If the current theme isn't active, it will be activated on save,
     496        // rendering the previous page
     497        api.bind( 'save', function( request ) {
     498            request.done( function() {
     499                parent.send( 'saved' );
     500
     501                if ( ! api.settings.theme.active ) {
     502                    parent.send( 'switched' );
     503                    $('#save').val( api.l10n.save );
     504                }
     505
     506                api.settings.theme.active = true;
     507            });
     508        } );
    485509
    486510        // Initialize the connection with the parent frame.
  • trunk/wp-includes/js/customize-loader.dev.js

    r20743 r20802  
    66        Loader;
    77
    8     Loader = {
     8    Loader = $.extend( {}, api.Events, {
    99        supports: {
    1010            history:  !! ( window.history && history.pushState ),
     
    1616            this.window  = $( window );
    1717            this.element = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
     18
     19            this.bind( 'open', this.overlay.show );
     20            this.bind( 'close', this.overlay.hide );
    1821
    1922            $('#wpbody').on( 'click', '.load-customize', function( event ) {
     
    3134                this.window.on( 'hashchange', Loader.hashchange );
    3235        },
     36
    3337        popstate: function( e ) {
    3438            var state = e.originalEvent.state;
     
    3842                Loader.close();
    3943        },
     44
    4045        hashchange: function( e ) {
    4146            var hash = window.location.toString().split('#')[1];
     
    4752                Loader.close();
    4853        },
     54
    4955        open: function( src ) {
     56            var hash;
     57
    5058            if ( this.active )
    5159                return;
     60
    5261            this.active = true;
    5362            this.body.addClass('customize-loading');
     
    6170            // Wait for the connection from the iframe before sending any postMessage events.
    6271            this.messenger.bind( 'ready', function() {
    63                 Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back );
     72                Loader.messenger.send( 'back', wpCustomizeLoaderL10n.back || '' );
    6473            });
    6574
     
    7382            });
    7483
    75             this.element.fadeIn( 200, function() {
    76                 var hash = src.split('?')[1];
     84            hash = src.split('?')[1];
    7785
    78                 Loader.body.addClass( 'customize-active full-overlay-active' );
     86            // Ensure we don't call pushState if the user hit the forward button.
     87            if ( Loader.supports.history && window.location.href !== src )
     88                history.pushState( { customize: src }, '', src );
     89            else if ( ! Loader.supports.history && Loader.supports.hashchange && hash )
     90                window.location.hash = hash;
    7991
    80                 // Ensure we don't call pushState if the user hit the forward button.
    81                 if ( Loader.supports.history && window.location.href !== src )
    82                     history.pushState( { customize: src }, '', src );
    83                 else if ( ! Loader.supports.history && Loader.supports.hashchange && hash )
    84                     window.location.hash = hash;
    85             });
     92            this.trigger( 'open' );
    8693        },
     94
     95        opened: function() {
     96            Loader.body.addClass( 'customize-active full-overlay-active' );
     97        },
     98
    8799        close: function() {
    88100            if ( ! this.active )
     
    90102            this.active = false;
    91103
    92             this.element.fadeOut( 200, function() {
    93                 Loader.iframe.remove();
    94                 Loader.messenger.destroy();
    95                 Loader.iframe    = null;
    96                 Loader.messenger = null;
    97                 Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
    98             });
     104            this.trigger( 'close' );
    99105        },
     106
     107        closed: function() {
     108            Loader.iframe.remove();
     109            Loader.messenger.destroy();
     110            Loader.iframe    = null;
     111            Loader.messenger = null;
     112            Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
     113        },
     114
    100115        loaded: function() {
    101116            Loader.body.removeClass('customize-loading');
     117        },
     118
     119        overlay: {
     120            show: function() {
     121                this.element.fadeIn( 200, Loader.opened );
     122            },
     123
     124            hide: function() {
     125                this.element.fadeOut( 200, Loader.closed );
     126            }
    102127        }
    103     };
     128    });
    104129
    105130    $( function() {
  • trunk/wp-includes/js/customize-preview.dev.js

    r20798 r20802  
    3535            this.body.on( 'click.preview', 'a', function( event ) {
    3636                event.preventDefault();
    37                 self.send( 'url', $(this).attr('href') );
     37                self.send( 'url', $(this).prop('href') );
    3838            });
    3939
     
    7272            var value = api( args.shift() );
    7373            if ( value )
    74                 value.apply( value, args );
     74                value.set.apply( value, args );
    7575        });
    7676
  • trunk/wp-includes/script-loader.php

    r20732 r20802  
    300300    $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2' ), false, 1 );
    301301    $scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$suffix.js",   array( 'customize-base' ), false, 1 );
     302    $scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
    302303    $scripts->add( 'customize-controls', "/wp-includes/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );
    303     $scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
     304    $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
     305        'save' => __( 'Save' ),
     306    ) );
    304307
    305308    if ( is_admin() ) {
  • trunk/wp-includes/theme.php

    r20772 r20802  
    15901590 */
    15911591function _wp_customize_loader_localize() {
    1592     wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', array(
    1593         'back' => sprintf( __( '&larr; Return to %s' ), get_admin_page_title() ),
    1594         'url'  => admin_url( 'admin.php' ),
    1595     ) );
     1592    $l10n = array( 'url'  => admin_url( 'admin.php' ) );
     1593
     1594    if ( is_admin() )
     1595        $l10n[ 'back' ] = sprintf( __( '&larr; Return to %s' ), get_admin_page_title() );
     1596
     1597    wp_localize_script( 'customize-loader', 'wpCustomizeLoaderL10n', $l10n );
    15961598}
    15971599add_action( 'admin_enqueue_scripts', '_wp_customize_loader_localize' );
Note: See TracChangeset for help on using the changeset viewer.