@whitesev/pops 1.7.3 → 1.7.5

package/src/utils/PopsInstanceUtils.ts

@@ -489,6 +489,7 @@ export const PopsInstanceUtils = {
 		options: {
 			dragElement: HTMLElement;
 			limit: boolean;
+			triggerClick?: boolean;
 			extraDistance: number;
 			container?: Window | typeof globalThis | HTMLElement;
 			moveCallBack?: (
@@ -509,6 +510,7 @@ export const PopsInstanceUtils = {
 				limit: true,
 				extraDistance: 3,
 				container: PopsCore.globalThis,
+				triggerClick: true,
 			},
 			options
 		);
@@ -519,7 +521,7 @@ export const PopsInstanceUtils = {
 		let clickElementTopOffset = 0;
 		let AnyTouch = popsUtils.AnyTouch();
 		let anyTouchElement = new AnyTouch(options.dragElement, {
-			preventEvent(event: Event) {
+			preventDefault(event: Event) {
 				if (typeof options.preventEvent === "function") {
 					return options.preventEvent(event as any);
 				} else {
@@ -606,133 +608,125 @@ export const PopsInstanceUtils = {
 
 		let resumeMoveElementStyle: Function | null = null;
 
-		anyTouchElement.on(
-			"pan",
-			function (
-				event: PointerEvent & {
-					phase: string;
-				}
-			) {
-				if (!isMove) {
-					isMove = true;
-					let rect = options.dragElement.getBoundingClientRect();
-					clickElementLeftOffset = event.x - rect.left;
-					clickElementTopOffset = event.y - rect.top;
-					transformInfo = getTransform(moveElement);
-					transformLeft = transformInfo.transformLeft;
-					transformTop = transformInfo.transformTop;
-					//if (event.nativeEvent.offsetX) {
-					//  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
-					//} else {
-					//  clickElementLeftOffset = parseInt(event.getOffset().x);
-					//}
-					//if (event.nativeEvent.offsetY) {
-					//  clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
-					//} else {
-					//  clickElementTopOffset = parseInt(event.getOffset().y);
-					//}
-					resumeMoveElementStyle = changeMoveElementStyle(moveElement);
-				}
+		anyTouchElement.on("pan", function (event) {
+			if (!isMove) {
+				isMove = true;
+				let rect = options.dragElement.getBoundingClientRect();
+				clickElementLeftOffset = event.x - rect.left;
+				clickElementTopOffset = event.y - rect.top;
+				transformInfo = getTransform(moveElement);
+				transformLeft = transformInfo.transformLeft;
+				transformTop = transformInfo.transformTop;
+				//if (event.nativeEvent.offsetX) {
+				//  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
+				//} else {
+				//  clickElementLeftOffset = parseInt(event.getOffset().x);
+				//}
+				//if (event.nativeEvent.offsetY) {
+				//  clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
+				//} else {
+				//  clickElementTopOffset = parseInt(event.getOffset().y);
+				//}
+				resumeMoveElementStyle = changeMoveElementStyle(moveElement);
+			}
 
-				/** 当前移动的left偏移 */
-				let currentMoveLeftOffset =
-					event.x - clickElementLeftOffset + transformLeft;
-				/** 当前移动的top偏移 */
-				let currentMoveTopOffset =
-					event.y - clickElementTopOffset + transformTop;
-				/* 拖拽移动 */
-				if (event.phase === "move") {
-					if (options.limit) {
-						/* 限制在容器内移动 */
-						/* left偏移最大值 */
-						let maxLeftOffset =
-							getContainerWidthOrHeight(options.container!).width -
-							popsDOMUtils.width(moveElement) +
-							transformLeft;
-						let { left: minLeftOffset, top: minTopOffset } =
-							getContainerTopOrLeft(options.container!);
-						/* top偏移的最大值 */
-						let maxTopOffset =
-							getContainerWidthOrHeight(options.container!).height -
-							popsDOMUtils.height(moveElement) +
-							transformTop;
-						if (currentMoveLeftOffset > maxLeftOffset) {
-							/* 不允许超过容器的最大宽度 */
-							currentMoveLeftOffset = maxLeftOffset;
-						}
-						if (currentMoveTopOffset > maxTopOffset) {
-							/* 不允许超过容器的最大高度 */
-							currentMoveTopOffset = maxTopOffset;
-						}
-						if (
-							currentMoveLeftOffset - options.extraDistance * 2 <
-							minLeftOffset + transformLeft
-						) {
-							/* 不允许left偏移小于容器最小值 */
-							currentMoveLeftOffset = minLeftOffset + transformLeft;
-							/* 最左边 +额外距离 */
-							currentMoveLeftOffset += options.extraDistance;
-						} else {
-							/* 最右边 -额外距离 */
-							currentMoveLeftOffset -= options.extraDistance;
-						}
-						if (
-							currentMoveTopOffset - options.extraDistance * 2 <
-							minTopOffset + transformTop
-						) {
-							/* 不允许top偏移小于容器最小值 */
-							currentMoveTopOffset = minTopOffset + transformTop;
-							/* 最上面 +额外距离 */
-							currentMoveTopOffset += options.extraDistance;
-						} else {
-							/* 最下面 -额外距离 */
-							currentMoveTopOffset -= options.extraDistance;
-						}
+			/** 当前移动的left偏移 */
+			let currentMoveLeftOffset =
+				event.x - clickElementLeftOffset + transformLeft;
+			/** 当前移动的top偏移 */
+			let currentMoveTopOffset = event.y - clickElementTopOffset + transformTop;
+			/* 拖拽移动 */
+			if (event.phase === "move") {
+				if (options.limit) {
+					/* 限制在容器内移动 */
+					/* left偏移最大值 */
+					let maxLeftOffset =
+						getContainerWidthOrHeight(options.container!).width -
+						popsDOMUtils.width(moveElement) +
+						transformLeft;
+					let { left: minLeftOffset, top: minTopOffset } =
+						getContainerTopOrLeft(options.container!);
+					/* top偏移的最大值 */
+					let maxTopOffset =
+						getContainerWidthOrHeight(options.container!).height -
+						popsDOMUtils.height(moveElement) +
+						transformTop;
+					if (currentMoveLeftOffset > maxLeftOffset) {
+						/* 不允许超过容器的最大宽度 */
+						currentMoveLeftOffset = maxLeftOffset;
 					}
-					if (typeof options.moveCallBack === "function") {
-						options.moveCallBack(
-							moveElement,
-							currentMoveLeftOffset,
-							currentMoveTopOffset
-						);
+					if (currentMoveTopOffset > maxTopOffset) {
+						/* 不允许超过容器的最大高度 */
+						currentMoveTopOffset = maxTopOffset;
 					}
-
-					popsDOMUtils.css(moveElement, {
-						left: currentMoveLeftOffset + "px",
-						top: currentMoveTopOffset + "px",
-					});
-				}
-
-				/* 停止拖拽 */
-				if (event.phase === "end") {
-					isMove = false;
-					if (typeof resumeMoveElementStyle === "function") {
-						resumeMoveElementStyle();
-						resumeMoveElementStyle = null;
+					if (
+						currentMoveLeftOffset - options.extraDistance * 2 <
+						minLeftOffset + transformLeft
+					) {
+						/* 不允许left偏移小于容器最小值 */
+						currentMoveLeftOffset = minLeftOffset + transformLeft;
+						/* 最左边 +额外距离 */
+						currentMoveLeftOffset += options.extraDistance;
+					} else {
+						/* 最右边 -额外距离 */
+						currentMoveLeftOffset -= options.extraDistance;
 					}
-					if (typeof options.endCallBack === "function") {
-						options.endCallBack(
-							moveElement,
-							currentMoveLeftOffset,
-							currentMoveTopOffset
-						);
+					if (
+						currentMoveTopOffset - options.extraDistance * 2 <
+						minTopOffset + transformTop
+					) {
+						/* 不允许top偏移小于容器最小值 */
+						currentMoveTopOffset = minTopOffset + transformTop;
+						/* 最上面 +额外距离 */
+						currentMoveTopOffset += options.extraDistance;
+					} else {
+						/* 最下面 -额外距离 */
+						currentMoveTopOffset -= options.extraDistance;
 					}
 				}
+				if (typeof options.moveCallBack === "function") {
+					options.moveCallBack(
+						moveElement,
+						currentMoveLeftOffset,
+						currentMoveTopOffset
+					);
+				}
+
+				popsDOMUtils.css(moveElement, {
+					left: currentMoveLeftOffset + "px",
+					top: currentMoveTopOffset + "px",
+				});
 			}
-		);
-		/* 因为会覆盖上面的点击事件，主动触发一下 */
-		anyTouchElement.on(
-			["click", "tap"],
-			function (
-				event: PointerEvent & {
-					changedPoints: any[];
+
+			/* 停止拖拽 */
+			if (event.phase === "end") {
+				isMove = false;
+				if (typeof resumeMoveElementStyle === "function") {
+					resumeMoveElementStyle();
+					resumeMoveElementStyle = null;
 				}
-			) {
+				if (typeof options.endCallBack === "function") {
+					options.endCallBack(
+						moveElement,
+						currentMoveLeftOffset,
+						currentMoveTopOffset
+					);
+				}
+			}
+		});
+		if (options.triggerClick) {
+			/* 因为会覆盖上面的点击事件，主动触发一下 */
+			anyTouchElement.on(["tap"], function (event) {
 				event.changedPoints.forEach((item) => {
-					popsDOMUtils.trigger(item.target, "click", void 0, true);
+					popsDOMUtils.trigger(
+						item.target! as HTMLElement,
+						"click",
+						void 0,
+						true
+					);
 				});
-			}
-		);
+			});
+		}
 	},
 	/**
 	 * 排序数组

package/src/utils/PopsUtils.ts

@@ -1,7 +1,7 @@
 import { PopsCore } from "../Core";
 import type { PopsUtilsOwnObject } from "../types/main";
 import { popsDOMUtils } from "./PopsDOMUtils";
-import { AnyTouch } from "./AnyTouch";
+import AnyTouch from "any-touch";
 
 class PopsUtils {
 	/**
@@ -370,13 +370,16 @@ class PopsUtils {
 				break;
 			}
 		}
+		new Date();
 		result = result.toFixed(2) as any;
 		result = addType
 			? result + resultType.toString()
 			: (parseFloat(result.toString()) as any);
 		return result;
 	}
-	AnyTouch: () => any = AnyTouch;
+	AnyTouch = () => {
+		return AnyTouch;
+	};
 }
 
 const popsUtils = new PopsUtils();

package/dist/types/src/utils/AnyTouch.d.ts

@@ -1,17 +0,0 @@
-export function AnyTouch(): {
-    (el: any, options: any): this;
-    STATE_POSSIBLE: number;
-    STATE_START: number;
-    STATE_MOVE: number;
-    STATE_END: number;
-    STATE_CANCELLED: number;
-    STATE_FAILED: number;
-    STATE_RECOGNIZED: number;
-    tap: (at: any, options: any) => any;
-    pan: (at: any, options: any) => any;
-    swipe: (at: any, options: any) => any;
-    press: (at: any, options: any) => any;
-    rotate: (at: any, options: any) => any;
-    pinch: (at: any, options: any) => any;
-    doubletap: (at: any) => any;
-};