52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
|
|
<span class="material-symbols" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button"></span>
|
|
<p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
|
|
<span class="material-symbols" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedSizeIndex: 3,
|
|
availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220]
|
|
}
|
|
},
|
|
watch: {
|
|
selectedSize: {
|
|
immediate: true,
|
|
handler() {
|
|
this.setSelectedIndex()
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
selectedSize() {
|
|
return this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
|
|
},
|
|
bookCoverWidth() {
|
|
return this.availableSizes[this.selectedSizeIndex]
|
|
}
|
|
},
|
|
methods: {
|
|
increaseSize() {
|
|
this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
|
|
this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
|
|
},
|
|
decreaseSize() {
|
|
this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
|
|
this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
|
|
},
|
|
setSelectedIndex() {
|
|
var sizeIndex = this.availableSizes.findIndex((s) => s === this.selectedSize)
|
|
if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|