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");
function swiperCheckBreakpoints() {
const hasSwiper = thematiquesSwiper.__swiper__ === true;
if (!Swiper) return;
if (window.innerWidth < 960 && hasSwiper) {
thematiquesSwiper.destroy(true, true);
}
if (window.innerWidth >= 960 && !hasSwiper) {
initiateSwiper();
}
}
thematiquesSwiper = new Swiper(".swiper-container", {
grabCursor: false,
slidesPerView: 3,
spaceBetween: 30,
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() {
thematiquesSwiper = new Swiper(".swiper-container", {
grabCursor: false,
slidesPerView: 3,
spaceBetween: 30,
a11y: {
enabled: true,
prevSlideMessage: textTranslations.previousSlide,
nextSlideMessage: textTranslations.nextSlide,
slideRole: "",
slideLabelMessage: textTranslations.slideLabel,
// return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
},
// 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");
},
breakpoints: {
// when window width is >= 320px
// return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
},
// when window width is >= 480px
320: {
slidesPerView: 2,
},
breakpoints: {
// when window width is >= 320px
// when window width is >= 480px
320: {
slidesPerView: 2,
},
// when window width is >= 640px
1100: {
slidesPerView: 3,
},
// when window width is >= 640px
1100: {
slidesPerView: 3,
},
// a11y: false,
});
}
},
// a11y: false,
});
}
window.addEventListener("DOMContentLoaded", (event) => {
initiateSwiper();
swiperCheckBreakpoints();