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

<template>
    <Transition>
        <div v-if="!loading && (contentType === 'etape' || contentType === 'static')">
            <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>
                </main>
                <ModaleFooter
                    :contentType="contentType"
                    :content="content"
                    :couleur="content.couleur || brandColor"
                    />
            </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/map';
import { useLayoutStore } from '../stores/layout';

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

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

// pour importer le breakpoint
// const { minDesktopWidth } = storeToRefs(layoutStore);
// console.log(minDesktopWidth);


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

const { map, duration } = 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';            
            
            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');
            }
    
            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 var(--modale-leave-delay);
}

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

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