diff --git a/resources/js/app.js b/resources/js/app.js index 730a948..ecdf6d3 100644 --- a/resources/js/app.js +++ b/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(); + }); diff --git a/resources/js/lightboxSingle.js b/resources/js/lightboxSingle.js new file mode 100644 index 0000000..6e9a078 --- /dev/null +++ b/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 = ``; + + return lightBoxDomElement; + } +} + +// export default function initSingleLightbox() { +// LightboxSingle.init(); +// } +