Newer
Older
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
<template>
<div class="pagination-wrapper-flex">
<p :id="pagination_id" class="audible">
{{ $gettext('Blättern') }}
</p>
<ul class="pagination" role="navigation" :aria-labelledby="pagination_id">
<li class="prev" v-if="currentOffset > 0">
<button class="pagination--link" @click.prevent="goBack" rel="prev" :title="$gettext('Zurück')">
<span class="audible">{{ $gettext('Eine Seite') }}</span>
{{ $gettext('zurück') }}
</button>
</li>
<template v-for="offset of offsets">
<li :key="'end-dots-' + offset" class="divider"
v-if="offset === (total_offsets - 1) && currentOffset < (total_offsets - 1) - (range + 1)">
…
</li>
<li :key="'offset-' + offset" :class="{'current': offset === currentOffset, 'no-divider': offset === 0}">
<button class="pagination--link" @click.prevent="goTo(offset)">
<span class="audible">{{ $gettext('Seite') }}</span>
{{ offset + 1 }}
</button>
</li>
<li :key="'start-dots' + offset" class="divider"
v-if="offset === 0 && currentOffset > range + 1">
…
</li>
</template>
<li class="next no-divider" v-if="currentOffset < total_offsets - 1">
<button class="pagination--link" @click.prevent="goNext" rel="next" :title="$gettext('Weiter')">
<span class="audible">{{ $gettext('Eine Seite') }}</span>
{{ $gettext('weiter') }}
</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'studip-pagination',
props: {
currentOffset: {
type: Number,
required: true
},
totalItems: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: true
},
range: {
type: Number,
default: 2,
min: 1
}
},
computed: {
pagination_id() {
return 'pagination-label-' + this._uid;
},
total_offsets() {
let total = Math.ceil(this.totalItems / this.itemsPerPage);
return total;
},
offsets() {
let offsets = [0, this.currentOffset, (this.total_offsets - 1)];
for (let i = 1; i <= this.range; i++) {
offsets.push(this.currentOffset - i);
offsets.push(this.currentOffset + i);
}
offsets = offsets.map(item => parseInt(item, 10));
offsets = [...new Set(offsets)];
offsets = offsets.filter(item => item >= 0 && item < this.total_offsets);
offsets.sort((a, b) => a - b);
return offsets;
},
},
methods: {
goBack() {
this.updateOffset(this.currentOffset - 1);
},
goNext() {
this.updateOffset(this.currentOffset + 1);
},
goTo(selected) {
if (selected === this.currentOffset) {
return;
}
this.updateOffset(selected);
},
updateOffset(offset) {
this.$emit('updateOffset', parseInt(offset, 10));
}
}
}
</script>