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

Second pass at infinite scroll for themes, including polling, fixed paging, and fewer ajax calls. props DH-Shredder, helenyhou, garyc40. see #19815. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@19971 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-02-21 19:44:10 +00:00
parent 7a6b978b7f
commit c4f08de854
1 changed files with 119 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
wp-admin/js/theme.dev.js
View File

@ -54,173 +54,145 @@ jQuery( document ).ready( function($) {
theme_viewer.init(); theme_viewer.init();
}); });
var wpThemes; var ThemeScroller;
(function($){ (function($){
var inputs = {}, Query; ThemeScroller = {
// Inputs
nonce: '',
search: '',
tab: '',
type: '',
nextPage: 2,
features: {},
wpThemes = { // Preferences
timeToTriggerQuery: 150, scrollPollingDelay: 500,
minQueryAJAXDuration: 200, failedRetryDelay: 4000,
outListBottomThreshold: 200, outListBottomThreshold: 300,
noMoreResults: false,
init : function() { // Flags
scrolling: false,
querying: false,
init: function() {
var self = this,
startPage,
queryArray = {},
queryString = window.location.search;
// We're using infinite scrolling, so hide all pagination.
$('.pagination-links').hide(); $('.pagination-links').hide();
inputs.nonce = $('#_ajax_fetch_list_nonce').val(); // Parse GET query string
queryArray = this.parseQuery( queryString.substring( 1 ) );
// Parse Query // Handle inputs
inputs.queryString = window.location.search; this.nonce = $('#_ajax_fetch_list_nonce').val();
inputs.queryArray = wpThemes.parseQuery( inputs.queryString.substring( 1 ) ); this.search = queryArray['s'];
this.features = queryArray['features'];
this.tab = queryArray['tab'];
this.type = queryArray['type'];
// Handle Inputs from Query startPage = parseInt( queryArray['paged'], 10 );
inputs.search = inputs.queryArray['s']; if ( ! isNaN( startPage ) )
inputs.features = inputs.queryArray['features']; this.nextPage = ( startPage + 1 );
inputs.startPage = parseInt( inputs.queryArray['paged'] );
inputs.tab = inputs.queryArray['tab'];
inputs.type = inputs.queryArray['type'];
if ( isNaN( inputs.startPage ) ) // Cache jQuery selectors
inputs.startPage = 2; this.$outList = $('#availablethemes');
else this.$spinner = $('div.tablenav.bottom').children( 'img.ajax-loading' );
inputs.startPage++; this.$window = $(window);
this.$document = $(document);
// Cache jQuery objects if ( $('.tablenav-pages').length )
inputs.outList = $('#availablethemes'); this.pollInterval =
inputs.waiting = $('div.tablenav.bottom').children( 'img.ajax-loading' ); setInterval( function() {
inputs.window = $(window); return self.poll();
}, this.scrollPollingDelay );
// Generate Query
wpThemes.query = new Query();
// Start Polling
inputs.window.scroll( function(){ wpThemes.maybeLoad(); } );
}, },
delayedCallback : function( func, delay ) { poll: function() {
var timeoutTriggered, funcTriggered, funcArgs, funcContext; var bottom = this.$document.scrollTop() + this.$window.innerHeight();
if ( ! delay ) if ( this.querying ||
return func; ( bottom < this.$outList.height() - this.outListBottomThreshold ) )
return;
setTimeout( function() { this.ajax();
if ( funcTriggered )
return func.apply( funcContext, funcArgs );
// Otherwise, wait.
timeoutTriggered = true;
}, delay);
return function() {
if ( timeoutTriggered )
return func.apply( this, arguments );
// Otherwise, wait.
funcArgs = arguments;
funcContext = this;
funcTriggered = true;
};
}, },
ajax: function( callback ) { process: function( results ) {
var self = this,
response = wpThemes.delayedCallback( function( results, params ) {
self.process( results, params );
if ( callback )
callback( results, params );
}, wpThemes.minQueryAJAXDuration );
this.query.ajax( response );
},
process: function( results, params ) {
// If no Results, for now, mark as no Matches, and bail.
// Alternately: inputs.outList.append(wpThemesL10n.noMatchesFound);
if ( ( results === undefined ) || if ( ( results === undefined ) ||
( results.rows.indexOf( "no-items" ) != -1 ) ) { ( results.rows.indexOf( 'no-items' ) != -1 ) ) {
this.noMoreResults = true; clearInterval( this.pollInterval );
} else {
inputs.outList.append( results.rows );
}
},
maybeLoad: function() {
var self = this,
el = $(document),
bottom = el.scrollTop() + inputs.window.innerHeight();
if ( this.noMoreResults ||
!this.query.ready() ||
( bottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
return; return;
}
setTimeout( function() { var totalPages = parseInt( results.total_pages, 10 );
var newTop = el.scrollTop(), if ( this.nextPage > totalPages )
newBottom = newTop + inputs.window.innerHeight(); clearInterval( this.pollInterval );
if ( !self.query.ready() || if ( this.nextPage <= ( totalPages + 1 ) )
( newBottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) ) this.$outList.append( results.rows );
return;
inputs.waiting.css( 'visibility', 'visible' ); // Show Spinner
self.ajax( function() { inputs.waiting.css( 'visibility', 'hidden' ) } ); // Hide Spinner
}, wpThemes.timeToTriggerQuery );
}, },
parseQuery: function( query ) { ajax: function() {
var Params = {}; var self = this;
if ( ! query ) {return Params;}// return empty object this.querying = true;
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
key = key.replace(/\[.*\]$/g, '');
if ( Params[key] === undefined ) { var query = {
Params[key] = val;
} else {
var oldVal = Params[key];
if ( ! jQuery.isArray( Params[key] ) )
Params[key] = new Array( oldVal, val );
else
Params[key].push( val );
}
}
return Params;
}
}
Query = function() {
this.failedRequest = false;
this.querying = false;
this.page = inputs.startPage;
}
$.extend( Query.prototype, {
ready: function() {
return !( this.querying || this.failedRequest );
},
ajax: function( callback ) {
var self = this,
query = {
action: 'fetch-list', action: 'fetch-list',
tab: inputs.tab, tab: this.tab,
paged: this.page, paged: this.nextPage,
s: inputs.search, s: this.search,
type: inputs.type, type: this.type,
_ajax_fetch_list_nonce: inputs.nonce, _ajax_fetch_list_nonce: this.nonce,
'features[]': inputs.features, 'features[]': this.features,
'list_args': list_args 'list_args': list_args
}; };
this.querying = true; this.$spinner.css( 'visibility', 'visible' );
$.get( ajaxurl, query, function(r) { $.getJSON( ajaxurl, query )
self.page++; .done( function( response ) {
self.nextPage++;
self.process( response );
self.$spinner.css( 'visibility', 'hidden' );
self.querying = false; self.querying = false;
self.failedRequest = !r; })
callback( r, query ); .fail( function() {
}, "json" ); self.$spinner.css( 'visibility', 'hidden' );
} self.querying = false;
setTimeout( function() { self.ajax(); }, self.failedRetryDelay )
}); });
},
parseQuery: function( query ) {
var params = {};
if ( ! query )
return params;
$(document).ready( wpThemes.init ); var pairs = query.split( /[;&]/ );
for ( var i = 0; i < pairs.length; i++ ) {
var keyVal = pairs[i].split( '=' );
if ( ! keyVal || keyVal.length != 2 )
continue;
var key = unescape( keyVal[0] );
var val = unescape( keyVal[1] );
val = val.replace( /\+/g, ' ' );
key = key.replace( /\[.*\]$/g, '' );
if ( params[key] === undefined ) {
params[key] = val;
} else {
var oldVal = params[key];
if ( ! $.isArray( params[key] ) )
params[key] = new Array( oldVal, val );
else
params[key].push( val );
}
}
return params;
}
}
$(document).ready( function( $ ) { ThemeScroller.init(); });
})(jQuery); })(jQuery);