bachir
/
drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

export configs pour les images styles & corrections layout diaporamas et modales diaporama

This commit is contained in:
Valentin Le Moign 2025-01-23 16:00:05 +01:00
parent aca6c6b011
commit f106602e73
13 changed files with 210 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config/sync/core.extension.yml
View File

@ -68,6 +68,7 @@ module:
image_field_caption: 0
inline_entity_form: 0
jsonapi: 0
jsonapi_image_styles: 0
jsonapi_resources: 0
jsonapi_views: 0
language: 0

15
config/sync/image.style.content_large.yml Normal file
View File

@ -0,0 +1,15 @@
uuid: 51021857-f408-4a97-96ac-95916834465c
langcode: fr
status: true
dependencies: { }
name: content_large
label: content-large
effects:
9e838862-ccce-4fff-8f63-836c9dbf3da8:
uuid: 9e838862-ccce-4fff-8f63-836c9dbf3da8
id: image_scale
weight: 1
data:
width: 2048
height: null
upscale: false

15
config/sync/image.style.content_medium.yml Normal file
View File

@ -0,0 +1,15 @@
uuid: 39e71e90-a87c-43de-b679-ba663dcb1e9a
langcode: fr
status: true
dependencies: { }
name: content_medium
label: content-medium
effects:
9430838c-1da4-412b-ade1-d6e02ab9ecd2:
uuid: 9430838c-1da4-412b-ade1-d6e02ab9ecd2
id: image_scale
weight: 1
data:
width: 1024
height: null
upscale: false

15
config/sync/image.style.content_small.yml Normal file
View File

@ -0,0 +1,15 @@
uuid: f77750f4-4cb6-4cdb-9796-4acfa169105a
langcode: fr
status: true
dependencies: { }
name: content_small
label: content-small
effects:
d2acf93c-5264-4ce5-a11c-bfaeaa7a7279:
uuid: d2acf93c-5264-4ce5-a11c-bfaeaa7a7279
id: image_scale
weight: 1
data:
width: 512
height: null
upscale: false

15
config/sync/image.style.content_x_large.yml Normal file
View File

@ -0,0 +1,15 @@
uuid: fd11611a-e6eb-4843-b104-982932b90392
langcode: fr
status: true
dependencies: { }
name: content_x_large
label: 'content x-large'
effects:
7bc2e7f9-1c41-4d60-85b3-16a795691e3e:
uuid: 7bc2e7f9-1c41-4d60-85b3-16a795691e3e
id: image_scale
weight: 1
data:
width: 2500
height: null
upscale: false

12
config/sync/jsonapi_image_styles.settings.yml Normal file
View File

@ -0,0 +1,12 @@
_core:
default_config_hash: wOZVD8Wsf3NSSsAU36-FVkO7zaC4TgH_Buj0Up6vHYQ
image_styles:
content_large: content_large
content_medium: content_medium
content_small: content_small
content_x_large: content_x_large
large: '0'
linkit_result_thumbnail: '0'
medium: '0'
thumbnail: '0'
wide: '0'

1
config/sync/user.role.editor.yml
View File

@ -49,6 +49,7 @@ permissions:
- 'edit any partenaire content'
- 'edit any static content'
- 'edit intro_gouvernance config page entity'
- 'edit intro_partenaire config page entity'
- 'edit own etape content'
- 'edit own gallerie_photo content'
- 'edit own partenaire content'

4
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -175,9 +175,7 @@ export const useContentStore = defineStore('content', {
large: image.attributes.image_style_uri.content_large,
},
alt: partie.relationships.field_diaporama.data[index].meta.alt,
});
console.log(partieContent.diaporama);
});
}
}
break;

3
web/themes/custom/caravane/assets/js/utils/handle-navigation.js
View File

@ -51,5 +51,6 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
setActiveNavItem(store.contentType, href);
const listeEtape = document.querySelector('#etapes-liste');
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
const animationToggle = document.querySelector('#animation-toggle');
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape, animationToggle);
}

88
web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
View File

@ -1,6 +1,6 @@
<template>
<Transition name="fade">
<div v-if="isOpen" class="image-viewer-wrapper">
<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">
@ -26,6 +26,7 @@
opacity: 0.8;
}
`]"
@swiperresize="(e) => setCaptions(e.target)"
>
<swiper-slide v-for="media in swiperContent">
<figure class="popup-figure">
@ -46,6 +47,7 @@
<script setup>
import { ref, watch } from 'vue';
import { useWaitForImages } from '../composables/useWaitForImages';
const props = defineProps({
isOpen: Boolean,
image: {
@ -63,23 +65,70 @@ const currentImgIndex = ref(0);
watch(
() => props.isOpen,
() => {
if (props.isOpen && props.swiperContent?.length) {
for (let i = 0; i < props.swiperContent.length; i++) {
const currentImgSrc = props.image.src;
const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
if (props.swiperContent[i].src === truncatedSrc) {
toggleElementsOver(props.isOpen);
if (props.isOpen && props.swiperContent?.length) {
checkCurrentImage();
}
}
)
function toggleElementsOver(isOpen) {
const header = document.querySelector('.layout-container > header');
const retractedList = document.querySelector('.retracted');
if (isOpen) {
header.style.opacity = 0;
setTimeout(() => {
header.style.display = 'none';
}, 300);
if (retractedList) {
retractedList.style.display = 'none';
}
} else {
header.style.display = 'block';
header.style.opacity = 1;
if (retractedList) {
retractedList.style.display = 'flex';
}
}
}
function checkCurrentImage() {
// CHECK IF IMAGES ARE THE SAME WITH ALT
// IS NOT A GREAT SOLUTION
for (let i = 0; i < props.swiperContent.length; i++) {
if (props.swiperContent[i].alt === props.image.alt) {
currentImgIndex.value = i;
break;
}
}
}
})
}
function setCaptions(container) {
useWaitForImages(container, () => {
const slides = container.querySelectorAll('swiper-slide');
slides.forEach((slide) => {
const img = slide.querySelector('img');
const caption = slide.querySelector('figcaption');
caption.style.width = `${img.offsetWidth}px`;
});
});
}
const emit = defineEmits(['close']);
const close = () => {
emit('close');
};
function checkOutsideClick(target) {
console.log(target);
if (target.classList.contains('swiper-wrapper')
|| target.tagName === 'SWIPER-SLIDE'
|| target.tagName === 'FIGURE') {
close();
}
}
</script>
<style scoped lang="scss">
@ -133,26 +182,37 @@ const close = () => {
swiper-slide {
display: flex;
justify-content: center;
align-items: flex-start;
align-items: center;
figure {
margin-top: 3%;
max-width: 60%;
height: 80%;
max-height: 80vh;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vw;
box-sizing: border-box;
img {
height: -webkit-fill-available !important;
max-height: 100%;
max-width: 100%;
width: auto !important;
height: auto !important;
margin-bottom: -5px;
object-fit: cover;
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;
}
}
}
&::part(pagination) {
pointer-events: none;
}
}
}
}

55
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
View File

@ -7,7 +7,7 @@
:navigation="true"
:pagination="true"
:injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
@swiperresize="(e) => resizeSwiper(e.target)"
@swiperresize="(e) => setupSwiper(e.target)"
>
<swiper-slide v-for="image in partie.diaporama" style="width: 100%">
<figure>
@ -29,6 +29,7 @@
<script setup>
import { onMounted } from 'vue';
import { useImageModal } from '../../composables/useImageModale';
import { useWaitForImages } from '../../composables/useWaitForImages';
import ImageModale from '../ImageModale.vue';
// WebComponent
// https://swiperjs.com/element
@ -61,7 +62,7 @@ const handleImageClick = (event) => {
const altText = slide.querySelector('figcaption')?.textContent || '';
Object.values(props.partie.diaporama).forEach((image) => {
if (image.url.medium === img.src) {
swiperMedia.push({ src: largeImgUrl, alt: altText });
swiperMedia.push({ src: image.url.large, alt: altText });
}
});
@ -71,9 +72,47 @@ const handleImageClick = (event) => {
}
};
function resizeSwiper(swiper) {
swiper.style.height = 'auto';
swiper.style.height = `calc(${swiper.offsetHeight}px + 2rem)`;
function setupSwiper(swiper) {
centerCaptionOnVerticalImgs(swiper);
setVerticalImages(swiper);
window.addEventListener('resize', () => {
setTimeout(() => {
setVerticalImages(swiper);
}, 50);
});
}
function centerCaptionOnVerticalImgs(swiper) {
const slides = swiper.querySelectorAll('swiper-slide');
slides.forEach((slide) => {
const img = slide.querySelector('img');
const caption = slide.querySelector('figcaption');
if (img.naturalHeight > img.naturalWidth) {
caption.style.textAlign = 'center';
}
});
}
function setVerticalImages(swiper) {
const slides = swiper.querySelectorAll('swiper-slide');
let imageHeight = 0;
useWaitForImages(swiper, () => {
for (let i = 0; i < slides.length; i++) {
const slide = slides[i];
const img = slide.querySelector('img');
if (img.offsetHeight < img.naturalWidth) {
imageHeight = img.offsetHeight;
break;
}
}
slides.forEach((slide) => {
const img = slide.querySelector('img');
if (img.naturalHeight > img.naturalWidth) {
img.style.height = `${imageHeight}px`;
}
});
});
}
onMounted(() => {
@ -93,13 +132,7 @@ onMounted(() => {
--swiper-navigation-size: 1.5rem;
}
swiper-slide figure:not(.popup-figure) {
max-height: 40vh;
padding-bottom: 3rem;
}
swiper-slide img:not(.popup-img) { /* cf main.scss */
max-height: 35vh;
cursor: pointer;
transition: transform 0.3s ease-out;
object-fit: contain !important;

14
web/themes/custom/caravane/assets/js/vuejs/composables/useWaitForImages.js Normal file
View File

@ -0,0 +1,14 @@
export function useWaitForImages(container, callback) {
const images = container.querySelectorAll('img');
const imagePromises = Array.from(images).map(img => {
return new Promise(resolve => {
if (img.complete) {
resolve();
} else {
img.onload = img.onerror = resolve;
}
});
});
Promise.all(imagePromises).then(callback);
}

1
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -53,6 +53,7 @@ body{
.layout-container {
> header {
z-index: 2;
transition: opacity 0.3s ease-in-out;
> div {
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
display: grid;