49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
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();
|
|
// }
|
|
|