toggle animations

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

View File

@ -10,23 +10,32 @@ export const useMapStore = defineStore('mapState', {
currentPlace: Object,
maxZoom: Number,
currentZoom: Number,
duration: 3,
animationsAreEnabled: true,
animationDuration: 3,
}),
actions: {
zoomToPlace(lat, long) {
if (useLayoutStore().isDesktop) long = long - 0.03;
this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
this.currentZoom = this.maxZoom;
this.map.flyTo(
[lat, long],
this.maxZoom,
{ animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
this.currentZoom = this.maxZoom;
},
resetMap() {
this.map.flyTo(this.defaultMapCenter, useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile, { duration: this.duration });
console.log(this.defaultMapCenter);
this.map.flyTo(
this.defaultMapCenter,
useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
{ animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
},
lockMap() {
setTimeout(() => {
this.map.options.minZoom = this.currentZoom;
this.map.options.maxZoom = this.currentZoom;
}, this.duration * 1000 + 100);
}, this.animationDuration * 1000 + 100);
this.map.dragging.disable();
this.map.touchZoom.disable();
this.map.doubleClickZoom.disable();
@ -34,17 +43,28 @@ export const useMapStore = defineStore('mapState', {
this.map.boxZoom.disable();
this.map.keyboard.disable();
// map.tap.disable();
},
unlockMap() {
this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
this.map.options.maxZoom = this.maxZoom;
this.map.dragging.enable();
this.map.touchZoom.enable();
this.map.doubleClickZoom.enable();
this.map.scrollWheelZoom.enable();
this.map.boxZoom.enable();
this.map.keyboard.enable();
// map.tap.enable();
},
},
unlockMap() {
this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
this.map.options.maxZoom = this.maxZoom;
this.map.dragging.enable();
this.map.touchZoom.enable();
this.map.doubleClickZoom.enable();
this.map.scrollWheelZoom.enable();
this.map.boxZoom.enable();
this.map.keyboard.enable();
// map.tap.enable();
},
toggleAnimation() {
this.animationsAreEnabled = !this.animationsAreEnabled;
},
checkReducedMotion() {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
this.animationsAreEnabled = !mediaQuery.matches;
mediaQuery.addEventListener('change', (event) => {
this.animationsAreEnabled = !event.matches;
});
},
},
});
});

View File

@ -1,7 +1,7 @@
export function setActiveNavItem(contentType, href) {
const staticNavItems = document.querySelectorAll('#menu > ul > li > a');
const etapeNavItems = document.querySelectorAll('#etapes-liste li a');
for (let item of staticNavItems) {
item.classList.remove('is-active');
}
@ -15,7 +15,7 @@ export function setActiveNavItem(contentType, href) {
for (let item of etapeNavItems) {
item.closest('li').classList.remove('inactive');
}
} else {
if (contentType === 'static') {
for (let item of staticNavItems) {
@ -32,4 +32,4 @@ export function setActiveNavItem(contentType, href) {
}
}
}
}

View File

@ -2,6 +2,7 @@ import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from '../router/router';
import Modale from '../vuejs/Modale.vue';
import AnimationToggle from '../vuejs/AnimationToggle.vue';
import VueImageZoomer from 'vue-image-zoomer';
import 'vue-image-zoomer/dist/style.css';
@ -9,14 +10,20 @@ import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/map';
export function initVueContentModale() {
const pinia = createPinia();
const app = createApp(Modale)
.use(createPinia())
.use(router)
.use(VueImageZoomer);
.use(pinia)
.use(router)
.use(VueImageZoomer);
const store = useContentStore();
const mapStore = useMapStore();
app.mount('#content-modale');
app.mount('#content-modale');
const animationToggle = createApp(AnimationToggle)
.use(pinia)
.mount('#animation-toggle');
return { store, mapStore, router };
}
}

View File

@ -0,0 +1,37 @@
<template>
<div @click="handleClick" class="animation-toggle-container">
<div><p>Activer les animations</p></div>
<label class="switch">
<input type="checkbox" v-model="animationsAreEnabled" @click.stop @change="toggleAnimation" />
<span class="slider round"></span>
</label>
</div>
</template>
<script>
import { useMapStore } from '../stores/map';
import { storeToRefs } from 'pinia';
export default {
setup() {
const mapStore = useMapStore();
const { animationsAreEnabled } = storeToRefs(mapStore);
const toggleAnimation = () => {
mapStore.toggleAnimation();
};
const handleClick = () => {
toggleAnimation();
};
return {
handleClick,
toggleAnimation,
animationsAreEnabled,
};
},
};
</script>

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>

View File

@ -3,9 +3,9 @@
<div class="brand-pattern pattern-bottom" :style="{ backgroundColor: couleur }">
<div class="pattern"></div>
</div>
<div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
<div v-if="content.previous" class="card previous" @click="displayRelatedElement(content.previous.url)">
<div v-if="content.previous" class="card previous" @click="clickRelatedElement(content.previous.url)">
<div class="icon">
<div :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
@ -21,7 +21,7 @@
</div>
</div>
</div>
<div v-if="content.next" class="card next" @click="displayRelatedElement(content.next.url)">
<div v-if="content.next" class="card next" @click="clickRelatedElement(content.next.url)">
<div class="icon">
<div :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
@ -57,10 +57,19 @@ const props = defineProps({
async function displayRelatedElement(href) {
const baseUrl = window.location.protocol + "//" + window.location.host;
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
router.push(href);
await store.fetchContentData(baseUrl + href);
document.title = store.pageTitle;
}
</script>
import { setActiveNavItem } from '../../utils/set-active-nav-item.js';
function clickRelatedElement(href) {
const baseUrl = window.location.protocol + "//" + window.location.host;
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
setActiveNavItem('etape', href);
displayRelatedElement(href);
}
</script>

View File

@ -63,7 +63,7 @@ body{
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 1 / span 1;
grid-column: 1 / span 1;
}
> div > div > a > img {
width: 100%;
@ -76,7 +76,7 @@ body{
align-items: center;
padding-right: 2.5rem;
@media screen and (min-width: $desktop-min-width) {
grid-column: 2 / span 2;
grid-column: 2 / span 2;
}
> div > div > a > img {
width: 100%;
@ -90,7 +90,7 @@ body{
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 8 / span 2;
grid-column: 8 / span 2;
}
> div > div > a > img {
width: 100%;
@ -296,7 +296,7 @@ body{
> div {
pointer-events: auto;
}
}
}
> .layout__region--second {
position: fixed;
z-index: 1;
@ -404,7 +404,7 @@ body{
flex-direction: column;
justify-content: center;
align-items: center;
*/
*/
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
@ -597,6 +597,7 @@ body{
margin: 30px 0;
transform: scale(1);
opacity: 1;
padding-right: 0.5rem;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
cursor: pointer;
> .infos-arret {
@ -625,7 +626,7 @@ body{
text-align: right;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
}
}
}
> .views-field-field-adresse-postal-code {
@ -647,7 +648,7 @@ body{
content: ')';
}
}
}
> .views-field-field-dates {
grid-column: 1 / span 2;
@ -821,7 +822,7 @@ body{
@media screen and (min-width: $tablet-min-width) {
width: calc($modale-width-mobile - $modale-x-padding * 6);
margin-left: $modale-x-padding * 3;
}
@media screen and (min-width: $desktop-min-width) {
width: calc($modale-width-desktop - $modale-x-padding * 4);
@ -960,7 +961,7 @@ body{
> .description {
width: 100%;
margin-top: 1rem;
@media screen and (min-width: $desktop-min-width) {
@media screen and (min-width: $desktop-min-width) {
width: calc(100% - 6rem);
margin-top: 0;
}
@ -1178,6 +1179,75 @@ body{
}
}
}
> #animation-toggle > div {
cursor: pointer;
position: fixed;
bottom: $body-margin-bottom;
right: $body-margin-x;
z-index: 999;
display: flex;
align-items: center;
padding: 0.4rem 1.2rem;
border-radius: 10rem;
background-color: white;
transition: background-color 0.3s ease-out;
> div {
margin-right: 1rem;
> p {
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
}
> .switch {
position: relative;
display: inline-block;
width: 2.2rem;
height: 1.2rem;
> input {
opacity: 0;
width: 0;
height: 0;
&:checked + .slider {
background-color: $brand-color;
}
&:focus + .slider {
box-shadow: 0 0 1px $brand-color;
}
&:checked + .slider::before {
-webkit-transform: translateX(1rem);
-ms-transform: translateX(1rem);
transform: translateX(1rem);
}
}
> .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: $main-color-light;
-webkit-transition: .4s;
transition: .4s;
&::before {
position: absolute;
content: "";
height: 1rem;
width: 1rem;
border-radius: 50%;
left: 0.1rem;
bottom: 0.1rem;
background-color: $light-color;
-webkit-transition: .4s;
transition: .4s;
}
}
}
}
}
> .user-login-form {
height: 90vh;
@ -1192,5 +1262,5 @@ body{
}
}
}
}
}
}
}

View File

@ -52,5 +52,6 @@
</div>
{% endif %}
<div id="content-modale"></div>
<div id="animation-toggle"></div>
</div>
{% endif %}