Improve page loads in the theme customizer by layering loading iframes. Automate refreshing, but debounce multiple refresh events to prevent hammering the server with requests. see #19910.
git-svn-id: https://develop.svn.wordpress.org/trunk@20031 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
1fd6d4bfd3
commit
78bf972b68
|
@ -69,7 +69,6 @@ do_action( 'customize_controls_print_scripts' );
|
||||||
|
|
||||||
<div id="customize-footer" class="customize-section">
|
<div id="customize-footer" class="customize-section">
|
||||||
<?php
|
<?php
|
||||||
submit_button( __( 'Refresh' ), 'secondary', 'refresh', false );
|
|
||||||
submit_button( __( 'Save' ), 'primary', 'save', false );
|
submit_button( __( 'Save' ), 'primary', 'save', false );
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
var api = wp.customize;
|
var api = wp.customize;
|
||||||
|
|
||||||
api.Previewer = api.Messenger.extend({
|
api.Previewer = api.Messenger.extend({
|
||||||
|
refreshBuffer: 250,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Requires params:
|
* Requires params:
|
||||||
* - iframe - a selector or jQuery element
|
* - iframe - a selector or jQuery element
|
||||||
|
@ -11,9 +13,49 @@
|
||||||
initialize: function( params, options ) {
|
initialize: function( params, options ) {
|
||||||
$.extend( this, options || {} );
|
$.extend( this, options || {} );
|
||||||
|
|
||||||
|
this.loaderUuid = 0;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Wrap this.refresh to prevent it from hammering the servers:
|
||||||
|
*
|
||||||
|
* If refresh is called once and no other refresh requests are
|
||||||
|
* loading, trigger the request immediately.
|
||||||
|
*
|
||||||
|
* If refresh is called while another refresh request is loading,
|
||||||
|
* debounce the refresh requests:
|
||||||
|
* 1. Stop the loading request (as it is instantly outdated).
|
||||||
|
* 2. Trigger the new request once refresh hasn't been called for
|
||||||
|
* self.refreshBuffer milliseconds.
|
||||||
|
*/
|
||||||
|
this.refresh = (function( self ) {
|
||||||
|
var refresh = self.refresh,
|
||||||
|
callback = function() {
|
||||||
|
timeout = null;
|
||||||
|
refresh.call( self );
|
||||||
|
},
|
||||||
|
timeout;
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
if ( typeof timeout !== 'number' ) {
|
||||||
|
if ( self.loading ) {
|
||||||
|
self.loading.remove();
|
||||||
|
delete self.loading;
|
||||||
|
self.loader();
|
||||||
|
} else {
|
||||||
|
return callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout( timeout );
|
||||||
|
timeout = setTimeout( callback, self.refreshBuffer );
|
||||||
|
};
|
||||||
|
})( this );
|
||||||
|
|
||||||
this.iframe = api.ensure( params.iframe );
|
this.iframe = api.ensure( params.iframe );
|
||||||
this.form = api.ensure( params.form );
|
this.form = api.ensure( params.form );
|
||||||
|
|
||||||
|
this.container = this.iframe.parent();
|
||||||
|
|
||||||
api.Messenger.prototype.initialize.call( this, params.url, {
|
api.Messenger.prototype.initialize.call( this, params.url, {
|
||||||
targetWindow: this.iframe[0].contentWindow
|
targetWindow: this.iframe[0].contentWindow
|
||||||
});
|
});
|
||||||
|
@ -34,9 +76,31 @@
|
||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
},
|
},
|
||||||
|
loader: function() {
|
||||||
|
var self = this,
|
||||||
|
name;
|
||||||
|
|
||||||
|
if ( this.loading )
|
||||||
|
return this.loading;
|
||||||
|
|
||||||
|
name = this.iframe.prop('name');
|
||||||
|
|
||||||
|
this.loading = $('<iframe />', {
|
||||||
|
name: name + '-loading-' + this.loaderUuid++
|
||||||
|
}).appendTo( this.container );
|
||||||
|
|
||||||
|
this.loading.one( 'load', function() {
|
||||||
|
self.iframe.remove();
|
||||||
|
self.iframe = self.loading;
|
||||||
|
delete self.loading;
|
||||||
|
self.iframe.prop( 'name', name );
|
||||||
|
});
|
||||||
|
|
||||||
|
return this.loading;
|
||||||
|
},
|
||||||
refresh: function() {
|
refresh: function() {
|
||||||
this.submit({
|
this.submit({
|
||||||
target: this.iframe.prop('name'),
|
target: this.loader().prop('name'),
|
||||||
action: this.url()
|
action: this.url()
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -54,6 +118,9 @@
|
||||||
* ===================================================================== */
|
* ===================================================================== */
|
||||||
|
|
||||||
$( function() {
|
$( function() {
|
||||||
|
if ( ! api.settings )
|
||||||
|
return;
|
||||||
|
|
||||||
var previewer,
|
var previewer,
|
||||||
controls = $('[name^="' + api.settings.prefix + '"]');
|
controls = $('[name^="' + api.settings.prefix + '"]');
|
||||||
|
|
||||||
|
@ -72,6 +139,8 @@
|
||||||
|
|
||||||
setting.control.link( setting );
|
setting.control.link( setting );
|
||||||
setting.link( setting.control );
|
setting.link( setting.control );
|
||||||
|
|
||||||
|
setting.bind( previewer.refresh );
|
||||||
});
|
});
|
||||||
|
|
||||||
// Temporary accordion code.
|
// Temporary accordion code.
|
||||||
|
@ -87,11 +156,6 @@
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#refresh').click( function() {
|
|
||||||
previewer.refresh();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fetch prefixed settings.
|
// Fetch prefixed settings.
|
||||||
$('[name^="' + api.settings.prefix + '"]').each( function() {
|
$('[name^="' + api.settings.prefix + '"]').each( function() {
|
||||||
// console.log( this.name );
|
// console.log( this.name );
|
||||||
|
|
Loading…
Reference in New Issue