Customizer: Add loading indicators for the Customizer preview.
props Fab1en, westonruter. fixes #31196. git-svn-id: https://develop.svn.wordpress.org/trunk@31697 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
3bb3d2f1a5
commit
557ecd19c6
|
@ -1352,6 +1352,16 @@ body.full-overlay-active {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#customize-preview.wp-full-overlay-main {
|
||||||
|
background: url(../images/spinner.gif) no-repeat center center;
|
||||||
|
-webkit-background-size: 20px 20px;
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customize-preview.wp-full-overlay-main.iframe-ready {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
.wp-full-overlay-sidebar .wp-full-overlay-header {
|
.wp-full-overlay-sidebar .wp-full-overlay-header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -1710,6 +1720,7 @@ body.full-overlay-active {
|
||||||
background-size: 15px 123px;
|
background-size: 15px 123px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#customize-preview.wp-full-overlay-main,
|
||||||
.customize-loading #customize-container,
|
.customize-loading #customize-container,
|
||||||
.theme-install-overlay .wp-full-overlay-main {
|
.theme-install-overlay .wp-full-overlay-main {
|
||||||
background-image: url(../images/spinner-2x.gif);
|
background-image: url(../images/spinner-2x.gif);
|
||||||
|
|
|
@ -1914,6 +1914,9 @@
|
||||||
this.bind( 'ready', this._ready );
|
this.bind( 'ready', this._ready );
|
||||||
|
|
||||||
this.bind( 'ready', function ( data ) {
|
this.bind( 'ready', function ( data ) {
|
||||||
|
|
||||||
|
this.container.addClass( 'iframe-ready' );
|
||||||
|
|
||||||
if ( ! data ) {
|
if ( ! data ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -2217,6 +2220,9 @@
|
||||||
refresh: function() {
|
refresh: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
// Display loading indicator
|
||||||
|
this.send( 'loading-initiated' );
|
||||||
|
|
||||||
this.abort();
|
this.abort();
|
||||||
|
|
||||||
this.loading = new api.PreviewFrame({
|
this.loading = new api.PreviewFrame({
|
||||||
|
@ -2249,8 +2255,10 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
this.loading.fail( function( reason, location ) {
|
this.loading.fail( function( reason, location ) {
|
||||||
if ( 'redirect' === reason && location )
|
self.send( 'loading-failed' );
|
||||||
|
if ( 'redirect' === reason && location ) {
|
||||||
self.previewUrl( location );
|
self.previewUrl( location );
|
||||||
|
}
|
||||||
|
|
||||||
if ( 'logged out' === reason ) {
|
if ( 'logged out' === reason ) {
|
||||||
if ( self.preview ) {
|
if ( self.preview ) {
|
||||||
|
@ -2261,8 +2269,9 @@
|
||||||
self.login().done( self.refresh );
|
self.login().done( self.refresh );
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( 'cheatin' === reason )
|
if ( 'cheatin' === reason ) {
|
||||||
self.cheatin();
|
self.cheatin();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -501,6 +501,7 @@ final class WP_Customize_Manager {
|
||||||
add_action( 'wp', array( $this, 'customize_preview_override_404_status' ) );
|
add_action( 'wp', array( $this, 'customize_preview_override_404_status' ) );
|
||||||
add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
|
add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
|
||||||
add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
|
add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
|
||||||
|
add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
|
||||||
add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
|
add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
|
||||||
add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
|
add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
|
||||||
add_filter( 'wp_die_handler', array( $this, 'remove_preview_signature' ) );
|
add_filter( 'wp_die_handler', array( $this, 'remove_preview_signature' ) );
|
||||||
|
@ -543,7 +544,7 @@ final class WP_Customize_Manager {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Print a workaround to handle HTML5 tags in IE < 9
|
* Print a workaround to handle HTML5 tags in IE < 9.
|
||||||
*
|
*
|
||||||
* @since 3.4.0
|
* @since 3.4.0
|
||||||
*/
|
*/
|
||||||
|
@ -560,6 +561,25 @@ final class WP_Customize_Manager {
|
||||||
<![endif]--><?php
|
<![endif]--><?php
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Print CSS for loading indicators for the Customizer preview.
|
||||||
|
*
|
||||||
|
* @since 4.2.0
|
||||||
|
*/
|
||||||
|
public function customize_preview_loading_style() {
|
||||||
|
?><style>
|
||||||
|
body.wp-customizer-unloading {
|
||||||
|
opacity: 0.25;
|
||||||
|
cursor: progress !important;
|
||||||
|
-webkit-transition: opacity 0.5s;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
body.wp-customizer-unloading * {
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
</style><?php
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Print JavaScript settings for preview frame.
|
* Print JavaScript settings for preview frame.
|
||||||
*
|
*
|
||||||
|
@ -572,6 +592,9 @@ final class WP_Customize_Manager {
|
||||||
'activePanels' => array(),
|
'activePanels' => array(),
|
||||||
'activeSections' => array(),
|
'activeSections' => array(),
|
||||||
'activeControls' => array(),
|
'activeControls' => array(),
|
||||||
|
'l10n' => array(
|
||||||
|
'loading' => __( 'Loading ...' ),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
if ( 2 == $this->nonce_tick ) {
|
if ( 2 == $this->nonce_tick ) {
|
||||||
|
|
|
@ -115,6 +115,16 @@
|
||||||
activeControls: api.settings.activeControls
|
activeControls: api.settings.activeControls
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
// Display a loading indicator when preview is reloading, and remove on failure.
|
||||||
|
api.preview.bind( 'loading-initiated', function () {
|
||||||
|
$( 'body' ).addClass( 'wp-customizer-unloading' );
|
||||||
|
$( 'html' ).prop( 'title', api.settings.l10n.loading );
|
||||||
|
});
|
||||||
|
api.preview.bind( 'loading-failed', function () {
|
||||||
|
$( 'body' ).removeClass( 'wp-customizer-unloading' );
|
||||||
|
$( 'html' ).prop( 'title', '' );
|
||||||
|
});
|
||||||
|
|
||||||
/* Custom Backgrounds */
|
/* Custom Backgrounds */
|
||||||
bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
|
bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
|
||||||
return 'background_' + prop;
|
return 'background_' + prop;
|
||||||
|
|
Loading…
Reference in New Issue