handling close

resources/js/lightboxSingle.js

@@ -1,12 +1,22 @@
+/**
+ * @property {HTMLElement} lightBox
+ **/
 export default class LightboxSingle {
   constructor(picture) {
-    console.log('LightboxSingle constructor');
+    this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
-    const lightBox = this.buildDomLightBox(picture.getAttribute('src'));
+    this.onKeyUp = this.onKeyUp.bind(this);
-    document.body.appendChild(lightBox);
+    document.body.appendChild(this.lightBox);
+
+    this.lightBox.classList.remove('lightbox--inactive');
+    this.lightBox.setAttribute('aria-hidden', 'false');
+    this.lightBox.classList.add('lightbox--active');
+
+    document.addEventListener('keyup', this.onKeyUp);
+
+    this.lightboxCloseButton = this.lightBox.querySelector('.lightbox__close');
+    this.lightboxCloseButton.focus();
+
     
-    lightBox.classList.remove('lightbox--inactive');
-    lightBox.setAttribute('aria-hidden', 'false');
-    lightBox.classList.add('lightbox--active');
   }
 
   static init() {
@@ -22,6 +32,34 @@ export default class LightboxSingle {
       });
     });
   }
+
+  /**
+   * Ferme la lightbox
+   * @param {MouseEvent} e
+   */
+  close(e) {
+    e.preventDefault();
+    this.lightBox.classList.add('fade-out');
+    window.setTimeout(() => {
+      this.lightBox.classList.remove('fade-out');
+      this.lightBox.classList.remove('lightbox--active');
+      this.lightBox.classList.add('lightbox--inactive');
+      this.lightBox.setAttribute('aria-hidden', 'true');
+      this.lightBox.querySelector('.lightbox__container').remove();
+    }, 500);
+    document.removeEventListener('keyup', this.onKeyUp);
+  }
+
+  /**
+   * Ferme la lightbox
+   * @param {KeyboardEvent} e
+   */
+  onKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.close(e);
+    }
+  }
+
   buildDomLightBox(pictureSrc) {
     const lightBoxDomElement = document.createElement('div');
     lightBoxDomElement.classList.add('lightbox', 'lightbox--inactive');
@@ -37,6 +75,9 @@ export default class LightboxSingle {
 		</div>
 
 	</div>`;
+    lightBoxDomElement
+      .querySelector('.lightbox__close')
+      .addEventListener('click', this.close.bind(this));
 
     return lightBoxDomElement;
   }
@@ -45,4 +86,3 @@ export default class LightboxSingle {
 // export default function initSingleLightbox() {
 //   LightboxSingle.init();
 // }
-