https://crmsindonesia.org/wp-content/plugins/extensions-for-cf7/assets/js/signature-active.js?ver=3.4.5

1jQuery(document).ready(function ($) {
2
3    function extcf7_signature() {
4        const forms = $(".wpcf7-form");
5
6        forms.each(function (form_index, form) {
7            const fileInput = $(form).find('.extcf7_signature_field_input');
8            fileInput.css('display', 'none');
9
10            $(form).find(".extcf7_signature_pad").each(function (pad_index, pad) {
11                const canvas = $(pad).find('canvas').get(0);
12                const inputField = $(pad).closest('.wpcf7-form-control-wrap').find('.extcf7_signature_field_input');
13                const inputName = inputField.attr('name');
14                
15                const pad_bg_color = canvas.dataset?.bgColor;
16                const pen_color = canvas.dataset?.penColor;
17                
18                const signature = new SignaturePad(canvas, {
19                    includeBackgroundColor: true,
20                    backgroundColor: pad_bg_color,
21                    penColor: pen_color,
22                });
23
24                signature.addEventListener('endStroke', function () {
25                    if (!signature.isEmpty()) {
26                        // Convert signature to PNG image
27                        const dataURL = signature.toDataURL('image/png');
28                        
29                        // Convert data URL to Blob
30                        const blobBin = atob(dataURL.split(',')[1]);
31                        const array = [];
32                        for(let i = 0; i < blobBin.length; i++) {
33                            array.push(blobBin.charCodeAt(i));
34                        }
35                        const blob = new Blob([new Uint8Array(array)], {type: 'image/png'});
36                        
37                        // Create a File object from the Blob
38                        const filename = 'signature.png';
39                        const file = new File([blob], filename, {type: 'image/png'});
40                        
41                        // Create a FileList-like object
42                        const dataTransfer = new DataTransfer();
43                        dataTransfer.items.add(file);
44                        
45                        // Set the file to the input field
46                        inputField[0].files = dataTransfer.files;
47                    }
48                });
49
50                $(pad).find('.extcf7_signature_clear_button').on('click', function () {
51                    signature.clear();
52                    
53                    // Clear the file input when signature is cleared
54                    const dataTransfer = new DataTransfer();
55                    inputField[0].files = dataTransfer.files;
56                });
57            });
58        });
59    }
60
61    extcf7_signature();
62    
63    // Re-initialize signature pads when CF7 reloads the form
64    $(document).on('wpcf7:spam wpcf7:invalid wpcf7:mailsent wpcf7:mailfailed', function() {
65        setTimeout(extcf7_signature, 100);
66    });
67});