FEATURE Optimizing swiper aspect,behaviour and accessibility
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Antoine M 2025-06-18 16:25:48 +02:00
parent 9221cb9616
commit 737c8a8c89
6 changed files with 135 additions and 2 deletions

View File

@ -14,6 +14,9 @@ $args = array(
$dynamiques = new WP_Query($args);
$last_issue = $dynamiques->posts[0];
if (!$last_issue) return;
$issueNumber = get_field('issue_number', $last_issue->ID);
write_log($issueNumber);
$issue_related_articles = new WP_Query(array(
'post_type' => 'articles',
@ -30,6 +33,16 @@ $issue_related_articles = new WP_Query(array(
));
// if ($currentPostType === 'revues') {
// $currentRevueID = get_the_ID();
// }
// if ($currentPostType === 'articles') {
// $currentRevueID = get_field('related_revue', get_the_ID());
// }
// if (!$currentRevueID) return;
?>
<section class="block-dernieres-dynamiques content-section ">
@ -49,8 +62,14 @@ $issue_related_articles = new WP_Query(array(
</a>
</div>
<div class="content-meta">
<span class="content-meta__type content-meta__type--revue">Revue</span>
<p class="content-meta__revue-issue content-meta__revue-issue--white">
<span class="revue-issue-number revue-meta__label sr-only">Numéro</span>
<?php echo $issueNumber; ?>
</p>
</div>
<div class="block-dernieres-dynamiques__issue-content-wrapper">
@ -168,7 +187,9 @@ $issue_related_articles = new WP_Query(array(
<?php endwhile; ?>
</div>
<div class="swiper-pagination-fraction"></div>
<div class="swiper-pagination"></div>
<div class="swiper-controls">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '3220a399e5c8ef145c56');
<?php return array('dependencies' => array(), 'version' => '4cea8ae32b48c591d8d4');

View File

@ -3,9 +3,14 @@
!*** ./src/dernieres-dynamiques/view.js ***!
\******************************************/
document.addEventListener("DOMContentLoaded", function () {
const swiperFraction = document.querySelector(".swiper-pagination-fraction");
const slides = document.querySelectorAll(".swiper-slide");
const slideCount = slides.length;
swiperFraction.textContent = `Article n°1 sur ${slideCount}`;
new Swiper(".dernieres-dynamiques-swiper", {
slidesPerView: 2,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true
@ -13,7 +18,46 @@ document.addEventListener("DOMContentLoaded", function () {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return `<button class="${className}"></button>`;
}
},
on: {
slideChange: swiper => {
const slidesCount = swiper?.slides?.length;
swiperFraction.textContent = `Article n°${swiper.realIndex + 1} sur ${slidesCount}`;
}
}
// pagination: [
// {
// el: ".swiper-pagination",
// type: "bullets",
// clickable: true,
// },
// {
// el: ".swiper-pagination-fraction",
// type: "fraction",
// renderFraction: function (currentClass, totalClass) {
// return (
// '<p class="swiper-pagination__text">' +
// "<span class='swiper-pagination__text-label'>Article n°</span>" +
// '<span class="' +
// currentClass +
// '"></span>' +
// " sur " +
// '<span class="' +
// totalClass +
// '"></span>' +
// "</p>"
// );
// },
// },
// ],
});
});
/******/ })()

View File

@ -1 +1 @@
{"version":3,"file":"dernieres-dynamiques/view.js","mappings":";;;;AAAAA,QAAQ,CAACC,gBAAgB,CAAC,kBAAkB,EAAE,YAAY;EACzD,IAAIC,MAAM,CAAC,8BAA8B,EAAE;IAC1CC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE;MACXC,EAAE,EAAE,oBAAoB;MACxBC,SAAS,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACXC,MAAM,EAAE,qBAAqB;MAC7BC,MAAM,EAAE;IACT;EACD,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://dernieres-dynamiques/./src/dernieres-dynamiques/view.js"],"sourcesContent":["document.addEventListener(\"DOMContentLoaded\", function () {\n\tnew Swiper(\".dernieres-dynamiques-swiper\", {\n\t\tslidesPerView: 2,\n\t\tspaceBetween: 30,\n\t\tpagination: {\n\t\t\tel: \".swiper-pagination\",\n\t\t\tclickable: true,\n\t\t},\n\t\tnavigation: {\n\t\t\tnextEl: \".swiper-button-next\",\n\t\t\tprevEl: \".swiper-button-prev\",\n\t\t},\n\t});\n});\n"],"names":["document","addEventListener","Swiper","slidesPerView","spaceBetween","pagination","el","clickable","navigation","nextEl","prevEl"],"sourceRoot":""}
{"version":3,"file":"dernieres-dynamiques/view.js","mappings":";;;;AAAAA,QAAQ,CAACC,gBAAgB,CAAC,kBAAkB,EAAE,YAAY;EACzD,MAAMC,cAAc,GAAGF,QAAQ,CAACG,aAAa,CAAC,6BAA6B,CAAC;EAC5E,MAAMC,MAAM,GAAGJ,QAAQ,CAACK,gBAAgB,CAAC,eAAe,CAAC;EACzD,MAAMC,UAAU,GAAGF,MAAM,CAACG,MAAM;EAChCL,cAAc,CAACM,WAAW,GAAG,mBAAmBF,UAAU,EAAE;EAE5D,IAAIG,MAAM,CAAC,8BAA8B,EAAE;IAC1CC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,EAAE;IAChBC,IAAI,EAAE,IAAI;IACVC,UAAU,EAAE;MACXC,EAAE,EAAE,oBAAoB;MACxBC,SAAS,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACXC,MAAM,EAAE,qBAAqB;MAC7BC,MAAM,EAAE;IACT,CAAC;IACDL,UAAU,EAAE;MACXC,EAAE,EAAE,oBAAoB;MACxBC,SAAS,EAAE,IAAI;MACfI,YAAY,EAAE,SAAAA,CAAUC,KAAK,EAAEC,SAAS,EAAE;QACzC,OAAO,kBAAkBA,SAAS,aAAa;MAChD;IACD,CAAC;IACDC,EAAE,EAAE;MACHC,WAAW,EAAGC,MAAM,IAAK;QACxB,MAAMC,WAAW,GAAGD,MAAM,EAAEpB,MAAM,EAAEG,MAAM;QAC1CL,cAAc,CAACM,WAAW,GAAG,aAC5BgB,MAAM,CAACE,SAAS,GAAG,CAAC,QACbD,WAAW,EAAE;MACtB;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EACD,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://dernieres-dynamiques/./src/dernieres-dynamiques/view.js"],"sourcesContent":["document.addEventListener(\"DOMContentLoaded\", function () {\n\tconst swiperFraction = document.querySelector(\".swiper-pagination-fraction\");\n\tconst slides = document.querySelectorAll(\".swiper-slide\");\n\tconst slideCount = slides.length;\n\tswiperFraction.textContent = `Article n°1 sur ${slideCount}`;\n\n\tnew Swiper(\".dernieres-dynamiques-swiper\", {\n\t\tslidesPerView: 2,\n\t\tspaceBetween: 30,\n\t\tloop: true,\n\t\tpagination: {\n\t\t\tel: \".swiper-pagination\",\n\t\t\tclickable: true,\n\t\t},\n\t\tnavigation: {\n\t\t\tnextEl: \".swiper-button-next\",\n\t\t\tprevEl: \".swiper-button-prev\",\n\t\t},\n\t\tpagination: {\n\t\t\tel: \".swiper-pagination\",\n\t\t\tclickable: true,\n\t\t\trenderBullet: function (index, className) {\n\t\t\t\treturn `<button class=\"${className}\"></button>`;\n\t\t\t},\n\t\t},\n\t\ton: {\n\t\t\tslideChange: (swiper) => {\n\t\t\t\tconst slidesCount = swiper?.slides?.length;\n\t\t\t\tswiperFraction.textContent = `Article n°${\n\t\t\t\t\tswiper.realIndex + 1\n\t\t\t\t} sur ${slidesCount}`;\n\t\t\t},\n\t\t},\n\n\t\t// pagination: [\n\t\t// \t{\n\t\t// \t\tel: \".swiper-pagination\",\n\t\t// \t\ttype: \"bullets\",\n\t\t// \t\tclickable: true,\n\t\t// \t},\n\t\t// \t{\n\t\t// \t\tel: \".swiper-pagination-fraction\",\n\t\t// \t\ttype: \"fraction\",\n\t\t// \t\trenderFraction: function (currentClass, totalClass) {\n\t\t// \t\t\treturn (\n\t\t// \t\t\t\t'<p class=\"swiper-pagination__text\">' +\n\t\t// \t\t\t\t\"<span class='swiper-pagination__text-label'>Article n°</span>\" +\n\t\t// \t\t\t\t'<span class=\"' +\n\t\t// \t\t\t\tcurrentClass +\n\t\t// \t\t\t\t'\"></span>' +\n\t\t// \t\t\t\t\" sur \" +\n\t\t// \t\t\t\t'<span class=\"' +\n\t\t// \t\t\t\ttotalClass +\n\t\t// \t\t\t\t'\"></span>' +\n\t\t// \t\t\t\t\"</p>\"\n\t\t// \t\t\t);\n\t\t// \t\t},\n\t\t// \t},\n\t\t// ],\n\t});\n});\n"],"names":["document","addEventListener","swiperFraction","querySelector","slides","querySelectorAll","slideCount","length","textContent","Swiper","slidesPerView","spaceBetween","loop","pagination","el","clickable","navigation","nextEl","prevEl","renderBullet","index","className","on","slideChange","swiper","slidesCount","realIndex"],"sourceRoot":""}

View File

@ -14,6 +14,9 @@ $args = array(
$dynamiques = new WP_Query($args);
$last_issue = $dynamiques->posts[0];
if (!$last_issue) return;
$issueNumber = get_field('issue_number', $last_issue->ID);
write_log($issueNumber);
$issue_related_articles = new WP_Query(array(
'post_type' => 'articles',
@ -30,6 +33,16 @@ $issue_related_articles = new WP_Query(array(
));
// if ($currentPostType === 'revues') {
// $currentRevueID = get_the_ID();
// }
// if ($currentPostType === 'articles') {
// $currentRevueID = get_field('related_revue', get_the_ID());
// }
// if (!$currentRevueID) return;
?>
<section class="block-dernieres-dynamiques content-section ">
@ -49,8 +62,14 @@ $issue_related_articles = new WP_Query(array(
</a>
</div>
<div class="content-meta">
<span class="content-meta__type content-meta__type--revue">Revue</span>
<p class="content-meta__revue-issue content-meta__revue-issue--white">
<span class="revue-issue-number revue-meta__label sr-only">Numéro</span>
<?php echo $issueNumber; ?>
</p>
</div>
<div class="block-dernieres-dynamiques__issue-content-wrapper">
@ -168,7 +187,9 @@ $issue_related_articles = new WP_Query(array(
<?php endwhile; ?>
</div>
<div class="swiper-pagination-fraction"></div>
<div class="swiper-pagination"></div>
<div class="swiper-controls">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

View File

@ -1,7 +1,13 @@
document.addEventListener("DOMContentLoaded", function () {
const swiperFraction = document.querySelector(".swiper-pagination-fraction");
const slides = document.querySelectorAll(".swiper-slide");
const slideCount = slides.length;
swiperFraction.textContent = `Article n°1 sur ${slideCount}`;
new Swiper(".dernieres-dynamiques-swiper", {
slidesPerView: 2,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
@ -10,5 +16,46 @@ document.addEventListener("DOMContentLoaded", function () {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return `<button class="${className}"></button>`;
},
},
on: {
slideChange: (swiper) => {
const slidesCount = swiper?.slides?.length;
swiperFraction.textContent = `Article n°${
swiper.realIndex + 1
} sur ${slidesCount}`;
},
},
// pagination: [
// {
// el: ".swiper-pagination",
// type: "bullets",
// clickable: true,
// },
// {
// el: ".swiper-pagination-fraction",
// type: "fraction",
// renderFraction: function (currentClass, totalClass) {
// return (
// '<p class="swiper-pagination__text">' +
// "<span class='swiper-pagination__text-label'>Article n°</span>" +
// '<span class="' +
// currentClass +
// '"></span>' +
// " sur " +
// '<span class="' +
// totalClass +
// '"></span>' +
// "</p>"
// );
// },
// },
// ],
});
});