mahee-auffret/components/Projects.vue

213 lines
6.3 KiB
Vue
Raw Normal View History

2024-02-21 00:30:14 +01:00
<template>
<main>
2024-04-16 14:19:14 +02:00
<article v-for="content in contents.slice().reverse()" :key="content.id">
2024-02-21 00:30:14 +01:00
<div>
<img
:src="`/imgs/small/${content.image}.webp`"
2024-02-21 00:30:14 +01:00
:alt="content.titre"
@click="displaySlider(contents.length - content.id)"
/>
2024-02-21 00:30:14 +01:00
</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">
2024-02-21 00:30:14 +01:00
<div class="swiper-zoom-container">
<img
:src="`/imgs/large/${content.image}.webp`"
2024-02-21 00:30:14 +01:00
:alt="content.titre"
/>
2024-02-21 00:30:14 +01:00
</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);
2024-02-21 00:30:14 +01:00
const swiperEl = swiper.el;
swiperEl.style.display = "block";
setTimeout(() => {
swiperEl.style.opacity = 1;
}, 10);
}
const closeSlider = () => {
const body = document.querySelector('body');
const swiperElements = document.querySelectorAll('.swiper');
let swiperEl;
for (let swiperElement of swiperElements) {
if (swiperElement.style.opacity == 1) {
swiperEl = swiperElement;
}
}
2024-02-21 00:30:14 +01:00
swiperEl.style.opacity = 0;
setTimeout(() => {
swiperEl.style.display = "none";
body.style.overflowY = 'auto';
2024-02-21 00:30:14 +01:00
}, 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;
2024-05-28 00:18:18 +02:00
z-index: 3;
2024-02-21 00:30:14 +01:00
.swiper-wrapper {
.swiper-slide {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img{
width: 60%;
}
2024-04-16 14:19:14 +02:00
> .swiper-zoom-container {
> img {
cursor: zoom-in;
}
}
}
.swiper-slide-zoomed > .swiper-zoom-container > img {
cursor: move;
2024-02-21 00:30:14 +01:00
}
}
.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 {
2024-04-16 14:19:14 +02:00
width: 60%;
padding-top: 2rem;
padding-bottom: 2rem;
2024-02-21 00:30:14 +01:00
}
}
}
</style>