Changeset 29025

Timestamp:

07/08/2014 05:03:48 PM (11 years ago)

Author:

helen

Message:

Prompt the user before leaving the Customizer if they have unsaved changes. props westonruter. fixes #25439.

Location:

trunk/src

Files:

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

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

@@ -916 +916 @@
         var previewer, parent, topFocus,
             body = $( document.body ),
-            overlay = body.children('.wp-full-overlay');
+            overlay = body.children( '.wp-full-overlay' ),
+            backBtn = $( '.back' ),
+            saveBtn = $( '#save' );
 
         // Prevent the form from saving when enter is pressed on an input or select element.
@@ -1041 +1043 @@
 
             state.bind( 'change', function() {
-                var save = $('#save'),
-                    back = $('.back');
-
                 if ( ! activated() ) {
-                    save.val( api.l10n.activate ).prop( 'disabled', false );
-                    back.text( api.l10n.cancel );
+                    saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
+                    backBtn.text( api.l10n.cancel );
 
                 } else if ( saved() ) {
-                    save.val( api.l10n.saved ).prop( 'disabled', true );
-                    back.text( api.l10n.close );
+                    saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
+                    backBtn.text( api.l10n.close );
 
                 } else {
-                    save.val( api.l10n.save ).prop( 'disabled', false );
-                    back.text( api.l10n.cancel );
+                    saveBtn.val( api.l10n.save ).prop( 'disabled', false );
+                    backBtn.text( api.l10n.cancel );
                 }
             });
@@ -1082 +1081 @@
 
         // Button bindings.
-        $('#save').click( function( event ) {
+        saveBtn.click( function( event ) {
             previewer.save();
             event.preventDefault();
@@ -1093 +1092 @@
         });
 
-        $('.back').keydown( function( event ) {
+        backBtn.keydown( function( event ) {
             if ( 9 === event.which ) // tab
                 return;
@@ -1123 +1122 @@
         // Send any clicks to the 'Return' link to the parent page.
         parent.bind( 'back', function() {
-            $('.back').on( 'click.back', function( event ) {
+            backBtn.on( 'click.back', function( event ) {
                 event.preventDefault();
                 parent.send( 'close' );
@@ -1129 +1128 @@
         });
 
+        // Prompt user with AYS dialog if leaving the Customizer with unsaved changes
+        $( window ).on( 'beforeunload', function () {
+            if ( ! api.state( 'saved' )() ) {
+                return api.l10n.saveAlert;
+            }
+        } );
+
         // Pass events through to the parent.
-        api.bind( 'saved', function() {
-            parent.send( 'saved' );
-        });
+        $.each( [ 'saved', 'change' ], function ( i, event ) {
+            api.bind( event, function() {
+                parent.send( event );
+            });
+        } );
 
         // When activated, let the loader handle redirecting the page.
@@ -1199 +1207 @@
 
         // Make sure left column gets focus
-        topFocus = $('.back');
+        topFocus = backBtn;
         topFocus.focus();
         setTimeout(function () {

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

@@ -1 @@
-/* global _wpCustomizeLoaderSettings */
+/* global _wpCustomizeLoaderSettings, confirm */
 window.wp = window.wp || {};
 
@@ -37 +37 @@
 
             // Add navigation listeners.
-            if ( $.support.history )
+            if ( $.support.history ) {
                 this.window.on( 'popstate', Loader.popstate );
+            }
 
             if ( $.support.hashchange ) {
@@ -48 +49 @@
         popstate: function( e ) {
             var state = e.originalEvent.state;
-            if ( state && state.customize )
+            if ( state && state.customize ) {
                 Loader.open( state.customize );
-            else if ( Loader.active )
+            } else if ( Loader.active ) {
                 Loader.close();
+            }
         },
 
@@ -57 +59 @@
             var hash = window.location.toString().split('#')[1];
 
-            if ( hash && 0 === hash.indexOf( 'wp_customize=on' ) )
+            if ( hash && 0 === hash.indexOf( 'wp_customize=on' ) ) {
                 Loader.open( Loader.settings.url + '?' + hash );
-
-            if ( ! hash && ! $.support.history )
+            }
+
+            if ( ! hash && ! $.support.history ){
                 Loader.close();
+            }
+        },
+
+        beforeunload: function () {
+            if ( ! Loader.saved() ) {
+                return Loader.settings.l10n.saveAlert;
+            }
         },
 
         open: function( src ) {
-            var hash;
-
-            if ( this.active )
-                return;
+
+            if ( this.active ) {
+                return;
+            }
 
             // Load the full page on mobile devices.
-            if ( Loader.settings.browser.mobile )
+            if ( Loader.settings.browser.mobile ) {
                 return window.location = src;
+            }
 
             this.active = true;
             this.body.addClass('customize-loading');
+
+            // Dirty state of customizer in iframe
+            this.saved = new api.Value( true );
 
             this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
@@ -93 +107 @@
 
             this.messenger.bind( 'close', function() {
-                if ( $.support.history )
+                if ( $.support.history ) {
                     history.back();
-                else if ( $.support.hashchange )
+                } else if ( $.support.hashchange ) {
                     window.location.hash = '';
-                else
+                } else {
                     Loader.close();
-            });
+                }
+            } );
+
+            // Prompt AYS dialog when navigating away
+            $( window ).on( 'beforeunload', this.beforeunload );
 
             this.messenger.bind( 'activated', function( location ) {
-                if ( location )
+                if ( location ) {
                     window.location = location;
-            });
-
-            hash = src.split('?')[1];
+                }
+            });
+
+            this.messenger.bind( 'saved', function () {
+                Loader.saved( true );
+            } );
+            this.messenger.bind( 'change', function () {
+                Loader.saved( false );
+            } );
+
+            this.pushState( src );
+
+            this.trigger( 'open' );
+        },
+
+        pushState: function ( src ) {
+            var hash;
 
             // Ensure we don't call pushState if the user hit the forward button.
-            if ( $.support.history && window.location.href !== src )
+            if ( $.support.history && window.location.href !== src ) {
                 history.pushState( { customize: src }, '', src );
-            else if ( ! $.support.history && $.support.hashchange && hash )
+            } else if ( ! $.support.history && $.support.hashchange && hash ) {
+                hash = src.split( '?' )[1];
                 window.location.hash = 'wp_customize=on&' + hash;
-
-            this.trigger( 'open' );
+            }
         },
 
@@ -122 +154 @@
 
         close: function() {
-            if ( ! this.active )
-                return;
+            if ( ! this.active ) {
+                return;
+            }
+
+            // Display AYS dialog if customizer is dirty
+            if ( ! this.saved() && ! confirm( Loader.settings.l10n.saveAlert ) ) {
+                // Go forward since Customizer is exited by history.back()
+                history.forward();
+                return;
+            }
+
             this.active = false;
 
@@ -129 +170 @@
 
             // Return focus to link that was originally clicked.
-            if ( this.link )
+            if ( this.link ) {
                 this.link.focus();
+            }
         },
 
@@ -138 +180 @@
             Loader.iframe    = null;
             Loader.messenger = null;
+            Loader.saved     = null;
             Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
+            $( window ).off( 'beforeunload', Loader.beforeunload );
         },
 

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

@@ -383 +383 @@
         'activate'  => __( 'Save & Activate' ),
         'save'      => __( 'Save & Publish' ),
+        'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
         'saved'     => __( 'Saved' ),
         'cancel'    => __( 'Cancel' ),

trunk/src/wp-includes/theme.php

@@ -1875 +1875 @@
         'isCrossDomain' => $cross_domain,
         'browser'       => $browser,
+        'l10n'          => array(
+            'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
+        ),
     );