1
2window.addEventListener("DOMContentLoaded", function () {
3
4
5    document.querySelectorAll(".lightbox-cs").forEach((lightBoxAnchor) => {
6
7        let drag = false;
8
9        lightBoxAnchor.addEventListener('mousedown', () => drag = false);
10        lightBoxAnchor.addEventListener('mousemove', () => drag = true);
11
12        /**
13         * Click is an event that appears after mouseup
14         */
15        let startX;
16        let startY;
17        let delta = 6;
18        lightBoxAnchor.addEventListener("click", async function (event) {
19            // we open the lightbox on mouseup
20            event.preventDefault();
21        });
22        lightBoxAnchor.addEventListener("mousedown", async function (event) {
23            // capture the position to see if it's a drag or a click
24            startX = event.pageX;
25            startY = event.pageY;
26        });
27
28        lightBoxAnchor.addEventListener("mouseup", event => {
29            const diffX = Math.abs(event.pageX - startX);
30            const diffY = Math.abs(event.pageY - startY);
31            if (diffX < delta && diffY < delta) {
32                // A click
33                openLightbox();
34            }
35        });
36        let openLightbox = function () {
37
38            const combo = /** @type {import('combo.d.ts')} */ (window.combo);
39            let lightBoxId = combo.Html.toHtmlId(`combo-lightbox`);
40
41            let lightBoxModel = combo.Modal.getOrCreate(lightBoxId);
42            let src = lightBoxAnchor.getAttribute("href");
43            let img = lightBoxAnchor.querySelector("img");
44            let alt = "Image";
45            if (img !== null && img.hasAttribute("alt")) {
46                alt = img.getAttribute("alt");
47            }
48            let namespace = "-bs"
49            const bootstrap = /** @type {import('bootstrap.d.ts')} */ (window.bootstrap);
50            let bsVersion = parseInt(bootstrap.Modal.VERSION.substring(0, 1), 10);
51            if (bsVersion < 5) {
52                namespace = "";
53            }
54
55            let svgStyle = "max-height:95vh;max-width:95vw";
56            if (src.match(/svg/i) !== null) {
57                // a svg does not show without width
58                // because the intrinsic svg can be tiny, we put a min with
59                svgStyle += ';width: 100%;min-width: 75vw'
60            }
61            let dataDismissAttribute = `data${namespace}-dismiss`;
62            let html = `
63<button type="button" class="lightbox-close-cs" ${dataDismissAttribute}="modal" aria-label="Close">
64    <span aria-hidden="true">&times;</span>
65</button>
66<img src="${src}" alt="${alt}" style="${svgStyle}"/>
67`
68            lightBoxModel
69                .resetIfBuild()
70                .centered()
71                .addDialogStyle("max-width", "fit-content")
72                .addBody(html)
73                .addBodyStyle("padding", "0")
74                .noFooter()
75                .show();
76        }
77    });
78
79});
80