Skip to content

Instantly share code, notes, and snippets.

@jwoudenberg
Created August 2, 2019 14:32
Show Gist options
  • Save jwoudenberg/38d5f63dcdbb288525f1694f238bd4ed to your computer and use it in GitHub Desktop.
Save jwoudenberg/38d5f63dcdbb288525f1694f238bd4ed to your computer and use it in GitHub Desktop.
window.setupDraggable = function setupDraggable(sendEvent) {
const BEACON_ATTRIBUTE = "data-beacon";
const MINIMUM_DRAG_DISTANCE_PX = 10;
document.addEventListener("pointerdown", awaitDragStart);
function awaitDragStart(startEvent) {
document.addEventListener("pointermove", maybeDragMove);
document.addEventListener("pointerup", stopAwaitingDrag);
function stopAwaitingDrag() {
document.removeEventListener("pointermove", maybeDragMove);
document.removeEventListener("pointerup", stopAwaitingDrag);
}
function maybeDragMove(moveEvent) {
const dragDistance = distance(coords(startEvent), coords(moveEvent));
if (dragDistance >= MINIMUM_DRAG_DISTANCE_PX) {
dragEvent("start", startEvent);
dragEvent("move", moveEvent);
stopAwaitingDrag();
document.addEventListener("pointermove", dragMove);
document.addEventListener("pointerup", dragEnd);
}
}
}
function dragEnd(event) {
dragEvent("stop", event);
document.removeEventListener("pointermove", dragMove);
document.removeEventListener("pointerup", dragEnd);
}
function dragMove(event) {
dragEvent("move", event);
}
function dragEvent(type, event) {
sendEvent({
type: type,
cursor: coords(event),
beacons: beaconPositions()
});
}
function beaconPositions() {
const beaconElements = document.querySelectorAll(`[${BEACON_ATTRIBUTE}]`);
return Array.from(beaconElements).map(beaconData);
}
function beaconData(elem) {
const boundingRect = elem.getBoundingClientRect();
const beaconId = elem.getAttribute(BEACON_ATTRIBUTE);
return {
id: tryParse(beaconId),
x: boundingRect.x,
y: boundingRect.y,
width: boundingRect.width,
height: boundingRect.height
};
}
function tryParse(str) {
try {
return JSON.parse(str);
} catch (e) {
return str;
}
}
function coords(event) {
return { x: event.clientX, y: event.clientY };
}
function distance(pos1, pos2) {
const dx = pos1.x - pos2.x;
const dy = pos1.y - pos2.y;
return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment