Infinite Scroll pathParse for reverse WordPress Comments

Question

I'm using the jQuery Infinite Scroll plugin - https://github.com/paulirish/infinite-scroll/ to display my paginated WordPress comments.

The plugin works fine when viewing the comments from old to new (I think this is the default option) but if the Discussion options in WordPress are set to the following:

Break comments into pages with [XX] top level comments per page and the
[LAST] page displayed by default

Comments should be displayed with the [NEWER] comments at the top of each page

Then Infinite Scroll no longer works.

Looking into the problem, it seems to be because if the settings are as above, then first comments page that WordPress will display is the last, so i.e.

WordPress 1st comment page displayed = http://MYLINK/comment-page-5
WordPress 2nd comment page displayed = http://MYLINK/comment-page-4
WordPress 3rd comment page displayed = http://MYLINK/comment-page-3

etc.

But, I think Infinite Scroll wants to increment each page, so after the first page is displayed (actually page 5) Infinite Scroll is then looking for page 6, which does not exist.

Looking through the IS options, there is a pathParse option - but there is no documentation explaining how to use it. I'm not even 100% sure if this will help.

I (and lots of others) would be super appreciative for any help you can give.

Docilu

Answer 1

I seem to have come up with a (not entirely graceful) solution to this problem.

Thanks very much to @M1ke for his help.

Ok,

So firstly, you'll need to make use of the pathParse function, so where you define your Infinite Scroll options:

Add in

.infinitescroll({
    state: {
      currPage: 4 // The number of the first comment page loaded, you can generate this number dynamically to save changing it manually
    },        

    pathParse: function(path,nextPage){
        path = ['comment-page-','#comments'];
        return path;
    }
});

You'll then need to tweak the main plugin file (jquery.infinitescroll.js or .min version) as there doesn't seem to be any other way to do this. So, find the section with:

// increment the URL bit. e.g. /page/3/
opts.state.currPage++;

And change to

// decrement the URL bit. e.g. /page/3/
if (opts.state.currPage > 1) {
    opts.state.currPage--;
}
else if (opts.state.currPage == 1) {
    console.log("Last Page"); // Just needed for debugging              
    opts.state.currPage = 999999; // stop IS from loading Comment Page 0 by giving it a page number that won't exist and will return a '404' to provide 'end' function.
}

Also, make sure the following section:

this._debug('pathParse manual');
return opts.pathParse(path, this.options.state.currPage+1);

Is changed to:

this._debug('pathParse manual');
return opts.pathParse(path, this.options.state.currPage);

Docilu

Answer 2

Thought Id chip in here with an easier solution. Instead of trying to alter the plugin, I found it easier (after days and days of trying), to reverse the comments array. Simply add this to your functions.php (sourced from here)

if (!function_exists('iweb_reverse_comments')) {
function iweb_reverse_comments($comments) {
    return array_reverse($comments);
    }   
}
add_filter ('comments_array', 'iweb_reverse_comments');

This way, the infinitescroll js can stay the way it is. Also, you just leave the Wordpress Settings > Discussions to default.

Executor

Answer 3

The plugin gets the next URL to load from the div.navigation a:first selector. The href attribute of this is passed as the path into the ajax request for the next page. Try that jQuery selector out in console and see what it comes up with; you could then either alter the plugin to rewrite the selector, or alter your HTML so that the selector gets the right match.

Attempt 2

The parsing issue isn't because of numbering; it is looking for page=3 and your link is to page-3. Assume that can't be changed, but you can add the pathParse method as you suggested (add this where you've commented out a similar method in your code):

 ,pathParse:function(path,nextPage){
   path = path.match(/page[-=]([0-9]*)/).slice(1);
   return path;
 }

To then have it correcly decrement rather than increment the only way I can see at present is to alter line 493 (in the dev version of the WP plugin) to read

opts.state.currPage--;

Danforth

Howdy. I've tried that a:first selector, but it doesn't change anything. I still get the error in my console: ["Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."] plugins.js:41 ["determinePath", "URL/comment-page-3#comments"] plugins.js:41 ["Binding", "bind"]' It's something to do with IS incrementing the pages it's trying to load, whereas my page URLs go down in number... – Docilu

IS shouldn't increment them; it looks for the "next" URL to find what to load, so shouldn't do anything else (if it incremented it'd load next+1). Interestingly if you follow the link to the comments url the infinite scroll works fine. I'll have a better look. – Danforth

Comment in the code // find the number to increment in the path. My bad! Let's fix that then! – Danforth