Your IP : 216.73.216.224
/**
* @package Joomla
* @subpackage Membership Pro
* @author Tuan Pham Ngoc
* @copyright Copyright (C) 2012 - 2026 Ossolution Team
* @license GNU/GPL, see LICENSE.php
*
* Initialises all .osm-signature-wrapper canvas-based signature pads on the page.
* Depends on: signature_pad (UMD)
*/
(function () {
'use strict';
/**
* Initialise a single signature-pad wrapper element.
*
* @param {HTMLElement} wrapper
*/
const initSignaturePadForWrapper = (wrapper) => {
const canvas = wrapper.querySelector('.osm-signature-canvas');
const input = wrapper.querySelector('.osm-signature-data');
const btnClear = wrapper.querySelector('.osm-signature-clear');
if (!canvas || !input || !btnClear) {
return;
}
if (typeof SignaturePad === 'undefined') {
// Library not yet loaded – retry shortly
setTimeout(() => initSignaturePadForWrapper(wrapper), 100);
return;
}
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255,255,255)'
});
// Populate the hidden field with PNG data just before the form is submitted
const form = canvas.closest('form');
if (form) {
form.addEventListener('submit', () => {
if (!signaturePad.isEmpty()) {
input.value = signaturePad.toDataURL('image/png');
}
});
}
// Clear button wipes the canvas and the hidden field
btnClear.addEventListener('click', () => {
signaturePad.clear();
input.value = '';
// Hide the existing signature preview if present
/*
const existingId = canvas.id.replace('_canvas', '_existing');
const existing = document.getElementById(existingId);
if (existing) {
existing.style.display = 'none';
}
*/
});
// Resize handler – preserves drawn strokes across window resizes
const resizeCanvas = () => {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
const width = canvas.offsetWidth;
const height = canvas.offsetHeight;
const data = signaturePad.toData();
canvas.width = (width || 400) * ratio;
canvas.height = (height || 200) * ratio;
canvas.getContext('2d').scale(ratio, ratio);
signaturePad.clear();
if (data && data.length > 0) {
signaturePad.fromData(data);
}
};
let resizeTimer;
const debouncedResize = () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeCanvas, 150);
};
window.addEventListener('resize', debouncedResize);
};
/**
* Find and initialise every signature wrapper on the page.
*/
const initAll = () => {
Array.from(document.querySelectorAll('.osm-signature-wrapper'))
.forEach(initSignaturePadForWrapper);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAll);
} else {
initAll();
}
}());