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

toggle animations

Browse Source
This commit is contained in:
Valentin
2024-11-14 02:31:10 +01:00
parent f2680fc65a
commit 9bf84290ac
8 changed files with 258 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,8 @@
<template>
<Transition>
<Transition
:enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
:leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
>
<div v-if="!loading && (contentType === 'etape' || contentType === 'static')">
<div class="content-wrapper">
<ModaleHeader
@@ -8,8 +11,8 @@
:couleur="content.couleur || brandColor" />
<main>
<div v-for="partie in content.parties" class="partie">
<ModaleCarteSensible
v-if="partie.type === 'carte_sensible'"
<ModaleCarteSensible
v-if="partie.type === 'carte_sensible'"
:partie="partie" />
<ModaleTitreTexte
v-if="partie.type === 'titre_texte'"
@@ -78,10 +81,10 @@ const {
contentType,
content,
loading,
error,
error,
} = storeToRefs(store);
const { map, duration } = storeToRefs(mapState);
const { defaultMapCenter, animationDuration, animationsAreEnabled } = storeToRefs(mapState);
let isModaleEtape, wasModaleEtape;
@@ -90,10 +93,10 @@ 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);
}
}
}
);
};
@@ -103,33 +106,59 @@ const handleMapMovement = () => {
() => loading.value,
() => {
if (!loading.value) {
isModaleEtape = contentType.value === 'etape';
if (!wasModaleEtape && isModaleEtape) {
// national -> détail
document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon);
} else if (wasModaleEtape && isModaleEtape) {
// détail -> détail
document.documentElement.style.setProperty('--modale-leave-delay', 0);
document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value * 2}s`);
mapState.resetMap(map.value);
setTimeout(() => {
mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon);
}, duration.value * 1000);
} else if (wasModaleEtape && !isModaleEtape) {
// détail -> national
document.documentElement.style.setProperty('--modale-leave-delay', 0);
document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
mapState.resetMap();
} else if (!wasModaleEtape && !isModaleEtape) {
// national -> national
console.log('national -> national');
document.documentElement.style.setProperty('--modale-leave-delay', 0);
document.documentElement.style.setProperty('--modale-enter-delay', '0.5s');
isModaleEtape = contentType.value === 'etape';
// 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) {
console.log('national -> détail');
setModaleTransition(animationDuration.value);
zoomToContentPlace();
} else {
console.log('détail -> détail');
setModaleTransition(animationDuration.value);
//mapState.resetMap();
zoomToContentPlace();
//setTimeout(zoomToContentPlace, animationDuration.value * 1000);
}
} else {
if (wasModaleEtape) {
console.log('détail -> national');
setModaleTransition(animationDuration.value);
mapState.resetMap();
} else {
console.log('national -> national');
setModaleTransition(0);
}
}
} else {
if (isModaleEtape) {
zoomToContentPlace();
} else {
mapState.resetMap();
}
disableModaleTransition();
}
scrollTo(0, 0);
wasModaleEtape = isModaleEtape;
}
},
@@ -138,7 +167,7 @@ const handleMapMovement = () => {
onMounted(() => {
isModaleEtape = contentType.value === 'etape';
wasModaleEtape = isModaleEtape;
wasModaleEtape = isModaleEtape;
handleColorChange();
handleMapMovement();
});
@@ -150,7 +179,7 @@ onMounted(() => {
}
.v-leave-active {
transition: margin-top 0.5s ease-in var(--modale-leave-delay);
transition: margin-top 0.5s ease-in;
}
.v-enter-from,
@@ -160,6 +189,12 @@ onMounted(() => {
.v-enter-to,
.v-leave-from {
margin-top: 0vh;
margin-top: 0vh;
}
</style>
/* This class will disable transitions */
.no-transition {
margin-top: 0 !important;
transition: none !important;
}
</style>