70 lines
1.5 KiB
JavaScript
70 lines
1.5 KiB
JavaScript
var Button = function() {
|
|
};
|
|
|
|
Button.TAPPED = 'tapped';
|
|
|
|
Button.initialize = function(element, onTap) {
|
|
var touchInfo = null;
|
|
|
|
if (typeof onTap === 'function') {
|
|
onTap = onTap.bind(element);
|
|
} else {
|
|
onTap = function() {};
|
|
}
|
|
|
|
function d2(x1, y1, x2, y2) {
|
|
var dx = x2 - x1, dy = y2 - y1;
|
|
return dx * dx + dy * dy;
|
|
}
|
|
|
|
function startTap(touch) {
|
|
touchInfo = {startX: touch.clientX, startY: touch.clientY, tapped: false};
|
|
element.classList.add(Button.TAPPED);
|
|
}
|
|
|
|
function endTap() {
|
|
element.classList.remove(Button.TAPPED);
|
|
touchInfo = null;
|
|
}
|
|
|
|
element.addEventListener('touchstart', function(e) {
|
|
startTap(e.changedTouches[0]);
|
|
e.preventDefault();
|
|
});
|
|
|
|
element.addEventListener('touchmove', function(e) {
|
|
if (touchInfo) {
|
|
var x0 = touchInfo.startX;
|
|
var y0 = touchInfo.startY;
|
|
var x = e.changedTouches[0].clientX;
|
|
var y = e.changedTouches[0].clientY;
|
|
|
|
var current = document.elementFromPoint(x, y);
|
|
|
|
const THRESHOLD_SQ_PX = 50 * 50;
|
|
if (!element.contains(current) || d2(x0, y0, x, y) > THRESHOLD_SQ_PX) {
|
|
endTap();
|
|
}
|
|
}
|
|
|
|
e.preventDefault();
|
|
});
|
|
|
|
element.addEventListener('touchend', function(e) {
|
|
if (touchInfo && !touchInfo.tapped) {
|
|
touchInfo.tapped = true;
|
|
onTap();
|
|
}
|
|
|
|
endTap();
|
|
e.preventDefault();
|
|
});
|
|
|
|
element.addEventListener('touchcancel', function(e) {
|
|
endTap();
|
|
e.preventDefault();
|
|
});
|
|
|
|
return element;
|
|
};
|