optimisations images
This commit is contained in:
Valentin Le Moign
parent
2e26680eaf
commit
298bafce49
|
|
@ -147,7 +147,31 @@ export const useContentStore = defineStore('content', {
|
|||
break;
|
||||
case 'titre_texte':
|
||||
partieContent.titre = partie.attributes.field_titre;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
|
||||
// get the resized images from the text
|
||||
const imgRegex = /<img[^>]+>/g;
|
||||
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
||||
|
||||
const imgTags = partieContent.texte.match(imgRegex);
|
||||
|
||||
if (imgTags) {
|
||||
for (const imgTag of imgTags) {
|
||||
const uuidMatch = imgTag.match(uuidRegex);
|
||||
if (uuidMatch && uuidMatch[1]) {
|
||||
const uuid = uuidMatch[1];
|
||||
|
||||
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
|
||||
const imagesFetch = response.data.data;
|
||||
|
||||
const newImgTag = imgTag
|
||||
.replace(/src="[^"]+"/,`src="${imagesFetch.attributes.image_style_uri.content_medium}"`)
|
||||
.replace('>',' data-large-src="' + imagesFetch.attributes.image_style_uri.content_large + '">');
|
||||
partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case 'chiffres_cles':
|
||||
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
||||
|
|
|
|||
|
|
@ -2,51 +2,50 @@
|
|||
<Transition name="fade">
|
||||
<div v-if="isOpen" class="image-viewer-wrapper" @click="(e) => checkOutsideClick(e.target)">
|
||||
<div v-if="!swiperContent" class="img-modale simple-viewer">
|
||||
<figure class="img-wrapper">
|
||||
<img :src="image.src" :alt="image.alt">
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-else class="img-modale swiper-viewer">
|
||||
<div class="swiper-wrapper">
|
||||
<swiper-container
|
||||
:slidesPerView="1"
|
||||
:centeredSlides="true"
|
||||
:loop="true"
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:initialSlide="currentImgIndex"
|
||||
:injectStyles="[`
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: white;
|
||||
top: 50%;
|
||||
}
|
||||
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
|
||||
background: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`]"
|
||||
@swiperresize="(e) => setCaptions(e.target)"
|
||||
>
|
||||
<swiper-slide v-for="media in swiperContent">
|
||||
<figure class="popup-figure">
|
||||
<img :src="media.src" :alt="media.alt" class="popup-img">
|
||||
<figcaption>{{ media.alt }}</figcaption>
|
||||
</figure>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="close" class="close-button">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</button>
|
||||
<figure class="img-wrapper">
|
||||
<img :src="image.src" :alt="image.alt">
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-else class="img-modale swiper-viewer">
|
||||
<div class="swiper-wrapper">
|
||||
<swiper-container
|
||||
:slidesPerView="1"
|
||||
:centeredSlides="true"
|
||||
:loop="true"
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:initialSlide="currentSlideIndex"
|
||||
:injectStyles="[`
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: white;
|
||||
top: 50%;
|
||||
}
|
||||
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
|
||||
background: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`]"
|
||||
>
|
||||
<swiper-slide v-for="media in swiperContent">
|
||||
<figure class="popup-figure">
|
||||
<img :src="media.src" :alt="media.alt" class="popup-img">
|
||||
<figcaption>{{ media.alt }}</figcaption>
|
||||
</figure>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="close" class="close-button">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { useWaitForImages } from '../composables/useWaitForImages';
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
|
|
@ -60,14 +59,20 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
const currentImgIndex = ref(0);
|
||||
const currentSlideIndex = ref(0);
|
||||
|
||||
watch(
|
||||
() => props.isOpen,
|
||||
() => {
|
||||
toggleElementsOver(props.isOpen);
|
||||
if (props.isOpen && props.swiperContent?.length) {
|
||||
checkCurrentImage();
|
||||
if (props.isOpen) {
|
||||
nextTick(() => {
|
||||
const swiperContainer = document.querySelector('.image-viewer-wrapper');
|
||||
setCaptions(swiperContainer);
|
||||
})
|
||||
if (props.swiperContent?.length) {
|
||||
checkCurrentImage();
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
@ -92,25 +97,29 @@ function toggleElementsOver(isOpen) {
|
|||
}
|
||||
}
|
||||
|
||||
function checkCurrentImage() {
|
||||
// CHECK IF IMAGES ARE THE SAME WITH ALT
|
||||
// IS NOT A GREAT SOLUTION
|
||||
function checkCurrentImage() {
|
||||
for (let i = 0; i < props.swiperContent.length; i++) {
|
||||
if (props.swiperContent[i].alt === props.image.alt) {
|
||||
currentImgIndex.value = i;
|
||||
break;
|
||||
if (props.swiperContent[i].src.split('/').pop().split('?')[0] === props.image.src.split('/').pop().split('?')[0]) {
|
||||
currentSlideIndex.value = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setCaptions(container) {
|
||||
function setCaptions(container) {
|
||||
useWaitForImages(container, () => {
|
||||
const slides = container.querySelectorAll('swiper-slide');
|
||||
slides.forEach((slide) => {
|
||||
const img = slide.querySelector('img');
|
||||
const caption = slide.querySelector('figcaption');
|
||||
if (slides.length) {
|
||||
slides.forEach((slide) => {
|
||||
const img = slide.querySelector('img');
|
||||
const caption = slide.querySelector('figcaption');
|
||||
caption.style.width = `${img.offsetWidth}px`;
|
||||
});
|
||||
} else {
|
||||
const img = container.querySelector('img');
|
||||
const caption = container.querySelector('figcaption');
|
||||
caption.style.width = `${img.offsetWidth}px`;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +129,7 @@ const close = () => {
|
|||
emit('close');
|
||||
};
|
||||
|
||||
function checkOutsideClick(target) {
|
||||
function checkOutsideClick(target) {
|
||||
if (target.classList.contains('swiper-wrapper')
|
||||
|| target.tagName === 'SWIPER-SLIDE'
|
||||
|| target.tagName === 'FIGURE') {
|
||||
|
|
@ -155,18 +164,33 @@ function checkOutsideClick(target) {
|
|||
align-items: center;
|
||||
}
|
||||
> .simple-viewer {
|
||||
> .img-wrapper {
|
||||
max-width: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> figure.img-wrapper {
|
||||
margin-top: 3%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10vw;
|
||||
box-sizing: border-box;
|
||||
> img {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-bottom: -5px;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
> figcaption {
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
font-size: 0.8rem; /* cf main.scss */
|
||||
padding: 0.5rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
ref="partieContent"
|
||||
class="partie-content"
|
||||
v-alt
|
||||
v-setVerticalImgs
|
||||
:style="{ '--couleur': couleur }"
|
||||
@click="handleImageClick">
|
||||
</div>
|
||||
|
|
@ -48,6 +49,18 @@ const vAlt = {
|
|||
}
|
||||
};
|
||||
|
||||
const vSetVerticalImgs = {
|
||||
mounted : (el) => {
|
||||
const images = el.querySelectorAll('img');
|
||||
images.forEach((img) => {
|
||||
if (img.offsetHeight > img.offsetWidth) {
|
||||
img.style.padding = '0 7vw';
|
||||
img.nextElementSibling.style.padding = '0 7vw';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const partieContent = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -96,7 +109,7 @@ const {
|
|||
const handleImageClick = (event) => {
|
||||
const img = event.target;
|
||||
if (img.tagName === 'IMG') {
|
||||
openImageModale(img.src, img.alt);
|
||||
openImageModale(img.dataset.largeSrc, img.alt);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -131,6 +144,7 @@ const handleImageClick = (event) => {
|
|||
|
||||
.partie-content {
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
|
|
|
|||
Loading…
Reference in New Issue