introducing the first vrrsion of the component

acf-blocks/lightbox-gallery/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "acf/lightbox-gallery",
+	"title": "Gallerie d'images Lightbox",
+	"category": "homegrade-blocks",
+	"multiple": false,
+	"icon": {
+		"foreground": "#DF1E1E",
+		"src": "location-alt"
+	},
+	"supports": {
+		"anchor": true
+	},
+	"keywords": [
+		"lightbox",
+		"gallerie",
+		"gallery"
+	],
+	"viewScript": [
+		"file:./lightbox.js",
+		"example-shared-view-script"
+	],
+	"acf": {
+		"mode": "auto",
+		"renderTemplate": "lightbox-gallery.php"
+	}
+}

acf-blocks/lightbox-gallery/lightbox-gallery.php

@@ -0,0 +1,31 @@
+<?php
+$galleryDatas = get_field('gallery');
+// echo '<pre>';
+// print_r($galleryDatas);
+// echo '</pre>';
+?>
+
+<div class="lightbox-gallery">
+	<?php foreach ($galleryDatas as $picture): ?>
+		<button class="lightbox-gallery__picture" title="ouvrir l'image en grand ">
+			<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" />
+		</button>
+	<?php endforeach; ?>
+</div>
+
+<div class="lightbox lightbox--inactive">
+	<div class="lightbox__container">
+		<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
+			Fermer
+		</button>
+		<button class="lightbox__prev">
+			<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg'	?>' alt='<?php echo __("Image Précédente", "homegrade-theme__texte-fonctionnel") ?>'>
+		</button>
+		<div class="lightbox__current-picture">
+			<img src="https://picsum.photos/id/237/200/300" alt="" />
+		</div>
+		<button class="lightbox__next">
+			<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg'	?>' alt='<?php echo __("Image Suivante", "homegrade-theme__texte-fonctionnel") ?>'>
+		</button>
+	</div>
+</div>

acf-blocks/lightbox-gallery/lightbox.js

@@ -0,0 +1,92 @@
+class Lightbox {
+	constructor() {
+		this.lightbox = document.querySelector(".lightbox");
+		this.closeButton = this.lightbox.querySelector(".lightbox__close");
+		this.prevButton = this.lightbox.querySelector(".lightbox__prev");
+		this.nextButton = this.lightbox.querySelector(".lightbox__next");
+		this.gallery = document.querySelector(".lightbox-gallery");
+		this.currentPictureIndex = 0;
+
+		if (this.gallery) {
+			this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
+			this.init();
+		}
+	}
+
+	init() {
+		this.pictures.forEach((picture, index) => {
+			picture.addEventListener("click", () => {
+				this.showLightbox();
+				this.setCurrentPicture(picture);
+				this.setCurrentPictureIndex(index);
+			});
+		});
+
+		this.closeButton.addEventListener("click", () => {
+			this.hideLightbox();
+		});
+
+		this.prevButton.addEventListener("click", () => {
+			this.showPreviousPicture();
+		});
+
+		this.nextButton.addEventListener("click", () => {
+			this.showNextPicture();
+		});
+
+		document.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				this.hideLightbox();
+			}
+
+			if (event.key === "ArrowLeft") {
+				this.showPreviousPicture();
+			}
+
+			if (event.key === "ArrowRight") {
+				this.showNextPicture();
+			}
+		});
+	}
+
+	showLightbox() {
+		this.lightbox.classList.remove("lightbox--inactive");
+		this.lightbox.classList.add("lightbox--active");
+	}
+
+	hideLightbox() {
+		this.lightbox.classList.remove("lightbox--active");
+		this.lightbox.classList.add("lightbox--inactive");
+	}
+
+	setCurrentPicture(picture) {
+		const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
+		viewedPicture.src = picture.src;
+	}
+
+	setCurrentPictureIndex(index) {
+		this.currentPictureIndex = index;
+	}
+
+	showPreviousPicture() {
+		if (this.currentPictureIndex > 0) {
+			this.currentPictureIndex--;
+		} else {
+			this.currentPictureIndex = this.pictures.length - 1;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+
+	showNextPicture() {
+		if (this.currentPictureIndex < this.pictures.length - 1) {
+			this.currentPictureIndex++;
+		} else {
+			this.currentPictureIndex = 0;
+		}
+		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	new Lightbox();
+});