bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

retour à l'index en cliquant sur la carte depuis une étape

Browse Source
This commit is contained in:
Valentin Le Moign 2025-03-03 22:42:55 +01:00
parent 6ecf055060
commit dffd179bc9
6 changed files with 34 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/themes/custom/caravane/assets/js/main.js
View File

@ -39,8 +39,9 @@ import '../scss/main.scss'
generalListLinks, generalListLinks,
logoLink, logoLink,
mapIcons, mapIcons,
mapContainer,
} = processClickableElements(); } = processClickableElements();
const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons]; const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons, mapContainer];
setupMapStore(mapStore, map, settings); setupMapStore(mapStore, map, settings);

6
web/themes/custom/caravane/assets/js/stores/map.js
View File

@ -23,6 +23,7 @@ export const useMapStore = defineStore('mapState', {
this.maxZoom, this.maxZoom,
{ animate: this.animationsAreEnabled, duration: this.animationDuration }); { animate: this.animationsAreEnabled, duration: this.animationDuration });
this.currentZoom = this.maxZoom; this.currentZoom = this.maxZoom;
this.lockMap();
}, },
resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) { resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
this.map.flyTo( this.map.flyTo(
@ -30,6 +31,7 @@ export const useMapStore = defineStore('mapState', {
useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile, useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
{ animate, duration }); { animate, duration });
this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile; this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
this.unlockMap();
}, },
lockMap() { lockMap() {
setTimeout(() => { setTimeout(() => {
@ -42,7 +44,7 @@ export const useMapStore = defineStore('mapState', {
this.map.scrollWheelZoom.disable(); this.map.scrollWheelZoom.disable();
this.map.boxZoom.disable(); this.map.boxZoom.disable();
this.map.keyboard.disable(); this.map.keyboard.disable();
// map.tap.disable(); this.map._controlContainer.style.display = 'none';
}, },
unlockMap() { unlockMap() {
this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile; this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
@ -53,7 +55,7 @@ export const useMapStore = defineStore('mapState', {
this.map.scrollWheelZoom.enable(); this.map.scrollWheelZoom.enable();
this.map.boxZoom.enable(); this.map.boxZoom.enable();
this.map.keyboard.enable(); this.map.keyboard.enable();
// map.tap.enable(); this.map._controlContainer.style.display = 'block';
}, },
toggleAnimation() { toggleAnimation() {
this.animationsAreEnabled = !this.animationsAreEnabled; this.animationsAreEnabled = !this.animationsAreEnabled;

5
web/themes/custom/caravane/assets/js/utils/handle-navigation.js
View File

@ -23,10 +23,8 @@ export function handleClickableElements(clickableElements, store, router, baseUr
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, ''); if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
link.onclick = async function (e) { link.onclick = async function (e) {
console.log('click on link, route push');
router.push(href);
if (href !== window.location.pathname) { if (href !== window.location.pathname) {
router.push(href);
pageChange(href, store, siteName, mapStore, baseUrl); pageChange(href, store, siteName, mapStore, baseUrl);
} }
} }
@ -40,7 +38,6 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
} }
export async function pageChange(href, store, siteName, mapStore, baseUrl) { export async function pageChange(href, store, siteName, mapStore, baseUrl) {
console.log('trigger page change');
if (href === '/') { if (href === '/') {
store.resetStore(true); store.resetStore(true);
document.title = siteName; document.title = siteName;

9
web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js
View File

@ -4,6 +4,7 @@ export function processClickableElements() {
generalListLinks: processStaticLinks(), generalListLinks: processStaticLinks(),
logoLink: processLogoLink(), logoLink: processLogoLink(),
mapIcons: processMapIcons(), mapIcons: processMapIcons(),
mapContainer: processMapContainer(),
}; };
} }
@ -64,3 +65,11 @@ function processMapIcons() {
return icons; return icons;
} }
function processMapContainer() {
let mapContainer = document.querySelector('.leaflet-layer');
mapContainer.style.height = "100vh";
mapContainer.style.width = "100vw";
mapContainer.dataset.href = "/";
return mapContainer;
}

12
web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue
View File

@ -6,11 +6,7 @@
<div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links"> <div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
<div v-if="content.previous" class="card previous" @click="goToRelatedElement(content.previous.url)"> <div v-if="content.previous" class="card previous" @click="goToRelatedElement(content.previous.url)">
<div class="icon"> <div class="icon" :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
</div>
<div class="card-content"> <div class="card-content">
<div class="infos"> <div class="infos">
<div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode.slice(0, 2) }})</span></div> <div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode.slice(0, 2) }})</span></div>
@ -22,11 +18,7 @@
</div> </div>
</div> </div>
<div v-if="content.next" class="card next" @click="goToRelatedElement(content.next.url)"> <div v-if="content.next" class="card next" @click="goToRelatedElement(content.next.url)">
<div class="icon"> <div class="icon" :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
</div>
<div class="card-content"> <div class="card-content">
<div class="infos"> <div class="infos">
<div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode.slice(0, 2) }})</span></div> <div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode.slice(0, 2) }})</span></div>

37
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -15,6 +15,9 @@ $modale-width-desktop: 50vw;
$brand-pattern-height: 110px; $brand-pattern-height: 110px;
$xsm-font-size-mobile: 0.5rem;
$xsm-font-size-desktop: 0.6rem;
$sm-font-size-mobile: 0.6rem; $sm-font-size-mobile: 0.6rem;
$sm-font-size-desktop: 0.8rem; $sm-font-size-desktop: 0.8rem;
@ -163,7 +166,7 @@ body{
} }
> #hamburger { > #hamburger {
position: fixed; position: fixed;
height: 5vh; height: max(5vh, 40px);
right: 0; right: 0;
top: 0; top: 0;
margin-right: $body-margin-x; margin-right: $body-margin-x;
@ -1266,24 +1269,12 @@ body{
} }
> .icon { > .icon {
z-index: 2; z-index: 2;
width: 10px; width: 25px;
height: 30px; height: 25px;
display: flex; mask-image: url("/themes/custom/caravane/assets/pictograms/hexagone.svg");
flex-direction: column; mask-size: contain;
justify-content: center; mask-repeat: no-repeat;
align-items: center; margin-right: -8px;
> div {
display: block;
width: 20px;
height: 10px;
&:first-of-type, &:last-of-type {
height: 8px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
&:first-of-type {
transform: rotate(180deg);
}
}
} }
> .card-content { > .card-content {
z-index: 1; z-index: 1;
@ -1297,21 +1288,21 @@ body{
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
font-weight: bold; font-weight: bold;
font-family: 'Joost', sans-serif; font-family: 'Joost', sans-serif;
font-size: $m-font-size-mobile; font-size: $labeur-font-size-mobile;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop; font-size: $labeur-font-size-desktop;
} }
> span { > span {
font-weight: lighter; font-weight: lighter;
} }
} }
> .date { > .date {
font-size: $sm-font-size-mobile; font-size: $xsm-font-size-mobile;
font-family: 'Marianne', sans-serif; font-family: 'Marianne', sans-serif;
font-weight: lighter; font-weight: lighter;
padding-bottom: 1rem; padding-bottom: 1rem;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop; font-size: $xsm-font-size-desktop;
} }
} }
} }