feat: add shared feed-map partial (dailies + stories)

2026-06-22 01:33:26 +02:00
parent e07fb3a72a
commit 320a98893a
1 changed files with 117 additions and 0 deletions
@@ -0,0 +1,117 @@
+{#
+  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
+
+  Required variables (via {% include ... with {...} only %}):
+    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
+    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
+    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
+    link_href    — string|null: URL for "View full map" link; null/empty hides the link
+    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
+    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
+    show_journey — bool: whether to draw the route connector line between markers
+#}
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+    <div class="feed-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>
+    {% if link_href %}
+    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
+    {% endif %}
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+<script>
+{% set js_suffix = map_id|replace({'-': '_'})|upper %}
+var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
+{% if show_journey %}
+{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
+var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
+{% endif %}
+
+var {{ map_var }} = new maplibregl.Map({
+    container: '{{ map_id }}',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    attributionControl: false
+});
+{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+{{ map_var }}.on('load', function () {
+    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+
+    var bounds = new maplibregl.LngLatBounds();
+    var entries = MAP_ENTRIES_{{ js_suffix }};
+
+    entries.forEach(function (entry, i) {
+        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+
+        el.addEventListener('click', function () {
+            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
+            var mapWrap = document.querySelector('.feed-map-wrap');
+            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                if (!card) { window.location.href = entry.url; return; }
+                window.location.hash = '{{ card_prefix }}' + entry.slug;
+                setTimeout(function () {
+                    card.classList.add('is-highlighted');
+                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+                }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
+    });
+
+    if (entries.length === 1) {
+        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
+    } else {
+        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    {% if show_journey %}
+    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
+    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
+    {% endif %}
+});
+</script>
+<script>
+(function() {
+    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+    var mapWrap = document.querySelector('.feed-map-wrap');
+    if (!fsBtn || !mapWrap) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapWrap.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
+    });
+})();
+</script>
+{% endif %}