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

{% extends 'default.html.twig' %}

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
{% set journal_entries = page.collection() %}
{% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
{% 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.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
{% endfor %}

{# page.collection() returns date-descending; reverse to match ascending default on trip page. #}
{% set all_items = all_items|reverse %}

{# Collect GPS entries for mini-map #}
{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'lat': item.page.header.lat,
            'lng': item.page.header.lng,
            'title': item.page.title,
            'slug': item.page.slug,
            '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 %}

{% 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 %}

<div class="feed-sort-bar">
    <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
</div>
<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 %}
</div>

<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();

/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
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>
<script>
(function() {
    var sortBtn = document.getElementById('feed-sort-toggle');
    if (!sortBtn) return;
    var feed = document.querySelector('.feed');
    var ascending = true;

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