138 lines
2.4 KiB
Svelte
138 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { page as p } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
export let page: number;
|
|
export let total: number;
|
|
|
|
const changePage = (p: number) => {
|
|
goto(`?${new URLSearchParams({page: p}).toString()}`);
|
|
};
|
|
</script>
|
|
|
|
<div class="pagination">
|
|
<button
|
|
on:click={() => {
|
|
changePage(page - 1);
|
|
}}
|
|
on:keydown={() => {}}
|
|
disabled={page <= 1}
|
|
>
|
|
{'<'}
|
|
</button>
|
|
|
|
{#if total >= 7}
|
|
<!-- First two -->
|
|
{#each Array.from({ length: 2 }, (v, k) => k + 1) as i}
|
|
<button
|
|
class:active={page == i}
|
|
on:click={() => {
|
|
changePage(i);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
{i}
|
|
</button>
|
|
{/each}
|
|
|
|
<!-- Middle : active with a padding of 1 -->
|
|
{#if page >= 2 && page <= total - 1}
|
|
{#if page - 1 > 3}
|
|
<p>...</p>
|
|
{/if}
|
|
{#each Array.from({ length: 3 }, (v, k) => page - 1 + k) as i}
|
|
{#if i > 2 && i <= total - 2}
|
|
<button
|
|
class:active={page == i}
|
|
on:click={() => {
|
|
changePage(i);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
{i}
|
|
</button>
|
|
{/if}
|
|
{/each}
|
|
{#if page + 1 < total - 2}
|
|
<p>...</p>
|
|
{/if}
|
|
{:else}
|
|
<p>...</p>
|
|
{/if}
|
|
|
|
<!-- Last two -->
|
|
{#each Array.from({ length: 2 }, (v, k) => total - 2 + k + 1) as i}
|
|
<button
|
|
class:active={page == i}
|
|
on:click={() => {
|
|
changePage(i);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
{i}
|
|
</button>
|
|
{/each}
|
|
|
|
{:else}
|
|
{#each Array.from({ length: total }, (v, k) => k + 1) as i}
|
|
<button
|
|
class:active={page == i}
|
|
on:click={() => {
|
|
changePage(i);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
{i}
|
|
</button>
|
|
{/each}
|
|
{/if}
|
|
<button
|
|
on:click={() => {
|
|
changePage(page+1)
|
|
}}
|
|
on:keydown={() => {}}
|
|
disabled={page >= total}
|
|
>
|
|
{'>'}
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '../../variables';
|
|
|
|
.pagination {
|
|
display: flex;
|
|
margin: 30px;
|
|
height: max-content;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
button {
|
|
margin: 10px;
|
|
border: 1px solid $border;
|
|
border-radius: 4px;
|
|
padding: 7px 9px;
|
|
cursor: pointer;
|
|
background-color: rgba($background, 0.3);
|
|
color: #f8f8f8;
|
|
transition: .3s;
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
&:not(:disabled):hover{
|
|
color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
p{
|
|
font-size: 1.2em;
|
|
letter-spacing: 1.5px;
|
|
}
|
|
}
|
|
.active {
|
|
color: #080808 !important;
|
|
background-color: $primary !important;
|
|
}
|
|
</style>
|