Changeset 19887

Timestamp:

02/09/2012 05:20:26 PM (13 years ago)

Author:

ryan

Message:

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

Location:

trunk/wp-admin

Files:

• includes/class-wp-theme-install-list-table.php (modified) (2 diffs)
• includes/class-wp-themes-list-table.php (modified) (3 diffs)
• js/theme.dev.js (modified) (1 diff)
• theme-install.php (modified) (1 diff)

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

@@ -9 +9 @@
  */
 class WP_Theme_Install_List_Table extends WP_List_Table {
+
+    function __construct() {
+        parent::__construct( array(
+            'ajax' => true,
+        ) );
+    }
 
     function ajax_user_can() {
@@ -129 +135 @@
     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">

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

@@ -12 +12 @@
     var $search = array();
     var $features = array();
+    
+    function __construct() {
+        parent::__construct( array(
+            'ajax' => true,
+        ) );
+    }
 
     function ajax_user_can() {
@@ -48 +54 @@
         uksort( $themes, "strnatcasecmp" );
 
-        $per_page = 24;
+        $per_page = 999;
         $page = $this->get_pagenum();
 
@@ -102 +108 @@
 
     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' ); ?>

trunk/wp-admin/js/theme.dev.js

@@ -54 +54 @@
     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);

trunk/wp-admin/theme-install.php

@@ -34 +34 @@
 add_thickbox();
 wp_enqueue_script( 'theme-preview' );
+wp_enqueue_script( 'theme' );
 
 $body_id = $tab;