Add clear button in handwriting plugin

Gargiucn

Good evening,
I am successfully using the handwriting plugin.
With signaturePad it is possible to delete the signature and rewrite it before confirming the form.
This is done by inserting a button, for example:

<button type="button" class="btn btn-secondary btn-sm" onclick="signaturePad.clear();"><i class="fa fa-trash-o fa-lg"></i></button>

I think it would be useful to be able to use this within the editor but I am not smart enough to understand how to do it...

Thank you,
Giuseppe

allan

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

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

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;
}