Add clear button in handwriting plugin

Add clear button in handwriting plugin

GargiucnGargiucn Posts: 109Questions: 30Answers: 0

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

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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;
    }
    
Sign In or Register to comment.