jonny/matemat
1
0
Fork 0
forked from s3lph/matemat
Code Pull requests Activity

Fixed #8: Touchkey did not work in Firefox. Apparently MouseEvent.offset{X,Y} are experimental features that don't seem to properly there.

Browse source
This commit is contained in:
s3lph 2018-07-11 15:03:21 +02:00
parent c3a7f3cf16
commit cf892211be
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/js/touchkey.js
View file

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