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

rerefactor du fetching de contenus une mielleure ux au load des modales (description dans le readme)

Browse Source
This commit is contained in:
Valentin Le Moign
2025-06-26 15:26:18 +02:00
parent e85851bd4d
commit f44fbd8d06
21 changed files with 465 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@@ -3,9 +3,15 @@
:enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
:leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
>
<div v-if="!loading && contentType != ''">
<div class="content-wrapper">
<div v-if="!partialLoading && contentType != ''">
<div
class="content-wrapper"
:class="
contentType === 'ressource' || contentType === 'ressourceItem'
? 'ressource' : ''"
>
<ModaleHeader
:loading="loading"
:contentType="contentType"
:content="content"
:couleur="content.couleur || brandColor" />
@@ -14,7 +20,7 @@
v-if="contentType === 'ressourceItem'"
:content="content"
:couleur="brandColor" />
<div v-for="partie in content.parties" class="partie">
<div v-if="!loading" v-for="partie in content.parties" class="partie">
<ModaleCarteSensible
v-if="partie.type === 'carte_sensible'"
:partie="partie" />
@@ -50,21 +56,27 @@
:partie="partie"
:couleur="content.couleur || brandColor" />
</div>
<EquipeContent
v-if="contentType === 'gouvernance'"
:content="content"
:couleur="brandColor" />
<PartenairesContent
v-if="contentType === 'partenaire'"
:content="content" />
<CentreDeRessource
v-if="contentType === 'ressource'"
:content="content"
:couleur="brandColor" />
<RelatedRessources
v-if="contentType === 'etape' && content.relatedRessources.length"
:relatedRessources="content.relatedRessources"
:couleur="content.couleur || brandColor" />
<div class="content-loading" v-else>
<div></div>
<p>Chargement du contenu...</p>
</div>
<template v-if="!loading">
<EquipeContent
v-if="contentType === 'gouvernance'"
:content="content"
:couleur="brandColor" />
<PartenairesContent
v-if="contentType === 'partenaire'"
:content="content" />
<CentreDeRessource
v-if="contentType === 'ressource'"
:content="content"
:couleur="brandColor" />
<RelatedRessources
v-if="contentType === 'etape' && content.relatedRessources?.length"
:relatedRessources="content.relatedRessources"
:couleur="content.couleur || brandColor" />
</template>
</main>
<PiecesJointes
v-if="content.pieces_jointes || content.liens"
@@ -111,123 +123,55 @@ const mapState = useMapStore();
const {
contentType,
content,
partialLoading,
loading,
error,
} = storeToRefs(store);
const { defaultMapCenter, animationDuration, animationsAreEnabled } = storeToRefs(mapState);
const { animationsAreEnabled } = storeToRefs(mapState);
let isModaleEtape, wasModaleEtape;
const brandColor = "#80c8bf";
const handleColorChange = () => {
watch(
() => content.value.couleur,
() => {
if (contentType.value === 'etape' && content.value.couleur) {
document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor);
}
}
);
};
const handleMapMovement = () => {
watch(
() => loading.value,
() => {
if (!loading.value) {
isModaleEtape = contentType.value === 'etape';
console.log(contentType.value);
// Define helper functions in variables
const disableModaleTransition = () => {
document.documentElement.style.setProperty('margin-top', '0');
document.documentElement.style.setProperty('transition', 'none');
}
const setModaleTransition = (enterDelay) => {
document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
};
const zoomToContentPlace = () => {
mapState.zoomToPlace(
content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
);
};
if (animationsAreEnabled.value) {
if (isModaleEtape) {
if (!wasModaleEtape) {
// national -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
} else {
// détail -> détail
setModaleTransition(animationDuration.value);
zoomToContentPlace();
}
} else {
if (wasModaleEtape) {
// détail -> national
setModaleTransition(animationDuration.value);
mapState.resetMap();
} else {
// national -> national
setModaleTransition(0);
}
}
} else {
if (isModaleEtape) {
// ? -> détail
zoomToContentPlace();
} else {
// ? -> national
mapState.resetMap();
}
disableModaleTransition();
}
scrollTo(0, 0);
wasModaleEtape = isModaleEtape;
}
},
);
};
watch(() => contentType.value, () => {
if (contentType.value === '') {
handleMapLock(false);
} else {
handleMapLock(true);
}
});
const handleMapLock = (shoudLock) => {
const checkAndExecute = () => {
const leafletLayer = document.querySelector('.leaflet-layer');
if (leafletLayer) {
if (shoudLock) {
mapState.lockMap();
} else {
mapState.unlockMap();
}
} else {
setTimeout(checkAndExecute, 100);
}
}
checkAndExecute();
}
onMounted(() => {
nextTick(() => {
watch(
() => content.value.couleur,
() => {
if (contentType.value === 'etape' && content.value.couleur) {
document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor);
}
}
);
isModaleEtape = contentType.value === 'etape';
wasModaleEtape = isModaleEtape;
handleColorChange();
handleMapMovement();
watch(
() => partialLoading.value,
() => {
if (!partialLoading.value) {
isModaleEtape = contentType.value === 'etape';
mapState.handleMapMovement(
isModaleEtape,
wasModaleEtape,
content.value.coordinates?.lat,
content.value.coordinates?.lon
);
scrollTo(0, 0);
wasModaleEtape = isModaleEtape;
}
}
);
watch(
() => contentType.value,
() => {
if (contentType.value === '') {
mapState.unlockMap();
} else {
mapState.lockMap();
}
}
);
});
});
</script>