blob: 53c63927005301b9ffb5d5ccaadfe5256dc55bab (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<script>
import {createEventDispatcher, onMount} from "svelte";
import {restrict_input_to_numbers} from "$shared/lib/helpers";
const dispatch = createEventDispatcher();
export let page = 1;
export let pageCount = 1;
let prevCount = page;
let canIncrement = false;
let canDecrement = false;
$: canIncrement = page < pageCount;
$: canDecrement = page > 1;
onMount(() => {
restrict_input_to_numbers(document.querySelector("#curr-page"));
});
function increment() {
if (canIncrement) {
page++;
}
}
function decrement() {
if (canDecrement) {
page--;
}
}
$: if (page) {
handle_change();
}
function handle_change() {
if (page === prevCount) {
return;
}
prevCount = page;
if (page > pageCount) {
page = pageCount;
}
dispatch("value_change", {
newValue: page,
});
}
</script>
<nav class="pagination"
aria-label="Pagination">
<ul class="pagination__list flex flex-wrap gap-xxxs justify-center justify-end@md">
<li>
<button on:click={decrement}
class="reset pagination__item {canDecrement ? '' : 'c-disabled'}">
<svg class="icon icon--xs flip-x"
viewBox="0 0 16 16"
><title>Go to previous page</title>
<polyline
points="6 2 12 8 6 14"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</li>
<li>
<span class="pagination__jumper flex items-center">
<input
aria-label="Page number"
class="form-control"
id="curr-page"
type="text"
on:change={handle_change}
value={page}
/>
<em>of {pageCount}</em>
</span>
</li>
<li>
<button on:click={increment}
class="reset pagination__item {canIncrement ? '' : 'c-disabled'}">
<svg class="icon icon--xs"
viewBox="0 0 16 16"
><title>Go to next page</title>
<polyline
points="6 2 12 8 6 14"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
|
