Chargement des actualités locales...
.actualites-locales-liste {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 200px;
position: relative;
overflow: visible;
transition: min-height 0.3s ease;
}.activities-columns {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 30px;
width: 100%;
position: relative;
overflow: visible;
transition: all 0.3s ease;
}.activity-column {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e5e9;
transition: all 0.3s ease;
flex: 1;
min-width: 280px;
margin-bottom: 25px;
word-wrap: break-word;
overflow-wrap: break-word;
min-height: 150px;
position: relative;
box-sizing: border-box;
}.activity-column:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}.columns-1 .activity-column {
flex-basis: calc(100% - 0px);
max-width: calc(100% - 0px);
}.columns-2 .activity-column {
flex-basis: calc(50% - 12.5px);
max-width: calc(50% - 12.5px);
}.columns-3 .activity-column {
flex-basis: calc(33.333% - 16.67px);
max-width: calc(33.333% - 16.67px);
}.activities-row {
display: flex;
flex-wrap: nowrap;
gap: 25px;
margin-bottom: 25px;
width: 100%;
min-height: fit-content;
overflow: visible;
box-sizing: border-box;
}.activity-header {
margin-bottom: 20px;
}.activity-title {
margin: 0;
color: #2c3e50;
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 10px;
word-break: break-word;
line-height: 1.3;
}.localities-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}.locality-item {
margin-bottom: 12px;
padding: 0;
width: 100%;
box-sizing: border-box;
}.locality-link {
display: block;
padding: 12px 15px;
background: #f8f9fa;
border-radius: 8px;
text-decoration: none;
color: #2c3e50;
font-weight: 500;
font-size: 15px;
transition: all 0.3s ease;
border-left: 4px solid transparent;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.4;
width: 100%;
box-sizing: border-box;
}/* Couleur par défaut (fallback) */
.locality-link:hover {
background: #007cba;
color: white;
transform: translateX(5px);
border-left-color: #007cba;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}/* Utilisation de la variable CSS injectée par le PHP */
.locality-link:hover {
background: var(--couleur-principale, #007cba) !important;
color: white;
transform: translateX(5px);
border-left-color: var(--couleur-principale, #007cba) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}.no-actualites {
text-align: center;
padding: 50px 20px;
background: #f8f9fa;
border-radius: 12px;
color: #6c757d;
width: 100%;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}#loading-message {
text-align: center;
padding: 20px;
color: #6c757d;
width: 100%;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}@media (max-width: 768px) {
.activities-columns {
flex-direction: column;
}
.activities-row {
flex-direction: column;
gap: 20px;
}
.activity-column {
flex-basis: 100% !important;
max-width: 100% !important;
min-width: auto;
margin-bottom: 20px;
padding: 20px;
}
.activity-title {
font-size: 18px;
}
}@media (max-width: 480px) {
.actualites-locales-liste {
padding: 10px;
}
.activity-column {
padding: 15px;
min-height: 120px;
}
.locality-link {
padding: 10px 12px;
font-size: 14px;
}
}.activity-column {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
will-change: opacity, transform;
}.activity-column:nth-child(1) { animation-delay: 0.1s; }
.activity-column:nth-child(2) { animation-delay: 0.2s; }
.activity-column:nth-child(3) { animation-delay: 0.3s; }
.activity-column:nth-child(4) { animation-delay: 0.4s; }
.activity-column:nth-child(5) { animation-delay: 0.5s; }@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}.actualites-loading {
min-height: 200px;
}.actualites-loaded {
min-height: auto;
}/**
* Echappe les caractères HTML spéciaux pour éviter les injections et erreurs JS/HTML.
*/
function escapeHTML(str) {
return String(str)
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}document.addEventListener('DOMContentLoaded', function() {
// Attendre que les variables globales soient disponibles
setTimeout(function() {
loadActulocPages();
}, 100);
});function loadActulocPages() {
const container = document.getElementById('actualites-container');
const loadingMessage = document.getElementById('loading-message');
const wrapper = document.getElementById('actualites-wrapper');
wrapper.classList.add('actualites-loading');
// Appliquer la couleur dynamique si disponible
applyDynamicColors();
const formData = new FormData();
formData.append('action', 'get_actuloc_pages_frontend');
fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
loadingMessage.style.display = 'none';
if (data.success && data.data.pages.length > 0) {
const activitiesGroups = {};
data.data.pages.forEach(page => {
if (!activitiesGroups[page.activity]) {
activitiesGroups[page.activity] = [];
}
activitiesGroups[page.activity].push(page);
});
const activities = Object.keys(activitiesGroups);
const totalActivities = activities.length;
const distribution = calculateColumnDistribution(totalActivities);
let html = '';
let currentIndex = 0;
distribution.forEach(columnsInRow => {
html += `
`;
for (let i = 0; i < columnsInRow && currentIndex < totalActivities; i++) {
const activity = activities[currentIndex];
const pages = activitiesGroups[activity];
html += `
`;
currentIndex++;
}
html += '
';
});
container.innerHTML = html;
// Réappliquer la couleur dynamique après injection du HTML
setTimeout(() => {
applyDynamicColors();
wrapper.classList.remove('actualites-loading');
wrapper.classList.add('actualites-loaded');
triggerDiviResize();
}, 100);
} else {
container.innerHTML = '
Aucune actualité locale n\'a été trouvée pour le moment.
';
setTimeout(() => {
wrapper.classList.remove('actualites-loading');
wrapper.classList.add('actualites-loaded');
triggerDiviResize();
}, 100);
}
})
.catch(error => {
loadingMessage.style.display = 'none';
container.innerHTML = '
Erreur lors du chargement des actualités.
';
console.error('Erreur:', error);
setTimeout(() => {
wrapper.classList.remove('actualites-loading');
wrapper.classList.add('actualites-loaded');
triggerDiviResize();
}, 100);
});
}/**
* Applique la couleur dynamique depuis les tags globaux
*/
function applyDynamicColors() {
// Méthode 1 : Utiliser les variables JavaScript injectées
if (typeof window.globalTags !== 'undefined' && window.globalTags.color) {
const color = window.globalTags.color;
// Créer ou mettre à jour les styles dynamiques
let dynamicStyle = document.getElementById('dynamic-hover-styles');
if (!dynamicStyle) {
dynamicStyle = document.createElement('style');
dynamicStyle.id = 'dynamic-hover-styles';
document.head.appendChild(dynamicStyle);
}
// Injecter les styles avec la vraie couleur
dynamicStyle.textContent = `
.locality-link:hover {
background: ${color} !important;
border-left-color: ${color} !important;
}
`;
console.log('Couleur appliquée depuis globalTags:', color);
}
// Méthode 2 : Fallback - vérifier si la variable CSS est disponible
else {
const testElement = document.createElement('div');
testElement.style.display = 'none';
document.body.appendChild(testElement);
const computedColor = getComputedStyle(testElement).getPropertyValue('--couleur-principale');
if (computedColor && computedColor.trim() !== '') {
console.log('Couleur disponible via CSS variable:', computedColor.trim());
} else {
console.log('Variables CSS pas encore chargées, utilisation de la couleur par défaut');
}
document.body.removeChild(testElement);
}
}function calculateColumnDistribution(totalColumns) {
const distribution = [];
let remaining = totalColumns;
while (remaining > 0) {
if (remaining >= 3) {
distribution.push(3);
remaining -= 3;
} else if (remaining === 2) {
distribution.push(2);
remaining -= 2;
} else {
distribution.push(1);
remaining -= 1;
}
}
return distribution;
}function triggerDiviResize() {
if (typeof window.dispatchEvent === 'function') {
window.dispatchEvent(new Event('resize'));
}
if (typeof window.et_pb_init_modules === 'function') {
setTimeout(() => {
window.et_pb_init_modules();
}, 200);
}
if (typeof jQuery !== 'undefined' && jQuery(document).data('events')) {
jQuery(window).trigger('resize');
jQuery(document).trigger('et_pb_after_init_modules');
}
const wrapper = document.getElementById('actualites-wrapper');
if (wrapper) {
const display = wrapper.style.display;
wrapper.style.display = 'none';
wrapper.offsetHeight;
wrapper.style.display = display;
}
}
