m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(map): exit fullscreen on marker click, then scroll to entry

Browse Source 
When fullscreen is active, clicking a marker now triggers fsBtn.click()
to exit cleanly (handles class, body overflow, tripMap.resize + icon),
then waits 450ms for the exit animation before scrolling to the entry
and firing the highlight. Also fixes missing icon-swap CSS for
.home-map-col.is-fullscreen (was only targeting .feed-map-wrap).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-22 01:12:52 +02:00
parent 1bb588d1d2
commit e07fb3a72a
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+4 -2
View File
@@ -705,8 +705,10 @@ body::after {
.feed-map-wrap.is-fullscreen .feed-map-link { display: none; } .feed-map-wrap.is-fullscreen .feed-map-link { display: none; }
.feed-map-wrap.is-fullscreen .feed-map-fs-open { display: none; } .feed-map-wrap.is-fullscreen .feed-map-fs-open,
.feed-map-wrap.is-fullscreen .feed-map-fs-close { display: block; } .home-map-col.is-fullscreen .feed-map-fs-open { display: none; }
.feed-map-wrap.is-fullscreen .feed-map-fs-close,
.home-map-col.is-fullscreen .feed-map-fs-close { display: block; }
.feed-map-link { .feed-map-link {
display: block; display: block;
themes/intotheeast/templates/trip.html.twig
+11
View File
@@ -287,11 +287,22 @@ tripMap.on('load', function () {
el.addEventListener('click', function () { el.addEventListener('click', function () {
var card = document.getElementById('entry-' + entry.slug); var card = document.getElementById('entry-' + entry.slug);
if (!card) return; if (!card) return;
var mapCol = document.querySelector('.home-map-col');
var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
function scrollAndHighlight() {
window.location.hash = 'entry-' + entry.slug; window.location.hash = 'entry-' + entry.slug;
setTimeout(function () { setTimeout(function () {
card.classList.add('is-highlighted'); card.classList.add('is-highlighted');
setTimeout(function () { card.classList.remove('is-highlighted'); }, 700); setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
}, 350); }, 350);
}
if (isFs) {
var fsBtn = document.getElementById('trip-map-fullscreen');
if (fsBtn) fsBtn.click();
setTimeout(scrollAndHighlight, 450);
} else {
scrollAndHighlight();
}
}); });
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap); new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);