https://staging-grandsprojets.netlify.app/modules/lightbox.js

1// modules/lightbox.js - Fullscreen image lightbox
2
3;(function(win) {
4  'use strict';
5
6  let _overlay = null;
7  let _img = null;
8  let _keyHandler = null;
9
10  function open(imageUrl, alt) {
11    if (!imageUrl) return;
12
13    const safeSrc = win.SecurityUtils ? win.SecurityUtils.sanitizeUrl(imageUrl) : imageUrl;
14    const safeAlt = win.SecurityUtils ? win.SecurityUtils.escapeAttribute(alt || '') : (alt || '');
15
16    if (!_overlay) {
17      _overlay = document.createElement('div');
18      _overlay.className = 'gp-lightbox';
19      _overlay.setAttribute('role', 'dialog');
20      _overlay.setAttribute('aria-modal', 'true');
21      _overlay.setAttribute('aria-label', 'Image agrandie');
22      _overlay.innerHTML = `
23        <div class="gp-lightbox__box">
24          <img class="gp-lightbox__img" src="" alt="">
25          <button type="button" class="gp-lightbox__close" aria-label="Fermer">
26            <i class="fa-solid fa-xmark"></i>
27          </button>
28        </div>`;
29
30      _img = _overlay.querySelector('.gp-lightbox__img');
31
32      _overlay.addEventListener('click', function(e) {
33        if (e.target === _overlay) close();
34      });
35
36      _overlay.querySelector('.gp-lightbox__close').addEventListener('click', close);
37    }
38
39    _img.src = safeSrc;
40    _img.alt = safeAlt;
41
42    document.body.appendChild(_overlay);
43
44    _keyHandler = function(e) { if (e.key === 'Escape') close(); };
45    document.addEventListener('keydown', _keyHandler);
46
47    // Focus close button for accessibility
48    const closeBtn = _overlay.querySelector('.gp-lightbox__close');
49    if (closeBtn) closeBtn.focus();
50  }
51
52  function close() {
53    if (_overlay && _overlay.parentNode) {
54      _overlay.remove();
55    }
56    if (_keyHandler) {
57      document.removeEventListener('keydown', _keyHandler);
58      _keyHandler = null;
59    }
60  }
61
62  win.Lightbox = { open, close };
63
64})(window);