<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[19887] trunk/wp-admin: Infinite scroll for themes.php and theme-install.php.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/19887">19887</a></dd>
<dt>Author</dt> <dd>ryan</dd>
<dt>Date</dt> <dd>2012-02-09 17:20:26 +0000 (Thu, 09 Feb 2012)</dd>
</dl>

<h3>Log Message</h3>
<pre>Infinite scroll for themes.php and theme-install.php. Bump per page limit for themes.php to 999. Props helenyhou, DH-Shredder. see <a href="http://core.trac.wordpress.org/ticket/19815">#19815</a></pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminincludesclasswpthemeinstalllisttablephp">trunk/wp-admin/includes/class-wp-theme-install-list-table.php</a></li>
<li><a href="#trunkwpadminincludesclasswpthemeslisttablephp">trunk/wp-admin/includes/class-wp-themes-list-table.php</a></li>
<li><a href="#trunkwpadminjsthemedevjs">trunk/wp-admin/js/theme.dev.js</a></li>
<li><a href="#trunkwpadminthemeinstallphp">trunk/wp-admin/theme-install.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminincludesclasswpthemeinstalllisttablephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/class-wp-theme-install-list-table.php (19886 => 19887)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/class-wp-theme-install-list-table.php        2012-02-09 17:15:24 UTC (rev 19886)
+++ trunk/wp-admin/includes/class-wp-theme-install-list-table.php        2012-02-09 17:20:26 UTC (rev 19887)
</span><span class="lines">@@ -9,6 +9,12 @@
</span><span class="cx">  */
</span><span class="cx"> class WP_Theme_Install_List_Table extends WP_List_Table {
</span><span class="cx"> 
</span><ins>+        function __construct() {
+                parent::__construct( array(
+                        'ajax' =&gt; true,
+                ) );
+        }
+
</ins><span class="cx">         function ajax_user_can() {
</span><span class="cx">                 return current_user_can('install_themes');
</span><span class="cx">         }
</span><span class="lines">@@ -128,7 +134,7 @@
</span><span class="cx"> 
</span><span class="cx">         function display() {
</span><span class="cx"> 
</span><del>-                // wp_nonce_field( &quot;fetch-list-&quot; . get_class( $this ), '_ajax_fetch_list_nonce' );
</del><ins>+                wp_nonce_field( &quot;fetch-list-&quot; . get_class( $this ), '_ajax_fetch_list_nonce' );
</ins><span class="cx"> ?&gt;
</span><span class="cx">                 &lt;div class=&quot;tablenav top themes&quot;&gt;
</span><span class="cx">                         &lt;div class=&quot;alignleft actions&quot;&gt;
</span></span></pre></div>
<a id="trunkwpadminincludesclasswpthemeslisttablephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/class-wp-themes-list-table.php (19886 => 19887)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/class-wp-themes-list-table.php        2012-02-09 17:15:24 UTC (rev 19886)
+++ trunk/wp-admin/includes/class-wp-themes-list-table.php        2012-02-09 17:20:26 UTC (rev 19887)
</span><span class="lines">@@ -11,6 +11,12 @@
</span><span class="cx"> 
</span><span class="cx">         var $search = array();
</span><span class="cx">         var $features = array();
</span><ins>+        
+        function __construct() {
+                parent::__construct( array(
+                        'ajax' =&gt; true,
+                ) );
+        }
</ins><span class="cx"> 
</span><span class="cx">         function ajax_user_can() {
</span><span class="cx">                 // Do not check edit_theme_options here. AJAX calls for available themes require switch_themes.
</span><span class="lines">@@ -47,7 +53,7 @@
</span><span class="cx">                 unset( $themes[$ct-&gt;name] );
</span><span class="cx">                 uksort( $themes, &quot;strnatcasecmp&quot; );
</span><span class="cx"> 
</span><del>-                $per_page = 24;
</del><ins>+                $per_page = 999;
</ins><span class="cx">                 $page = $this-&gt;get_pagenum();
</span><span class="cx"> 
</span><span class="cx">                 $start = ( $page - 1 ) * $per_page;
</span><span class="lines">@@ -101,7 +107,7 @@
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         function display() {
</span><del>-                // wp_nonce_field( &quot;fetch-list-&quot; . get_class( $this ), '_ajax_fetch_list_nonce' );
</del><ins>+                wp_nonce_field( &quot;fetch-list-&quot; . get_class( $this ), '_ajax_fetch_list_nonce' );
</ins><span class="cx"> ?&gt;
</span><span class="cx">                 &lt;?php $this-&gt;tablenav( 'top' ); ?&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkwpadminjsthemedevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/theme.dev.js (19886 => 19887)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/theme.dev.js        2012-02-09 17:15:24 UTC (rev 19886)
+++ trunk/wp-admin/js/theme.dev.js        2012-02-09 17:20:26 UTC (rev 19887)
</span><span class="lines">@@ -53,3 +53,185 @@
</span><span class="cx">         theme_viewer = new ThemeViewer();
</span><span class="cx">         theme_viewer.init();
</span><span class="cx"> });
</span><ins>+
+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(&quot;Features:&quot; + 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( &quot;no-items&quot; ) != -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 &lt; inputs.outList.height() - wpThemes.outListBottomThreshold ) )
+                                return;
+
+                        setTimeout( function() {
+                                var newTop = el.scrollTop(),
+                                        newBottom = newTop + $(window).innerHeight();
+
+                                if ( !self.query.ready() ||
+                                         ( newBottom &lt; 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(/[;&amp;]/);
+                        for ( var i = 0; i &lt; 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 );
+                        }, &quot;json&quot; );
+                }
+        });
+
+        $(document).ready( wpThemes.init );
+
+})(jQuery);
</ins></span></pre></div>
<a id="trunkwpadminthemeinstallphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/theme-install.php (19886 => 19887)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/theme-install.php        2012-02-09 17:15:24 UTC (rev 19886)
+++ trunk/wp-admin/theme-install.php        2012-02-09 17:20:26 UTC (rev 19887)
</span><span class="lines">@@ -33,6 +33,7 @@
</span><span class="cx"> 
</span><span class="cx"> add_thickbox();
</span><span class="cx"> wp_enqueue_script( 'theme-preview' );
</span><ins>+wp_enqueue_script( 'theme' );
</ins><span class="cx"> 
</span><span class="cx"> $body_id = $tab;
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>