88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<script setup>
|
|
import PhotoDetail from "components/photos/PhotoDetail.vue";
|
|
import {onMounted, ref, watch} from "vue";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
|
|
const props = defineProps({
|
|
photos: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
coverPhotoUrl: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
carouselTitle: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
defaultTitle: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
const displayedPhoto = ref(null);
|
|
const openPhotoDetail = ref(false);
|
|
const photoData = ref(null);
|
|
const openDetail = ({photo, idx, allPhotos}) => {
|
|
openPhotoDetail.value = true;
|
|
photoData.value = {photo, idx, allPhotos};
|
|
}
|
|
|
|
watch(() => props.photos, (newVal) => {
|
|
if (newVal.length === 0) return;
|
|
displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
|
|
}, {immediate: true});
|
|
|
|
const $route = useRoute();
|
|
onMounted(() => {
|
|
const photoId = parseInt($route.query.photo);
|
|
const idx = props.photos.findIndex(p => p.id === photoId);
|
|
if (idx >= 0) {
|
|
const photo = props.photos[idx];
|
|
openDetail({photo, allPhotos: props.photos, idx});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-carousel
|
|
v-if="photos.length > 0"
|
|
animated
|
|
v-model="displayedPhoto"
|
|
arrows
|
|
swipeable
|
|
height="auto"
|
|
infinite
|
|
v-bind="$attrs"
|
|
>
|
|
<q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
|
|
<q-img :src="photo.url">
|
|
<span class="absolute-top text-right">
|
|
<q-btn
|
|
round
|
|
icon="zoom_in"
|
|
class="bg-blue-grey-9 text-white q-ma-md all-pointer-events"
|
|
@click="openDetail({photo, idx, allPhotos: photos})" />
|
|
</span>
|
|
<div class="absolute-bottom custom-caption">
|
|
<div class="text-h5" v-if="carouselTitle"> {{ carouselTitle }} </div>
|
|
<div class="text-subtitle1" v-if="photos.length > 0">
|
|
<q-btn rounded @click.prevent="openDetail({photo: photos[0], idx: 0, allPhotos: photos})">{{photos.length}} fotografií</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-img>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
|
|
<PhotoDetail
|
|
v-if="photoData"
|
|
v-model="openPhotoDetail"
|
|
:default-title="defaultTitle"
|
|
:photo="photoData.photo"
|
|
:photos="photoData.allPhotos"
|
|
:opened-index="photoData.idx"
|
|
/>
|
|
</template>
|