@selenite/commons
Version:
This typescript package provides a set of frequently used utilities, types and svelte actions for building projects with Typescript and Svelte.
80 lines (79 loc) • 2.73 kB
JavaScript
/**
* Actions that behave like an on click event listener but with additional conditions.
*
* @see {@link clickIfNoDrag}
* @module
*/
import { distance, posFromClient } from '../utils';
/**
* Action that triggers a callback if the pointer is not moved after a pointerdown event.
*/
export function clickIfNoDrag(node, options) {
let pointerdownPos;
function onpointerup(e) {
node.removeEventListener('pointerup', onpointerup);
node.removeEventListener('pointermove', onpointermove);
options.onclick?.(e);
}
function onpointermove(e) {
const pos = posFromClient(e);
if (distance(pointerdownPos, pos) > (options.threshold ?? 2)) {
node.removeEventListener('pointerup', onpointerup);
node.removeEventListener('pointermove', onpointermove);
}
}
function onpointerdown(e) {
pointerdownPos = posFromClient(e);
node.addEventListener('pointerup', onpointerup);
node.addEventListener('pointermove', onpointermove, { passive: true });
}
node.addEventListener('pointerdown', onpointerdown);
return {
destroy() {
node.removeEventListener('pointerdown', onpointerdown);
node.removeEventListener('pointerup', onpointerup);
node.removeEventListener('pointermove', onpointermove);
},
update(newOptions) {
options = newOptions;
}
};
}
/**
* Action that triggers a callback if the pointer is moved after a pointerdown event.
*/
export function clickIfDrag(node, options) {
let pointerdownPos;
let drag = false;
function onpointerup(e) {
node.removeEventListener('pointerup', onpointerup);
node.removeEventListener('pointermove', onpointermove);
if (drag)
options.onclick?.(e);
drag = false;
}
function onpointermove(e) {
const pos = posFromClient(e);
if (distance(pointerdownPos, pos) > (options.threshold ?? 2)) {
node.removeEventListener('pointermove', onpointermove);
drag = true;
}
}
function onpointerdown(e) {
drag = false;
pointerdownPos = posFromClient(e);
node.addEventListener('pointerup', onpointerup);
node.addEventListener('pointermove', onpointermove, { passive: true });
}
node.addEventListener('pointerdown', onpointerdown);
return {
destroy() {
node.removeEventListener('pointerdown', onpointerdown);
node.removeEventListener('pointerup', onpointerup);
node.removeEventListener('pointermove', onpointermove);
},
update(newOptions) {
options = newOptions;
}
};
}