Fix kiosk signature pad: host locally, fix canvas resize timing

- 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>
This commit is contained in:
2026-05-13 21:14:49 -04:00
parent 0c8723ef84
commit 4e9c9d321a
3 changed files with 56 additions and 39 deletions
@@ -90,9 +90,7 @@
@if (isInPerson)
{
@section Scripts {
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"
integrity="sha384-bQMMRVcRi5vEIBLKnB4FY7tBOA9k/Qvd/9zSWMNO4h0zfB2qLj4DV2R/JyPAbF3"
crossorigin="anonymous"></script>
<script src="~/lib/signature-pad/signature_pad.umd.min.js"></script>
<script src="~/js/kiosk-terms.js"></script>
}
}
+49 -36
View File
@@ -3,46 +3,59 @@
(function () {
// ── Signature pad (InPerson sessions only) ─────────────────────────────────
const canvas = document.getElementById("signatureCanvas");
if (canvas) {
const pad = new SignaturePad(canvas, { penColor: "#1e293b" });
if (!canvas) return;
// Scale canvas to device pixel ratio for crisp rendering on high-DPI tablets
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
pad.clear();
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
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;
}
// Show visual feedback when the canvas has been signed
pad.addEventListener("endStroke", function () {
canvas.classList.add("signed");
});
const pad = new SignaturePad(canvas, { penColor: "#1e293b" });
document.getElementById("clearSignatureBtn")?.addEventListener("click", function () {
pad.clear();
canvas.classList.remove("signed");
});
// 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();
}
// 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");
return;
}
hiddenInput.value = pad.toDataURL("image/png");
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");
}
});
}
})();
File diff suppressed because one or more lines are too long