From cf892211be489b725819b661bfda34f07ed410ed Mon Sep 17 00:00:00 2001
From: s3lph <account-gitlab-ideynizv@kernelpanic.lol>
Date: Wed, 11 Jul 2018 15:03:21 +0200
Subject: [PATCH] Fixed #8: Touchkey did not work in Firefox.  Apparently
 MouseEvent.offset{X,Y} are experimental features that don't seem to properly
 there.

---
 static/js/touchkey.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/static/js/touchkey.js b/static/js/touchkey.js
index ed18a48..12a945f 100644
--- a/static/js/touchkey.js
+++ b/static/js/touchkey.js
@@ -59,7 +59,9 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
 
     svg.onmousedown = (ev) => {
         clearTouchkey();
-        let svgrect = svg.getBoundingClientRect();
+        const svgrect = svg.getBoundingClientRect();
+        const trX = ev.x - svgrect.left;
+        const trY = ev.y - svgrect.top;
         let minId = '';
         let minDist = Infinity;
         let minx = 0;
@@ -68,7 +70,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
         document.getElementsByClassName('c').forEach((circle) => {
             let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
             let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height;
-            let dist = Math.pow(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
+            let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2);
             if (dist < minDist) {
                 minDist = dist;
                 minId = circle.id;
@@ -76,7 +78,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
                 miny = y;
             }
         });
-        currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
+        currentStroke = drawLine(minx, miny, trX, trY);
         doneMap[minId] = 1;
         enteredKey += minId;
     };
@@ -93,8 +95,10 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
     };
 
     svg.onmousemove = (ev) => {
+        const svgrect = svg.getBoundingClientRect();
+        const trX = ev.x - svgrect.left;
+        const trY = ev.y - svgrect.top;
         if (currentStroke != null) {
-            let svgrect = svg.getBoundingClientRect();
             let minId = '';
             let minDist = Infinity;
             let minx = 0;
@@ -102,7 +106,7 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
             document.getElementsByClassName('c').forEach((circle) => {
                 let x = parseFloat(circle.getAttribute('cx')) / 100.0 * svgrect.width;
                 let y = parseFloat(circle.getAttribute('cy')) / 100.0 * svgrect.height;
-                let dist = Math.pow(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
+                let dist = Math.pow(trX - x, 2) + Math.pow(trY - y, 2);
                 if (dist < minDist) {
                     minDist = dist;
                     minId = circle.id;
@@ -114,13 +118,13 @@ initTouchkey = (keepPattern, svgid, formid, formfieldid) => {
                 let line = svg.getElementById(currentStroke);
                 line.setAttribute('x2', minx);
                 line.setAttribute('y2', miny);
-                currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
+                currentStroke = drawLine(minx, miny, trX, trY);
                 doneMap[minId] = 1;
                 enteredKey += minId;
             }
             let line = svg.getElementById(currentStroke);
-            line.setAttribute('x2', ev.offsetX);
-            line.setAttribute('y2', ev.offsetY);
+            line.setAttribute('x2', trX);
+            line.setAttribute('y2', trY);
         }
     };