Infinite scroll for themes.php and theme-install.php. Bump per page limit for themes.php to 999. Props helenyhou, DH-Shredder. see #19815

git-svn-id: http://svn.automattic.com/wordpress/trunk@19887 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/class-wp-theme-install-list-table.php

@@ -9,6 +9,12 @@
  */
 class WP_Theme_Install_List_Table extends WP_List_Table {
 
+	function __construct() {
+		parent::__construct( array(
+			'ajax' => true,
+		) );
+	}
+
 	function ajax_user_can() {
 		return current_user_can('install_themes');
 	}
@@ -128,7 +134,7 @@ class WP_Theme_Install_List_Table extends WP_List_Table {
 
 	function display() {
 
-		// wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
+		wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
 ?>
 		<div class="tablenav top themes">
 			<div class="alignleft actions">

wp-admin/includes/class-wp-themes-list-table.php

@@ -12,6 +12,12 @@ class WP_Themes_List_Table extends WP_List_Table {
 	var $search = array();
 	var $features = array();
 	
+	function __construct() {
+		parent::__construct( array(
+			'ajax' => true,
+		) );
+	}
+
 	function ajax_user_can() {
 		// Do not check edit_theme_options here. AJAX calls for available themes require switch_themes.
 		return current_user_can('switch_themes');
@@ -47,7 +53,7 @@ class WP_Themes_List_Table extends WP_List_Table {
 		unset( $themes[$ct->name] );
 		uksort( $themes, "strnatcasecmp" );
 
-		$per_page = 24;
+		$per_page = 999;
 		$page = $this->get_pagenum();
 
 		$start = ( $page - 1 ) * $per_page;
@@ -101,7 +107,7 @@ class WP_Themes_List_Table extends WP_List_Table {
 	}
 
 	function display() {
-		// wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
+		wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
 ?>
 		<?php $this->tablenav( 'top' ); ?>
 

wp-admin/js/theme.dev.js

@@ -53,3 +53,185 @@ jQuery( document ).ready( function($) {
 	theme_viewer = new ThemeViewer();
 	theme_viewer.init();
 });
+
+var wpThemes;
+
+(function($){
+	var inputs = {}, Query;
+
+	wpThemes = {
+		timeToTriggerQuery: 150,
+		minQueryAJAXDuration: 200,
+		outListBottomThreshold: 200,
+		noMoreResults: false,
+		
+		init : function() {
+			$( '.pagination-links' ).hide();
+
+			inputs.nonce = $('#_ajax_fetch_list_nonce').val();
+	
+			// Parse Query
+			inputs.queryString = window.location.search;			
+			inputs.queryArray = wpThemes.parseQuery( inputs.queryString.substring( 1 ) );
+
+			// Handle Inputs from Query
+			inputs.search = inputs.queryArray['s'];
+			inputs.features = inputs.queryArray['features'];
+			inputs.startPage = parseInt( inputs.queryArray['paged'] );
+			inputs.tab = inputs.queryArray['tab'];
+			inputs.type = inputs.queryArray['type'];
+
+			if ( isNaN( inputs.startPage ) )
+				inputs.startPage = 2;
+			else
+				inputs.startPage++;
+
+			// FIXME: Debug Features Array
+			// console.log("Features:" + inputs.features);
+
+			// Link to output and start polling
+			inputs.outList = $('#availablethemes');
+
+			// Generate Query
+			wpThemes.query = new Query();
+
+			// Start Polling
+			$(window).scroll( function(){ wpThemes.maybeLoad(); });
+		},
+		delayedCallback : function( func, delay ) {
+			var timeoutTriggered, funcTriggered, funcArgs, funcContext;
+
+			if ( ! delay )
+				return func;
+
+			setTimeout( function() {
+				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 ) {
+			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 ) ||
+				 ( results.rows.indexOf( "no-items" ) != -1 ) ) {
+				this.noMoreResults = true;
+			} else {
+				inputs.outList.append(results.rows);
+			}
+		},
+		maybeLoad: function() {
+			var self = this,
+				el = $(document),
+				bottom = el.scrollTop() + $(window).innerHeight();
+
+			/* // FIXME: Debug scroll trigger.
+			console.log('scrollTop:'+ el.scrollTop() + 
+				'; scrollBottom:' + bottom +
+				'; height:' + el.height() +
+				'; checkVal:' + (el.height() - wpThemes.outListBottomThreshold));
+			*/
+
+			if ( this.noMoreResults ||
+				 !this.query.ready() || 
+				 ( bottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
+				return;
+
+			setTimeout( function() {
+				var newTop = el.scrollTop(),
+					newBottom = newTop + $(window).innerHeight();
+
+				if ( !self.query.ready() ||
+					 ( newBottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
+					return;
+
+				/* FIXME: Create/Add Spinner.
+				self.waiting.show(); // Show Spinner
+				el.scrollTop( newTop + self.waiting.outerHeight() ); // Scroll down?
+				self.ajax( function() { self.waiting.hide(); }); // Hide Spinner
+				*/
+				self.ajax();
+			}, wpThemes.timeToTriggerQuery );
+		},
+		parseQuery: function( query ) {
+			var Params = {};
+			if ( ! query ) {return Params;}// return empty object
+			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 ( ! 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',
+				paged: this.page,
+				s: inputs.search,
+				'features[]': inputs.features,
+				'list_args': list_args,
+				'tab': inputs.tab,
+				'type': inputs.type,
+				'_ajax_fetch_list_nonce': inputs.nonce
+			};
+
+			this.querying = true;
+			$.get( ajaxurl, query, function(r) {
+				self.page++;
+				self.querying = false;
+				self.failedRequest = !r;
+				callback( r, query );
+			}, "json" );
+		}
+	});
+
+	$(document).ready( wpThemes.init );
+
+})(jQuery);

wp-admin/theme-install.php

@@ -33,6 +33,7 @@ wp_enqueue_script( 'theme-install' );
 
 add_thickbox();
 wp_enqueue_script( 'theme-preview' );
+wp_enqueue_script( 'theme' );
 
 $body_id = $tab;