introducing LightBoxSingle

resources/js/app.js

@@ -8,6 +8,7 @@ import accordeonInit from './accordeon';
 import pageScrollerInit from './pageScroller';
 import observeChapterProgression from './chapter-progression';
 import notificationsInit from './notifications.js';
+import LightBoxSingle from './lightboxSingle';
 // window.addEventListener('load', function () {});
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -27,4 +28,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
 
   // NOTIFICATIONS
   notificationsInit();
+  LightBoxSingle.init();
+  
 });

resources/js/lightboxSingle.js

@@ -0,0 +1,48 @@
+export default class LightboxSingle {
+  constructor(picture) {
+    console.log('LightboxSingle constructor');
+    const lightBox = this.buildDomLightBox(picture.getAttribute('src'));
+    document.body.appendChild(lightBox);
+
+    lightBox.classList.remove('lightbox--inactive');
+    lightBox.setAttribute('aria-hidden', 'false');
+    lightBox.classList.add('lightbox--active');
+  }
+
+  static init() {
+    const lightboxLinks = document.querySelectorAll('.singleLightbox-link');
+    if (!lightboxLinks) return;
+
+    lightboxLinks.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const picture = link.querySelector('img');
+        if (!picture) return;
+        new LightboxSingle(picture);
+      });
+    });
+  }
+  buildDomLightBox(pictureSrc) {
+    const lightBoxDomElement = document.createElement('div');
+    lightBoxDomElement.classList.add('lightbox', 'lightbox--inactive');
+    lightBoxDomElement.setAttribute('aria-hidden', 'true');
+
+    lightBoxDomElement.innerHTML = `<div class="lightbox__container">
+		<button class="lightbox__close cta cta--button cta--button--mini cta--outline">
+			Fermer
+		</button>
+
+		<div class="lightbox__current-picture">
+			<img src="${pictureSrc}" alt="" />
+		</div>
+
+	</div>`;
+
+    return lightBoxDomElement;
+  }
+}
+
+// export default function initSingleLightbox() {
+//   LightboxSingle.init();
+// }
+