chat-aww / src /lib /components /Pagination.svelte
Mishig
[Assitants] Community | User tabs (#773)
08e8583 unverified
raw
history blame
2.65 kB
<script lang="ts">
import { page } from "$app/stores";
import { getHref } from "$lib/utils/getHref";
import PaginationArrow from "./PaginationArrow.svelte";
export let classNames = "";
export let numItemsPerPage: number;
export let numTotalItems: number;
const ELLIPSIS_IDX = -1 as const;
$: numTotalPages = Math.ceil(numTotalItems / numItemsPerPage);
$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
function getPageIndexes(pageIdx: number, nTotalPages: number) {
let pageIdxs: number[] = [];
const NUM_EXTRA_BUTTONS = 2; // The number of page links to show on either side of the current page link.
const minIdx = 0;
const maxIdx = nTotalPages - 1;
pageIdxs = [pageIdx];
// forward
for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
const newPageIdx = pageIdx + i;
if (newPageIdx > maxIdx) {
continue;
}
pageIdxs.push(newPageIdx);
}
if (maxIdx - pageIdxs[pageIdxs.length - 1] > 1) {
pageIdxs.push(...[ELLIPSIS_IDX, maxIdx]);
} else if (maxIdx - pageIdxs[pageIdxs.length - 1] === 1) {
pageIdxs.push(maxIdx);
}
// backward
for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
const newPageIdx = pageIdx - i;
if (newPageIdx < minIdx) {
continue;
}
pageIdxs.unshift(newPageIdx);
}
if (pageIdxs[0] - minIdx > 1) {
pageIdxs.unshift(...[minIdx, ELLIPSIS_IDX]);
} else if (pageIdxs[0] - minIdx === 1) {
pageIdxs.unshift(minIdx);
}
return pageIdxs;
}
</script>
{#if numTotalPages > 1}
<nav>
<ul
class="flex select-none items-center justify-between space-x-2 text-gray-700 sm:justify-center dark:text-gray-300 {classNames}"
>
<li>
<PaginationArrow
href={getHref($page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
direction="previous"
isDisabled={pageIndex - 1 < 0}
/>
</li>
{#each pageIndexes as pageIdx}
<li class="hidden sm:block">
<a
class="
rounded-lg px-2.5 py-1
{pageIndex === pageIdx
? 'bg-gray-50 font-semibold ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-yellow-500 dark:ring-gray-700'
: ''}
"
class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
href={getHref($page.url, { newKeys: { p: pageIdx.toString() } })}
>
{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
</a>
</li>
{/each}
<li>
<PaginationArrow
href={getHref($page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
direction="next"
isDisabled={pageIndex + 1 >= numTotalPages}
/>
</li>
</ul>
</nav>
{/if}