lunax/snipe_it
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity Actions

fixes signature canvas refresh on mobile

Browse source
This commit is contained in:
Godfrey M 2024-04-09 10:30:33 -07:00
parent 858da800be
commit 052f1eedd0
1 changed files with 12 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
resources/views/account/accept/create.blade.php
View file

@ -73,7 +73,6 @@
<canvas style="width:100%;"></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>
<button id="lock_button">Lock</button>
<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">
<button type="button" class="btn btn-sm btn-default clear" data-action="clear" id="clear_button">{{trans('general.clear_signature')}}</button> <button type="button" class="btn btn-sm btn-default clear" data-action="clear" id="clear_button">{{trans('general.clear_signature')}}</button>
</div> </div>
@ -96,24 +95,6 @@
<script nonce="{{ csrf_token() }}"> <script nonce="{{ csrf_token() }}">
const rotate_btn = document.querySelector("#lock_button");
rotate_btn.addEventListener("click", () => {
log.textContent += `Lock pressed \n`;
const oppositeOrientation = screen.orientation.type.startsWith("portrait")
? "landscape"
: "portrait";
screen.orientation
.lock(oppositeOrientation)
.then(() => {
log.textContent = `Locked to ${oppositeOrientation}\n`;
})
.catch((error) => {
log.textContent += `${error}\n`;
});
});
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]"),
@ -123,19 +104,20 @@
// 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.
function resizeCanvas() { if (window.matchMedia("(min-width: 768px)").matches) {
// When zoomed out to less than 100%, for some very strange reason, function resizeCanvas() {
// some browsers report devicePixelRatio as less than 1 // When zoomed out to less than 100%, for some very strange reason,
// and only part of the canvas is cleared then. // some browsers report devicePixelRatio as less than 1
var ratio = Math.max(window.devicePixelRatio || 1, 1); // and only part of the canvas is cleared then.
canvas.width = canvas.offsetWidth * ratio; var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.height = canvas.offsetHeight * ratio; canvas.width = canvas.offsetWidth * ratio;
canvas.getContext("2d").scale(ratio, ratio); canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
} }
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas); signaturePad = new SignaturePad(canvas);
$('#clear_button').on("click", function (event) { $('#clear_button').on("click", function (event) {