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">×</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