feat: add content feed with AJAX filtering and load more on front page

2026-04-03 01:13:09 +05:00
parent 82105c6f09
commit 8f1f001085
7 changed files with 484 additions and 1 deletions
@@ -0,0 +1,123 @@
+/**
+ * БИТ.WMS Child Theme — js/ajax-filter.js
+ *
+ * Handles filter button clicks and "Load more" for the content feed section.
+ * Communicates with the WordPress AJAX handler (bitwms_ajax_filter_handler).
+ *
+ * Global: bitwmsAjax  { url: string, nonce: string }
+ */
+
+( function () {
+    'use strict';
+
+    document.addEventListener( 'DOMContentLoaded', function () {
+        var filterBar   = document.querySelector( '.filter-bar' );
+        var contentGrid = document.getElementById( 'content-grid' );
+        var loadMoreBtn = document.getElementById( 'load-more-btn' );
+
+        if ( ! filterBar || ! contentGrid ) {
+            return;
+        }
+
+        var currentFilter = 'all';
+        var currentPage   = 1;
+        var isLoading     = false;
+
+        // ---------------------------------------------------------------
+        // Filter button click
+        // ---------------------------------------------------------------
+        filterBar.addEventListener( 'click', function ( e ) {
+            var btn = e.target.closest( '.filter-bar__btn' );
+            if ( ! btn ) return;
+
+            var filter = btn.getAttribute( 'data-filter' );
+            if ( filter === currentFilter ) return;
+
+            // Update active state.
+            filterBar.querySelectorAll( '.filter-bar__btn' ).forEach( function ( b ) {
+                b.classList.remove( 'filter-bar__btn--active' );
+                b.setAttribute( 'aria-selected', 'false' );
+            } );
+            btn.classList.add( 'filter-bar__btn--active' );
+            btn.setAttribute( 'aria-selected', 'true' );
+
+            currentFilter = filter;
+            currentPage   = 1;
+
+            loadContent( false );
+        } );
+
+        // ---------------------------------------------------------------
+        // Load more button click
+        // ---------------------------------------------------------------
+        if ( loadMoreBtn ) {
+            loadMoreBtn.addEventListener( 'click', function () {
+                if ( isLoading ) return;
+                currentPage += 1;
+                loadContent( true );
+            } );
+        }
+
+        // ---------------------------------------------------------------
+        // loadContent( append )
+        //   append === false: replace grid content
+        //   append === true:  append to existing grid content
+        // ---------------------------------------------------------------
+        function loadContent( append ) {
+            if ( isLoading ) return;
+            isLoading = true;
+
+            if ( loadMoreBtn ) {
+                loadMoreBtn.disabled = true;
+                loadMoreBtn.textContent = loadMoreBtn.getAttribute( 'data-loading' ) || 'Загрузка…';
+            }
+
+            var formData = new FormData();
+            formData.append( 'action',    'bitwms_filter' );
+            formData.append( 'nonce',     bitwmsAjax.nonce );
+            formData.append( 'post_type', currentFilter );
+            formData.append( 'page',      currentPage );
+
+            fetch( bitwmsAjax.url, {
+                method: 'POST',
+                body:   formData,
+            } )
+                .then( function ( response ) {
+                    return response.json();
+                } )
+                .then( function ( data ) {
+                    if ( ! data.success ) return;
+
+                    var html    = data.data.html;
+                    var hasMore = data.data.has_more;
+
+                    if ( append ) {
+                        contentGrid.insertAdjacentHTML( 'beforeend', html );
+                    } else {
+                        contentGrid.innerHTML = html || '<p>Материалы не найдены.</p>';
+                    }
+
+                    // Show/hide load-more button.
+                    if ( loadMoreBtn ) {
+                        if ( hasMore ) {
+                            loadMoreBtn.style.display = '';
+                            loadMoreBtn.disabled      = false;
+                            loadMoreBtn.textContent   = 'Загрузить ещё';
+                        } else {
+                            loadMoreBtn.style.display = 'none';
+                        }
+                    }
+                } )
+                .catch( function ( err ) {
+                    console.error( 'bitwms filter error:', err );
+                    if ( loadMoreBtn ) {
+                        loadMoreBtn.disabled    = false;
+                        loadMoreBtn.textContent = 'Загрузить ещё';
+                    }
+                } )
+                .finally( function () {
+                    isLoading = false;
+                } );
+        }
+    } );
+} )();