Agenda

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); });