WordPress.org

Make WordPress Core

Changeset 19887


Ignore:
Timestamp:
02/09/2012 05:20:26 PM (6 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/includes/class-wp-theme-install-list-table.php

    r19857 r19887  
    99 */
    1010class WP_Theme_Install_List_Table extends WP_List_Table {
     11
     12    function __construct() {
     13        parent::__construct( array(
     14            'ajax' => true,
     15        ) );
     16    }
    1117
    1218    function ajax_user_can() {
     
    129135    function display() {
    130136
    131         // wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
     137        wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
    132138?>
    133139        <div class="tablenav top themes">
  • trunk/wp-admin/includes/class-wp-themes-list-table.php

    r19840 r19887  
    1212    var $search = array();
    1313    var $features = array();
     14   
     15    function __construct() {
     16        parent::__construct( array(
     17            'ajax' => true,
     18        ) );
     19    }
    1420
    1521    function ajax_user_can() {
     
    4854        uksort( $themes, "strnatcasecmp" );
    4955
    50         $per_page = 24;
     56        $per_page = 999;
    5157        $page = $this->get_pagenum();
    5258
     
    102108
    103109    function display() {
    104         // wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
     110        wp_nonce_field( "fetch-list-" . get_class( $this ), '_ajax_fetch_list_nonce' );
    105111?>
    106112        <?php $this->tablenav( 'top' ); ?>
  • trunk/wp-admin/js/theme.dev.js

    r17326 r19887  
    5454    theme_viewer.init();
    5555});
     56
     57var wpThemes;
     58
     59(function($){
     60    var inputs = {}, Query;
     61
     62    wpThemes = {
     63        timeToTriggerQuery: 150,
     64        minQueryAJAXDuration: 200,
     65        outListBottomThreshold: 200,
     66        noMoreResults: false,
     67       
     68        init : function() {
     69            $( '.pagination-links' ).hide();
     70
     71            inputs.nonce = $('#_ajax_fetch_list_nonce').val();
     72   
     73            // Parse Query
     74            inputs.queryString = window.location.search;           
     75            inputs.queryArray = wpThemes.parseQuery( inputs.queryString.substring( 1 ) );
     76
     77            // Handle Inputs from Query
     78            inputs.search = inputs.queryArray['s'];
     79            inputs.features = inputs.queryArray['features'];
     80            inputs.startPage = parseInt( inputs.queryArray['paged'] );
     81            inputs.tab = inputs.queryArray['tab'];
     82            inputs.type = inputs.queryArray['type'];
     83
     84            if ( isNaN( inputs.startPage ) )
     85                inputs.startPage = 2;
     86            else
     87                inputs.startPage++;
     88
     89            // FIXME: Debug Features Array
     90            // console.log("Features:" + inputs.features);
     91
     92            // Link to output and start polling
     93            inputs.outList = $('#availablethemes');
     94
     95            // Generate Query
     96            wpThemes.query = new Query();
     97
     98            // Start Polling
     99            $(window).scroll( function(){ wpThemes.maybeLoad(); });
     100        },
     101        delayedCallback : function( func, delay ) {
     102            var timeoutTriggered, funcTriggered, funcArgs, funcContext;
     103
     104            if ( ! delay )
     105                return func;
     106
     107            setTimeout( function() {
     108                if ( funcTriggered )
     109                    return func.apply( funcContext, funcArgs );
     110                // Otherwise, wait.
     111                timeoutTriggered = true;
     112            }, delay);
     113
     114            return function() {
     115                if ( timeoutTriggered )
     116                    return func.apply( this, arguments );
     117                // Otherwise, wait.
     118                funcArgs = arguments;
     119                funcContext = this;
     120                funcTriggered = true;
     121            };
     122        },
     123        ajax: function( callback ) {
     124            var self = this,
     125                response = wpThemes.delayedCallback( function( results, params ) {
     126                    self.process( results, params );
     127                    if ( callback )
     128                        callback( results, params );
     129                }, wpThemes.minQueryAJAXDuration );
     130
     131            this.query.ajax( response );
     132        },
     133        process: function( results, params ) {
     134            // If no Results, for now, mark as no Matches, and bail.
     135            // Alternately: inputs.outList.append(wpThemesL10n.noMatchesFound);
     136            if ( ( results === undefined ) ||
     137                 ( results.rows.indexOf( "no-items" ) != -1 ) ) {
     138                this.noMoreResults = true;
     139            } else {
     140                inputs.outList.append(results.rows);
     141            }
     142        },
     143        maybeLoad: function() {
     144            var self = this,
     145                el = $(document),
     146                bottom = el.scrollTop() + $(window).innerHeight();
     147
     148            /* // FIXME: Debug scroll trigger.
     149            console.log('scrollTop:'+ el.scrollTop() +
     150                '; scrollBottom:' + bottom +
     151                '; height:' + el.height() +
     152                '; checkVal:' + (el.height() - wpThemes.outListBottomThreshold));
     153            */
     154
     155            if ( this.noMoreResults ||
     156                 !this.query.ready() ||
     157                 ( bottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
     158                return;
     159
     160            setTimeout( function() {
     161                var newTop = el.scrollTop(),
     162                    newBottom = newTop + $(window).innerHeight();
     163
     164                if ( !self.query.ready() ||
     165                     ( newBottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
     166                    return;
     167
     168                /* FIXME: Create/Add Spinner.
     169                self.waiting.show(); // Show Spinner
     170                el.scrollTop( newTop + self.waiting.outerHeight() ); // Scroll down?
     171                self.ajax( function() { self.waiting.hide(); }); // Hide Spinner
     172                */
     173                self.ajax();
     174            }, wpThemes.timeToTriggerQuery );
     175        },
     176        parseQuery: function( query ) {
     177            var Params = {};
     178            if ( ! query ) {return Params;}// return empty object
     179            var Pairs = query.split(/[;&]/);
     180            for ( var i = 0; i < Pairs.length; i++ ) {
     181                var KeyVal = Pairs[i].split('=');
     182                if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
     183                var key = unescape( KeyVal[0] );
     184                var val = unescape( KeyVal[1] );
     185                val = val.replace(/\+/g, ' ');
     186                key = key.replace(/\[.*\]$/g, '');
     187   
     188                if ( Params[key] === undefined ) {
     189                    Params[key] = val;
     190                } else {
     191                    var oldVal = Params[key];
     192                    if ( ! jQuery.isArray( Params[key] ) )
     193                        Params[key] = new Array( oldVal, val );
     194                    else
     195                        Params[key].push( val );
     196                }
     197            }
     198            return Params;
     199        }
     200    }
     201
     202    Query = function() {
     203        this.failedRequest = false;
     204        this.querying = false;
     205        this.page = inputs.startPage;
     206    }
     207   
     208    $.extend( Query.prototype, {
     209        ready: function() {
     210            return !( this.querying || this.failedRequest );
     211        },
     212        ajax: function( callback ) {
     213            var self = this,
     214            query = {
     215                action: 'fetch-list',
     216                paged: this.page,
     217                s: inputs.search,
     218                'features[]': inputs.features,
     219                'list_args': list_args,
     220                'tab': inputs.tab,
     221                'type': inputs.type,
     222                '_ajax_fetch_list_nonce': inputs.nonce
     223            };
     224
     225            this.querying = true;
     226            $.get( ajaxurl, query, function(r) {
     227                self.page++;
     228                self.querying = false;
     229                self.failedRequest = !r;
     230                callback( r, query );
     231            }, "json" );
     232        }
     233    });
     234
     235    $(document).ready( wpThemes.init );
     236
     237})(jQuery);
  • trunk/wp-admin/theme-install.php

    r19712 r19887  
    3434add_thickbox();
    3535wp_enqueue_script( 'theme-preview' );
     36wp_enqueue_script( 'theme' );
    3637
    3738$body_id = $tab;
Note: See TracChangeset for help on using the changeset viewer.