source: Klonkt/src/views/partials/load-more.ejs@ c1f5c23

main
Last change on this file since c1f5c23 was 7b04d3b, checked in by Robin <roboburr@…>, 7 weeks ago

Feature: Load more on News feed, page 72 (klonkt-demo-r9u, slice 1/4)

News (Krant) now pages in blocks of 72 (divisible by 2/3/4 so grid
columns stay full) with an htmx "Load more" button instead of a hard
60-item cap. getTimeline gains an offset arg; the route fetches 72+1 to
know whether the button belongs, and serves an append fragment
(partials/news-append) that swaps the next items beforeend into #tl-feed
and OOB-replaces the button with the next offset (or drops it on the
last page).

Reusable pieces for the other three views (Solo, Cirkel, Messages):

  • partials/load-more.ejs (the button + OOB wrapper)
  • partials/tl-item.ejs (extracted the timeline item so full page and append render identically)
  • .load-more-* CSS in shared-styles, i18n feed.load_more (NL/EN/DE)

Tests: feed-pagination.test.js (offset paging, no overlap, probe of
PAGE+1, past-end empty). Browser-verified: 72 -> 144 -> 150 then the
button disappears.

Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 875 bytes
RevLine 
[7b04d3b]1<%
2 // Reusable "Load more" control. On the full page it sits after the feed; the
3 // append response re-emits it with oob=true so htmx swaps the fresh button
4 // (next offset) in place of the old one, and drops it on the last page.
5 var _oob = (typeof oob !== 'undefined' && oob);
6 var _target = (typeof moreTarget !== 'undefined' && moreTarget) ? moreTarget : '#feed';
7 var _path = (typeof morePath !== 'undefined' && morePath) ? morePath : '';
8 var _base = (typeof moreBase !== 'undefined' && moreBase) ? moreBase : '';
9%>
10<div id="load-more" class="load-more-wrap"<% if (_oob) { %> hx-swap-oob="true"<% } %>>
11 <% if (hasMore) { %>
12 <button type="button" class="btn load-more-btn"
13 hx-get="<%= _base %><%= _path %>?append=1&offset=<%= nextOffset %>"
14 hx-target="<%= _target %>" hx-swap="beforeend"><%= t('feed.load_more') %></button>
15 <% } %>
16</div>
Note: See TracBrowser for help on using the repository browser.