function formatDate(isoDate) {
const [year, month, day] = isoDate.split('-');
return `${day}/${month}/${year}`;
}
const link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap";
link.rel = "stylesheet";
document.head.appendChild(link);
document.addEventListener("DOMContentLoaded", function () {
let currentPage = 1;
const perPage = 15;
const container = document.getElementById("event-container");
const pagination = document.getElementById("pagination");
function loadEvents(page) {
fetch(`/wp-admin/admin-ajax.php?action=get_sorted_events`)
.then(response => response.json())
.then(events => {
container.innerHTML = "";
container.style.display = "grid";
container.style.gap = "20px";
// Pagination
const start = (page - 1) * perPage;
const end = start + perPage;
const paginatedEvents = events.slice(start, end);
paginatedEvents.forEach(event => {
console.log(event);
const eventDiv = document.createElement("div");
eventDiv.style.padding = "10px";
eventDiv.style.textAlign = "center";
eventDiv.style.position = "relative";
const link = document.createElement("a");
link.href = event.link;
link.style.display = "block";
link.style.textDecoration = "none";
link.style.color = "inherit";
const img = document.createElement("img");
img.src = event.thumbnail;
img.alt = event.title;
img.style.width = "100%";
img.style.height = "200px"; // Taille fixe du carré
img.style.objectFit = "cover";
img.style.objectPosition = `${event.focus_x}% ${event.focus_y}%`;
const title = document.createElement("h3");
title.textContent = event.title;
title.setAttribute("style", "font-family: 'Poppins', sans-serif !important;");
title.style.fontSize = "20px";
title.style.textAlign = "left";
title.style.fontWeight = "700";
const date = document.createElement("p");
if (event.start_date!==event.end_date){
date.textContent = `${formatDate(event.start_date)} - ${formatDate(event.end_date)}`;
}else{
date.textContent = `${formatDate(event.end_date)}`;
}
date.style.background = "rgb(255, 120, 0)";
date.style.width = "100%";
date.style.padding = "3px 0";
date.style.marginTop = "-4px";
date.style.color = "white";
date.style.fontWeight = '600';
date.style.fontSize = '16px';
const category = document.createElement("p");
if (event.location_town!=null){
category.textContent = event.location_town;
}
else{
category.textContent = "Pas de localisations";
}
category.style.color = "#FF7800";
category.style.fontWeight = "700";
category.style.padding = "3px 0";
category.style.fontSize = "17px";
category.style.textAlign = "left";
category.style.paddingTop = "7px";
link.appendChild(img);
link.appendChild(date);
link.appendChild(category);
link.appendChild(title);
eventDiv.appendChild(link);
container.appendChild(eventDiv);
});
// Pagination
pagination.innerHTML = "";
pagination.style.marginTop = "20px";
pagination.style.textAlign = "center";
const totalPages = Math.ceil(events.length / perPage);
for (let i = 1; i {
currentPage = i;
loadEvents(i);
});
pagination.appendChild(btn);
}
// Mettre à jour la mise en page après le chargement
updateGridLayout();
});
}
function updateGridLayout() {
if (window.innerWidth <= 768) {
container.style.gridTemplateColumns = "1fr"; // 1 colonne sur mobile
} else {
container.style.gridTemplateColumns = "repeat(3, 1fr)"; // 3 colonnes sur desktop
}
}
// Écoute le redimensionnement de l'écran
window.addEventListener("resize", updateGridLayout);
loadEvents(currentPage);
});