'
+ '' + 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 || "") + '
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;