Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023 Answer ✓

  Hi Giuseppe,

  You'd need to add the button into the HTML that the plug-in adds to the page (lines 20-22 in the plug-in presented here) and then use an event handler (rather than the DOM0 global event).

  This should do the job:

          create: function ( conf ) {
              // console.log("Handwriting - CREATE");
              var that = this;
              conf._enabled = true;
              conf._container = $('<div><button type="button" class="btn btn-secondary btn-sm"><i class="fa fa-trash-o fa-lg"></i></button></div>');
              conf._input = $(
                  '<canvas id="'+Editor.safeId( conf.id )+'" class="signature-pad" width=400 height=200>'+
                  '</canvas>');
   
              // at this location, the event is created
              conf.handwriting = new SignaturePad( conf._input[0], {
                  backgroundColor: 'rgba(255, 255, 255, 0)',
                  penColor: 'rgb(0, 0, 0)',
                  onEnd: function() {
                      // get png image, add it to the value field and trigger for a dependent response.
                      conf._input.val( conf.handwriting.toDataURL() ).trigger( 'change', {editor: true} );
                  },
              });
  
              conf._container.find('button').on('click', function () {
                  conf.handwriting.clear();
              });
  
              conf._container.append(conf._input);
   
              return conf._container;
          },
  

  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023 edited January 2023 Answer ✓

  Here is a completed integration:

  (function ($, DataTable) {
      if (!DataTable.ext.editorFields) {
          DataTable.ext.editorFields = {};
      }
  
      var Editor = DataTable.Editor;
      var _fieldTypes = DataTable.ext.editorFields;
  
      _fieldTypes.handwriting = {
          create: function (conf) {
              var height = conf.height || 75;
              var width = conf.width || 300;
              var canvas = $('<canvas class="signature-pad"></canvas>').attr({
                  height: height,
                  width: width,
              });
  
              conf._enabled = true;
              conf._container = $(
                  '<div><button type="button">&times;</button><input type="hidden"></div>'
              ).attr({
                  id: Editor.safeId(conf.id),
              });
              conf._input = conf._container.find('input');
              conf._container.append(canvas);
  
              // at this location, the event is created
              conf.signaturePad = new SignaturePad(canvas[0], $.extend(conf.opts, {
                  backgroundColor: 'rgba(255, 255, 255, 0)',
                  penColor: 'rgb(0, 0, 0)',
              }));
  
              conf.signaturePad.addEventListener('endStroke', function () {
                  var val = conf.signaturePad.toDataURL();
                  conf._input.val(val).trigger('change', { editor: true });
              });
  
              conf._container.find('button').on('click', function () {
                  conf.signaturePad.clear();
              });
  
              return conf._container;
          },
  
          get: function (conf) {
              return conf._input.val();
          },
  
          set: function (conf, val) {
              conf.signaturePad.clear();
              conf._input.val('');
  
              if (val) {
                  conf._input.val(val);
                  conf.signaturePad.fromDataURL(val);
              }
          },
  
          enable: function (conf) {
              conf._enabled = true;
              $(conf._input).removeClass('disabled');
          },
  
          disable: function (conf) {
              conf._enabled = false;
              $(conf._input).addClass('disabled');
          },
      };
  })(jQuery, jQuery.fn.dataTable);
  
  

  I'll put it on our plug-ins page for Editor with the 2.1 release next week.

  Allan
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023 Answer ✓

  Add this CSS as well:

  div.DTE_Field_Type_handwriting div.DTE_Field_InputControl {
      position: relative;
  }
  
  div.DTE_Field_Type_handwriting div.DTE_Field_InputControl button {
      position: absolute;
      right: 0;
  }
  
  div.DTE_Field_Type_handwriting canvas {
      border: 1px solid #aaa;
      border-radius: 3px;
  }