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="!partialLoading && contentType != ''">
            <div
              class="content-wrapper"
              :class="
                contentType === 'ressource' || contentType === 'ressourceItem' 
                ? 'ressource' : ''"
              >
                <ModaleHeader
                    :loading="loading"
                    :contentType="contentType"
                    :content="content"
                    :couleur="content.couleur || brandColor" />
                <main>
                    <RessourceItemHeader
                        v-if="contentType === 'ressourceItem'"
                        :content="content"
                        :couleur="brandColor" />
                    <div v-if="!loading" 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" />
                          <ModaleGallerie
                            v-if="partie.type === 'galleries'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                          <ModaleDocument
                            v-if="partie.type === 'document'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                    </div>
                    <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"
                  :content="content"
                  :couleur="content.couleur || brandColor" />
                <ModaleFooter
                  :contentType="contentType"
                  :content="content"
                  :couleur="content.couleur || brandColor" />
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { watch, onMounted, nextTick } 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 CentreDeRessource from './components/CentreDeRessource.vue';
import RessourceItemHeader from './components/RessourceItemHeader.vue';
import PiecesJointes from './components/PiecesJointes.vue';
import RelatedRessources from './components/RelatedRessources.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';
import ModaleGallerie from './components/parties/ModaleGallerie.vue';
import ModaleDocument from './components/parties/ModaleDocument.vue';

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

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

const { animationsAreEnabled } = storeToRefs(mapState);

let isModaleEtape, wasModaleEtape;

const brandColor = "#80c8bf";

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;
    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>

<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>