89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
/**
|
|
* @property {HTMLElement} lightBox
|
|
**/
|
|
export default class LightboxSingle {
|
|
constructor(picture) {
|
|
this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
|
|
this.onKeyUp = this.onKeyUp.bind(this);
|
|
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();
|
|
|
|
|
|
}
|
|
|
|
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);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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');
|
|
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>`;
|
|
lightBoxDomElement
|
|
.querySelector('.lightbox__close')
|
|
.addEventListener('click', this.close.bind(this));
|
|
|
|
return lightBoxDomElement;
|
|
}
|
|
}
|
|
|
|
// export default function initSingleLightbox() {
|
|
// LightboxSingle.init();
|
|
// }
|