56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
App.DigitalSignature = {
|
|
init: function(canvas) {
|
|
var signatureInput = $(canvas).data("signature-input");
|
|
var $clearButton = $("[data-behavior=clear-digital-signature]")
|
|
|
|
var opts = {
|
|
onEnd: function() {
|
|
// Save the signature to an input field
|
|
if ($(signatureInput).length) {
|
|
$(signatureInput).val(signaturePad.crop().toDataURL());
|
|
}
|
|
}
|
|
};
|
|
|
|
// Initialize using SignaturePad plugin
|
|
var signaturePad = new SignaturePad(canvas, opts);
|
|
|
|
// Handler for when the browser window is resized
|
|
// Stores the current signature and restores it after the resizing
|
|
function resizeCanvas() {
|
|
var cachedSignature = null;
|
|
|
|
if (!signaturePad.isEmpty()) {
|
|
var cachedSignature = signaturePad.toDataURL();
|
|
}
|
|
|
|
var ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
canvas.getContext("2d").scale(ratio, ratio);
|
|
signaturePad.clear(); // otherwise isEmpty() might return incorrect value
|
|
|
|
if (cachedSignature !== null) {
|
|
signaturePad.fromDataURL(cachedSignature);
|
|
}
|
|
}
|
|
|
|
// Attach resize handler and trigger it once for an initial sizing
|
|
window.addEventListener("resize", resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
// Attach clear button handler
|
|
$clearButton.on("click", function(e) {
|
|
e.preventDefault();
|
|
signaturePad.clear();
|
|
$(signatureInput).val("");
|
|
});
|
|
},
|
|
};
|
|
|
|
$(document).on("turbolinks:load", function() {
|
|
$("[data-behavior=digital-signature]").each(function(index, element) {
|
|
App.DigitalSignature.init(element);
|
|
});
|
|
});
|