thalim-theme/js/agendaView.js

(function () {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        var toggleBtn    = document.querySelector('.agenda-toggle-btn');
        var gridSections = document.getElementById('grid-sections');
        var agendaEl     = document.getElementById('agenda-view');
        if (!toggleBtn || !agendaEl) return;

        var swiper        = null;
        var agendaPage    = 0;
        var agendaDone    = false;
        var agendaLoading = false;
        var swiperWrapper = document.getElementById('agenda-swiper-wrapper');
        var agendaSpinner = document.getElementById('agenda-spinner');

        var categoryId      = agendaEl.dataset.category        || '';
        var includeChildren = agendaEl.dataset.includeChildren || '0';
        var axe             = agendaEl.dataset.axe             || '';
        var dateFrom        = agendaEl.dataset.dateFrom        || '';
        var dateTo          = agendaEl.dataset.dateTo          || '';

        function showAgenda() {
            if (gridSections) gridSections.style.display = 'none';
            agendaEl.classList.add('is-active');
            toggleBtn.innerHTML =
                '<i class="iconoir-view-grid"></i>' +
                (agendaViewData.lang === 'en' ? 'Switch to grid view' : 'Passer à la vue grille');
            if (!swiper) {
                loadMoreAgenda(function (data) {
                    var todayOffset = Math.max(0, ((data && data.today_offset) || 0) - 1);
                    var anchorPage  = Math.ceil((todayOffset + 1) / 12);
                    if (anchorPage > 1) {
                        chainLoadPages(2, anchorPage, function () {
                            initSwiper(todayOffset);
                        });
                    } else {
                        initSwiper(todayOffset);
                    }
                });
            }
        }

        function showGrid() {
            agendaEl.classList.remove('is-active');
            if (gridSections) gridSections.style.display = '';
            toggleBtn.innerHTML =
                '<i class="iconoir-calendar"></i>' +
                (agendaViewData.lang === 'en' ? 'Switch to agenda view' : 'Passer à la vue agenda');
        }

        function initSwiper(initialSlide) {
            swiper = new Swiper(agendaEl.querySelector('.agenda-swiper'), {
                slidesPerView: 1.2,
                spaceBetween: 20,
                initialSlide: initialSlide || 0,
                navigation: {
                    nextEl: agendaEl.querySelector('.agenda-swiper-prev'),
                    prevEl: agendaEl.querySelector('.agenda-swiper-next'),
                },
                breakpoints: {
                    640:  { slidesPerView: 2,   spaceBetween: 24 },
                    1024: { slidesPerView: 3,   spaceBetween: 32 },
                },
                on: {
                    reachEnd: function () {
                        if (!agendaDone) loadMoreAgenda();
                    },
                },
            });
            swiper.changeLanguageDirection('rtl');
        }

        function chainLoadPages(fromPage, toPage, callback) {
            if (fromPage > toPage) { callback(); return; }
            loadMoreAgenda(function () {
                chainLoadPages(fromPage + 1, toPage, callback);
            });
        }

        function loadMoreAgenda(callback) {
            if (agendaLoading || agendaDone) return;
            agendaLoading = true;
            agendaPage++;
            agendaSpinner.style.display = 'flex';

            var data = new FormData();
            data.append('action', 'load_more_agenda');
            data.append('page',   agendaPage);
            data.append('nonce',  agendaViewData.nonce);
            data.append('lang',   agendaViewData.lang);
            if (categoryId)           data.append('category',          categoryId);
            if (includeChildren==='1') data.append('include_children', '1');
            if (axe)                  data.append('axe',              axe);
            if (dateFrom)             data.append('date_from',        dateFrom);
            if (dateTo)               data.append('date_to',          dateTo);

            fetch(agendaViewData.ajaxUrl, { method: 'POST', body: data })
                .then(function (r) { return r.json(); })
                .then(function (result) {
                    agendaSpinner.style.display = 'none';
                    agendaLoading = false;
                    if (result.success && result.data.html) {
                        var tmp = document.createElement('div');
                        tmp.innerHTML = result.data.html;
                        Array.from(tmp.children).forEach(function (slide) {
                            if (swiper) {
                                swiper.appendSlide(slide.outerHTML);
                            } else {
                                swiperWrapper.appendChild(slide);
                            }
                        });
                        if (swiper) swiper.update();
                        if (callback) callback(result.data);
                    } else {
                        agendaDone = true;
                        if (callback) callback(result.data);
                    }
                })
                .catch(function () {
                    agendaSpinner.style.display = 'none';
                    agendaLoading = false;
                });
        }

        toggleBtn.addEventListener('click', function (e) {
            e.preventDefault();
            if (agendaEl.classList.contains('is-active')) {
                var url = new URL(window.location.href);
                url.searchParams.delete('view');
                history.pushState({}, '', url.toString());
                showGrid();
            } else {
                var url = new URL(window.location.href);
                url.searchParams.set('view', 'agenda');
                history.pushState({}, '', url.toString());
                showAgenda();
            }
        });

        // Initial state driven by server-side class
        if (agendaEl.classList.contains('is-active')) {
            showAgenda();
        }
    });
}());