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>
2026-07-04 13:42:56 +02:00
parent 19a8fbcbf0
commit e2ba8f413a
3 changed files with 73 additions and 59 deletions
@@ -0,0 +1,49 @@
+{#
+  Entry-map partial — shared by trip.html.twig and home.html.twig (active-trip branch).
+
+  Renders the `.home-map-col` map column plus the thin MapUtils.initEntryMap()
+  invocation. The map engine itself lives in js/map.js (MapUtils.initEntryMap);
+  this partial only supplies markup + a parameterised call. Callers register the
+  map assets (map.css / map.js) themselves via their own {% block map_assets %}.
+
+  The map column always renders (home shows an empty map in pre-departure); the
+  init script only runs when there are entries to plot.
+
+  Required variables (via {% include ... with {...} only %}):
+    map_id            — string: map div id + fullscreen-btn id prefix ('trip-map' | 'home-map')
+    map_global        — string: window global the Map is assigned to ('tripMap' | 'homeMap')
+    entries           — array:  map entries [{lat, lng, slug, title, url, type?, force_connect, ...}]
+    card_prefix       — string: scroll-to card id prefix ('entry-')
+    story_markers     — bool:   render story entries as diamond markers (trip: true, home: false)
+    gpx_urls          — array:  GPX file URLs
+    use_gpx           — bool:   whether to draw GPX tracks
+    autoconnect       — string: journey connect mode ('on' | 'off' | 'manual' | ...)
+    gpx_source_prefix — string: MapLibre GPX source id prefix ('gpx' | 'home-gpx')
+    journey_id        — string: journey layer id ('trip-journey' | 'home-journey')
+#}
+<div class="home-map-col">
+    <div class="home-map" id="{{ map_id }}">
+        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-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>
+
+{% if entries|length > 0 %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    window.{{ map_global }} = MapUtils.initEntryMap({
+        container:    '{{ map_id }}',
+        entries:      {{ entries|json_encode|raw }},
+        cardPrefix:   '{{ card_prefix }}',
+        {% if story_markers %}storyMarkers: true,
+        {% endif %}fullscreen:   { btnId: '{{ map_id }}-fullscreen', colSelector: '.home-map-col' },
+        gpx:          { urls: {{ gpx_urls|json_encode|raw }}, use: {{ use_gpx ? 'true' : 'false' }}, autoconnect: "{{ autoconnect }}", sourcePrefix: '{{ gpx_source_prefix }}', journeyId: '{{ journey_id }}' },
+        fit:          { padding: 60, maxZoom: 11, singleZoom: 10 }
+    });
+}); // DOMContentLoaded
+</script>
+{% endif %}