@namiml/web-sdk
Version:
Nami Web SDK makes subscriptions & in-app purchases easy, with powerful built-in paywalls and A/B testing
75 lines (74 loc) • 2.59 kB
TypeScript
export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
export interface SwipeDetail {
direction: SwipeDirection;
distanceX: number;
distanceY: number;
absX: number;
absY: number;
duration: number;
velocity: number;
startX: number;
startY: number;
endX: number;
endY: number;
startedAt: number;
endedAt: number;
originalEvent: PointerEvent;
}
export type SwipeHandler = (detail: SwipeDetail) => void;
export interface SwipeOptions {
/**
* Minimum distance in px along the primary axis to qualify as a swipe.
* Default: 30
*/
minDistance?: number;
/**
* Maximum allowed duration (ms) for a swipe gesture.
* Swipes slower than this are ignored. Default: 600
*/
maxDuration?: number;
/**
* If true, we’ll treat the first dominant axis as locked, which
* helps filter diagonal drags. Default: true
*/
lockAxis?: boolean;
/**
* If true, set `touch-action: none` on the element for the lifetime
* of the detector to avoid browser scroll interference. Default: false
*/
preventScrollOnSwipe?: boolean;
/**
* Allowed pointer types. Default: ['touch'] (most common for swipes)
*/
pointerTypes?: Array<'touch' | 'mouse' | 'pen'>;
/**
* If true, listeners are registered as passive where sensible.
* We never rely on preventDefault; CSS touch-action is used instead.
* Default: true
*/
passiveListeners?: boolean;
/** We only care about vertical in your case */
/**
* Hint to the detector about which axis you care about most.
* - 'y' (default): prefer vertical gestures. Useful when the UI is
* primarily vertically scrolling and you want more aggressive vertical
* swipe detection.
* - 'x': prefer horizontal gestures.
* - 'both': do not bias; choose the axis based on the gesture's delta and
* the optional axis lock.
*
* This is a hint only. When set to 'both' the normal heuristics (dominant
* axis or axis-lock) determine the primary axis.
*/
axisHint?: 'x' | 'y' | 'both';
/**
* Extra pixels required *after* a scrollable child hits its edge
* before we treat it as a swipe. Helps avoid accidental edge triggers.
*/
edgeLeakThreshold?: number;
}
export interface SwipeController {
destroy(): void;
updateOptions(next: Partial<SwipeOptions>): void;
}
export declare function onSwipe(element: HTMLElement | null | undefined, handler: SwipeHandler, options?: SwipeOptions): SwipeController;