m038andClaude Fable 5
790c3deb26
The entry-map partial always rendered .feed-map-fullscreen-btn, but the MapLibre init AND the button's click wiring only run when entries exist — so on the home pre-departure state (active trip, no published posts) mobile showed a dead button floating over an empty 40vh map area. Gate the button on the same entries|length condition as the init script; it reappears with the first published post, exactly when it becomes functional. Covers any zero-entry trip page too (shared partial). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0195b3cDdMeize2Mm1FgC2aU
56 lines
3.1 KiB
Twig
56 lines
3.1 KiB
Twig
{#
|
|
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 }}">
|
|
{# Same gate as the init script below: without entries the map never
|
|
initialises and nothing wires the button's click handler, so on
|
|
mobile (the only viewport where it shows) it would float as a dead
|
|
control over an empty map area (home pre-departure state). #}
|
|
{% if entries|length > 0 %}
|
|
<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>
|
|
{% endif %}
|
|
</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 %}
|