document.addEventListener(„DOMContentLoaded”, function() {
const filterButtons = document.querySelectorAll(„.filter-container img, .wp-block-gutenkit-advanced-image”);
const resetButton = document.querySelector(„.reset-btn”);
const items = document.querySelectorAll(„.item”);
const filterContainer = document.querySelector(„.filter-container”);
const categoryText = document.getElementById(„category-text”); // NEW: Category text element
filterButtons.forEach(button => {
button.addEventListener(„click”, function() {
const filter = this.getAttribute(„data-filter”) || this.dataset.filter;
console.log(„Filter clicked:”, filter); // Debugging
// Apply filtering – Only blur non-matching items
items.forEach(item => {
if (item.classList.contains(`project-${filter}`)) {
item.classList.remove(„blurred”); // Show matching items
} else {
item.classList.add(„blurred”); // Blur only unmatched items
}
});
// Hide the filtering container
filterContainer.style.opacity = „0”;
filterContainer.style.pointer-events = „none”; // Prevent interaction
// Show Reset Button & Update Category Text
resetButton.style.display = „block”;
categoryText.textContent = filter.charAt(0).toUpperCase() + filter.slice(1); // NEW: Capitalize first letter
categoryText.style.display = „block”; // NEW: Show category text
});
});
// Reset Button Functionality
resetButton.addEventListener(„click”, function() {
console.log(„Reset clicked”);
// Remove blur from all items
items.forEach(item => item.classList.remove(„blurred”));
// Show filtering container again
filterContainer.style.opacity = „1”;
filterContainer.style.pointer-events = „auto”; // Restore interaction
// Hide Reset Button & Category Text
resetButton.style.display = „none”;
categoryText.style.display = „none”; // NEW: Hide category text
});
});