WordPress.org

Make WordPress Core

Ticket #19815: 19815.3.diff

File 19815.3.diff, 6.8 KB (added by mikeschroder, 9 years ago)

Initial patch for adding inifinite scrolling to Themes screen (Currently Installed Only)

  • wp-includes/js/wp-themes.dev.js

     
     1var wpThemes;
     2
     3(function($){
     4        var inputs = {}, Query;
     5
     6        wpThemes = {
     7                timeToTriggerQuery: 150,
     8                minQueryAJAXDuration: 200,
     9                outListBottomThreshold: 200,
     10                noMoreResults: false,
     11               
     12                init : function() {
     13                        inputs.nonce = $('#_ajax_fetch_list_nonce').val();
     14       
     15                        // Parse Query
     16                        inputs.queryString = window.location.search;                   
     17                        inputs.queryArray = wpThemes.parseQuery( inputs.queryString.substring( 1 ) );
     18
     19                        // Handle Inputs from Query
     20                        inputs.search = inputs.queryArray['s'];
     21                        inputs.features = inputs.queryArray['features'];
     22                        inputs.startPage = parseInt( inputs.queryArray['paged'] );
     23
     24                        if ( isNaN( inputs.startPage ) )
     25                                inputs.startPage = 2;
     26                        else
     27                                inputs.startPage++;
     28
     29                        // FIXME: Debug Features Array
     30                        // console.log("Features:" + inputs.features);
     31
     32                        // Link to output and start polling
     33                        inputs.outList = $('#availablethemes');
     34
     35                        // Generate Query
     36                        wpThemes.query = new Query();
     37
     38                        // Start Polling
     39                        $(window).scroll( function(){ wpThemes.maybeLoad(); });
     40                },
     41                delayedCallback : function( func, delay ) {
     42                        var timeoutTriggered, funcTriggered, funcArgs, funcContext;
     43
     44                        if ( ! delay )
     45                                return func;
     46
     47                        setTimeout( function() {
     48                                if ( funcTriggered )
     49                                        return func.apply( funcContext, funcArgs );
     50                                // Otherwise, wait.
     51                                timeoutTriggered = true;
     52                        }, delay);
     53
     54                        return function() {
     55                                if ( timeoutTriggered )
     56                                        return func.apply( this, arguments );
     57                                // Otherwise, wait.
     58                                funcArgs = arguments;
     59                                funcContext = this;
     60                                funcTriggered = true;
     61                        };
     62                },
     63                ajax: function( callback ) {
     64                        var self = this,
     65                                response = wpThemes.delayedCallback( function( results, params ) {
     66                                        self.process( results, params );
     67                                        if ( callback )
     68                                                callback( results, params );
     69                                }, wpThemes.minQueryAJAXDuration );
     70
     71                        this.query.ajax( response );
     72                },
     73                process: function( results, params ) {
     74                        // If no Results, for now, mark as no Matches, and bail.
     75                        // Alternately: inputs.outList.append(wpThemesL10n.noMatchesFound);
     76                        if ( ( results === undefined ) ||
     77                                 ( results.rows.indexOf( "no-items" ) != -1 ) ) {
     78                                this.noMoreResults = true;
     79                        } else {
     80                                inputs.outList.append(results.rows);
     81                        }
     82                },
     83                maybeLoad: function() {
     84                        var self = this,
     85                                el = $(document),
     86                                bottom = el.scrollTop() + $(window).innerHeight();
     87
     88                        /* // FIXME: Debug scroll trigger.
     89                        console.log('scrollTop:'+ el.scrollTop() +
     90                                '; scrollBottom:' + bottom +
     91                                '; height:' + el.height() +
     92                                '; checkVal:' + (el.height() - wpThemes.outListBottomThreshold));
     93                        */
     94
     95                        if ( this.noMoreResults ||
     96                                 !this.query.ready() ||
     97                                 ( bottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
     98                                return;
     99
     100                        setTimeout( function() {
     101                                var newTop = el.scrollTop(),
     102                                        newBottom = newTop + $(window).innerHeight();
     103
     104                                if ( !self.query.ready() ||
     105                                         ( newBottom < inputs.outList.height() - wpThemes.outListBottomThreshold ) )
     106                                        return;
     107
     108                                /* FIXME: Create/Add Spinner.
     109                                self.waiting.show(); // Show Spinner
     110                                el.scrollTop( newTop + self.waiting.outerHeight() ); // Scroll down?
     111                                self.ajax( function() { self.waiting.hide(); }); // Hide Spinner
     112                                */
     113                                self.ajax();
     114                        }, wpThemes.timeToTriggerQuery );
     115                },
     116                parseQuery: function( query ) {
     117                        var Params = {};
     118                        if ( ! query ) {return Params;}// return empty object
     119                        var Pairs = query.split(/[;&]/);
     120                        for ( var i = 0; i < Pairs.length; i++ ) {
     121                                var KeyVal = Pairs[i].split('=');
     122                                if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
     123                                var key = unescape( KeyVal[0] );
     124                                var val = unescape( KeyVal[1] );
     125                                val = val.replace(/\+/g, ' ');
     126                                key = key.replace(/\[.*\]$/g, '');
     127       
     128                                if ( Params[key] === undefined ) {
     129                                        Params[key] = val;
     130                                } else {
     131                                        var oldVal = Params[key];
     132                                        if ( ! jQuery.isArray( Params[key] ) )
     133                                                Params[key] = new Array( oldVal, val );
     134                                        else
     135                                                Params[key].push( val );
     136                                }
     137                        }
     138                        return Params;
     139                }
     140        }
     141
     142        Query = function() {
     143                this.failedRequest = false;
     144                this.querying = false;
     145                this.page = inputs.startPage;
     146        }
     147       
     148        $.extend( Query.prototype, {
     149                ready: function() {
     150                        return !( this.querying || this.failedRequest );
     151                },
     152                ajax: function( callback ) {
     153                        var self = this,
     154                        query = {
     155                                action: 'fetch-list',
     156                                paged: this.page,
     157                                s: inputs.search,
     158                                'features[]': inputs.features,
     159                                'list_args': list_args,
     160                                '_ajax_fetch_list_nonce' : inputs.nonce
     161                        };
     162
     163                        this.querying = true;
     164                        $.get( ajaxurl, query, function(r) {
     165                                self.page++;
     166                                self.querying = false;
     167                                self.failedRequest = !r;
     168                                callback( r, query );
     169                        }, "json" );
     170                }
     171        });
     172
     173        $(document).ready( wpThemes.init );
     174
     175})(jQuery);
  • wp-includes/script-loader.php

     
    271271                'noMatchesFound' => __('No matches found.')
    272272        ) );
    273273
     274        $scripts->add( 'wp-themes', "/wp-includes/js/wp-themes$suffix.js", array( 'jquery' ), false, 1 );
     275        $scripts->localize( 'wp-themes', 'wpThemesL10n', array(
     276                'noMatchesFound' => __('No matches found.')
     277        ) );       
     278
    274279        $scripts->add( 'wpdialogs', "/wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog$suffix.js", array( 'jquery-ui-dialog' ), false, 1 );
    275280
    276281        $scripts->add( 'wpdialogs-popup', "/wp-includes/js/tinymce/plugins/wpdialogs/js/popup$suffix.js", array( 'wpdialogs' ), false, 1 );
  • wp-admin/includes/class-wp-themes-list-table.php

     
    1111
    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() {
    1622                // Do not check edit_theme_options here. AJAX calls for available themes require switch_themes.
     
    101107        }
    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' ); ?>
    107113
  • wp-admin/themes.php

     
    6969add_thickbox();
    7070wp_enqueue_script( 'theme-preview' );
    7171wp_enqueue_script( 'theme' );
     72wp_enqueue_script( 'wp-themes' );
    7273
    7374endif;
    7475