spouliot
4e9c9d321a
- Download signature_pad 4.1.7 to wwwroot/lib/signature-pad/ to eliminate CDN SRI hash failures and network dependencies on the tablet - Wrap resizeCanvas in requestAnimationFrame so offsetWidth is non-zero when measured (browser layout pass must complete first) - Add guard for SignaturePad not defined (shows user-visible error instead of silent JS crash) - Add scrollIntoView on signature validation error for better tablet UX Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
"use strict";
|
|
|
|
(function () {
|
|
// ── Signature pad (InPerson sessions only) ─────────────────────────────────
|
|
const canvas = document.getElementById("signatureCanvas");
|
|
if (!canvas) return;
|
|
|
|
if (typeof SignaturePad === "undefined") {
|
|
console.error("signature_pad failed to load — signature capture unavailable");
|
|
canvas.parentElement.insertAdjacentHTML("beforeend",
|
|
'<p class="text-danger small mt-1">Signature pad failed to load. Please refresh the page.</p>');
|
|
return;
|
|
}
|
|
|
|
const pad = new SignaturePad(canvas, { penColor: "#1e293b" });
|
|
|
|
// Scale canvas to device pixel ratio — must run after layout so offsetWidth is non-zero.
|
|
// requestAnimationFrame ensures the browser has finished its first layout pass.
|
|
function resizeCanvas() {
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
const w = canvas.offsetWidth;
|
|
const h = canvas.offsetHeight;
|
|
if (w === 0 || h === 0) return; // layout not ready yet; resize event will retry
|
|
canvas.width = w * ratio;
|
|
canvas.height = h * ratio;
|
|
canvas.getContext("2d").scale(ratio, ratio);
|
|
pad.clear();
|
|
}
|
|
|
|
requestAnimationFrame(resizeCanvas);
|
|
window.addEventListener("resize", resizeCanvas);
|
|
|
|
// Visual feedback when the canvas has been signed
|
|
pad.addEventListener("endStroke", function () {
|
|
canvas.classList.add("signed");
|
|
});
|
|
|
|
document.getElementById("clearSignatureBtn")?.addEventListener("click", function () {
|
|
pad.clear();
|
|
canvas.classList.remove("signed");
|
|
});
|
|
|
|
// On submit: write base64 PNG to the hidden input
|
|
const form = document.getElementById("termsForm");
|
|
if (form) {
|
|
form.addEventListener("submit", function (e) {
|
|
const hiddenInput = document.getElementById("SignatureDataBase64");
|
|
if (hiddenInput) {
|
|
if (pad.isEmpty()) {
|
|
e.preventDefault();
|
|
const msg = document.getElementById("signatureError");
|
|
if (msg) msg.classList.remove("d-none");
|
|
canvas.classList.add("is-invalid");
|
|
canvas.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
return;
|
|
}
|
|
hiddenInput.value = pad.toDataURL("image/png");
|
|
}
|
|
});
|
|
}
|
|
})();
|