drupal-caravane/web/themes/custom/caravane/assets/js/vuejs/Modale.vue

<template>
    <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'
          || contentType === 'equipe'
          || contentType === 'partenaires'
        )">
            <div class="content-wrapper">
                <ModaleHeader
                    :contentType="contentType"
                    :content="content"
                    :couleur="content.couleur || brandColor" />
                <main>
                    <div v-for="partie in content.parties" class="partie">
                        <ModaleCarteSensible
                            v-if="partie.type === 'carte_sensible'"
                            :partie="partie" />
                        <ModaleTitreTexte
                            v-if="partie.type === 'titre_texte'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleChiffresCles
                            v-if="partie.type === 'chiffres_cles'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleDiaporama
                            v-if="partie.type === 'diaporama'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleEntretien
                            v-if="partie.type === 'entretien'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleExergue
                            v-if="partie.type === 'exergue'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleVideos
                            v-if="partie.type === 'video'"
                            :partie="partie" />
                    </div>
                    <EquipeContent
                        v-if="contentType === 'equipe'"
                        :content="content" />
                    <PartenairesContent
                        v-if="contentType === 'partenaires'"
                        :content="content" />
                </main>
                <ModaleFooter
                    :contentType="contentType"
                    :content="content"
                    :couleur="content.couleur || brandColor"
                    />
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { watch, onMounted } from 'vue';

import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/map';

import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.vue';
import EquipeContent from './components/EquipeContent.vue';
import PartenairesContent from './components/PartenairesContent.vue';

import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
import ModaleChiffresCles from './components/parties/ModaleChiffresCles.vue';
import ModaleDiaporama from './components/parties/ModaleDiaporama.vue';
import ModaleEntretien from './components/parties/ModaleEntretien.vue';
import ModaleExergue from './components/parties/ModaleExergue.vue';
import ModaleVideos from './components/parties/ModaleVideos.vue';

const store = useContentStore();
const mapState = useMapStore();

const {
    contentType,
    content,
    loading,
    error,
} = storeToRefs(store);

const { defaultMapCenter, animationDuration, 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';

            // 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);
                  zoomToContentPlace();
                }
              } 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;
        }
    },
  );
};

onMounted(() => {
    isModaleEtape = contentType.value === 'etape';
    wasModaleEtape = isModaleEtape;
    handleColorChange();
    handleMapMovement();
});
</script>

<style scoped scss>
.v-enter-active {
  transition: margin-top 0.5s ease-out var(--modale-enter-delay);
}

.v-leave-active {
  transition: margin-top 0.5s ease-in;
}

.v-enter-from,
.v-leave-to {
  margin-top: 150vh;
}

.v-enter-to,
.v-leave-from {
  margin-top: 0vh;
}

/* This class will disable transitions */
.no-transition {
  margin-top: 0 !important;
  transition: none !important;
}
</style>