FEATURE Optimizing swiper aspect,behaviour and accessibility

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/render.php

@@ -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>

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/view.asset.php

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

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/view.js

@@ -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>"
+    // 			);
+    // 		},
+    // 	},
+    // ],
   });
 });
 /******/ })()

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/build/dernieres-dynamiques/view.js.map

@@ -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":""}

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/src/dernieres-dynamiques/render.php

@@ -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>

plugins/dynamiques-blocks/blocks/dernieres-dynamiques/src/dernieres-dynamiques/view.js

@@ -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>"
+		// 			);
+		// 		},
+		// 	},
+		// ],
 	});
 });