tangente-bloques-en-transicion/bloques-transicion/assets/js/frontend.js

/**
 * Scripts del frontend - Bloques en Transición
 */

(function($) {
    'use strict';

    // Inicializar cuando el DOM esté listo
    $(document).ready(function() {
        initFilters();
        initLoadMore();
        initSearch();
    });

    /**
     * Inicializar filtros tipo botonera
     */
    function initFilters() {
        $('.bloques-filters').each(function() {
            const $filters = $(this);
            const containerId = $filters.data('container');
            const $container = $('#' + containerId);
            const $itemsContainer = $container.find('.bloques-items');

            // Estado de filtros activos
            let activeFilters = {
                iniciativa: '',
                linea_trabajo: ''
            };

            // Click en botones de filtro
            $filters.on('click', '.bloques-filter-btn', function() {
                const $btn = $(this);
                const taxonomy = $btn.data('taxonomy');
                const value = $btn.data('value');

                // Actualizar estado activo en botones del mismo grupo
                $btn.closest('.bloques-filter-buttons')
                    .find('.bloques-filter-btn')
                    .removeClass('active');
                $btn.addClass('active');

                // Actualizar filtros activos
                activeFilters[taxonomy] = value;

                // Aplicar filtros
                applyFilters($container, $itemsContainer, activeFilters);
            });
        });
    }

    /**
     * Aplicar filtros via AJAX
     */
    function applyFilters($container, $itemsContainer, filters) {
        const type = $container.data('type');
        const widget = $container.data('widget');
        const upcoming = $container.data('upcoming');
        const search = $container.find('.bloques-search-input').val() || '';

        // Mostrar loading
        $itemsContainer.addClass('bloques-loading');

        $.ajax({
            url: bloquesData.ajaxUrl,
            type: 'POST',
            data: {
                action: 'bloques_filter',
                nonce: bloquesData.nonce,
                type: type,
                iniciativa: filters.iniciativa || '',
                linea_trabajo: filters.linea_trabajo || '',
                search: search,
                widget: widget,
                upcoming: upcoming
            },
            success: function(response) {
                if (response.success) {
                    $itemsContainer.html(response.data.html);
                    
                    // Actualizar contador
                    const $resultsNumber = $container.find('.bloques-results-number');
                    const $resultsLabel = $container.find('.bloques-results-label');
                    
                    if ($resultsNumber.length) {
                        $resultsNumber.text(response.data.count);
                    }
                    if ($resultsLabel.length) {
                        $resultsLabel.text(response.data.label);
                    }

                    // Ocultar botón "Ver más" cuando hay filtros activos
                    const hasActiveFilters = filters.iniciativa || filters.linea_trabajo || search;
                    $container.find('.bloques-load-more-wrapper').toggle(!hasActiveFilters);

                    // Resetear offset
                    $container.data('offset', $container.data('limit'));

                    // Animar entrada
                    animateItems($itemsContainer);
                }
            },
            error: function() {
                console.error('Error al filtrar contenido');
            },
            complete: function() {
                $itemsContainer.removeClass('bloques-loading');
            }
        });
    }

    /**
     * Inicializar búsqueda con debounce
     */
    function initSearch() {
        let searchTimeout;

        $('.bloques-search-input').on('input', function() {
            const $input = $(this);
            const $filters = $input.closest('.bloques-filters');
            const containerId = $filters.data('container');
            const $container = $('#' + containerId);
            const $itemsContainer = $container.find('.bloques-items');

            // Obtener filtros activos
            const activeFilters = {
                iniciativa: $filters.find('.bloques-filter-btn[data-taxonomy="iniciativa"].active').data('value') || '',
                linea_trabajo: $filters.find('.bloques-filter-btn[data-taxonomy="linea_trabajo"].active').data('value') || ''
            };

            // Debounce
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                applyFilters($container, $itemsContainer, activeFilters);
            }, 300);
        });
    }

    /**
     * Inicializar botón "Ver más"
     */
    function initLoadMore() {
        $(document).on('click', '.bloques-btn-load-more', function() {
            const $btn = $(this);
            const containerId = $btn.data('container');
            const $container = $('#' + containerId);
            const $itemsContainer = $container.find('.bloques-items');

            const type = $container.data('type');
            const widget = $container.data('widget');
            const limit = parseInt($container.data('limit')) || 9;
            const offset = parseInt($container.data('offset')) || 0;
            const total = parseInt($container.data('total')) || 0;
            const upcoming = $container.data('upcoming');

            // Obtener filtros activos si existen
            const $filters = $container.find('.bloques-filters');
            let iniciativa = '';
            let linea = '';

            if ($filters.length) {
                iniciativa = $filters.find('.bloques-filter-btn[data-taxonomy="iniciativa"].active').data('value') || '';
                linea = $filters.find('.bloques-filter-btn[data-taxonomy="linea_trabajo"].active').data('value') || '';
            }

            // Mostrar loading
            $btn.prop('disabled', true).text('Cargando...');

            $.ajax({
                url: bloquesData.ajaxUrl,
                type: 'POST',
                data: {
                    action: 'bloques_load_more',
                    nonce: bloquesData.nonce,
                    type: type,
                    offset: offset,
                    limit: limit,
                    widget: widget,
                    iniciativa: iniciativa,
                    linea_trabajo: linea,
                    upcoming: upcoming
                },
                success: function(response) {
                    if (response.success) {
                        // Añadir nuevos items
                        $itemsContainer.append(response.data.html);

                        // Actualizar offset
                        $container.data('offset', response.data.new_offset);

                        // Ocultar botón si no hay más
                        if (!response.data.has_more) {
                            $btn.closest('.bloques-load-more-wrapper').fadeOut();
                        }

                        // Animar nuevos items
                        animateItems($itemsContainer.find('.bloques-card:gt(' + (offset - 1) + '), .bloques-item:gt(' + (offset - 1) + ')'));
                    }
                },
                error: function() {
                    console.error('Error al cargar más contenido');
                },
                complete: function() {
                    $btn.prop('disabled', false).html('Ver más <span class="bloques-arrow">→</span>');
                }
            });
        });
    }

    /**
     * Animación de entrada para items
     */
    function animateItems($container) {
        const $items = $container.find('.bloques-card, .bloques-item, .bloques-novedad-item, .bloques-agenda-item');
        
        $items.each(function(index) {
            const $item = $(this);
            $item.css({
                'opacity': 0,
                'transform': 'translateY(20px)'
            });
            
            setTimeout(function() {
                $item.css({
                    'opacity': 1,
                    'transform': 'translateY(0)',
                    'transition': 'opacity 0.3s ease, transform 0.3s ease'
                });
            }, index * 50);
        });
    }

    // Exponer funciones públicas
    window.BloquesTransicion = {
        initFilters: initFilters,
        initLoadMore: initLoadMore,
        applyFilters: applyFilters,
        animateItems: animateItems
    };

})(jQuery);