mahee-auffret/components/Projects.vue

206 lines
6.1 KiB
Vue

<template>
<main>
<article v-for="content in contents.slice().reverse()" :key="content.id">
<div>
<img
:src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
@click="displaySlider(content.id)"
/>
</div>
<div>
<p v-if="content.titre">{{ content.titre }}</p>
<p v-if="content.medium">{{ content.medium }}</p>
<p v-if="content.description">{{ content.description }}</p>
<p v-if="content.format">{{ content.format }}</p>
<p v-if="content.annee">{{ content.annee }}</p>
<p v-if="content.prix">{{ content.prix }}</p>
</div>
</article>
<swiper
:zoom="true"
:loop="true"
:modules="modules"
:navigation="true"
@slideChange="onSlideChange"
@swiper="onSwiper"
>
<swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
<div class="swiper-zoom-container">
<img
:src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
/>
</div>
</swiper-slide>
<div class="swiper-button-close" @click="closeSlider()"></div>
</swiper>
</main>
</template>
<script>
import { A11y, Navigation, Zoom } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import 'swiper/css/zoom';
export default {
setup() {
const swiperInstance = ref(null);
const onSwiper = (swiper) => {
swiperInstance.value = swiper;
};
const onSlideChange = () => {};
const displaySlider = (index) => {
const body = document.querySelector('body');
body.style.overflowY = 'hidden';
const swiper = swiperInstance.value;
swiper.slideToLoop(index - 1);
const swiperEl = swiper.el;
swiperEl.style.display = "block";
setTimeout(() => {
swiperEl.style.opacity = 1;
}, 10);
}
const closeSlider = () => {
const body = document.querySelector('body');
const swiperEl = document.querySelector('.swiper');
swiperEl.style.opacity = 0;
setTimeout(() => {
swiperEl.style.display = "none";
body.style.overflowY = 'auto';
}, 300);
}
return {
onSwiper,
onSlideChange,
modules: [Navigation, A11y, Zoom],
displaySlider,
closeSlider,
};
},
components: {
Swiper,
SwiperSlide,
},
props: {
contents: Object
}
}
</script>
<style lang="scss">
main {
margin-top: 5vh;
article {
display: flex;
margin-bottom: 3vh;
> div:first-of-type {
width: 40vw;
img {
width: 100%;
cursor: pointer;
}
}
> div:last-of-type {
padding-left: 5vw;
width: 50vw;
p {
line-height: 1.2;
margin-bottom: 0.5vh;
}
}
}
.swiper {
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.5);
position: fixed;
display: none;
opacity: 0;
transition: opacity 0.3s ease-out;
.swiper-wrapper {
.swiper-slide {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img{
width: 60%;
}
> .swiper-zoom-container {
> img {
cursor: zoom-in;
}
}
}
.swiper-slide-zoomed > .swiper-zoom-container > img {
cursor: move;
}
}
.swiper-button-prev,
.swiper-button-next,
.swiper-button-close {
z-index: 1;
position: absolute;
width: 2rem;
height: 2rem;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
}
.swiper-button-prev {
left: 5vw;
bottom: calc(50vh - 1rem);
background-image: url(/assets/images/before.png);
}
.swiper-button-next {
right: 5vw;
bottom: calc(50vh - 1rem);
background-image: url(/assets/images/after.png);
}
.swiper-button-close {
right: 5vw;
top: 5vh;
background-image: url(/assets/images/close.png);
}
}
}
@media screen and (min-width: 800px) {
main {
article {
> div:first-of-type {
width: 25vw;
}
> div:last-of-type {
padding-left: 2vw;
}
}
.swiper .swiper-wrapper .swiper-slide img {
width: 40%;
}
}
}
@media screen and (min-width: 1200px) {
main {
article > div:first-of-type {
width: 15vw;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 60%;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
}
</style>