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,
logoLink,
mapIcons,
mapContainer,
} = processClickableElements();
const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons];
const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons, mapContainer];
setupMapStore(mapStore, map, settings);

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

@ -16,13 +16,14 @@ export const useMapStore = defineStore('mapState', {
animationDuration: 3,
}),
actions: {
zoomToPlace(lat, long) {
zoomToPlace(lat, long) {
if (useLayoutStore().isDesktop) long = long - 0.03;
this.map.flyTo(
[lat, long],
this.maxZoom,
{ animate: this.animationsAreEnabled, duration: this.animationDuration });
this.currentZoom = this.maxZoom;
this.lockMap();
},
resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
this.map.flyTo(
@ -30,6 +31,7 @@ export const useMapStore = defineStore('mapState', {
useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
{ animate, duration });
this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
this.unlockMap();
},
lockMap() {
setTimeout(() => {
@ -42,7 +44,7 @@ export const useMapStore = defineStore('mapState', {
this.map.scrollWheelZoom.disable();
this.map.boxZoom.disable();
this.map.keyboard.disable();
// map.tap.disable();
this.map._controlContainer.style.display = 'none';
},
unlockMap() {
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.boxZoom.enable();
this.map.keyboard.enable();
// map.tap.enable();
this.map._controlContainer.style.display = 'block';
},
toggleAnimation() {
this.animationsAreEnabled = !this.animationsAreEnabled;

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

@ -23,11 +23,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
link.onclick = async function (e) {
console.log('click on link, route push');
router.push(href);
if (href !== window.location.pathname) {
pageChange(href, store, siteName, mapStore, baseUrl);
router.push(href);
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) {
console.log('trigger page change');
if (href === '/') {
store.resetStore(true);
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(),
logoLink: processLogoLink(),
mapIcons: processMapIcons(),
mapContainer: processMapContainer(),
};
}
@ -64,3 +65,11 @@ function processMapIcons() {
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="content.previous" class="card previous" @click="goToRelatedElement(content.previous.url)">
<div class="icon">
<div :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
<div :style="{ backgroundColor: content.previous.couleur }"></div>
</div>
<div class="icon" :style="{ backgroundColor: content.previous.couleur }"></div>
<div class="card-content">
<div class="infos">
<div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode.slice(0, 2) }})</span></div>
@ -22,11 +18,7 @@
</div>
</div>
<div v-if="content.next" class="card next" @click="goToRelatedElement(content.next.url)">
<div class="icon">
<div :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
<div :style="{ backgroundColor: content.next.couleur }"></div>
</div>
<div class="icon" :style="{ backgroundColor: content.next.couleur }"></div>
<div class="card-content">
<div class="infos">
<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;
$xsm-font-size-mobile: 0.5rem;
$xsm-font-size-desktop: 0.6rem;
$sm-font-size-mobile: 0.6rem;
$sm-font-size-desktop: 0.8rem;
@ -163,7 +166,7 @@ body{
}
> #hamburger {
position: fixed;
height: 5vh;
height: max(5vh, 40px);
right: 0;
top: 0;
margin-right: $body-margin-x;
@ -1266,24 +1269,12 @@ body{
}
> .icon {
z-index: 2;
width: 10px;
height: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> 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);
}
}
width: 25px;
height: 25px;
mask-image: url("/themes/custom/caravane/assets/pictograms/hexagone.svg");
mask-size: contain;
mask-repeat: no-repeat;
margin-right: -8px;
}
> .card-content {
z-index: 1;
@ -1297,21 +1288,21 @@ body{
padding: 1rem 0.5rem;
font-weight: bold;
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) {
font-size: $m-font-size-desktop;
font-size: $labeur-font-size-desktop;
}
> span {
font-weight: lighter;
}
}
> .date {
font-size: $sm-font-size-mobile;
font-size: $xsm-font-size-mobile;
font-family: 'Marianne', sans-serif;
font-weight: lighter;
padding-bottom: 1rem;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
font-size: $xsm-font-size-desktop;
}
}
}