Infinite scroll with date separator

[Zeka]

Hi. 

I need to implement an infinite scroll feature for a news site.
There is no problem in the infinite scroll feature, but list of news should be separated with dates, like on screen image

The working example you can find here.
Sadly, but I can't figurate out where to start.
Any ideas are much welcome.
Thanks. 

[dragan]

In Win / Chrome it looks exactly like your screenshot. Styling and inf. scroll seem to work just fine. What are you testing with, and how does it look like on your end?

[wbmnfktr]

Same here... Win/Chrome, Win/Firefox.

There aren't that much dates/days but it seems to work pretty well. Or I don't understand the problem.

[Zeka]

@dragan, @wbmnfktr Sorry, it's not the site I'm working on, its just an example what I need. ☺️

Basicaly speaking I can't figurate how to transform page array to list separeted by days. 

[wbmnfktr]

? ? ? ? ? 

Ok...now this changes everything. Unfortunatelly... I have no idea right now. ? 

[elabx]

I don't know how to do this in PW, but I'm guessing something like GROUP BY in mysql should work. Check RockFinder I see some examples:

https://github.com/BernhardBaumrock/RockFinder#custom-sql-aggregations-groupings-distincts

 

[teppo]

2 hours ago, Zeka said:

Basicaly speaking I can't figurate how to transform page array to list separeted by days. 

Perhaps I'm missing the point, but this should be the easy part. Maybe something along these lines:

<?php
$current_date = null;
$items = $pages->find('template=news-item, sort=date_field, start=0, limit=20');
if ($items->count()) {
    foreach ($items as $item) {
        $date = date('j.n.', $item->getUnformatted('date_field'));
        if ($date !== $current_date) {
            if ($current_date !== null) echo "</ul>";
            echo "<h3>{$date}</h3><ul>";
            $current_date = $date;
        }
        echo "<li>{$item->title}</li>";
    }
    echo "<ul>";
}

It's a bit crude and probably wouldn't work as-is with your infinite scroll approach, but that's the basic idea anyway ?

[Robin S]

@BitPoet's groupBy() hook is nice for this sort of thing. As with @teppo's suggestion, you'd have to do a bit more to get it working with infinite scroll (the limit might fall in the middle of a day, in which case you wouldn't want the day heading added again on the next pagination).