Theme Customizer: Add basic loading indicator when loading the customizer inside an iframe. see #19910.
git-svn-id: http://core.svn.wordpress.org/trunk@20743 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
484bf6e4ef
commit
d5d0a73719
|
@ -5324,11 +5324,25 @@ body.full-overlay-active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.customize-loading #customize-container iframe {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customize-loading #customize-container {
|
||||||
|
background: #fff url("../images/wpspin_light.gif") no-repeat fixed center center;
|
||||||
|
}
|
||||||
|
|
||||||
#customize-container iframe,
|
#customize-container iframe,
|
||||||
#theme-installer iframe {
|
#theme-installer iframe {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
|
|
||||||
|
-webkit-transition: opacity 0.3s;
|
||||||
|
-moz-transition: opacity 0.3s;
|
||||||
|
-ms-transition: opacity 0.3s;
|
||||||
|
-o-transition: opacity 0.3s;
|
||||||
|
transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customize-container .collapse-sidebar {
|
#customize-container .collapse-sidebar {
|
||||||
|
|
|
@ -50,8 +50,10 @@ if ( typeof wp === 'undefined' )
|
||||||
if ( this.active )
|
if ( this.active )
|
||||||
return;
|
return;
|
||||||
this.active = true;
|
this.active = true;
|
||||||
|
this.body.addClass('customize-loading');
|
||||||
|
|
||||||
this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
|
this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
|
||||||
|
this.iframe.one( 'load', this.loaded );
|
||||||
|
|
||||||
// Create a postMessage connection with the iframe.
|
// Create a postMessage connection with the iframe.
|
||||||
this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
|
this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
|
||||||
|
@ -92,8 +94,11 @@ if ( typeof wp === 'undefined' )
|
||||||
Loader.messenger.destroy();
|
Loader.messenger.destroy();
|
||||||
Loader.iframe = null;
|
Loader.iframe = null;
|
||||||
Loader.messenger = null;
|
Loader.messenger = null;
|
||||||
Loader.body.removeClass( 'customize-active full-overlay-active' );
|
Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
loaded: function() {
|
||||||
|
Loader.body.removeClass('customize-loading');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue