Initial commit

app/assets/javascripts/digital_signature.js

@@ -0,0 +1,55 @@
+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);
+  });
+});