Allow entering of a signature by typing

[Matt Parizeau]

Q:

Is it possible to click on a signature widget in a document and then enter a signature by typing?

A:

Yes, the following code should be able to get you started. You can add it in a config file.

var createInnerElement = Annotations.SignatureWidgetAnnotation.prototype.createInnerElement;
Annotations.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
  var el = createInnerElement.apply(this, arguments);

  var signatureWidget = this;
  el.on('click', function(e) {
    // replace with the font you want to use here
    var fontName = 'Segoe Script';

    var signatureDialog = $('<div></div>');
    $('<label>').attr({
        'for': 'signatureInput'
      })
      .text('Type your signature:')
      .appendTo(signatureDialog);

    var textInput = $('<input id="signatureInput" type="text" autofocus/>')
      .appendTo(signatureDialog)
      .css({
        'font-family': fontName,
        'font-size': '50px',
        height: '50px',
        width: '500px'
      });

    signatureDialog.dialog({
      modal: true,
      width: 600,
      height: 200,
      position: {
        within: document.body
      },
      buttons: {
        'OK': function() {
          // scaled up so it looks good at higher zoom levels
          var qualityScale = 4;

          var canvas = document.createElement('canvas');
          canvas.setAttribute('width', (signatureWidget.Width * qualityScale) + 'px');
          canvas.setAttribute('height', (signatureWidget.Height * qualityScale) + 'px');
          var ctx = canvas.getContext('2d');
          ctx.textBaseline = 'top';
          var signatureFontSize = (signatureWidget.Height * qualityScale * 0.8);
          ctx.font = signatureFontSize + 'px ' + fontName;
          ctx.fillText(textInput.val(), 0, 0);

          // draws a timestamp
          var signatureTextLength = ctx.measureText(textInput.val()).width;
          ctx.textBaseline = 'bottom';
          ctx.font = (signatureFontSize / 4) + 'px ' + fontName;
          ctx.fillText(new Date(), signatureTextLength + 10, signatureWidget.Height * qualityScale);

          var data = canvas.toDataURL();

          var annotManager = readerControl.docViewer.getAnnotationManager();

          var stampAnnot = new Annotations.StampAnnotation();
          stampAnnot.PageNumber = signatureWidget.PageNumber;
          stampAnnot.X = signatureWidget.X;
          stampAnnot.Y = signatureWidget.Y;
          stampAnnot.Width = signatureWidget.Width;
          stampAnnot.Height = signatureWidget.Height;
          stampAnnot.Author = annotManager.getCurrentUser();
          stampAnnot.ImageData = data;
          stampAnnot.ReadOnly = true;
          stampAnnot.Listable = false;

          // removes existing signature
          var existingStamp = annotManager.getAnnotationsList().filter(function(annot) {
            return annot instanceof Annotations.StampAnnotation && annot.X === stampAnnot.X && annot.Y === stampAnnot.Y;
          });
          if (existingStamp.length > 0) {
            annotManager.deleteAnnotation(existingStamp[0], false, true);
          }

          annotManager.addAnnotation(stampAnnot);
          annotManager.redrawAnnotation(stampAnnot);

          $(this).dialog('close');
        },
        'Cancel': function() {
          $(this).dialog('close');
        }
      }
    });
  });
  return el;
};