From 723bb1a99ccb58665dd716b085db466a51ec48f7 Mon Sep 17 00:00:00 2001 From: ryan Date: Thu, 9 Feb 2012 17:20:26 +0000 Subject: [PATCH] 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 --- .../class-wp-theme-install-list-table.php | 8 +- .../includes/class-wp-themes-list-table.php | 10 +- wp-admin/js/theme.dev.js | 182 ++++++++++++++++++ wp-admin/theme-install.php | 1 + 4 files changed, 198 insertions(+), 3 deletions(-) diff --git a/wp-admin/includes/class-wp-theme-install-list-table.php b/wp-admin/includes/class-wp-theme-install-list-table.php index d68ff3b213..eab12598a2 100644 --- a/wp-admin/includes/class-wp-theme-install-list-table.php +++ b/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' ); ?>
diff --git a/wp-admin/includes/class-wp-themes-list-table.php b/wp-admin/includes/class-wp-themes-list-table.php index 5cd90664cd..6c9eccdcf6 100644 --- a/wp-admin/includes/class-wp-themes-list-table.php +++ b/wp-admin/includes/class-wp-themes-list-table.php @@ -11,6 +11,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. @@ -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' ); ?> tablenav( 'top' ); ?> diff --git a/wp-admin/js/theme.dev.js b/wp-admin/js/theme.dev.js index c575429566..8db74569ae 100644 --- a/wp-admin/js/theme.dev.js +++ b/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); diff --git a/wp-admin/theme-install.php b/wp-admin/theme-install.php index 9f70deb75d..59dd842589 100644 --- a/wp-admin/theme-install.php +++ b/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;