121 lines
4.9 KiB
PHP
121 lines
4.9 KiB
PHP
<script type="text/javascript">
|
|
// Initialize the image variables
|
|
var imgWidth;
|
|
var imgHeight;
|
|
|
|
// The Signature Pad Functions
|
|
function LenderStartSign()
|
|
{
|
|
// Check if the Browser Extension is Installed
|
|
var isInstalled = document.documentElement.getAttribute('SigPlusExtLiteExtension-installed');
|
|
if (!isInstalled) {
|
|
alert("SigPlusExtLite extension is either not installed or disabled. Please install or enable extension.");
|
|
return;
|
|
}
|
|
|
|
// Get the Signature Canvas Object
|
|
var canvasObj = document.getElementById('lenderCanvas');
|
|
|
|
// Clear the Signature Canvas Object
|
|
canvasObj.getContext('2d').clearRect(0, 0, canvasObj.width, canvasObj.height);
|
|
|
|
// Reset the Data Containers
|
|
document.getElementById("lenderSigStringData").value = "";
|
|
document.getElementById("lenderSigRawData").value = "";
|
|
|
|
// Set the Signature Image dimensions
|
|
imgWidth = canvasObj.width;
|
|
imgHeight = canvasObj.height;
|
|
|
|
// Set the Data to be sent to the Signature Pad
|
|
var message = { "firstName": "", "lastName": "", "eMail": "", "location": "", "imageFormat": 1, "imageX": imgWidth, "imageY": imgHeight, "imageTransparency": false, "imageScaling": false, "maxUpScalePercent": 0.0, "rawDataFormat": "ENC", "minSigPoints": 25 };
|
|
|
|
// Add Event Listener
|
|
top.document.addEventListener('SignResponse', LenderSignResponse, false);
|
|
|
|
// Prepare Data to be Sent
|
|
var messageData = JSON.stringify(message);
|
|
var element = document.createElement("MyLenderExtensionDataElement");
|
|
element.setAttribute("messageAttribute", messageData);
|
|
document.documentElement.appendChild(element);
|
|
var evt = document.createEvent("Events");
|
|
|
|
//Send the Data to the Signature Pad
|
|
evt.initEvent("SignStartEvent", true, false);
|
|
element.dispatchEvent(evt);
|
|
}
|
|
|
|
// Get Response from the Signature Pad
|
|
function LenderSignResponse(event)
|
|
{
|
|
var str = event.target.getAttribute("msgAttribute");
|
|
var obj = JSON.parse(str);
|
|
LenderSetValues(obj, imgWidth, imgHeight);
|
|
}
|
|
|
|
// Set the Input from the Signature Pad into the Data Containers and the Canvas
|
|
function LenderSetValues(objResponse, imageWidth, imageHeight)
|
|
{
|
|
var obj = null;
|
|
if(typeof(objResponse) === 'string'){
|
|
obj = JSON.parse(objResponse);
|
|
} else{
|
|
obj = JSON.parse(JSON.stringify(objResponse));
|
|
}
|
|
|
|
// Get the Canvas
|
|
var ctx = document.getElementById('lenderCanvas').getContext('2d');
|
|
|
|
// Check for Errors from the Signature Pad
|
|
if (obj.errorMsg != null && obj.errorMsg!="" && obj.errorMsg!="undefined")
|
|
{
|
|
// Display the Error Message
|
|
alert(obj.errorMsg);
|
|
}
|
|
// If No Errors
|
|
else
|
|
{
|
|
if (obj.isSigned)
|
|
{
|
|
// Put the Data into the Data Containers
|
|
document.getElementById("lenderSigRawData").value += obj.imageData;
|
|
document.getElementById("lenderSigStringData").value += obj.sigString;
|
|
|
|
// Draw the Image on the Canvas
|
|
var img = new Image();
|
|
img.onload = function ()
|
|
{
|
|
ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
|
|
}
|
|
img.src = "data:image/png;base64," + obj.imageData;
|
|
|
|
// Disable the 'Sign' Button
|
|
var sign_button = document.getElementById('lenderSignButton');
|
|
sign_button.style.display = "none";
|
|
var lender_confirm_field = document.getElementById('lender_confirm');
|
|
lender_confirm_field.innerHTML = '<i class="fas fa-check"></i> Underskrift modtaget';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- Hide Data Containers -->
|
|
<style>
|
|
#lenderSigStringData, #lenderSigRawData,#lenderCanvas{
|
|
display:none;
|
|
}
|
|
</style>
|
|
<!-- The Lender Signature Form -->
|
|
<div class="mb-3 row">
|
|
<div class="col-2 fw-bold">
|
|
@lang('lender') :
|
|
</div>
|
|
<div class="col">
|
|
<canvas id="lenderCanvas" name="lenderCanvas" width="300" height="80"></canvas>
|
|
<button id="lenderSignButton" class="btn btn-secondary" onclick="LenderStartSign()" @if(old('lenderSigRawData')) style="display:none;" @endif type="button">@lang('sign')</button>
|
|
<span id="lender_confirm">@if(old('lenderSigRawData'))<i class="fas fa-check"></i> Underskrift modtaget @endif</span>
|
|
<!-- Data Containers -->
|
|
<textarea id="lenderSigStringData" name="lenderSigStringData" rows="20" cols="50">@if(old('lenderSigStringData')){{old('lenderSigStringData')}}@endif</textarea>
|
|
<textarea id="lenderSigRawData" name="lenderSigRawData" rows="20" cols="50" required>@if(old('lenderSigRawData')){{old('lenderSigRawData')}}@endif</textarea>
|
|
</div>
|
|
</div>
|