intotheeast-com-content/themes/intotheeast/templates/trip.html.twig

{% extends 'partials/base.html.twig' %}

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
{% set stories_page = grav.pages.find(page.route ~ '/stories') %}
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
{% set story_entries = stories_page ? stories_page.children.published() : [] %}

{% set all_items = [] %}
{% for e in journal_entries %}
    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
{% endfor %}
{% set all_items = all_items|sort_by_key('date', 4) %}

{% set journal_count = journal_entries|length %}
{% set story_count = story_entries|length %}

{# Stats computation #}
{% set days_on_road = 0 %}
{% if page.header.date_end is not empty %}
    {% set start_ts = page.header.date_start|date('U') %}
    {% set end_ts = page.header.date_end|date('U') %}
    {% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
{% else %}
    {% set first_ts = null %}
    {% for entry in journal_entries %}
        {% set ts = entry.date|date('U') %}
        {% if first_ts is null or ts < first_ts %}{% set first_ts = ts %}{% endif %}
    {% endfor %}
    {% if first_ts is not null %}
        {% set diff_seconds = "now"|date('U') - first_ts %}
        {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
        {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
    {% endif %}
{% endif %}

{% set seen_lower = [] %}
{% set country_display = [] %}
{% for entry in journal_entries %}
    {% if entry.header.location_country is not empty %}
        {% set lower = entry.header.location_country|trim|lower %}
        {% if lower not in seen_lower %}
            {% set seen_lower = seen_lower|merge([lower]) %}
            {% set country_display = country_display|merge([entry.header.location_country|trim]) %}
        {% endif %}
    {% endif %}
{% endfor %}

{% set seen_city_lower = [] %}
{% set city_display = [] %}
{% for entry in journal_entries %}
    {% if entry.header.location_city is not empty %}
        {% set lower = entry.header.location_city|trim|lower %}
        {% if lower not in seen_city_lower %}
            {% set seen_city_lower = seen_city_lower|merge([lower]) %}
            {% set city_display = city_display|merge([entry.header.location_city|trim]) %}
        {% endif %}
    {% endif %}
{% endfor %}

{% set temp_min = null %}
{% set temp_max = null %}
{% for entry in journal_entries %}
    {% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
        {% set t = entry.header.weather_temp_c %}
        {% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
        {% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% endif %}
    {% endif %}
{% endfor %}

{% set gps_points = [] %}
{% for entry in journal_entries %}
    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
        {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
    {% endif %}
{% endfor %}

{% set gpx_urls = [] %}
{% for name, media in page.media.all %}
    {% if name|split('.')|last == 'gpx' %}
        {% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
    {% endif %}
{% endfor %}
{% set has_gpx = gpx_urls|length > 0 %}

{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'type': item.type,
            'lat': item.page.header.lat|number_format(6, '.', ''),
            'lng': item.page.header.lng|number_format(6, '.', ''),
            'slug': item.page.slug,
            'title': item.page.title,
            'url': item.page.url,
            'force_connect': item.page.header.force_connect ? true : false,
            'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
        }]) %}
    {% endif %}
{% endfor %}

<div class="home-layout">
    <div class="home-map-col">
        <div class="home-map" id="trip-map"></div>
    </div>

    <div class="home-feed-col">
        <div class="home-trip-header">
            <h1 class="home-trip-name">{{ page.title }}</h1>
            {% if page.header.date_start %}
            <p class="trip-dates" style="font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-1) 0 var(--space-2);">
                {{ page.header.date_start|date('d M Y') }}
                {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
            </p>
            {% endif %}
            <span class="home-trip-counts">
                {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
                {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
            </span>
            <div class="trip-filter-bar">
                <div class="trip-filter-group">
                    <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
                    <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
                    <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
                </div>
                <div class="trip-filter-group">
                    <button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
                    {% if has_gpx %}
                    <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
                    {% endif %}
                    <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
                </div>
            </div>
        </div>

        <div id="trip-stats-block" class="trip-stats-block" style="display:none">
            <div class="trip-stats-grid">
                <div class="stat-block">
                    <span class="stat-value">{{ days_on_road }}</span>
                    <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value">{{ journal_count }}</span>
                    <span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value">{{ country_display|length }}</span>
                    <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value">{{ city_display|length }}</span>
                    <span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="stat-distance">—</span>
                    <span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
                </div>
                <div class="stat-block">
                    {% if temp_min is not null %}
                    <span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
                    {% else %}
                    <span class="stat-value">—</span>
                    {% endif %}
                    <span class="stat-label">°C range</span>
                </div>
            </div>
            {% if country_display|length > 0 %}
            <p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
            {% endif %}
            <p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
        </div>

        {% if has_gpx %}
        <div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
            <div class="trip-cycling-header">
                <span class="trip-cycling-icon">🚴</span>
                <span class="trip-cycling-title">Cycling Stats</span>
            </div>
            <div class="trip-cycling-grid">
                <div class="stat-block">
                    <span class="stat-value" id="cyc-distance">—</span>
                    <span class="stat-label">km distance</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-ele-gain">—</span>
                    <span class="stat-label">m ↑ gain</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-ele-loss">—</span>
                    <span class="stat-label">m ↓ loss</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-highest">—</span>
                    <span class="stat-label">m highest</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-lowest">—</span>
                    <span class="stat-label">m lowest</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-moving-time">—</span>
                    <span class="stat-label">moving time</span>
                </div>
                <div class="stat-block">
                    <span class="stat-value" id="cyc-avg-speed">—</span>
                    <span class="stat-label">km/h avg speed</span>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="feed">
            {% if all_items|length > 0 %}
                {% for item in all_items %}
                    {% set entry = item.page %}
                    {% if item.type == 'journal' %}
                        {% include 'partials/entry-journal.html.twig' %}
                    {% else %}
                        {% include 'partials/entry-story.html.twig' %}
                    {% endif %}
                {% endfor %}
            {% else %}
                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
            {% endif %}
            <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
        </div>
    </div>
</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="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<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' }}";

var tripMap = new maplibregl.Map({
    container: 'trip-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2
});

tripMap.on('load', function () {
    if (TRIP_ENTRIES.length === 0) {
        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
        return;
    }

    /* ── Markers + bounds ──────────────────────────────────────── */
    var bounds = new maplibregl.LngLatBounds();

    TRIP_ENTRIES.forEach(function (entry, i) {
        var isLatest = (entry.type !== 'story') && (i === TRIP_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(tripMap); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () {
            var card = document.getElementById('entry-' + entry.slug);
            if (!card) return;
            window.location.hash = 'entry-' + entry.slug;
            setTimeout(function () {
                card.classList.add('is-highlighted');
                setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
            }, 350);
        });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
    });

    /* ── Fit bounds ─────────────────────────────────────────────── */
    if (TRIP_ENTRIES.length === 1) {
        tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
    } else {
        tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
    }

    /* ── GPX tracks + journey segments ─────────────────────────── */
    MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });
});
setTimeout(function () { tripMap.resize(); }, 100);

(function() {
    var filterBtns = document.querySelectorAll('.trip-filter-btn');
    var cards = document.querySelectorAll('[data-type]');
    var filterEmpty = document.getElementById('feed-filter-empty');

    filterBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            filterBtns.forEach(function(b) { b.classList.remove('is-active'); b.setAttribute('aria-pressed', 'false'); });
            btn.classList.add('is-active');
            btn.setAttribute('aria-pressed', 'true');

            var filter = btn.getAttribute('data-filter');
            var visible = 0;

            cards.forEach(function(card) {
                var show = filter === 'all' || card.getAttribute('data-type') === filter;
                card.style.display = show ? '' : 'none';
                if (show) visible++;
            });

            if (filterEmpty) {
                if (visible === 0) {
                    filterEmpty.textContent = filter === 'story'
                        ? 'No stories yet for this trip.'
                        : 'No entries yet.';
                    filterEmpty.style.display = '';
                } else {
                    filterEmpty.style.display = 'none';
                }
            }
        });
    });
})();

(function() {
    var sortBtn = document.getElementById('trip-sort-toggle');
    if (!sortBtn) return;
    var feed = document.querySelector('.feed');
    var emptyMsg = document.getElementById('feed-filter-empty');
    var ascending = true;

    sortBtn.addEventListener('click', function() {
        ascending = !ascending;
        var entries = Array.from(feed.querySelectorAll('[data-type]'));
        entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
        sortBtn.classList.toggle('is-active', !ascending);
    });
})();

var STATS_GPS = {{ gps_points|json_encode|raw }};
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};

function haversineKm(lat1, lng1, lat2, lng2) {
    var R = 6371;
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLng = (lng2 - lng1) * Math.PI / 180;
    var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
            Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
            Math.sin(dLng/2)*Math.sin(dLng/2);
    return R * 2 * Math.asin(Math.sqrt(a));
}

function parseGpxFiles(urls, callback) {
    var pending = urls.length;
    var fileResults = new Array(urls.length);
    if (pending === 0) { callback({ error: 'no files' }); return; }
    urls.forEach(function(url, idx) {
        fetch(url)
            .then(function(r) { return r.text(); })
            .then(function(text) {
                var xml = new DOMParser().parseFromString(text, 'text/xml');
                var trkpts = xml.querySelectorAll('trkpt');
                var pts = [];
                trkpts.forEach(function(pt) {
                    var eleEl = pt.querySelector('ele');
                    var timeEl = pt.querySelector('time');
                    pts.push({
                        lat: parseFloat(pt.getAttribute('lat')),
                        lon: parseFloat(pt.getAttribute('lon')),
                        ele: eleEl ? parseFloat(eleEl.textContent) : NaN,
                        time: timeEl ? timeEl.textContent : null
                    });
                });
                fileResults[idx] = pts;
                pending--;
                if (pending === 0) { computeAndCallback(); }
            })
            .catch(function(err) {
                console.warn('GPX load failed:', url, err);
                fileResults[idx] = [];
                pending--;
                if (pending === 0) { computeAndCallback(); }
            });
    });

    function computeAndCallback() {
        var totalDistance = 0, totalEleGain = 0, totalEleLoss = 0;
        var globalHighest = NaN, globalLowest = NaN, totalMovingTime = 0;

        fileResults.forEach(function(pts) {
            if (!pts || pts.length < 2) return;
            for (var i = 1; i < pts.length; i++) {
                var p0 = pts[i-1], p1 = pts[i];
                var d = haversineKm(p0.lat, p0.lon, p1.lat, p1.lon);
                totalDistance += d;

                if (!isNaN(p0.ele) && !isNaN(p1.ele)) {
                    var dEle = p1.ele - p0.ele;
                    if (dEle > 0) totalEleGain += dEle;
                    if (dEle < 0) totalEleLoss += (-dEle);
                    if (isNaN(globalHighest) || p1.ele > globalHighest) globalHighest = p1.ele;
                    if (isNaN(globalLowest)  || p1.ele < globalLowest)  globalLowest  = p1.ele;
                }

                if (p0.time && p1.time) {
                    var dtHrs = (Date.parse(p1.time) - Date.parse(p0.time)) / 3600000;
                    if (dtHrs > 0) {
                        var speed = d / dtHrs;
                        if (speed >= 1) totalMovingTime += dtHrs;
                    }
                }
            }
            // include first point of each file in elevation range
            if (pts.length > 0 && !isNaN(pts[0].ele)) {
                if (isNaN(globalHighest) || pts[0].ele > globalHighest) globalHighest = pts[0].ele;
                if (isNaN(globalLowest)  || pts[0].ele < globalLowest)  globalLowest  = pts[0].ele;
            }
        });

        var avgSpeed = totalMovingTime > 0 ? totalDistance / totalMovingTime : 0;
        var movHours = Math.floor(totalMovingTime);
        var movMins  = Math.round((totalMovingTime - movHours) * 60);
        if (movMins === 60) { movHours++; movMins = 0; }

        callback({
            distance:   totalDistance,
            eleGain:    totalEleGain,
            eleLoss:    totalEleLoss,
            highest:    globalHighest,
            lowest:     globalLowest,
            movingTime: movHours + ':' + (movMins < 10 ? '0' : '') + movMins,
            avgSpeed:   avgSpeed
        });
    }
}

(function() {
    var distEl = document.getElementById('stat-distance');

    if (HAS_GPX) {
        parseGpxFiles(GPX_URLS, function(result) {
            // Mode A: update distance stat
            if (distEl) {
                distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
            }
            // Populate cycling panel
            function setText(id, val) {
                var el = document.getElementById(id);
                if (el) el.textContent = val;
            }
            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
            setText('cyc-moving-time', result.movingTime || '—');
            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
        });
    } else {
        // Mode B: haversine between entry points
        var total = 0;
        for (var i = 1; i < STATS_GPS.length; i++) {
            total += haversineKm(
                parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
                parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
            );
        }
        if (distEl) {
            distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
        }
    }

    // Stats toggle
    var statsToggle = document.getElementById('trip-stats-toggle');
    var statsBlock  = document.getElementById('trip-stats-block');
    if (statsToggle && statsBlock) {
        statsToggle.addEventListener('click', function() {
            var isOpen = statsBlock.style.display !== 'none';
            statsBlock.style.display = isOpen ? 'none' : '';
            statsToggle.classList.toggle('is-active', !isOpen);
            statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        });
    }

    // Cycling toggle (only present when has_gpx)
    var cycToggle = document.getElementById('trip-cycling-toggle');
    var cycBlock  = document.getElementById('trip-cycling-block');
    if (cycToggle && cycBlock) {
        cycToggle.addEventListener('click', function() {
            var isOpen = cycBlock.style.display !== 'none';
            cycBlock.style.display = isOpen ? 'none' : '';
            cycToggle.classList.toggle('is-active', !isOpen);
            cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        });
    }
})();

/* ── Back to top ─────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('trip-totop');
    if (!btn) return;
    var threshold = window.innerHeight * 0.8;
    var shown = false;
    btn.addEventListener('click', function () {
        history.pushState(null, '', window.location.pathname + window.location.search);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    window.addEventListener('scroll', function () {
        var shouldShow = window.scrollY > threshold;
        if (shouldShow !== shown) {
            shown = shouldShow;
            btn.classList.toggle('is-visible', shown);
        }
    }, { passive: true });
});
</script>

<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>

<script type="module">
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
const lightbox = new PhotoSwipeLightbox({
    gallery: '.pswp-gallery',
    children: 'a.journal-photo-slide',
    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
});
lightbox.on('afterOpen', function () {
    var pswp = lightbox.pswp;
    var keyDir = 0;
    var clearTimer = null;
    function onKey(e) {
        if (e.key === 'ArrowRight') keyDir = 1;
        else if (e.key === 'ArrowLeft') keyDir = -1;
        else keyDir = 0;
    }
    document.addEventListener('keydown', onKey, true);
    pswp.on('change', function () {
        if (!keyDir) return;
        var dir = keyDir;
        keyDir = 0;
        var el = pswp.currSlide && pswp.currSlide.container;
        if (!el) return;
        el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
        el.offsetWidth;
        el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
        clearTimeout(clearTimer);
        clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
    });
    pswp.on('close', function () {
        document.removeEventListener('keydown', onKey, true);
        clearTimeout(clearTimer);
    });
});
lightbox.init();

document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
    var strip     = wrap.querySelector('.journal-photo-strip');
    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
    var expandBtn = wrap.querySelector('.journal-photo-expand');
    var article   = wrap.closest('article');
    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
    var visibleIdx = 0;

    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (!e.isIntersecting) return;
            visibleIdx = slides.indexOf(e.target);
            dots.forEach(function (d) { d.classList.remove('is-active'); });
            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
        });
    }, { root: strip, threshold: 0.5 });
    slides.forEach(function (s) { io.observe(s); });

    if (expandBtn && slides.length) {
        expandBtn.addEventListener('click', function () {
            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
        });
    }
});
</script>
{% endblock %}