refactor(dailies): use shared feed-map partial

2026-06-22 01:37:33 +02:00
parent 320a98893a
commit 857f33be54
1 changed files with 9 additions and 74 deletions
@@ -35,80 +35,15 @@

 {% set trip_page = page.parent() %}

-{% if map_entries|length > 0 %}
-<div class="feed-map-wrap">
-    <div class="feed-map" id="feed-map">
-        <button class="feed-map-fullscreen-btn" id="feed-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>
-    <a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
-</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>
-var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
-{% set _ac = trip_page.header.autoconnect ?? 'on' %}
-var AUTOCONNECT  = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
-
-var feedMap = new maplibregl.Map({
-    container: 'feed-map',
-    style: MapUtils.MAP_STYLE,
-    center: [20, 20],
-    zoom: 2,
-    attributionControl: false
-});
-feedMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
-
-feedMap.on('load', function () {
-    var bounds = new maplibregl.LngLatBounds();
-
-    FEED_ENTRIES.forEach(function (entry, i) {
-        var isLatest = (i === FEED_ENTRIES.length - 1);
-        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
-        bounds.extend(lngLat);
-
-        var el = 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(feedMap); });
-        el.addEventListener('mouseleave', function () { popup.remove(); });
-        el.addEventListener('click', function () { window.location.href = entry.url; });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
-    });
-
-    if (FEED_ENTRIES.length === 1) {
-        feedMap.jumpTo({ center: [parseFloat(FEED_ENTRIES[0].lng), parseFloat(FEED_ENTRIES[0].lat)], zoom: 10 });
-    } else {
-        feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
-    }
-
-    var segments = MapUtils.buildJourneySegments(FEED_ENTRIES, { connectMode: AUTOCONNECT });
-    MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
-});
-</script>
-<script>
-(function() {
-    var fsBtn = document.getElementById('feed-map-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 feedMap !== 'undefined' && feedMap.resize(); }, 50);
-    });
-})();
-</script>
-{% endif %}
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'feed-map',
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}

 <div class="feed-sort-bar">
    <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>