@maz-ui/utils 5.0.0-beta.28 → 5.0.0-beta.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,7 @@ export interface SwipeValues {
|
|
|
6
6
|
xDiff: number | undefined;
|
|
7
7
|
yDiff: number | undefined;
|
|
8
8
|
}
|
|
9
|
-
export type SwipeEventCallback = (event:
|
|
9
|
+
export type SwipeEventCallback = (event: PointerEvent) => void;
|
|
10
10
|
export type SwipeValuesCallback = (values: SwipeValues) => void;
|
|
11
11
|
/**
|
|
12
12
|
* Options for handling swipe events.
|
|
@@ -48,28 +48,34 @@ export interface SwipeOptions {
|
|
|
48
48
|
*/
|
|
49
49
|
threshold?: number;
|
|
50
50
|
/**
|
|
51
|
-
* Whether to prevent the default behavior of
|
|
51
|
+
* Whether to prevent the default behavior of the pointer move event (the move listener
|
|
52
|
+
* becomes non-passive when enabled).
|
|
52
53
|
* @default false
|
|
53
54
|
*/
|
|
54
|
-
|
|
55
|
+
preventDefaultOnMove?: boolean;
|
|
55
56
|
/**
|
|
56
57
|
* Whether to prevent the default behavior of mousewheel event.
|
|
57
58
|
* @default false
|
|
58
59
|
*/
|
|
59
60
|
preventDefaultOnMouseWheel?: boolean;
|
|
60
61
|
/**
|
|
61
|
-
*
|
|
62
|
+
* Pointer types that can trigger the swipe.
|
|
63
|
+
* @default ['mouse', 'touch', 'pen']
|
|
64
|
+
*/
|
|
65
|
+
pointerTypes?: ('mouse' | 'touch' | 'pen')[];
|
|
66
|
+
/**
|
|
67
|
+
* Whether to start listening immediately on instantiation.
|
|
62
68
|
* @default false
|
|
63
69
|
*/
|
|
64
70
|
immediate?: boolean;
|
|
65
71
|
/**
|
|
66
|
-
* Whether to trigger the swipe event on
|
|
67
|
-
* If set to true, the swipe event will be triggered only when the user lifts their finger/
|
|
72
|
+
* Whether to trigger the swipe event on pointer up.
|
|
73
|
+
* If set to true, the swipe event will be triggered only when the user lifts their finger/pointer.
|
|
68
74
|
* @default false
|
|
69
75
|
*/
|
|
70
76
|
triggerOnEnd?: boolean;
|
|
71
77
|
}
|
|
72
|
-
type DefaultSwipeOptions = Required<Pick<SwipeOptions, '
|
|
78
|
+
type DefaultSwipeOptions = Required<Pick<SwipeOptions, 'preventDefaultOnMove' | 'preventDefaultOnMouseWheel' | 'threshold' | 'immediate' | 'triggerOnEnd'>>;
|
|
73
79
|
type SwipeOptionsWithDefaults = SwipeOptions & DefaultSwipeOptions;
|
|
74
80
|
export declare class Swipe {
|
|
75
81
|
readonly inputOption: SwipeOptions;
|
|
@@ -80,9 +86,10 @@ export declare class Swipe {
|
|
|
80
86
|
yEnd: number | undefined;
|
|
81
87
|
xDiff: number | undefined;
|
|
82
88
|
yDiff: number | undefined;
|
|
83
|
-
private
|
|
84
|
-
private readonly
|
|
85
|
-
private readonly
|
|
89
|
+
private pointerDown;
|
|
90
|
+
private readonly onPointerDownCallback;
|
|
91
|
+
private readonly onPointerMoveCallback;
|
|
92
|
+
private readonly onPointerUpCallback;
|
|
86
93
|
private readonly onMouseWheelCallback;
|
|
87
94
|
readonly start: (element?: typeof this.options.element) => void;
|
|
88
95
|
readonly stop: () => void;
|
|
@@ -91,11 +98,12 @@ export declare class Swipe {
|
|
|
91
98
|
private startListening;
|
|
92
99
|
private stopListening;
|
|
93
100
|
private setElement;
|
|
101
|
+
private isPointerAllowed;
|
|
94
102
|
private handleMouseWheel;
|
|
95
|
-
private
|
|
103
|
+
private handlePointerDown;
|
|
96
104
|
private emitValuesChanged;
|
|
97
|
-
private
|
|
98
|
-
private
|
|
105
|
+
private handlePointerMove;
|
|
106
|
+
private handlePointerUp;
|
|
99
107
|
private runCallbacks;
|
|
100
108
|
private resetValues;
|
|
101
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var defaultOptions={
|
|
1
|
+
var defaultOptions={preventDefaultOnMove:!1,preventDefaultOnMouseWheel:!1,threshold:50,immediate:!1,triggerOnEnd:!1};var Swipe=class{inputOption;element;xStart;yStart;xEnd;yEnd;xDiff;yDiff;pointerDown=!1;onPointerDownCallback;onPointerMoveCallback;onPointerUpCallback;onMouseWheelCallback;start;stop;options;constructor(inputOption){this.inputOption=inputOption,this.options={...defaultOptions,...inputOption},this.onPointerDownCallback=this.handlePointerDown.bind(this),this.onPointerMoveCallback=this.handlePointerMove.bind(this),this.onPointerUpCallback=this.handlePointerUp.bind(this),this.onMouseWheelCallback=this.handleMouseWheel.bind(this),this.start=this.startListening.bind(this),this.stop=this.stopListening.bind(this),this.options.element&&this.setElement(this.options.element),this.options.immediate&&this.start()}startListening(){this.setElement(this.options.element),this.element?.addEventListener(`pointerdown`,this.onPointerDownCallback,{passive:!0}),this.element?.addEventListener(`pointermove`,this.onPointerMoveCallback,{passive:!this.options.preventDefaultOnMove}),this.element?.addEventListener(`pointerup`,this.onPointerUpCallback,{passive:!0}),this.element?.addEventListener(`pointercancel`,this.onPointerUpCallback,{passive:!0}),this.options.preventDefaultOnMouseWheel&&this.element?.addEventListener(`mousewheel`,this.onMouseWheelCallback,{passive:!1})}stopListening(){this.element?.removeEventListener(`pointerdown`,this.onPointerDownCallback),this.element?.removeEventListener(`pointermove`,this.onPointerMoveCallback),this.element?.removeEventListener(`pointerup`,this.onPointerUpCallback),this.element?.removeEventListener(`pointercancel`,this.onPointerUpCallback),this.options.preventDefaultOnMouseWheel&&this.element?.removeEventListener(`mousewheel`,this.onMouseWheelCallback)}setElement(element){if(!element){console.error(`[maz-ui][SwipeHandler](setElement) Element should be provided. Its can be a string selector or an HTMLElement`);return}if(typeof element==`string`){let foundElement=document.querySelector(element);if(!(foundElement instanceof HTMLElement)){console.error(`[maz-ui][SwipeHandler](setElement) String selector for element is not found`);return}this.element=foundElement}else this.element=element}isPointerAllowed(event){let type=event.pointerType;return!this.options.pointerTypes||!type||this.options.pointerTypes.includes(type)}handleMouseWheel(event){event.preventDefault()}handlePointerDown(event){this.isPointerAllowed(event)&&(this.pointerDown=!0,this.xStart=event.clientX,this.yStart=event.clientY,this.emitValuesChanged())}emitValuesChanged(){this.options.onValuesChanged?.({xStart:this.xStart,yStart:this.yStart,xEnd:this.xEnd,yEnd:this.yEnd,xDiff:this.xDiff,yDiff:this.yDiff})}handlePointerMove(event){this.pointerDown&&(this.options.preventDefaultOnMove&&event.cancelable&&event.preventDefault(),this.xEnd=event.clientX,this.yEnd=event.clientY,!(this.xStart===void 0||this.yStart===void 0)&&(this.xDiff=this.xStart-this.xEnd,this.yDiff=this.yStart-this.yEnd,this.emitValuesChanged(),this.options.triggerOnEnd||this.runCallbacks(event)))}handlePointerUp(event){this.options.triggerOnEnd&&(this.runCallbacks(event),this.emitValuesChanged()),this.pointerDown=!1}runCallbacks(event){typeof this.xDiff!=`number`||typeof this.yDiff!=`number`||Math.abs(this.xDiff)<this.options.threshold&&Math.abs(this.yDiff)<this.options.threshold||(Math.abs(this.xDiff)>Math.abs(this.yDiff)?this.xDiff>0?this.options.onLeft?.(event):this.options.onRight?.(event):this.yDiff>0?this.options.onUp?.(event):this.options.onDown?.(event),this.resetValues())}resetValues(){this.xStart=void 0,this.yStart=void 0,this.xEnd=void 0,this.yEnd=void 0,this.xDiff=void 0,this.yDiff=void 0,this.emitValuesChanged()}};export{Swipe};
|
package/package.json
CHANGED