bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

boucle frise calendrier

This commit is contained in:
ouidade 2024-09-20 23:50:02 +02:00
parent 75504e912b
commit f0632971f3
2 changed files with 62 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

121
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -288,57 +288,61 @@
//////////////////// start Timeline script ///////////////////////
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
//// responsive ///
function getVisibleSlides() {
if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens
} else if (window.innerWidth <= 900) {
return 4; // Show 2 slides on medium screens
return 4; // Show 4 slides on medium screens
} else {
return 4; // Show 3 slides on large screens
return 4; // Show 4 slides on large screens
}
}
function showSlides(index) {
const slides = document.querySelectorAll('.__paragraphs');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0, Math.min(index, maxSlide));
// Adjust the index to ensure it loops
if (index > maxSlide) {
currentSlide = 0; // Go back to the first slide
} else if (index < 0) {
currentSlide = maxSlide; // Go to the last slide
} else {
currentSlide = index;
}
// Calculate the offset for the transform
const offset = currentSlide * -50 / visibleSlides;
const offsetmobile = currentSlide * -10 / visibleSlides;
if (window.innerWidth <= 600){
document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
} else {
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
}
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
document.getElementById('arrowPrev').disabled = false; // Always enabled now
document.getElementById('arrowNext').disabled = false; // Always enabled now
}
function prevSlide() {
showSlides(currentSlide - 1);
}
function nextSlide() {
showSlides(currentSlide + 1);
}
// Attach event listeners
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
@ -355,55 +359,52 @@
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
// Configuration de l'observateur
const config = { childList: true, subtree: true };
// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
observer.observe(document.body, config);
// Handle window resize
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
// Configuration de l'observateur
const config = { childList: true, subtree: true };
// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
observer.observe(document.body, config);
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
});
//////////////////////// end Timeline script /////////////////////////////////////////////