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:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user