refactor: extract shared entry-map partial (Phase 2)

trip.html.twig and home.html.twig hand-wrote near-identical map-column
markup + a MapUtils.initEntryMap() invocation. Extract both into
partials/entry-map.html.twig, parameterised (map id, global, entries,
gpx config, story markers). Callers now pass resolved header values.

The map engine (js/map.js initEntryMap) is unchanged; emitted config is
byte-equivalent to the previous inline scripts. Verified: trip-map,
home-map and window.tripMap/homeMap Playwright tests pass; both pages 200.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-04 13:42:56 +02:00
co-authored by Claude Opus 4.8
parent 19a8fbcbf0
commit e2ba8f413a
3 changed files with 73 additions and 59 deletions
+12 -29
View File
@@ -56,16 +56,18 @@
{% endfor %}
<div class="home-layout">
<div class="home-map-col">
<div class="home-map" id="trip-map">
<button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
<svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
<path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
</svg>
<span class="feed-map-fs-close" aria-hidden="true">✕</span>
</button>
</div>
</div>
{% include 'partials/entry-map.html.twig' with {
map_id: 'trip-map',
map_global: 'tripMap',
entries: map_entries,
card_prefix: 'entry-',
story_markers: true,
gpx_urls: gpx_urls,
use_gpx: page.header.use_gpx ?? true,
autoconnect: page.header.autoconnect ?? 'on',
gpx_source_prefix: 'gpx',
journey_id: 'trip-journey'
} only %}
{% include 'partials/trip-feed-col.html.twig' with {
trip_page: page,
@@ -80,25 +82,6 @@
} only %}
</div>
<script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS = {{ gpx_urls|json_encode|raw }};
var USE_GPX = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
var AUTOCONNECT = "{{ page.header.autoconnect ?? 'on' }}";
document.addEventListener('DOMContentLoaded', function() {
window.tripMap = MapUtils.initEntryMap({
container: 'trip-map',
entries: TRIP_ENTRIES,
cardPrefix: 'entry-',
storyMarkers: true,
fullscreen: { btnId: 'trip-map-fullscreen', colSelector: '.home-map-col' },
gpx: { urls: GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'gpx', journeyId: 'trip-journey' },
fit: { padding: 60, maxZoom: 11, singleZoom: 10 }
});
}); // DOMContentLoaded
</script>
<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
{% endblock %}