replace jquery js in value.signature.tpl.php with vanilla

yakamara · Aug 28, 2024 · 8f86a7f · 8f86a7f
1 parent 584d025
commit 8f86a7f
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/ytemplates/bootstrap/value.signature.tpl.php b/ytemplates/bootstrap/value.signature.tpl.php
@@ -92,15 +92,15 @@
             initSignature_<?= $this->getName() ?>();
         });
     } else {
-        $(document).ready(function(){
+        document.addEventListener("DOMContentLoaded", function() {
             initSignature_<?= $this->getName() ?>();
         });
     }
 
     function initSignature_<?= $this->getName() ?>() {
         let base_id = '<?= $this->getName() ?>',
-            canvas = $("#canvas-"+ base_id)[0],
-            target = $("#canvas-target-"+ base_id),
+            canvas = document.getElementById("canvas-" + base_id),
+            target = document.getElementById("canvas-target-" + base_id),
             ctx,
             flag = false,
             dot_flag = false,
@@ -112,8 +112,8 @@ function initSignature_<?= $this->getName() ?>() {
             y = 2;
 
         ctx = canvas.getContext("2d");
-        w = canvas.width = $(canvas).width();
-        h = canvas.height = $(canvas).height();
+        w = canvas.width = canvas.offsetWidth;
+        h = canvas.height = canvas.offsetHeight;
 
         canvas.addEventListener("mousedown", handleStart, false);
         canvas.addEventListener("mousemove", handleMove, false);
@@ -174,25 +174,26 @@ function handleCancel(evt) {
         }
 
         function draw() {
-            let offset = $(canvas).offset();
-            let scrollTop = $("html").scrollTop();
-            let scrollLeft = $("html").scrollLeft();
+            let offset = canvas.getBoundingClientRect();
+
             ctx.beginPath();
-            ctx.moveTo(prevX - offset.left + scrollLeft, prevY - offset.top + scrollTop);
-            ctx.lineTo(currX - offset.left + scrollLeft, currY - offset.top + scrollTop);
+            ctx.moveTo(prevX - offset.left, prevY - offset.top);
+            ctx.lineTo(currX - offset.left, currY - offset.top);
             ctx.strokeStyle = x;
             ctx.lineWidth = y;
             ctx.stroke();
             ctx.closePath();
-            // push result to input hidden
-            target.val(canvas.toDataURL());
+            //console.log(prevX - offset.left, prevY - offset.top, currX - offset.left, currY - offset.top);
+
+            // Ergebnis in das versteckte Eingabefeld einfügen
+            target.value = canvas.toDataURL();
         }
     }
 
     function eraseSignature_<?= $this->getName() ?>() {
         let m = confirm("Zeichenfläche wirklich löschen?");
         if (m) {
-            $("#canvas-<?= $this->getName() ?>")[0].getContext("2d").clearRect(0, 0, w, h);
+            document.getElementById("canvas-<?= $this->getName() ?>").getContext("2d").clearRect(0, 0, w, h);
         }
     }
 </script>