https://corporate.lundsandbyerlys.com/wp-content/themes/lunds-and-byerlys-theme/includes/js/news.js?ver=7.1.2

1document.addEventListener('DOMContentLoaded', function () {
2  // Set category 'all' button as active on page load
3  const allCategoryButton = document.querySelector(
4    '.category-button[data-category="all-news"]'
5  );
6  allCategoryButton.classList.add('active');
7
8  // Fetch all posts on page load
9  fetchPostsByCategory('all-news');
10
11  // Event listeners for category buttons
12  document.querySelectorAll('.category-button').forEach(function (button) {
13    button.addEventListener('click', function () {
14      // Remove .active class from all category buttons
15      document.querySelectorAll('.category-button').forEach(function (btn) {
16        btn.classList.remove('active');
17      });
18      // Add .active class to the clicked category button
19      this.classList.add('active');
20      // Clear active state of tag buttons
21      document.querySelectorAll('.tag-button').forEach(function (btn) {
22        btn.classList.remove('active');
23      });
24      var category = this.getAttribute('data-category');
25      fetchPostsByCategory(category);
26    });
27  });
28
29  // Function to fetch posts by category
30  function fetchPostsByCategory(category, page = 1) {
31    const data = new FormData();
32    data.append('action', 'fetch_posts_by_category');
33    data.append('category', category);
34    data.append('paged', page);
35
36    fetchPosts(data);
37  }
38
39  // Function to fetch posts for a specific page
40  function fetchPostsByPage(page) {
41    const data = new FormData();
42    data.append('action', 'fetch_posts_by_page');
43    data.append('page', page);
44    data.append('category', currentCategory);
45    data.append('tag', currentTag);
46
47    fetchPosts(data);
48  }
49
50  // Function to fetch posts
51  function fetchPosts(data) {
52    fetch(news_ajax_object.ajax_url, {
53      method: 'POST',
54      body: data,
55    })
56      .then(function (response) {
57        if (!response.ok) {
58          throw new Error('Network response was not ok');
59        }
60        return response.json(); // Parse response as JSON
61      })
62      .then(function (data) {
63        // Update content with received posts HTML
64        document.getElementById('news__content').innerHTML = data.posts_html;
65
66        // Create pagination buttons
67        createPaginationButtons(data.total_pages, data.current_page);
68      })
69      .catch(function (error) {
70        console.error('Fetch Error:', error);
71      });
72  }
73
74  // Function to fetch posts for a specific page
75  function fetchPostsByPage(page) {
76    const activeCategoryButton = document.querySelector(
77      '.category-button.active'
78    );
79    const activeTagButton = document.querySelector('.tag-button.active');
80
81    let currentCategory = '';
82    let currentTag = '';
83
84    if (activeCategoryButton) {
85      currentCategory = activeCategoryButton.getAttribute('data-category');
86    }
87    if (activeTagButton) {
88      currentTag = activeTagButton.getAttribute('data-tag');
89    }
90
91    if (currentCategory === 'all' && currentTag === '') {
92      fetchPostsByCategory('all', page);
93    } else if (currentCategory === 'all' && currentTag !== '') {
94      fetchPostsByTag(currentTag, page);
95    } else if (currentCategory !== '') {
96      fetchPostsByCategory(currentCategory, page);
97    } else if (currentTag !== '') {
98      fetchPostsByTag(currentTag, page);
99    }
100  }
101
102  // Create pagination buttons
103  function createPaginationButtons(totalPages, currentPage) {
104    const paginationContainer = document.getElementById(
105      'news-pagination-container'
106    );
107    paginationContainer.innerHTML = '';
108
109    const numPagesToShow = 1; // Number of page numbers to show after the current page
110
111    // Function to add a button for a page number or ellipsis
112    function addButton(page, isActive = false) {
113      const button = document.createElement('button');
114      button.textContent = page;
115      button.classList.add('pagination-button');
116      if (isActive) {
117        button.classList.add('active');
118      }
119      button.addEventListener('click', () => {
120        fetchPostsByPage(page);
121      });
122      paginationContainer.appendChild(button);
123    }
124
125    // Function to add arrow buttons
126    function addArrowButton(iconClass, onClickFunction) {
127      const button = document.createElement('button');
128      button.innerHTML = `<span class="dashicons ${iconClass}"></span>`;

129      button.classList.add('pagination-button', 'arrow-button');
130      button.addEventListener('click', onClickFunction);
131      paginationContainer.appendChild(button);
132    }
133
134    // Helper function to add ellipsis
135    function addEllipsis() {
136      const ellipsis = document.createElement('span');
137      ellipsis.textContent = '...';
138      paginationContainer.appendChild(ellipsis);
139    }
140
141    // When to show previous arrow button
142    if (currentPage > 1) {
143      addArrowButton('dashicons-arrow-left-alt', () => {
144        fetchPostsByPage(currentPage - 1);
145      });
146    }
147
148    // Show current page number
149    addButton(currentPage, true);
150
151    // Show page numbers after the current page
152    let lastPageDisplayed = currentPage; // Keep track of the last page number displayed
153    for (
154      let i = currentPage + 1;
155      i <= Math.min(currentPage + numPagesToShow, totalPages);
156      i++
157    ) {
158      if (i <= totalPages) {
159        addButton(i);
160        lastPageDisplayed = i; // Update the last page number displayed
161      }
162    }
163
164    // Add ellipsis if there are more pages after the current page
165    if (lastPageDisplayed < totalPages - 1) {
166      addEllipsis();
167    }
168
169    // Show last page number
170    if (totalPages > 1 && lastPageDisplayed < totalPages) {
171      addButton(totalPages);
172    }
173
174    // Show next arrow button
175    if (currentPage < totalPages) {
176      addArrowButton('dashicons-arrow-right-alt', () => {
177        fetchPostsByPage(currentPage + 1);
178      });
179    }
180
181    // Get all elements with the class name "pagination-button"
182    function setupPaginationButtons() {
183      const paginationButtons = document.querySelectorAll('.pagination-button');
184
185      // Attach click event listener to each pagination button
186      paginationButtons.forEach(function (button) {
187        button.addEventListener('click', function () {
188          const blogSearch = document.querySelector('.news__container');
189          if (blogSearch) {
190            const offsetTop =
191              blogSearch.getBoundingClientRect().top + window.scrollY - 110;
192            window.scrollTo({ top: offsetTop, behavior: 'smooth' });
193          }
194        });
195      });
196    }
197
198    // Call the setupPaginationButtons function to set up event listeners
199    setupPaginationButtons();
200
201    // Helper function to add ellipsis
202    function addEllipsis() {
203      const ellipsis = document.createElement('span');
204      ellipsis.textContent = '...';
205      paginationContainer.appendChild(ellipsis);
206    }
207  }
208});