// In script.js jQuery(document).ready(function($) { /** * Inserts the loader element into the grid container if it doesn't already exist. */ function insertLoader() { if ($('.grid-container').length && $('.grid-container').find('.games-loader').length === 0) { $('.grid-container').css('position', 'relative') .append('
'); } else if ($('#games-posts').find('.grid-container').length === 0) { // Handle initial load before the first grid-container is loaded via AJAX $('#games-posts').css('position', 'relative') .append(''); } } /** * Shows the AJAX loader animation. */ function showLoader() { $('.games-loader').addClass('active'); } /** * Hides the AJAX loader animation after a short delay for CSS transition. */ function hideLoader() { // Find the loader within the currently loaded container setTimeout(function() { $('.games-loader').removeClass('active'); }, 100); // fade-out handled by CSS transition } /** * Retrieves selected filters and triggers the main AJAX load for games and counts. * @param {number} page The page number to load. Defaults to 1. */ function loadGames(page = 1) { var categories = []; var tags = []; $('.games-category:checked').each(function() { categories.push($(this).val()); }); $('.games-tag:checked').each(function() { tags.push($(this).val()); }); // Toggle "Clear All" button visibility if (categories.length > 0 || tags.length > 0) { $('#clear-all-filters').show(); } else { $('#clear-all-filters').hide(); } // Show loader before AJAX request insertLoader(); showLoader(); // 1. AJAX call to filter and load games $.post(games_ajax_obj.ajax_url, { action: 'filter_games', categories: categories, tags: tags, page: page }, function(data) { // Replace grid with new content $('#games-posts').html(data); // Re-add loader structure in case it was lost when the grid was replaced insertLoader(); // Fade it out hideLoader(); // Fade in new grid items (must be after the new content is injected) $('#games-posts .grid-item').css({opacity: 0}).animate({opacity: 1}, 400); // 2. AJAX call to update counts $.post(games_ajax_obj.ajax_url, { action: 'update_filter_counts', categories: categories, tags: tags, }, function(response) { try { let counts = JSON.parse(response); // Update category counts $('.games-category').each(function() { let termId = $(this).val(); let newCount = counts.category_counts[termId]; if (newCount !== undefined) { $(this).closest('label').find('.game-count').text(`(${newCount})`); } }); // Update tag counts $('.games-tag').each(function() { let termId = $(this).val(); let newCount = counts.tag_counts[termId]; if (newCount !== undefined) { $(this).closest('label').find('.game-count').text(`(${newCount})`); } }); } catch (e) { console.error('Error parsing filter counts response:', e); } }); }); } // --- Event Handlers --- // Filter change (Category/Tag checkboxes) $('.games-category, .games-tag').on('change', function() { // Always reset to page 1 on filter change loadGames(1); }); // Delegated event handler for 'Clear All' button $(document).on('click', '#clear-all-filters', function(e) { e.preventDefault(); console.log('*** Clear All Filters Clicked & Fired ***'); // Uncheck all filters $('.games-category:checked, .games-tag:checked').prop('checked', false); // Reload games (this will load default results and hide the "Clear All" button inside loadGames) loadGames(1); }); // Individual Active Filter Removal Logic (Delegated since elements are loaded via AJAX) $(document).on('click', '.active-filter-item .filter-remove-btn', function(e) { e.preventDefault(); var $item = $(this).closest('.active-filter-item'); var type = $item.data('type'); var id = $item.data('id'); // Uncheck the corresponding checkbox if (type === 'category') { $('.games-category[value="' + id + '"]').prop('checked', false); } else if (type === 'tag') { $('.games-tag[value="' + id + '"]').prop('checked', false); } // Reload games loadGames(1); }); // Pagination Click Handler (Delegated since links are loaded via AJAX) $(document).on('click', '.games-pagination a', function(e) { e.preventDefault(); var href = $(this).attr('href'); var pageMatch = href.match(/#page-(\d+)/); var page = 1; if (pageMatch) { page = parseInt(pageMatch[1]); } else if ($(this).hasClass('prev')) { page = parseInt($('.games-pagination .current').text()) - 1; } else if ($(this).hasClass('next')) { page = parseInt($('.games-pagination .current').text()) + 1; } loadGames(page); // Smooth scroll to top of grid $('html, body').animate({ scrollTop: $('#games-posts').offset().top - 100 }, 400); }); // Initial load on page load to set the correct state (filters, counts, and 'Clear All' button visibility) loadGames(1); });