Theme Installer: toggle `iframe-ready` on the overlay to control the spinner animated GIF and high CPU usage.
Props afercia, adamsilverstein. Fixes #33322. git-svn-id: https://develop.svn.wordpress.org/trunk@35281 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
91d55f97c2
commit
f07367d34c
|
@ -1634,11 +1634,31 @@ body.full-overlay-active {
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-install-overlay .wp-full-overlay-main {
|
.theme-install-overlay .wp-full-overlay-main {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-install-overlay .wp-full-overlay-main:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
z-index: -1;
|
||||||
|
margin: -10px 0 0 -10px;
|
||||||
|
transform: translateZ(0);
|
||||||
background: #fff url(../images/spinner.gif) no-repeat center center;
|
background: #fff url(../images/spinner.gif) no-repeat center center;
|
||||||
-webkit-background-size: 20px 20px;
|
-webkit-background-size: 20px 20px;
|
||||||
background-size: 20px 20px;
|
background-size: 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* =Media Queries
|
/* =Media Queries
|
||||||
-------------------------------------------------------------- */
|
-------------------------------------------------------------- */
|
||||||
|
|
||||||
|
@ -1656,7 +1676,7 @@ body.full-overlay-active {
|
||||||
|
|
||||||
#customize-preview.wp-full-overlay-main,
|
#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:before {
|
||||||
background-image: url(../images/spinner-2x.gif);
|
background-image: url(../images/spinner-2x.gif);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -766,9 +766,10 @@ themes.view.Preview = themes.view.Details.extend({
|
||||||
html: themes.template( 'theme-preview' ),
|
html: themes.template( 'theme-preview' ),
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var data = this.model.toJSON();
|
var self = this,
|
||||||
|
data = this.model.toJSON();
|
||||||
|
|
||||||
this.$el.html( this.html( data ) );
|
this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
|
||||||
|
|
||||||
themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
|
themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
|
||||||
|
|
||||||
|
@ -776,6 +777,14 @@ themes.view.Preview = themes.view.Details.extend({
|
||||||
$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
|
$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
|
||||||
$( '.close-full-overlay' ).focus();
|
$( '.close-full-overlay' ).focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.$el.find( 'iframe' ).one( 'load', function() {
|
||||||
|
self.iframeLoaded();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
iframeLoaded: function() {
|
||||||
|
this.$el.addClass( 'iframe-ready' );
|
||||||
},
|
},
|
||||||
|
|
||||||
close: function() {
|
close: function() {
|
||||||
|
@ -786,7 +795,7 @@ themes.view.Preview = themes.view.Details.extend({
|
||||||
if ( themes.focusedTheme ) {
|
if ( themes.focusedTheme ) {
|
||||||
themes.focusedTheme.focus();
|
themes.focusedTheme.focus();
|
||||||
}
|
}
|
||||||
});
|
}).removeClass( 'iframe-ready' );
|
||||||
|
|
||||||
themes.router.navigate( themes.router.baseUrl( '' ) );
|
themes.router.navigate( themes.router.baseUrl( '' ) );
|
||||||
this.trigger( 'preview:close' );
|
this.trigger( 'preview:close' );
|
||||||
|
|
Loading…
Reference in New Issue