/* * Screenshot lightbox with gallery navigation. * * Click any screenshot on a page and it opens full size, with arrows that step through every other * screenshot on that same page. Mintlify's own zoom shows one image and stops there, which is the * gap this fills. * * Mintlify includes every .js file in the content directory on every page of the site, with no * import and no docs.json entry, and there is no way to scope it to one page. Styles live in * lightbox.css beside this file. * * Three things about the Mintlify runtime shape this file, and all three are easy to get wrong: * * 1. The site is a single-page app. This script runs once, after the first page becomes * interactive, and does NOT run again on client-side navigation. So every listener is * delegated on `document`, which survives route changes. Nothing is bound per image. * * 2. The gallery is collected when the overlay opens, never at load, so it reflects whichever * page the reader is on now rather than the one they landed on. * * 3. Mintlify zooms images on click by default and exposes no documented hook or API for it. * We intercept the click in the CAPTURE phase on `document`, which runs before React's own * handler, and stop it there. That is why the pages do not need `noZoom` on all 49 images. * If a Mintlify release ever breaks that interception you will see both our overlay and * theirs; the fix is to add `noZoom` to the image markup and flip the rule in AGENTS.md. */ (function () { "use strict"; /* Screenshots live under /images/. Nav logos and icons do not, so this selector is the whole gallery definition. data-no-lightbox on an image opts it out. This has to be a "contains" match, not "starts with". In `mint dev` an image's `src` is the literal path, e.g. "/images/uportal360/login-screen.png". On the published site, Mintlify rewrites every `src` to its image CDN, e.g. "https://mintcdn.com///images/uportal360/login-screen.png?...", so "/images/" only appears partway through the string. A `^=` selector matches in dev and silently matches nothing in production — the click interception below never fires, and Mintlify's own single-image zoom runs instead. `*=` matches both. */ var SELECTOR = 'img[src*="/images/"]:not([data-no-lightbox])'; var overlay = null; // built once, reused for the life of the tab var els = {}; // its inner nodes var gallery = []; // the images on the current page, in document order var index = 0; var lastFocused = null; /* ------------------------------------------------------------------ build */ function icon(d) { return ''; } function build() { var el = document.createElement("div"); el.className = "uas-lb"; el.setAttribute("role", "dialog"); el.setAttribute("aria-modal", "true"); el.setAttribute("aria-label", "Screenshot viewer"); el.setAttribute("data-open", "false"); el.innerHTML = [ '

', ' ', ' ", "

", '

', ' ", ' ', ' ", "

", '

' ].join(""); document.body.appendChild(el); els = { root: el, img: el.querySelector(".uas-lb__img"), caption: el.querySelector(".uas-lb__caption"), count: el.querySelector(".uas-lb__count"), prev: el.querySelector(".uas-lb__nav--prev"), next: el.querySelector(".uas-lb__nav--next"), close: el.querySelector(".uas-lb__close") }; els.prev.addEventListener("click", function (e) { e.stopPropagation(); step(-1); }); els.next.addEventListener("click", function (e) { e.stopPropagation(); step(1); }); els.close.addEventListener("click", function (e) { e.stopPropagation(); close(); }); /* Click the backdrop to dismiss. Clicks on the image itself must not close it — readers tap an image to look closer, not to leave. */ el.addEventListener("click", function (e) { if (e.target === el || e.target.classList.contains("uas-lb__stage")) close(); }); addSwipe(el); return el; } /* ------------------------------------------------------------------ source */ /* * The URL to open at full size. * * On the published site Mintlify gives every screenshot a `srcset` of CDN derivatives plus a * `sizes` hint, so `currentSrc` is whichever width the browser picked to fill a 200px * thumbnail — open that and the reader gets a thumbnail scaled up. The `src` attribute carries * no `w=` parameter, which is the CDN's "do not resize" form, so it is the full-resolution * original every time regardless of viewport or pixel density. * * In `mint dev` there is no srcset and `src` is the file on disk, so `currentSrc` and `src` are * the same thing. That is why this went unnoticed locally. */ function fullSrc(img) { return img.getAttribute("srcset") ? img.src : (img.currentSrc || img.src); } /* ------------------------------------------------------------------ show */ function show(i) { if (!gallery.length) return; /* Wrap around: from the last image, Next returns to the first. */ index = (i + gallery.length) % gallery.length; var src = fullSrc(gallery[index]); var alt = gallery[index].getAttribute("alt") || ""; els.img.setAttribute("data-loading", "true"); els.img.onload = function () { els.img.removeAttribute("data-loading"); }; els.img.onerror = function () { els.img.removeAttribute("data-loading"); }; els.img.src = src; els.img.alt = alt; els.caption.textContent = alt; els.count.textContent = gallery.length > 1 ? index + 1 + " of " + gallery.length : ""; /* One image on the page means no gallery to step through. */ var many = gallery.length > 1; els.prev.hidden = !many; els.next.hidden = !many; preload(index + 1); preload(index - 1); } function preload(i) { if (gallery.length < 2) return; var img = gallery[(i + gallery.length) % gallery.length]; if (!img) return; var pre = new Image(); pre.src = fullSrc(img); } function step(delta) { show(index + delta); } /* ------------------------------------------------------------------ open / close */ function open(target) { if (!overlay) overlay = build(); /* Collected now, not at load — this is what makes it work after client-side navigation. */ gallery = Array.prototype.slice.call(document.querySelectorAll(SELECTOR)); if (!gallery.length) return; var start = gallery.indexOf(target); lastFocused = document.activeElement; show(start < 0 ? 0 : start); overlay.setAttribute("data-open", "true"); document.body.classList.add("uas-lb-open"); /* Focus something inside the dialog so the keyboard lands in the right place and a screen reader announces the overlay. */ (gallery.length > 1 ? els.next : els.close).focus(); } function close() { if (!overlay) return; overlay.setAttribute("data-open", "false"); document.body.classList.remove("uas-lb-open"); els.img.removeAttribute("src"); /* Put the reader back on the thumbnail they came from. */ if (lastFocused && typeof lastFocused.focus === "function") { try { lastFocused.focus(); } catch (e) { /* element may be gone after a route change */ } } lastFocused = null; } function isOpen() { return !!overlay && overlay.getAttribute("data-open") === "true"; } /* ------------------------------------------------------------------ input */ /* Capture phase, on document: this runs before Mintlify's own click handling, so stopping the event here prevents their zoom opening underneath ours. */ document.addEventListener("click", function (e) { if (isOpen()) return; var img = e.target && e.target.closest ? e.target.closest(SELECTOR) : null; if (!img) return; /* A linked image is a navigation control, not a screenshot. Leave it alone. */ if (img.closest("a")) return; e.preventDefault(); e.stopPropagation(); open(img); }, true); document.addEventListener("keydown", function (e) { if (!isOpen()) return; switch (e.key) { case "Escape": close(); break; case "ArrowLeft": step(-1); break; case "ArrowRight": step(1); break; case "Home": show(0); break; case "End": show(gallery.length - 1); break; default: return; } e.preventDefault(); e.stopPropagation(); }, true); /* Keep focus inside the dialog while it is open. */ document.addEventListener("focusin", function (e) { if (isOpen() && !overlay.contains(e.target)) els.close.focus(); }); /* A browser Back press should dismiss the overlay rather than leave the page behind it. */ window.addEventListener("popstate", function () { if (isOpen()) close(); }); /* ------------------------------------------------------------------ touch */ function addSwipe(el) { var x0 = null, y0 = null, t0 = 0; el.addEventListener("touchstart", function (e) { if (e.touches.length !== 1) return; x0 = e.touches[0].clientX; y0 = e.touches[0].clientY; t0 = Date.now(); }, { passive: true }); el.addEventListener("touchend", function (e) { if (x0 === null) return; var t = e.changedTouches[0]; var dx = t.clientX - x0; var dy = t.clientY - y0; var dt = Date.now() - t0; x0 = y0 = null; /* Horizontal, far enough, and quick enough to be a swipe rather than a drag or a scroll. */ if (dt < 600 && Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) { step(dx < 0 ? 1 : -1); } }, { passive: true }); } })();