svelte-ux
Version:
- Increment version in `package.json` and commit as `Version bump to x.y.z` - `npm run publish`
108 lines (107 loc) • 3.85 kB
JavaScript
/**
* Dispatch event after element has been pressed for a duration of time
*/
export function longpress(node, duration) {
let timeoutID;
const handleMousedown = () => {
timeoutID = window.setTimeout(() => {
node.dispatchEvent(new CustomEvent('longpress'));
}, duration);
};
const handleMouseup = () => {
clearTimeout(timeoutID);
};
node.addEventListener('mousedown', handleMousedown);
node.addEventListener('mouseup', handleMouseup);
return {
update(newDuration) {
duration = newDuration;
},
destroy() {
node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup);
},
};
}
export function pannable(node, options = {}) {
let lastX = 0;
let lastY = 0;
function handleMouseDown(event) {
lastX = event.clientX;
lastY = event.clientY;
node.dispatchEvent(new CustomEvent('panstart', {
detail: { x: lastX, y: lastY },
}));
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
}
function handleMouseMove(event) {
var _a, _b, _c, _d;
// TODO: Handle page scroll? clientX/Y is based on viewport (apply to parent?)
let dx = event.clientX - lastX;
let dy = event.clientY - lastY;
const xEnabled = (_b = (_a = options === null || options === void 0 ? void 0 : options.axis) === null || _a === void 0 ? void 0 : _a.includes('x')) !== null && _b !== void 0 ? _b : true;
const yEnabled = (_d = (_c = options === null || options === void 0 ? void 0 : options.axis) === null || _c === void 0 ? void 0 : _c.includes('y')) !== null && _d !== void 0 ? _d : true;
if (options.step) {
if (Math.abs(dx) >= options.step) {
dx = dx - (dx % options.step);
lastX = event.clientX;
}
else {
dx = 0;
}
if (Math.abs(dy) >= options.step) {
dy = dy - (dy % options.step);
lastY = event.clientY;
}
else {
dy = 0;
}
}
else if (options.stepPercent) {
const parentWidth = node.parentElement.offsetWidth;
const parentHeight = node.parentElement.offsetHeight;
if (Math.abs(dx / parentWidth) >= options.stepPercent) {
dx = dx - (dx % (parentWidth * options.stepPercent));
lastX = event.clientX;
}
else {
dx = 0;
}
if (Math.abs(dy / parentHeight) >= options.stepPercent) {
dy = dy - (dy % (parentHeight * options.stepPercent));
lastY = event.clientY;
}
else {
dy = 0;
}
}
else {
lastX = event.clientX;
lastY = event.clientY;
}
if ((xEnabled && dx) || (yEnabled && dy)) {
node.dispatchEvent(new CustomEvent('panmove', {
detail: { x: lastX, y: lastX, dx: xEnabled ? dx : 0, dy: yEnabled ? dy : 0 },
}));
}
else {
// Not enough change
}
}
function handleMouseUp(event) {
lastX = event.clientX;
lastY = event.clientY;
node.dispatchEvent(new CustomEvent('panend', {
detail: { x: lastX, y: lastY },
}));
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
}
node.addEventListener('mousedown', handleMouseDown);
return {
destroy() {
node.removeEventListener('mousedown', handleMouseDown);
},
};
}