Update signature pad so it wont clear when height is adjusted; just width

This commit is contained in:
Aaron Lee 2021-09-23 18:04:18 +08:00
parent bec7ff7e85
commit f566884b44
4 changed files with 17 additions and 4 deletions

View file

@ -1 +0,0 @@
web: gunicorn app:app

View file

@ -5,7 +5,7 @@ Flask == 2.0.1
# Attendance/app.py: 3 # Attendance/app.py: 3
# Attendance/test.py: 1 # Attendance/test.py: 1
Pyrebase == 3.0.27 Pyrebase4 == 4.5.0
# Attendance/app.py: 8 # Attendance/app.py: 8
pandas == 1.1.3 pandas == 1.1.3

View file

@ -133,6 +133,7 @@
<script type="text/javascript" src="/static/jquery.min.js"></script> <script type="text/javascript" src="/static/jquery.min.js"></script>
<script> <script>
var signaturePad, selPeriod; var signaturePad, selPeriod;
var width = $(window).width();
function submitForm() { function submitForm() {
if (!signaturePad.isEmpty()) { if (!signaturePad.isEmpty()) {
loadingAnimation(); loadingAnimation();
@ -164,6 +165,7 @@
var canvas = document.getElementById("signature_pad^" + period); var canvas = document.getElementById("signature_pad^" + period);
signaturePad = new SignaturePad(canvas); signaturePad = new SignaturePad(canvas);
width = $(window).width();
function resizeCanvas() { function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1); var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio; canvas.width = canvas.offsetWidth * ratio;
@ -171,7 +173,12 @@
canvas.getContext("2d").scale(ratio, ratio); canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear(); // otherwise isEmpty() might return incorrect value signaturePad.clear(); // otherwise isEmpty() might return incorrect value
} }
window.addEventListener("resize", resizeCanvas); window.addEventListener("resize", () => {
if (width != $(window).width()) {
resizeCanvas();
width = $(window).width();
}
});
resizeCanvas(); resizeCanvas();
} }
function unCheckAbs(string) { function unCheckAbs(string) {

View file

@ -228,6 +228,7 @@
</footer> </footer>
<script> <script>
var signaturePad, hrCfrm = false; var signaturePad, hrCfrm = false;
var width = $(window).width();
var periodData = {} var periodData = {}
{% for i in periods %} {% for i in periods %}
periodData['{{i}}'] = '{{ absData[currDate][i]['name'] }}' periodData['{{i}}'] = '{{ absData[currDate][i]['name'] }}'
@ -264,6 +265,7 @@
$('#finalCheck').removeAttr('hidden'); $('#finalCheck').removeAttr('hidden');
var canvas = document.getElementById("signature_pad"); var canvas = document.getElementById("signature_pad");
signaturePad = new SignaturePad(canvas); signaturePad = new SignaturePad(canvas);
width = $(window).width();
function resizeCanvas() { function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1); var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio; canvas.width = canvas.offsetWidth * ratio;
@ -271,7 +273,12 @@
canvas.getContext("2d").scale(ratio, ratio); canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear(); // otherwise isEmpty() might return incorrect value signaturePad.clear(); // otherwise isEmpty() might return incorrect value
} }
window.addEventListener("resize", resizeCanvas); window.addEventListener("resize", () => {
if (width != $(window).width()) {
resizeCanvas();
width = $(window).width();
}
});
resizeCanvas(); resizeCanvas();
} }
function afterSelAbs(period) { function afterSelAbs(period) {