Merge pull request #14577 from Godmartinz/signature_pad_upgrade

Upgraded Signature-pad.js  && Fixed Resizing Canvas on mobile
This commit is contained in:
snipe 2024-04-11 15:35:47 +01:00 committed by GitHub
commit b5c83721ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 12 deletions

5
package-lock.json generated
View file

@ -19162,6 +19162,11 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true "dev": true
}, },
"signature_pad": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.2.0.tgz",
"integrity": "sha512-YLWysmaUBaC5wosAKkgbX7XI+LBv2w5L0QUcI6Jc4moHYzv9BUBJtAyNLpWzHjtjKTeWOH6bfP4a4pzf0UinfQ=="
},
"simple-concat": { "simple-concat": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",

View file

@ -56,6 +56,7 @@
"papaparse": "^4.3.3", "papaparse": "^4.3.3",
"select2": "4.0.13", "select2": "4.0.13",
"sheetjs": "^2.0.0", "sheetjs": "^2.0.0",
"signature_pad": "^4.2.0",
"tableexport.jquery.plugin": "1.28.0", "tableexport.jquery.plugin": "1.28.0",
"tether": "^1.4.0", "tether": "^1.4.0",
"vue-resource": "^1.5.2", "vue-resource": "^1.5.2",

View file

@ -70,7 +70,7 @@
<h3 style="padding-top: 20px">{{trans('general.sign_tos')}}</h3> <h3 style="padding-top: 20px">{{trans('general.sign_tos')}}</h3>
<div id="signature-pad" class="m-signature-pad"> <div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body col-md-12 col-sm-12 col-lg-12 col-xs-12"> <div class="m-signature-pad--body col-md-12 col-sm-12 col-lg-12 col-xs-12">
<canvas></canvas> <canvas style="width:100%;"></canvas>
<input type="hidden" name="signature_output" id="signature_output"> <input type="hidden" name="signature_output" id="signature_output">
</div> </div>
<div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center"> <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">
@ -94,6 +94,7 @@
@section('moar_scripts') @section('moar_scripts')
<script nonce="{{ csrf_token() }}"> <script nonce="{{ csrf_token() }}">
var wrapper = document.getElementById("signature-pad"), var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"), clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"), saveButton = wrapper.querySelector("[data-action=save]"),
@ -103,6 +104,7 @@
// Adjust canvas coordinate space taking into account pixel ratio, // Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices. // to make it look crisp on mobile devices.
// This also causes canvas to be cleared. // This also causes canvas to be cleared.
if (window.matchMedia("(min-width: 768px)").matches) {
function resizeCanvas() { function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason, // When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1 // some browsers report devicePixelRatio as less than 1
@ -112,9 +114,9 @@
canvas.height = canvas.offsetHeight * ratio; canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio); canvas.getContext("2d").scale(ratio, ratio);
} }
window.onresize = resizeCanvas; window.onresize = resizeCanvas;
resizeCanvas(); resizeCanvas();
}
signaturePad = new SignaturePad(canvas); signaturePad = new SignaturePad(canvas);