2021-12-01 03:02:40 +01:00
|
|
|
<template>
|
2024-12-12 00:24:48 +01:00
|
|
|
<div ref="card" :id="`collection-card-${index}`" role="button" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
|
2024-06-03 08:04:03 +02:00
|
|
|
<div class="relative" :style="{ height: coverHeight + 'px' }">
|
|
|
|
<div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
|
|
|
|
<div class="w-full h-full bg-primary relative rounded overflow-hidden">
|
|
|
|
<covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
|
|
|
</div>
|
|
|
|
<div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
|
|
|
|
<div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
|
2024-07-08 18:36:37 +02:00
|
|
|
<span class="material-symbols text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
|
2024-06-03 08:04:03 +02:00
|
|
|
</div>
|
2021-12-02 02:07:03 +01:00
|
|
|
</div>
|
2022-12-31 17:33:38 +01:00
|
|
|
|
2024-07-08 18:36:37 +02:00
|
|
|
<span v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
|
2024-06-03 08:04:03 +02:00
|
|
|
</div>
|
2022-12-31 17:33:38 +01:00
|
|
|
|
2024-06-23 18:15:39 +02:00
|
|
|
<div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
|
2024-06-03 08:04:03 +02:00
|
|
|
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
|
|
|
|
<p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
|
2021-12-01 03:02:40 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-06-23 18:15:39 +02:00
|
|
|
<div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
|
2024-06-03 08:04:03 +02:00
|
|
|
<p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
|
2022-05-10 01:23:23 +02:00
|
|
|
</div>
|
2021-12-01 03:02:40 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
index: Number,
|
2021-12-02 22:49:03 +01:00
|
|
|
width: Number,
|
2024-06-03 08:04:03 +02:00
|
|
|
height: {
|
|
|
|
type: Number,
|
|
|
|
default: 192
|
|
|
|
},
|
2022-05-10 01:23:23 +02:00
|
|
|
bookshelfView: {
|
|
|
|
type: Number,
|
|
|
|
default: 0
|
2022-08-23 23:07:53 +02:00
|
|
|
},
|
|
|
|
collectionMount: {
|
|
|
|
type: Object,
|
|
|
|
default: () => null
|
|
|
|
},
|
|
|
|
isTag: Boolean
|
2021-12-01 03:02:40 +01:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
collection: null,
|
|
|
|
isSelectionMode: false,
|
|
|
|
selected: false,
|
|
|
|
isHovering: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2024-06-03 08:04:03 +02:00
|
|
|
bookCoverAspectRatio() {
|
|
|
|
return this.store.getters['libraries/getBookCoverAspectRatio']
|
|
|
|
},
|
|
|
|
cardWidth() {
|
2024-08-24 07:49:40 +02:00
|
|
|
return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
|
2024-06-03 08:04:03 +02:00
|
|
|
},
|
|
|
|
coverHeight() {
|
|
|
|
return this.height * this.sizeMultiplier
|
|
|
|
},
|
2021-12-01 03:02:40 +01:00
|
|
|
labelFontSize() {
|
|
|
|
if (this.width < 160) return 0.75
|
2024-06-03 08:04:03 +02:00
|
|
|
return 0.9
|
2021-12-01 03:02:40 +01:00
|
|
|
},
|
|
|
|
sizeMultiplier() {
|
2024-06-03 08:04:03 +02:00
|
|
|
return this.store.getters['user/getSizeMultiplier']
|
2021-12-01 03:02:40 +01:00
|
|
|
},
|
|
|
|
title() {
|
|
|
|
return this.collection ? this.collection.name : ''
|
|
|
|
},
|
|
|
|
books() {
|
|
|
|
return this.collection ? this.collection.books || [] : []
|
|
|
|
},
|
|
|
|
store() {
|
|
|
|
return this.$store || this.$nuxt.$store
|
|
|
|
},
|
|
|
|
currentLibraryId() {
|
|
|
|
return this.store.state.libraries.currentLibraryId
|
2022-05-10 01:23:23 +02:00
|
|
|
},
|
|
|
|
isAlternativeBookshelfView() {
|
|
|
|
const constants = this.$constants || this.$nuxt.$constants
|
2022-10-22 16:13:20 +02:00
|
|
|
return this.bookshelfView == constants.BookshelfView.DETAIL
|
2022-08-31 22:46:10 +02:00
|
|
|
},
|
|
|
|
userCanUpdate() {
|
|
|
|
return this.store.getters['user/getUserCanUpdate']
|
2022-12-31 17:33:38 +01:00
|
|
|
},
|
|
|
|
rssFeed() {
|
|
|
|
return this.collection ? this.collection.rssFeed : null
|
2021-12-01 03:02:40 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setEntity(_collection) {
|
|
|
|
this.collection = _collection
|
|
|
|
},
|
|
|
|
setSelectionMode(val) {
|
|
|
|
this.isSelectionMode = val
|
|
|
|
},
|
|
|
|
mouseover() {
|
|
|
|
this.isHovering = true
|
|
|
|
},
|
|
|
|
mouseleave() {
|
|
|
|
this.isHovering = false
|
|
|
|
},
|
|
|
|
clickCard() {
|
|
|
|
if (!this.collection) return
|
|
|
|
var router = this.$router || this.$nuxt.$router
|
|
|
|
router.push(`/collection/${this.collection.id}`)
|
|
|
|
},
|
2021-12-02 02:07:03 +01:00
|
|
|
clickEdit() {
|
|
|
|
this.$emit('edit', this.collection)
|
|
|
|
},
|
2021-12-01 03:02:40 +01:00
|
|
|
destroy() {
|
|
|
|
// destroy the vue listeners, etc
|
|
|
|
this.$destroy()
|
|
|
|
|
|
|
|
// remove the element from the DOM
|
|
|
|
if (this.$el && this.$el.parentNode) {
|
|
|
|
this.$el.parentNode.removeChild(this.$el)
|
|
|
|
} else if (this.$el && this.$el.remove) {
|
|
|
|
this.$el.remove()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2022-08-23 23:07:53 +02:00
|
|
|
mounted() {
|
|
|
|
if (this.collectionMount) {
|
|
|
|
this.setEntity(this.collectionMount)
|
|
|
|
}
|
|
|
|
}
|
2021-12-01 03:02:40 +01:00
|
|
|
}
|
2024-06-03 08:04:03 +02:00
|
|
|
</script>
|