92 lines
3.6 KiB
Svelte
92 lines
3.6 KiB
Svelte
<!--
|
|
- This file is a part of the SteamWar software.
|
|
-
|
|
- Copyright (C) 2024 SteamWar.de-Serverteam
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as published by
|
|
- the Free Software Foundation, either version 3 of the License, or
|
|
- (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import { preventDefault } from "svelte/legacy";
|
|
|
|
import { ChevronDoubleLeftOutline, ChevronDoubleRightOutline, ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
|
|
|
|
interface Props {
|
|
page?: number;
|
|
maxPage: number;
|
|
firstUrl?: string;
|
|
lastUrl?: string;
|
|
previousUrl?: string;
|
|
nextUrl?: string;
|
|
pagesUrl?: (i: number) => string;
|
|
}
|
|
|
|
let { page = $bindable(0), maxPage, firstUrl = "#", lastUrl = "#", previousUrl = "#", nextUrl = "#", pagesUrl = () => "#" }: Props = $props();
|
|
|
|
const previous = () => {
|
|
page = Math.max(page - 1, 0);
|
|
};
|
|
|
|
const next = () => {
|
|
page = Math.min(page + 1, maxPage - 1);
|
|
};
|
|
let pages = $derived(
|
|
new Array(maxPage)
|
|
.fill(0)
|
|
.map((_, i) => i + 1)
|
|
//.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
|
|
.map((i) => ({
|
|
name: i.toString(),
|
|
active: i === page + 1,
|
|
i: i - 1,
|
|
})),
|
|
);
|
|
</script>
|
|
|
|
<div class="w-full flex justify-center mt-4">
|
|
<ul class="inline-flex flex-wrap gap-1">
|
|
<li>
|
|
<a href={firstUrl} onclick={preventDefault(() => (page = 0))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
|
|
<span class="sr-only">Next</span>
|
|
<ChevronDoubleLeftOutline class="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href={previousUrl} onclick={preventDefault(previous)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
|
|
<span class="sr-only">Previous</span>
|
|
<ChevronLeftOutline class="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
{#each pages as p}
|
|
<li>
|
|
<a href={pagesUrl(p.i)} onclick={preventDefault(() => (page = p.i))} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
|
|
<span>{p.name}</span>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
<li>
|
|
<a href={nextUrl} onclick={preventDefault(next)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
|
|
<span class="sr-only">Next</span>
|
|
<ChevronRightOutline class="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href={lastUrl} onclick={preventDefault(() => (page = maxPage - 1))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
|
|
<span class="sr-only">Next</span>
|
|
<ChevronDoubleRightOutline class="w-3 h-3" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|