61 lines
3.0 KiB
Plaintext
61 lines
3.0 KiB
Plaintext
<%#
|
||
Pagination footer: rows-per-page (GET form) + page numbers. Query-param driven, zero-JS.
|
||
Mirrors html-css-foundation markup; page items are <a>, inert ones (current/ellipsis/disabled) aren't.
|
||
Config (all optional; never throws):
|
||
label? nav aria-label (default "Pagination")
|
||
summary? { from, to, total } → "from–to of <b>total</b>"
|
||
rows? { name, value?, options, label?, submitLabel?, action?, hidden? } rows-per-page form
|
||
options: (number | { value, label })[]; hidden: { name, value }[] carries list state
|
||
prev?, next? { href? } page step; omit href ⇒ disabled
|
||
pages? { label, href?, current?, ellipsis? }[]
|
||
%><%
|
||
const label = locals.label || "Pagination";
|
||
const summary = locals.summary;
|
||
const rows = locals.rows;
|
||
const prev = locals.prev;
|
||
const next = locals.next;
|
||
const pages = locals.pages || [];
|
||
const eq = (a, b) => String(a ?? "") === String(b);
|
||
-%>
|
||
<footer class="pager">
|
||
<% if (summary) { -%>
|
||
<span><%= summary.from %>–<%= summary.to %> of <b><%= summary.total %></b></span>
|
||
<% } -%>
|
||
<% if (rows) { -%>
|
||
<form class="pager-rows" method="get"<% if (rows.action) { %> action="<%= rows.action %>"<% } %>>
|
||
<% (rows.hidden || []).forEach((h) => { -%>
|
||
<input type="hidden" name="<%= h.name %>" value="<%= h.value %>">
|
||
<% }) -%>
|
||
<label for="pager-rows"><%= rows.label || "Rows" %></label>
|
||
<span class="select"><select id="pager-rows" name="<%= rows.name %>"><% (rows.options || []).forEach((o) => { const v = o && o.value != null ? o.value : o; const t = o && o.label != null ? o.label : o; %><option value="<%= v %>"<% if (eq(rows.value, v)) { %> selected<% } %>><%= t %></option><% }) %></select></span>
|
||
<button class="page-btn" type="submit"><%= rows.submitLabel || "Go" %></button>
|
||
</form>
|
||
<% } -%>
|
||
<div class="spacer"></div>
|
||
<nav class="page-nums" aria-label="<%= label %>">
|
||
<% if (prev) { -%>
|
||
<% if (prev.href) { -%>
|
||
<a class="page-btn" href="<%= prev.href %>" aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></a>
|
||
<% } else { -%>
|
||
<button class="page-btn" type="button" disabled aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></button>
|
||
<% } -%>
|
||
<% } -%>
|
||
<% pages.forEach((p) => { -%>
|
||
<% if (p.ellipsis) { -%>
|
||
<span class="page-btn" aria-hidden="true"><%= p.label || "…" %></span>
|
||
<% } else if (p.current) { -%>
|
||
<span class="page-btn" aria-current="page"><%= p.label %></span>
|
||
<% } else { -%>
|
||
<a class="page-btn" href="<%= p.href %>"><%= p.label %></a>
|
||
<% } -%>
|
||
<% }) -%>
|
||
<% if (next) { -%>
|
||
<% if (next.href) { -%>
|
||
<a class="page-btn" href="<%= next.href %>" aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></a>
|
||
<% } else { -%>
|
||
<button class="page-btn" type="button" disabled aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></button>
|
||
<% } -%>
|
||
<% } -%>
|
||
</nav>
|
||
</footer>
|