init

views/newsPages/newsMain/newsMain.js

@@ -0,0 +1,219 @@
+///// views\newsPage\newsMain\newsMain.js
+// Load footer
+fetch("components/footer/footer.html")
+  .then((response) => response.text())
+  .then((data) => {
+    document.getElementById("footer").innerHTML = data;
+  });
+
+//// NEWS FILTER JS
+document.addEventListener("DOMContentLoaded", function () {
+  // Get all filter buttons and news cards
+  const filterButtons = document.querySelectorAll(".filter-btn");
+  const newsCards = document.querySelectorAll(".news-card");
+
+  // Add click event listeners to each filter button
+  filterButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      // Remove active class from all buttons
+      filterButtons.forEach((btn) => btn.classList.remove("active"));
+
+      // Add active class to clicked button
+      this.classList.add("active");
+
+      // Get the category to filter by (button text)
+      const filterCategory = this.textContent.trim();
+
+      // Show all news cards if "Tất Cả" is selected, otherwise filter
+      if (filterCategory === "Tất Cả") {
+        newsCards.forEach((card) => {
+          card.style.display = "block";
+        });
+      } else {
+        // Filter news cards by category
+        newsCards.forEach((card) => {
+          const cardCategory = card
+            .querySelector(".news-category")
+            .textContent.trim();
+          if (cardCategory === filterCategory) {
+            card.style.display = "block";
+          } else {
+            card.style.display = "none";
+          }
+        });
+      }
+    });
+  });
+
+  // Add click event listeners to pagination buttons
+  const pageButtons = document.querySelectorAll(".page-btn");
+  pageButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      // Remove active class from all page buttons
+      pageButtons.forEach((btn) => btn.classList.remove("active"));
+
+      // Add active class to clicked button
+      this.classList.add("active");
+
+      // In a real application, you would load different news items here
+      // For demonstration, we'll just scroll to top
+      window.scrollTo({
+        top: document.querySelector(".news-container").offsetTop - 100,
+        behavior: "smooth",
+      });
+    });
+  });
+});
+//// END OF NEWS FILTER JS
+
+//// PAGINATION JS
+document.addEventListener("DOMContentLoaded", function () {
+  // Get all filter buttons and news cards
+  const filterButtons = document.querySelectorAll(".filter-btn");
+  const newsCards = document.querySelectorAll(".news-card");
+  const paginationContainer = document.querySelector(".news-pagination");
+
+  // Pagination settings
+  const itemsPerPage = 6;
+  let currentPage = 1;
+  let filteredItems = [...newsCards]; // Start with all items
+
+  // Initialize page
+  function initializePage() {
+    // Clear existing pagination
+    paginationContainer.innerHTML = "";
+
+    // Show items for current page and category filter
+    updateDisplay();
+
+    // Create pagination buttons
+    createPaginationButtons();
+  }
+
+  // Update which items are displayed based on current page and filters
+  function updateDisplay() {
+    // Hide all news items first
+    newsCards.forEach((card) => {
+      card.style.display = "none";
+    });
+
+    // Show only the items for current page
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+
+    filteredItems.slice(startIndex, endIndex).forEach((card) => {
+      card.style.display = "block";
+    });
+
+    // Show "no results" message if needed
+    const noResultsElement = document.querySelector(".no-results");
+    if (noResultsElement) {
+      if (filteredItems.length === 0) {
+        noResultsElement.style.display = "block";
+      } else {
+        noResultsElement.style.display = "none";
+      }
+    }
+  }
+
+  // Create pagination buttons
+  function createPaginationButtons() {
+    const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
+
+    // Previous button
+    if (currentPage > 1) {
+      const prevBtn = document.createElement("button");
+      prevBtn.className = "page-btn";
+      prevBtn.innerHTML = "&lt;"; // < symbol
+      prevBtn.addEventListener("click", () => {
+        currentPage--;
+        updatePage();
+      });
+      paginationContainer.appendChild(prevBtn);
+    }
+
+    // Page number buttons
+    for (let i = 1; i <= totalPages; i++) {
+      const pageBtn = document.createElement("button");
+      pageBtn.className = "page-btn";
+      if (i === currentPage) {
+        pageBtn.classList.add("active");
+      }
+      pageBtn.textContent = i;
+      pageBtn.addEventListener("click", () => {
+        currentPage = i;
+        updatePage();
+      });
+      paginationContainer.appendChild(pageBtn);
+    }
+
+    // Next button
+    if (currentPage < totalPages) {
+      const nextBtn = document.createElement("button");
+      nextBtn.className = "page-btn";
+      nextBtn.innerHTML = "&gt;"; // > symbol
+      nextBtn.addEventListener("click", () => {
+        currentPage++;
+        updatePage();
+      });
+      paginationContainer.appendChild(nextBtn);
+    }
+
+    // If no pages, show a disabled "1" button
+    if (totalPages === 0) {
+      const emptyBtn = document.createElement("button");
+      emptyBtn.className = "page-btn active";
+      emptyBtn.textContent = "1";
+      emptyBtn.disabled = true;
+      paginationContainer.appendChild(emptyBtn);
+    }
+  }
+
+  // Update the page after changing page or filter
+  function updatePage() {
+    updateDisplay();
+
+    // Recreate pagination buttons
+    paginationContainer.innerHTML = "";
+    createPaginationButtons();
+
+    // Scroll to top of news section
+    window.scrollTo({
+      top: document.querySelector(".news-container").offsetTop - 100,
+      behavior: "smooth",
+    });
+  }
+
+  // Add click event listeners to each filter button
+  filterButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      // Remove active class from all buttons
+      filterButtons.forEach((btn) => btn.classList.remove("active"));
+      // Add active class to clicked button
+      this.classList.add("active");
+
+      // Get the category to filter by (button text)
+      const filterCategory = this.textContent.trim();
+
+      // Filter the items based on category
+      if (filterCategory === "Tất Cả") {
+        filteredItems = [...newsCards];
+      } else {
+        filteredItems = [...newsCards].filter((card) => {
+          const cardCategory = card
+            .querySelector(".news-category")
+            .textContent.trim();
+          return cardCategory === filterCategory;
+        });
+      }
+
+      // Reset to first page when filter changes
+      currentPage = 1;
+      updatePage();
+    });
+  });
+
+  // Initialize the page when the DOM is loaded
+  initializePage();
+});
+//// PAGINATION JS