Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling close

Browse Source
This commit is contained in:
Antoine M 2024-08-19 12:27:39 +02:00
parent e50e9dd9be
commit 9f02e553cb
1 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/lightboxSingle.js
View File

@ -1,12 +1,22 @@
/**
* @property {HTMLElement} lightBox
**/
export default class LightboxSingle {
constructor(picture) {
console.log('LightboxSingle constructor');
const lightBox = this.buildDomLightBox(picture.getAttribute('src'));
document.body.appendChild(lightBox);
this.lightBox = this.buildDomLightBox(picture.getAttribute('src'));
this.onKeyUp = this.onKeyUp.bind(this);
document.body.appendChild(this.lightBox);
lightBox.classList.remove('lightbox--inactive');
lightBox.setAttribute('aria-hidden', 'false');
lightBox.classList.add('lightbox--active');
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() {
@ -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();
// }