danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions

fix(nav): move image lightbox to index.html so NRP + seizure pathways

Browse source 
open from the Bedside tab

The #img-lightbox overlay markup was sitting at the bottom of
calculators.html. Before the reorg it was fine — the calculators tab
was always the only home for bedside, so by the time a user clicked
the seizure or NRP pathway button the lightbox HTML was guaranteed to
be in the DOM. After promoting Bedside to its own tab, a user can
open Bedside -> Seizures without having visited Calculators first;
the lightbox JS's getElementById('img-lightbox') then returns null
and the click silently no-ops.

Moved the overlay markup to the bottom of index.html so it exists
from page load regardless of which tab has been lazy-loaded. The e2e
harness gets a duplicate copy so the existing lightbox smoke test
keeps working.

Added a regression test for NRP (bedside-smoke.spec.js:141) to catch
any future breakage — the prior seizure-only test didn't exercise the
second pathway button and so the neonatal/NRP path had never been
clicked in CI.

Suite: 252 passed / 0 failed.
This commit is contained in:
Daniel 2026-04-23 17:06:26 +02:00
parent f4140d45c4
commit 5c1d1619c7
4 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
e2e/tests/bedside-smoke.spec.js
View file

@ -129,10 +129,23 @@ test.describe('Bedside — dose calculators fire', () => {
});
test.describe('Bedside — interactive widgets', () => {
test('Lightbox: View pathway image button opens modal', async ({ page }) => {
test('Lightbox: seizure pathway image opens and closes', async ({ page }) => {
await openBedside(page, 'seizure');
await page.click('button[data-img-src="/img/epilepsy_eiic_pathway.png"]');
await expect(page.locator('#img-lightbox')).toBeVisible();
await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /epilepsy_eiic_pathway/);
await page.click('#img-lightbox-close');
await expect(page.locator('#img-lightbox')).toBeHidden();
});
test('Lightbox: NRP pathway image opens on neonatal sub-pill', async ({ page }) => {
await openBedside(page, 'neonatal');
// The "View pathway image" button sits inside a collapsed <details>
// titled "NRP Resuscitation Pathway" — expand it first.
await page.getByText('NRP Resuscitation Pathway').click();
await page.click('button[data-img-src="/img/nrp_pathway.png"]');
await expect(page.locator('#img-lightbox')).toBeVisible();
await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /nrp_pathway/);
await page.click('#img-lightbox-close');
await expect(page.locator('#img-lightbox')).toBeHidden();
});

13
public/components/calculators.html
View file

@ -652,12 +652,7 @@
</div>
<!-- ═══════════ IMAGE LIGHTBOX (reusable, any section can trigger via [data-img-src]) ═══════════ -->
<div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
<div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
<a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;text-decoration:none;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
<button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;"><i class="fas fa-xmark"></i> Close</button>
</div>
<img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;box-shadow:0 4px 30px rgba(0,0,0,0.5);background:white;">
</div>
<!-- Image lightbox moved to index.html so it exists in the DOM
regardless of which tab is loaded (NRP + seizure pathway images
on the Bedside tab broke when this markup stayed here). -->

11
public/e2e-harness.html
View file

@ -25,5 +25,16 @@
<script defer src="/js/calculators.js"></script>
<script type="module" src="/js/bedside/index.js"></script>
<script defer src="/js/e2e-bootstrap.js"></script>
<!-- Lightbox overlay — global in the real app, mirrored here so the
bedside lightbox smoke test can open/close it. -->
<div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
<div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
<a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
<button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;">Close</button>
</div>
<img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;background:white;">
</div>
</body>
</html>

13
public/index.html
View file

@ -470,5 +470,18 @@
<script defer src="/js/admin.js"></script>
<script defer src="/js/adminMilestones.js"></script>
<!-- ═══════════ IMAGE LIGHTBOX (global overlay — triggered by any
[data-img-src] button in any tab; lives here so it exists in the
DOM from page load, independent of which tab has been lazy-loaded
yet). Styled inline to keep the CSP-compliant "no inline scripts"
rule (inline styles are allowed). ═══════════ -->
<div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
<div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
<a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;text-decoration:none;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
<button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;"><i class="fas fa-xmark"></i> Close</button>
</div>
<img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;box-shadow:0 4px 30px rgba(0,0,0,0.5);background:white;">
</div>
</body>
</html>