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

<template>
    <Transition>
        <div v-if="isEtapeValid || isPageValid">
            <div class="content-wrapper">
                <ModaleHeader 
                    :content="etape.title ? etape : page"
                    :couleur="etape.couleur || brandColor" />
                <main>
                    <div v-for="partie in etape.parties || page.parties" class="partie">
                        <ModaleCarteSensible 
                            v-if="partie.type === 'carte_sensible'" 
                            :partie="partie" />
                        <ModaleTitreTexte
                            v-if="partie.type === 'titre_texte'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleChiffresCles
                            v-if="partie.type === 'chiffres_cles'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleDiaporama
                            v-if="partie.type === 'diaporama'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleEntretien
                            v-if="partie.type === 'entretien'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleExergue
                            v-if="partie.type === 'exergue'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleVideos
                            v-if="partie.type === 'video'"
                            :partie="partie" />
                    </div>
                </main>
                <ModaleFooter
                    :content="etape || page"
                    :couleur="etape.couleur || brandColor"
                    :map="map" />
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/mapState';
import { useRoute, useRouter } from 'vue-router';

import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.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 { useUtils } from './composables/useUtils';
const { isObjectEmpty, scrollTop } = useUtils();

const router = useRouter();
const store = useContentStore();
const mapState = useMapStore();
const route = useRoute();

const { loading, error, href, map, etape, page } = storeToRefs(store);
const { duration } = storeToRefs(mapState);

const isEtapeValid = computed(() => !error.value && !loading.value && etape.value && !isObjectEmpty(etape.value));
const isPageValid = computed(() => !error.value && !loading.value && page.value && !isObjectEmpty(page.value));

let isModaleEtape, wasModaleEtape;

const brandColor = "#80c8bf";

let isProgrammaticNavigation = false;

const handleRouteChange = () => {
  watch(
    () => route.params.id,
    (newId) => {      
      if (isProgrammaticNavigation) {
        isProgrammaticNavigation = false;
        return;
      }

      if (!newId) {
        store.emptyAll(map.value);
      } else {
        store.fetchEtapeData(newId, map.value);
        if (!etape.value?.data) {
          store.fetchStaticData(newId, map.value);
        }
        scrollTop();
      }
    },
    { immediate: true }
  );
};

const handleColorChange = () => {
  watch(
    () => href.value,
    () => {
        document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur || brandColor);
    }
  );
};

const handleHrefChange = () => {
  watch(
    () => href.value,
    (newHref) => {
      const relativePath = newHref.split('.fr')[1];
      isProgrammaticNavigation = true;
      if (newHref == '') {
        router.push('/');
        mapState.unlockMap(map.value)
      } else {
        if (relativePath && relativePath !== '' && relativePath !== '/') {  
          mapState.lockMap(map.value);     
          router.push(relativePath);
          scrollTop();
        }     
      }
    }
  );
};

const handleMapMovement = () => {
  watch(
    () => href.value,
    () => {
      isModaleEtape = !isObjectEmpty(etape.value);
      
      if (!wasModaleEtape && isModaleEtape) {               
        document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`);
        mapState.zoomToPlace(map.value, etape.value.coordinates.lat, etape.value.coordinates.lon);

      } else if (wasModaleEtape && isModaleEtape) {        
        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(map.value, etape.value.coordinates.lat, etape.value.coordinates.lon);
        }, duration.value * 1000);

      } else if (wasModaleEtape && !isModaleEtape) {
        document.documentElement.style.setProperty('--modale-leave-delay', 0);
        mapState.resetMap(map.value);
      }

      wasModaleEtape = isModaleEtape;
    },
  );
};

onMounted(() => {
  isModaleEtape = !isObjectEmpty(etape.value);
  wasModaleEtape = isModaleEtape;
  handleRouteChange();
  handleColorChange();
  handleHrefChange();
  handleMapMovement();
});
</script>

<style scss>
.v-enter-active {
  transition: all 0.5s linear var(--modale-enter-delay);
}

.v-leave-active {
  transition: all 0.5s linear var(--modale-leave-delay);
}

.v-enter-from,
.v-leave-to {
  transform: translateY(20vh);
}

.v-enter-to,
.v-leave-from {
  transform: translateY(0vh);
}
</style>