WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Built from https://develop.svn.wordpress.org/trunk@29025


git-svn-id: http://core.svn.wordpress.org/trunk@28813 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-07-08 17:04:15 +00:00
parent 32224314a5
commit b6d3c0841e
6 changed files with 97 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
wp-admin/js/customize-controls.js
View File

@ -915,7 +915,9 @@
var previewer, parent, topFocus, var previewer, parent, topFocus,
body = $( document.body ), 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. // Prevent the form from saving when enter is pressed on an input or select element.
$('#customize-controls').on( 'keydown', function( e ) { $('#customize-controls').on( 'keydown', function( e ) {
@ -1040,20 +1042,17 @@
processing = state.create( 'processing' ); processing = state.create( 'processing' );
state.bind( 'change', function() { state.bind( 'change', function() {
var save = $('#save'),
back = $('.back');
if ( ! activated() ) { if ( ! activated() ) {
save.val( api.l10n.activate ).prop( 'disabled', false ); saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
back.text( api.l10n.cancel ); backBtn.text( api.l10n.cancel );
} else if ( saved() ) { } else if ( saved() ) {
save.val( api.l10n.saved ).prop( 'disabled', true ); saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
back.text( api.l10n.close ); backBtn.text( api.l10n.close );
} else { } else {
save.val( api.l10n.save ).prop( 'disabled', false ); saveBtn.val( api.l10n.save ).prop( 'disabled', false );
back.text( api.l10n.cancel ); backBtn.text( api.l10n.cancel );
} }
}); });
@ -1081,7 +1080,7 @@
}()); }());
// Button bindings. // Button bindings.
$('#save').click( function( event ) { saveBtn.click( function( event ) {
previewer.save(); previewer.save();
event.preventDefault(); event.preventDefault();
}).keydown( function( event ) { }).keydown( function( event ) {
@ -1092,7 +1091,7 @@
event.preventDefault(); event.preventDefault();
}); });
$('.back').keydown( function( event ) { backBtn.keydown( function( event ) {
if ( 9 === event.which ) // tab if ( 9 === event.which ) // tab
return; return;
if ( 13 === event.which ) // enter if ( 13 === event.which ) // enter
@ -1122,16 +1121,25 @@
// If we receive a 'back' event, we're inside an iframe. // If we receive a 'back' event, we're inside an iframe.
// Send any clicks to the 'Return' link to the parent page. // Send any clicks to the 'Return' link to the parent page.
parent.bind( 'back', function() { parent.bind( 'back', function() {
$('.back').on( 'click.back', function( event ) { backBtn.on( 'click.back', function( event ) {
event.preventDefault(); event.preventDefault();
parent.send( 'close' ); parent.send( 'close' );
}); });
}); });
// 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. // Pass events through to the parent.
api.bind( 'saved', function() { $.each( [ 'saved', 'change' ], function ( i, event ) {
parent.send( 'saved' ); api.bind( event, function() {
}); parent.send( event );
});
} );
// When activated, let the loader handle redirecting the page. // When activated, let the loader handle redirecting the page.
// If no loader exists, redirect the page ourselves (if a url exists). // If no loader exists, redirect the page ourselves (if a url exists).
@ -1198,7 +1206,7 @@
api.trigger( 'ready' ); api.trigger( 'ready' );
// Make sure left column gets focus // Make sure left column gets focus
topFocus = $('.back'); topFocus = backBtn;
topFocus.focus(); topFocus.focus();
setTimeout(function () { setTimeout(function () {
topFocus.focus(); topFocus.focus();

2
wp-admin/js/customize-controls.min.js vendored
View File

File diff suppressed because one or more lines are too long

88
wp-includes/js/customize-loader.js
View File

@ -1,4 +1,4 @@
/* global _wpCustomizeLoaderSettings */ /* global _wpCustomizeLoaderSettings, confirm */
window.wp = window.wp || {}; window.wp = window.wp || {};
(function( exports, $ ){ (function( exports, $ ){
@ -36,8 +36,9 @@ window.wp = window.wp || {};
}); });
// Add navigation listeners. // Add navigation listeners.
if ( $.support.history ) if ( $.support.history ) {
this.window.on( 'popstate', Loader.popstate ); this.window.on( 'popstate', Loader.popstate );
}
if ( $.support.hashchange ) { if ( $.support.hashchange ) {
this.window.on( 'hashchange', Loader.hashchange ); this.window.on( 'hashchange', Loader.hashchange );
@ -47,35 +48,48 @@ window.wp = window.wp || {};
popstate: function( e ) { popstate: function( e ) {
var state = e.originalEvent.state; var state = e.originalEvent.state;
if ( state && state.customize ) if ( state && state.customize ) {
Loader.open( state.customize ); Loader.open( state.customize );
else if ( Loader.active ) } else if ( Loader.active ) {
Loader.close(); Loader.close();
}
}, },
hashchange: function() { hashchange: function() {
var hash = window.location.toString().split('#')[1]; 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 ); Loader.open( Loader.settings.url + '?' + hash );
}
if ( ! hash && ! $.support.history ) if ( ! hash && ! $.support.history ){
Loader.close(); Loader.close();
}
},
beforeunload: function () {
if ( ! Loader.saved() ) {
return Loader.settings.l10n.saveAlert;
}
}, },
open: function( src ) { open: function( src ) {
var hash;
if ( this.active ) if ( this.active ) {
return; return;
}
// Load the full page on mobile devices. // Load the full page on mobile devices.
if ( Loader.settings.browser.mobile ) if ( Loader.settings.browser.mobile ) {
return window.location = src; return window.location = src;
}
this.active = true; this.active = true;
this.body.addClass('customize-loading'); 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 ); this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
this.iframe.one( 'load', this.loaded ); this.iframe.one( 'load', this.loaded );
@ -92,44 +106,72 @@ window.wp = window.wp || {};
}); });
this.messenger.bind( 'close', function() { this.messenger.bind( 'close', function() {
if ( $.support.history ) if ( $.support.history ) {
history.back(); history.back();
else if ( $.support.hashchange ) } else if ( $.support.hashchange ) {
window.location.hash = ''; window.location.hash = '';
else } else {
Loader.close(); Loader.close();
}); }
} );
// Prompt AYS dialog when navigating away
$( window ).on( 'beforeunload', this.beforeunload );
this.messenger.bind( 'activated', function( location ) { this.messenger.bind( 'activated', function( location ) {
if ( location ) if ( location ) {
window.location = location; window.location = location;
}
}); });
hash = src.split('?')[1]; this.messenger.bind( 'saved', function () {
Loader.saved( true );
} );
this.messenger.bind( 'change', function () {
Loader.saved( false );
} );
// Ensure we don't call pushState if the user hit the forward button. this.pushState( src );
if ( $.support.history && window.location.href !== src )
history.pushState( { customize: src }, '', src );
else if ( ! $.support.history && $.support.hashchange && hash )
window.location.hash = 'wp_customize=on&' + hash;
this.trigger( 'open' ); 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 ) {
history.pushState( { customize: src }, '', src );
} else if ( ! $.support.history && $.support.hashchange && hash ) {
hash = src.split( '?' )[1];
window.location.hash = 'wp_customize=on&' + hash;
}
},
opened: function() { opened: function() {
Loader.body.addClass( 'customize-active full-overlay-active' ); Loader.body.addClass( 'customize-active full-overlay-active' );
}, },
close: function() { close: function() {
if ( ! this.active ) if ( ! this.active ) {
return; 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; this.active = false;
this.trigger( 'close' ); this.trigger( 'close' );
// Return focus to link that was originally clicked. // Return focus to link that was originally clicked.
if ( this.link ) if ( this.link ) {
this.link.focus(); this.link.focus();
}
}, },
closed: function() { closed: function() {
@ -137,7 +179,9 @@ window.wp = window.wp || {};
Loader.messenger.destroy(); Loader.messenger.destroy();
Loader.iframe = null; Loader.iframe = null;
Loader.messenger = null; Loader.messenger = null;
Loader.saved = null;
Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' ); Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
$( window ).off( 'beforeunload', Loader.beforeunload );
}, },
loaded: function() { loaded: function() {

2
wp-includes/js/customize-loader.min.js vendored
View File

@ -1 +1 @@
window.wp=window.wp||{},function(a,b){var c,d=wp.customize;b.extend(b.support,{history:!(!window.history||!history.pushState),hashchange:"onhashchange"in window&&(void 0===document.documentMode||document.documentMode>7)}),c=b.extend({},d.Events,{initialize:function(){this.body=b(document.body),c.settings&&b.support.postMessage&&(b.support.cors||!c.settings.isCrossDomain)&&(this.window=b(window),this.element=b('<div id="customize-container" />').appendTo(this.body),this.bind("open",this.overlay.show),this.bind("close",this.overlay.hide),b("#wpbody").on("click",".load-customize",function(a){a.preventDefault(),c.link=b(this),c.open(c.link.attr("href"))}),b.support.history&&this.window.on("popstate",c.popstate),b.support.hashchange&&(this.window.on("hashchange",c.hashchange),this.window.triggerHandler("hashchange")))},popstate:function(a){var b=a.originalEvent.state;b&&b.customize?c.open(b.customize):c.active&&c.close()},hashchange:function(){var a=window.location.toString().split("#")[1];a&&0===a.indexOf("wp_customize=on")&&c.open(c.settings.url+"?"+a),a||b.support.history||c.close()},open:function(a){var e;if(!this.active){if(c.settings.browser.mobile)return window.location=a;this.active=!0,this.body.addClass("customize-loading"),this.iframe=b("<iframe />",{src:a}).appendTo(this.element),this.iframe.one("load",this.loaded),this.messenger=new d.Messenger({url:a,channel:"loader",targetWindow:this.iframe[0].contentWindow}),this.messenger.bind("ready",function(){c.messenger.send("back")}),this.messenger.bind("close",function(){b.support.history?history.back():b.support.hashchange?window.location.hash="":c.close()}),this.messenger.bind("activated",function(a){a&&(window.location=a)}),e=a.split("?")[1],b.support.history&&window.location.href!==a?history.pushState({customize:a},"",a):!b.support.history&&b.support.hashchange&&e&&(window.location.hash="wp_customize=on&"+e),this.trigger("open")}},opened:function(){c.body.addClass("customize-active full-overlay-active")},close:function(){this.active&&(this.active=!1,this.trigger("close"),this.link&&this.link.focus())},closed:function(){c.iframe.remove(),c.messenger.destroy(),c.iframe=null,c.messenger=null,c.body.removeClass("customize-active full-overlay-active").removeClass("customize-loading")},loaded:function(){c.body.removeClass("customize-loading")},overlay:{show:function(){this.element.fadeIn(200,c.opened)},hide:function(){this.element.fadeOut(200,c.closed)}}}),b(function(){c.settings=_wpCustomizeLoaderSettings,c.initialize()}),d.Loader=c}(wp,jQuery); window.wp=window.wp||{},function(a,b){var c,d=wp.customize;b.extend(b.support,{history:!(!window.history||!history.pushState),hashchange:"onhashchange"in window&&(void 0===document.documentMode||document.documentMode>7)}),c=b.extend({},d.Events,{initialize:function(){this.body=b(document.body),c.settings&&b.support.postMessage&&(b.support.cors||!c.settings.isCrossDomain)&&(this.window=b(window),this.element=b('<div id="customize-container" />').appendTo(this.body),this.bind("open",this.overlay.show),this.bind("close",this.overlay.hide),b("#wpbody").on("click",".load-customize",function(a){a.preventDefault(),c.link=b(this),c.open(c.link.attr("href"))}),b.support.history&&this.window.on("popstate",c.popstate),b.support.hashchange&&(this.window.on("hashchange",c.hashchange),this.window.triggerHandler("hashchange")))},popstate:function(a){var b=a.originalEvent.state;b&&b.customize?c.open(b.customize):c.active&&c.close()},hashchange:function(){var a=window.location.toString().split("#")[1];a&&0===a.indexOf("wp_customize=on")&&c.open(c.settings.url+"?"+a),a||b.support.history||c.close()},beforeunload:function(){return c.saved()?void 0:c.settings.l10n.saveAlert},open:function(a){if(!this.active){if(c.settings.browser.mobile)return window.location=a;this.active=!0,this.body.addClass("customize-loading"),this.saved=new d.Value(!0),this.iframe=b("<iframe />",{src:a}).appendTo(this.element),this.iframe.one("load",this.loaded),this.messenger=new d.Messenger({url:a,channel:"loader",targetWindow:this.iframe[0].contentWindow}),this.messenger.bind("ready",function(){c.messenger.send("back")}),this.messenger.bind("close",function(){b.support.history?history.back():b.support.hashchange?window.location.hash="":c.close()}),b(window).on("beforeunload",this.beforeunload),this.messenger.bind("activated",function(a){a&&(window.location=a)}),this.messenger.bind("saved",function(){c.saved(!0)}),this.messenger.bind("change",function(){c.saved(!1)}),this.pushState(a),this.trigger("open")}},pushState:function(a){var c;b.support.history&&window.location.href!==a?history.pushState({customize:a},"",a):!b.support.history&&b.support.hashchange&&c&&(c=a.split("?")[1],window.location.hash="wp_customize=on&"+c)},opened:function(){c.body.addClass("customize-active full-overlay-active")},close:function(){if(this.active){if(!this.saved()&&!confirm(c.settings.l10n.saveAlert))return void history.forward();this.active=!1,this.trigger("close"),this.link&&this.link.focus()}},closed:function(){c.iframe.remove(),c.messenger.destroy(),c.iframe=null,c.messenger=null,c.saved=null,c.body.removeClass("customize-active full-overlay-active").removeClass("customize-loading"),b(window).off("beforeunload",c.beforeunload)},loaded:function(){c.body.removeClass("customize-loading")},overlay:{show:function(){this.element.fadeIn(200,c.opened)},hide:function(){this.element.fadeOut(200,c.closed)}}}),b(function(){c.settings=_wpCustomizeLoaderSettings,c.initialize()}),d.Loader=c}(wp,jQuery);

1
wp-includes/script-loader.php
View File

@ -382,6 +382,7 @@ function wp_default_scripts( &$scripts ) {
did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array( did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
'activate' => __( 'Save &amp; Activate' ), 'activate' => __( 'Save &amp; Activate' ),
'save' => __( 'Save &amp; Publish' ), 'save' => __( 'Save &amp; Publish' ),
'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
'saved' => __( 'Saved' ), 'saved' => __( 'Saved' ),
'cancel' => __( 'Cancel' ), 'cancel' => __( 'Cancel' ),
'close' => __( 'Close' ), 'close' => __( 'Close' ),

3
wp-includes/theme.php
View File

@ -1874,6 +1874,9 @@ function _wp_customize_loader_settings() {
'url' => esc_url( admin_url( 'customize.php' ) ), 'url' => esc_url( admin_url( 'customize.php' ) ),
'isCrossDomain' => $cross_domain, 'isCrossDomain' => $cross_domain,
'browser' => $browser, 'browser' => $browser,
'l10n' => array(
'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
),
); );
$script = 'var _wpCustomizeLoaderSettings = ' . json_encode( $settings ) . ';'; $script = 'var _wpCustomizeLoaderSettings = ' . json_encode( $settings ) . ';';