FEATURE Optimizing swiper aspect,behaviour and accessibility
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
9221cb9616
commit
737c8a8c89
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '3220a399e5c8ef145c56');
|
||||
<?php return array('dependencies' => array(), 'version' => '4cea8ae32b48c591d8d4');
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
});
|
||||
/******/ })()
|
||||
|
|
|
|||
|
|
@ -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":""}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user