You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.0 KiB
75 lines
2.0 KiB
2 years ago
|
<script>
|
||
|
|
import Icon from "./Icon.svelte";
|
||
|
|
import { createEventDispatcher } from "svelte";
|
||
|
|
|
||
|
|
const dispatch = createEventDispatcher();
|
||
|
|
|
||
|
|
export let pagination = {currentPage: 1}
|
||
|
|
|
||
|
|
const numbers = (start, count) => Array.from(Array(count).keys()).map(x => x + start);
|
||
|
|
|
||
|
|
const pages_list = (paging) => {
|
||
|
|
let {currentPage, lastPage} = paging;
|
||
|
|
|
||
|
|
if(lastPage <= 4) {
|
||
|
|
return numbers(1, lastPage);
|
||
|
|
} else if(currentPage > 0 && currentPage <= 3) {
|
||
|
|
return [...numbers(1, 4), "...", lastPage];
|
||
|
|
} else if(currentPage > 3 && currentPage <= lastPage - 3) {
|
||
|
|
return [1, "...", ...numbers(currentPage - 2, 5), "...", lastPage];
|
||
|
|
} else if(currentPage > lastPage - 3) {
|
||
|
|
return [1, "...", ...numbers(lastPage - 3, 4)];
|
||
|
|
} else {
|
||
|
|
return ["Messed up the logic."];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$: pages = pages_list(pagination);
|
||
|
|
|
||
|
|
const page_change = (page) => {
|
||
|
|
if(page <= pagination.lastPage && page > 0) {
|
||
|
|
pagination.currentPage = page;
|
||
|
|
dispatch("change", pagination.currentPage);
|
||
|
|
} else {
|
||
|
|
// ignore the change as it's out of range
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
pagination {
|
||
|
|
user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: start;
|
||
|
|
}
|
||
|
|
|
||
|
|
pagination span {
|
||
|
|
display: block;
|
||
|
|
font-size: 1.5em;
|
||
|
|
padding: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
pagination span.active {
|
||
|
|
border: 1px solid black;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
background: var(--color-bg-tertiary);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<pagination>
|
||
|
|
<span on:click={ () => page_change(pagination.currentPage - 1) }><Icon name="chevrons-left" tooltip="Previous page." size="36" /></span>
|
||
|
|
{#each pages as page}
|
||
|
|
{#if page !== "..."}
|
||
|
|
<span class:active={page === pagination.currentPage}
|
||
|
|
on:click={ () => page_change(page) }>{page}</span>
|
||
|
|
{:else}
|
||
|
|
<span>{ page }</span>
|
||
|
|
{/if}
|
||
|
|
{/each}
|
||
|
|
<span on:click={ () => page_change(pagination.currentPage + 1) }><Icon name="chevrons-right" tooltip="Next page." size="36" /></span>
|
||
|
|
</pagination>
|