Commit efa5d618 authored by Moritz Engelmann's avatar Moritz Engelmann
Browse files

[add] component for page browser

parent 39188fde
<template>
<div class="ul-navi-pagebrowser">
<ul>
<template v-if="currentSelection > 4 && pages > 5">
<li>
<a @click="setCurrentSelection(1)">1</a>
</li>
<li><span>...</span></li>
</template>
<template v-for="page in pages" :key="page">
<li v-if="page === currentSelection" class="ul-navi-pagebrowser-current">
<span>{{ page }}</span>
</li>
<li v-else-if="setPage(page)">
<a @click="setCurrentSelection(page)" rel="nofollow">{{ page }}</a>
</li>
</template>
<li v-if="pages > 5 && currentSelection < pages - 2"><span>...</span></li>
</ul>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'PageBrowser',
props: {
pages: {
type: Number,
required: true
},
currentPage: Number
},
setup(props, { emit }) {
const currentSelection = ref(1)
const setCurrentSelection = (selectedPage) => {
currentSelection.value = selectedPage
emit('selectedPage', currentSelection.value)
}
const setPage = (page) => {
if (currentSelection.value < 4 && page < 6) {
return true
} else if (currentSelection.value == 4 && page < 7) {
return true
} else if (page > currentSelection.value - 3 && page < currentSelection.value + 3) {
return true
} else if (currentSelection.value > props.pages - 1 && page > currentSelection.value - 5) {
return true
} else if (currentSelection.value > props.pages - 2 && page > currentSelection.value - 4) {
return true
}
return false
}
return {
currentSelection,
setCurrentSelection,
setPage
}
}
})
</script>
<style lang="scss">
.ul-navi-pagebrowser {
font: normal 1.5rem/1.6 'Futura', 'Open Sans', arial, sans-serif;
text-align: center;
user-select: none;
.ul-navi-pagebrowser-current {
font-weight: bold;
span {
border-bottom: 2px solid #262a31;
color: #000000;
}
}
ul {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 4px;
list-style: none;
padding: 0;
li {
a,
span {
border-bottom: 2px solid transparent;
color: #262a31;
display: block;
font-size: 1.4rem;
height: 3.2rem;
line-height: 2.286;
width: 3.2rem;
}
a {
&:focus,
&:hover {
border-bottom: 2px solid #262a31;
color: #000000;
cursor: pointer;
}
}
}
}
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment