Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring file

Browse Source
This commit is contained in:
Antoine M 2024-01-23 17:35:06 +01:00
parent 4dabdc6468
commit 74d372a735
1 changed files with 54 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
acf-blocks/home/show-thematiques/show-thematiques.js
View File

@ -1,63 +1,65 @@
window.addEventListener("DOMContentLoaded", (event) => { function swiperCheckBreakpoints() {
const hasSwiper = thematiquesSwiper.__swiper__ === true;
if (window.innerWidth < 960 && hasSwiper) {
thematiquesSwiper.destroy(true, true);
}
if (window.innerWidth >= 960 && !hasSwiper) {
initiateSwiper();
}
}
function initiateSwiper() {
const cardThematiques = document.querySelectorAll(".swiper-slide .card-thematique"); const cardThematiques = document.querySelectorAll(".swiper-slide .card-thematique");
function swiperCheckBreakpoints() { if (!Swiper) return;
const hasSwiper = thematiquesSwiper.__swiper__ === true;
if (window.innerWidth < 960 && hasSwiper) { thematiquesSwiper = new Swiper(".swiper-container", {
thematiquesSwiper.destroy(true, true); grabCursor: false,
} slidesPerView: 3,
if (window.innerWidth >= 960 && !hasSwiper) { spaceBetween: 30,
initiateSwiper(); a11y: {
} enabled: true,
} prevSlideMessage: textTranslations.previousSlide,
nextSlideMessage: textTranslations.nextSlide,
slideRole: "",
slideLabelMessage: textTranslations.slideLabel,
},
// loop: true,
// centeredSlides: true,
keyboard: {
enabled: true,
},
navigation: {
nextEl: ".thematique-button-next",
prevEl: ".thematique-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
const ariaLabel = cardThematiques[index].getAttribute("data-taxonomy");
function initiateSwiper() { // return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
thematiquesSwiper = new Swiper(".swiper-container", { return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
grabCursor: false,
slidesPerView: 3,
spaceBetween: 30,
a11y: {
enabled: true,
prevSlideMessage: textTranslations.previousSlide,
nextSlideMessage: textTranslations.nextSlide,
slideRole: "",
slideLabelMessage: textTranslations.slideLabel,
}, },
// loop: true, },
// centeredSlides: true, breakpoints: {
keyboard: { // when window width is >= 320px
enabled: true,
},
navigation: {
nextEl: ".thematique-button-next",
prevEl: ".thematique-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
const ariaLabel = cardThematiques[index].getAttribute("data-taxonomy");
// return `<button class="${className}" aria-label="${ariaLabel}"></button>`; // when window width is >= 480px
return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`; 320: {
}, slidesPerView: 2,
}, },
breakpoints: { // when window width is >= 640px
// when window width is >= 320px 1100: {
slidesPerView: 3,
// when window width is >= 480px
320: {
slidesPerView: 2,
},
// when window width is >= 640px
1100: {
slidesPerView: 3,
},
}, },
// a11y: false, },
}); // a11y: false,
} });
}
window.addEventListener("DOMContentLoaded", (event) => {
initiateSwiper(); initiateSwiper();
swiperCheckBreakpoints(); swiperCheckBreakpoints();