diff --git a/pets.html b/pets.html index 0b82080..d56049e 100644 --- a/pets.html +++ b/pets.html @@ -155,7 +155,9 @@ function petCard(p) { ? shots.map(function (s) { return '
' + '' + esc(p.name + ' + + 'data-full="' + esc(s.url) + '" data-cap="' + esc(p.name + " · " + s.kind) + '" ' + + 'title="Click to see it full size" ' + + 'style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block;cursor:zoom-in">' + '
' + '' + esc(s.kind) + '' + '' @@ -239,6 +241,31 @@ function resetForm() { } document.getElementById("cancel").addEventListener("click", resetForm); +// A 110px square crop is too small to check the collar, the eye colour or the +// markings — which is exactly what these photographs exist to record. +function showFull(src, caption) { + var back = document.createElement("div"); + back.setAttribute("role", "dialog"); + back.setAttribute("aria-label", caption || "Photo"); + back.style.cssText = "position:fixed;inset:0;background:rgba(6,8,12,.9);z-index:9999;" + + "display:flex;flex-direction:column;align-items:center;justify-content:center;" + + "gap:14px;padding:26px;cursor:zoom-out"; + back.innerHTML = '' + esc(caption || ' + + '

' + + esc(caption || "") + '
click anywhere, or press Escape, to close

'; + + function close() { + document.removeEventListener("keydown", onKey); + if (back.parentNode) back.parentNode.removeChild(back); + } + function onKey(e) { if (e.key === "Escape") close(); } + back.addEventListener("click", close); + document.addEventListener("keydown", onKey); + document.body.appendChild(back); +} + document.getElementById("list").addEventListener("click", async function (e) { var ed = e.target.closest("[data-edit]"); if (ed) { @@ -258,6 +285,11 @@ document.getElementById("list").addEventListener("click", async function (e) { document.getElementById("formcard").scrollIntoView({ behavior: "smooth", block: "start" }); return; } + var full = e.target.closest("[data-full]"); + if (full) { + showFull(full.getAttribute("data-full"), full.getAttribute("data-cap")); + return; + } var del = e.target.closest("[data-del]"); if (del) { if (!confirm("Remove this photo?")) return;