WordPress.org
Get WordPress

Make WordPress Core

Ticket #25439: 25439.3.diff

File 25439.3.diff, 9.0 KB (added by westonruter, 12 years ago)

Changes: Skip AYS dialog if user clicked Close/Cancel button. Only show confirmation if using browser navigation. New commit: ​https://github.com/x-team/wordpress-develop/commit/177de805d407045cb85dc21de1e46c778f674cef Amended PR: ​https://github.com/x-team/wordpress-develop/pull/23

  • src/wp-admin/js/customize-controls.js 

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
index 4bfc252..910bf43 100644
     
    915915
    916916                var previewer, parent, topFocus,
    917917                        body = $( document.body ),
    918                         overlay = body.children('.wp-full-overlay');
     918                        overlay = body.children( '.wp-full-overlay' ),
     919                        backBtn = $( '.back' ),
     920                        saveBtn = $( '#save' ),
     921                        confirmClose = true;
    919922
    920923                // Prevent the form from saving when enter is pressed on an input or select element.
    921924                $('#customize-controls').on( 'keydown', function( e ) {
    … …  
    10401043                                processing = state.create( 'processing' );
    10411044
    10421045                        state.bind( 'change', function() {
    1043                                 var save = $('#save'),
    1044                                         back = $('.back');
    1045 
    10461046                                if ( ! activated() ) {
    1047                                         save.val( api.l10n.activate ).prop( 'disabled', false );
    1048                                         back.text( api.l10n.cancel );
     1047                                        saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
     1048                                        backBtn.text( api.l10n.cancel );
    10491049
    10501050                                } else if ( saved() ) {
    1051                                         save.val( api.l10n.saved ).prop( 'disabled', true );
    1052                                         back.text( api.l10n.close );
     1051                                        saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
     1052                                        backBtn.text( api.l10n.close );
    10531053
    10541054                                } else {
    1055                                         save.val( api.l10n.save ).prop( 'disabled', false );
    1056                                         back.text( api.l10n.cancel );
     1055                                        saveBtn.val( api.l10n.save ).prop( 'disabled', false );
     1056                                        backBtn.text( api.l10n.cancel );
    10571057                                }
    10581058                        });
    10591059
    … …  
    10811081                }());
    10821082
    10831083                // Button bindings.
    1084                 $('#save').click( function( event ) {
     1084                saveBtn.click( function( event ) {
    10851085                        previewer.save();
    10861086                        event.preventDefault();
    10871087                }).keydown( function( event ) {
    … …  
    10921092                        event.preventDefault();
    10931093                });
    10941094
    1095                 $('.back').keydown( function( event ) {
     1095                backBtn.keydown( function( event ) {
    10961096                        if ( 9 === event.which ) // tab
    10971097                                return;
    10981098                        if ( 13 === event.which ) // enter
    … …  
    11221122                // If we receive a 'back' event, we're inside an iframe.
    11231123                // Send any clicks to the 'Return' link to the parent page.
    11241124                parent.bind( 'back', function() {
    1125                         $('.back').on( 'click.back', function( event ) {
     1125                        backBtn.on( 'click.back', function( event ) {
    11261126                                event.preventDefault();
    11271127                                parent.send( 'close' );
    11281128                        });
    11291129                });
    11301130
     1131                // Prevent AYS dialog when user manually clicks back button
     1132                backBtn.on( 'click', function () {
     1133                        confirmClose = false;
     1134                } );
     1135
     1136                // Prompt user with AYS dialog if leaving the Customizer with unsaved changes
     1137                $( window ).on( 'beforeunload', function () {
     1138                        if ( confirmClose && ! api.state( 'saved' )() ) {
     1139                                return api.l10n.saveAlert;
     1140                        }
     1141                } );
     1142
    11311143                // Pass events through to the parent.
    1132                 api.bind( 'saved', function() {
    1133                         parent.send( 'saved' );
    1134                 });
     1144                $.each( [ 'saved', 'change' ], function ( i, event ) {
     1145                        api.bind( event, function() {
     1146                                parent.send( event );
     1147                        });
     1148                } );
    11351149
    11361150                // When activated, let the loader handle redirecting the page.
    11371151                // If no loader exists, redirect the page ourselves (if a url exists).
    … …  
    11981212                api.trigger( 'ready' );
    11991213
    12001214                // Make sure left column gets focus
    1201                 topFocus = $('.back');
     1215                topFocus = backBtn;
    12021216                topFocus.focus();
    12031217                setTimeout(function () {
    12041218                        topFocus.focus();

  • src/wp-includes/js/customize-loader.js 

    diff --git src/wp-includes/js/customize-loader.js src/wp-includes/js/customize-loader.js
index cccf71a..437822f 100644
     
    1 /* global _wpCustomizeLoaderSettings */
     1/* global _wpCustomizeLoaderSettings, confirm */
    22window.wp = window.wp || {};
    33
    44(function( exports, $ ){
    … … window.wp = window.wp || {}; 
    3636                        });
    3737
    3838                        // Add navigation listeners.
    39                         if ( $.support.history )
     39                        if ( $.support.history ) {
    4040                                this.window.on( 'popstate', Loader.popstate );
     41                        }
    4142
    4243                        if ( $.support.hashchange ) {
    4344                                this.window.on( 'hashchange', Loader.hashchange );
    … … window.wp = window.wp || {}; 
    4748
    4849                popstate: function( e ) {
    4950                        var state = e.originalEvent.state;
    50                         if ( state && state.customize )
     51                        if ( state && state.customize ) {
    5152                                Loader.open( state.customize );
    52                         else if ( Loader.active )
     53                        } else if ( Loader.active ) {
    5354                                Loader.close();
     55                        }
    5456                },
    5557
    5658                hashchange: function() {
    5759                        var hash = window.location.toString().split('#')[1];
    5860
    59                         if ( hash && 0 === hash.indexOf( 'wp_customize=on' ) )
     61                        if ( hash && 0 === hash.indexOf( 'wp_customize=on' ) ) {
    6062                                Loader.open( Loader.settings.url + '?' + hash );
     63                        }
    6164
    62                         if ( ! hash && ! $.support.history )
     65                        if ( ! hash && ! $.support.history ){
    6366                                Loader.close();
     67                        }
     68                },
     69
     70                beforeunload: function () {
     71                        if ( ! Loader.saved() ) {
     72                                return Loader.settings.l10n.saveAlert;
     73                        }
    6474                },
    6575
    6676                open: function( src ) {
    67                         var hash;
    6877
    69                         if ( this.active )
     78                        if ( this.active ) {
    7079                                return;
     80                        }
    7181
    7282                        // Load the full page on mobile devices.
    73                         if ( Loader.settings.browser.mobile )
     83                        if ( Loader.settings.browser.mobile ) {
    7484                                return window.location = src;
     85                        }
    7586
    7687                        this.active = true;
    7788                        this.body.addClass('customize-loading');
     89                        this.confirmClose = true;
     90
     91                        // Dirty state of customizer in iframe
     92                        this.saved = new api.Value( true );
    7893
    7994                        this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
    8095                        this.iframe.one( 'load', this.loaded );
    … … window.wp = window.wp || {}; 
    92107                        });
    93108
    94109                        this.messenger.bind( 'close', function() {
    95                                 if ( $.support.history )
     110                                // close event indicates user-elected closing, so AYS dialog shouldn't be shown
     111                                Loader.confirmClose = false;
     112
     113                                if ( $.support.history ) {
    96114                                        history.back();
    97                                 else if ( $.support.hashchange )
     115                                } else if ( $.support.hashchange ) {
    98116                                        window.location.hash = '';
    99                                 else
     117                                } else {
    100118                                        Loader.close();
    101                         });
     119                                }
     120                        } );
     121
     122                        // Prompt AYS dialog when navigating away
     123                        $( window ).on( 'beforeunload', this.beforeunload );
    102124
    103125                        this.messenger.bind( 'activated', function( location ) {
    104                                 if ( location )
     126                                if ( location ) {
    105127                                        window.location = location;
     128                                }
    106129                        });
    107130
    108                         hash = src.split('?')[1];
     131                        this.messenger.bind( 'saved', function () {
     132                                Loader.saved( true );
     133                        } );
     134                        this.messenger.bind( 'change', function () {
     135                                Loader.saved( false );
     136                        } );
     137
     138                        this.pushState( src );
     139
     140                        this.trigger( 'open' );
     141                },
     142
     143                pushState: function ( src ) {
     144                        var hash;
    109145
    110146                        // Ensure we don't call pushState if the user hit the forward button.
    111                         if ( $.support.history && window.location.href !== src )
     147                        if ( $.support.history && window.location.href !== src ) {
    112148                                history.pushState( { customize: src }, '', src );
    113                         else if ( ! $.support.history && $.support.hashchange && hash )
     149                        } else if ( ! $.support.history && $.support.hashchange && hash ) {
     150                                hash = src.split( '?' )[1];
    114151                                window.location.hash = 'wp_customize=on&' + hash;
    115 
    116                         this.trigger( 'open' );
     152                        }
    117153                },
    118154
    119155                opened: function() {
    … … window.wp = window.wp || {}; 
    121157                },
    122158
    123159                close: function() {
    124                         if ( ! this.active )
     160                        if ( ! this.active ) {
     161                                return;
     162                        }
     163
     164                        // Display AYS dialog if customizer is dirty
     165                        if ( ! this.saved() && this.confirmClose && ! confirm( Loader.settings.l10n.saveAlert ) ) {
     166                                // Go forward since Customizer is exited by history.back()
     167                                history.forward();
    125168                                return;
     169                        }
     170
    126171                        this.active = false;
    127172
    128173                        this.trigger( 'close' );
    129174
    130175                        // Return focus to link that was originally clicked.
    131                         if ( this.link )
     176                        if ( this.link ) {
    132177                                this.link.focus();
     178                        }
    133179                },
    134180
    135181                closed: function() {
    … … window.wp = window.wp || {}; 
    137183                        Loader.messenger.destroy();
    138184                        Loader.iframe    = null;
    139185                        Loader.messenger = null;
     186                        Loader.saved     = null;
    140187                        Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
     188                        $( window ).off( 'beforeunload', Loader.beforeunload );
    141189                },
    142190
    143191                loaded: function() {

  • src/wp-includes/script-loader.php 

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
index df42718..c0d42b6 100644
    function wp_default_scripts( &$scripts ) { 
    381381        did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
    382382                'activate'  => __( 'Save &amp; Activate' ),
    383383                'save'      => __( 'Save &amp; Publish' ),
     384                'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
    384385                'saved'     => __( 'Saved' ),
    385386                'cancel'    => __( 'Cancel' ),
    386387                'close'     => __( 'Close' ),

  • src/wp-includes/theme.php 

    diff --git src/wp-includes/theme.php src/wp-includes/theme.php
index 40acf6b..d882463 100644
    function _wp_customize_loader_settings() { 
    18741874                'url'           => esc_url( admin_url( 'customize.php' ) ),
    18751875                'isCrossDomain' => $cross_domain,
    18761876                'browser'       => $browser,
     1877                'l10n'          => array(
     1878                        'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
     1879                ),
    18771880        );
    18781881
    18791882        $script = 'var _wpCustomizeLoaderSettings = ' . json_encode( $settings ) . ';';