@whitesev/pops 2.0.9 → 2.0.11

package/src/handler/PopsHandler.ts

@@ -7,7 +7,8 @@ import type { PopsLoadingDetails } from "../components/loading/indexType";
 import type { PopsPanelDetails } from "../components/panel/indexType";
 import type { PopsPromptDetails } from "../components/prompt/indexType";
 import { PopsCore } from "../Core";
-import { pops } from "../Pops";
+import { PopsAnimation } from "../PopsAnimation";
+import { PopsLayer } from "../PopsLayer";
 import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
 import { PopsLayerCommonConfig } from "../types/layer";
@@ -50,7 +51,7 @@ export const PopsHandler = {
 		$shadowRoot?: ShadowRoot | HTMLElement,
 		cssText?: string | string[]
 	) {
-		pops.init();
+		PopsAnimation.init();
 		if (!arguments.length) {
 			return;
 		}
@@ -101,7 +102,9 @@ export const PopsHandler = {
 		}
 	) {
 		let result = {
-			maskElement: popsUtils.parseTextToDOM<HTMLDivElement>(details.maskHTML),
+			maskElement: popsDOMUtils.parseTextToDOM<HTMLDivElement>(
+				details.maskHTML
+			),
 		};
 		let isMaskClick = false;
 		/**
@@ -111,7 +114,7 @@ export const PopsHandler = {
 		function clickEvent(event: MouseEvent | PointerEvent) {
 			popsDOMUtils.preventEvent(event);
 			// 获取该类型实例存储列表
-			let targetLayer = pops.config.layer[details.type];
+			let targetLayer = PopsLayer[details.type];
 			function originalRun() {
 				if (details.config.mask!.clickEvent!.toClose) {
 					/* 关闭 */
@@ -400,7 +403,7 @@ export const PopsHandler = {
 			close() {
 				return PopsInstanceUtils.close(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement
@@ -409,7 +412,7 @@ export const PopsHandler = {
 			hide() {
 				return PopsInstanceUtils.hide(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement,
@@ -419,7 +422,7 @@ export const PopsHandler = {
 			show() {
 				return PopsInstanceUtils.show(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement,
@@ -463,7 +466,7 @@ export const PopsHandler = {
 			close() {
 				return PopsInstanceUtils.close(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement
@@ -472,7 +475,7 @@ export const PopsHandler = {
 			hide() {
 				return PopsInstanceUtils.hide(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement,
@@ -482,7 +485,7 @@ export const PopsHandler = {
 			show() {
 				return PopsInstanceUtils.show(
 					mode,
-					pops.config.layer[mode],
+					PopsLayer[mode],
 					guid,
 					config,
 					animElement,
@@ -636,20 +639,20 @@ export const PopsHandler = {
 				type === "tooltip" ||
 				type === "rightClickMenu"
 			) {
-				let layer = pops.config.layer[type as keyof typeof pops.config.layer];
+				let layer = PopsLayer[type as keyof typeof PopsLayer];
 				if (layer) {
 					PopsInstanceUtils.removeInstance([layer], "", true);
 				}
 			} else {
 				PopsInstanceUtils.removeInstance(
 					[
-						pops.config.layer.alert,
-						pops.config.layer.confirm,
-						pops.config.layer.prompt,
-						pops.config.layer.iframe,
-						pops.config.layer.drawer,
-						pops.config.layer.folder,
-						pops.config.layer.panel,
+						PopsLayer.alert,
+						PopsLayer.confirm,
+						PopsLayer.prompt,
+						PopsLayer.iframe,
+						PopsLayer.drawer,
+						PopsLayer.folder,
+						PopsLayer.panel,
 					],
 					"",
 					true
@@ -674,6 +677,6 @@ export const PopsHandler = {
 	 * @param value
 	 */
 	handlePush(type: PopsLayerMode, value: PopsLayerCommonConfig) {
-		pops.config.layer[type].push(value);
+		PopsLayer[type].push(value);
 	},
 };

package/src/types/button.d.ts

@@ -1,5 +1,5 @@
 import { PopsEventDetails, PopsHandlerEventDetails } from "./event";
-import type { PopsIcon } from "./icon";
+import type { PopsIconType } from "./icon";
 
 /**
  * 按钮类型
@@ -79,7 +79,7 @@ export interface PopsButtonDetails<T = {}> {
 	/**
 	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
 	 */
-	icon: PopsIcon;
+	icon: PopsIconType;
 	/**
 	 * 图标按钮是否放在右边
 	 */
@@ -125,7 +125,7 @@ export interface PopsButtonDetailsAnyType<T = {}> {
 	/**
 	 * 图标按钮，如果名字为内置的，则使用内置的，否则为自定义的svg
 	 */
-	icon: PopsIcon;
+	icon: PopsIconType;
 	/**
 	 * 图标按钮是否放在右边
 	 */

package/src/types/icon.d.ts

@@ -1,7 +1,7 @@
 /**
  * 按钮svg图标
  */
-export type PopsIcon =
+export type PopsIconType =
 	| "min"
 	| "mise"
 	| "max"

package/src/utils/PopsDOMUtils.ts

@@ -1670,7 +1670,21 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		});
 		return tempElement;
 	}
-
+	/**
+	 * 字符串转HTMLElement
+	 * @param elementString
+	 * @returns
+	 */
+	parseTextToDOM<R extends HTMLElement>(elementString: string): R {
+		/* 去除前后的换行和空格 */
+		elementString = elementString
+			.replace(/^[\n|\s]*/g, "")
+			.replace(/[\n|\s]*$/g, "");
+		let targetElement = this.createElement("div", {
+			innerHTML: elementString,
+		});
+		return targetElement.firstChild as any as R;
+	}
 	/**
 	 * 获取文字的位置信息
 	 * @param input 输入框
@@ -2119,6 +2133,25 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 			element!.parentElement!.insertBefore(content, element.nextSibling);
 		}
 	}
+	/**
+	 * 获取CSS Rule
+	 * @param sheet
+	 * @returns
+	 */
+	getKeyFrames(sheet: CSSStyleSheet) {
+		let result = {};
+		Object.keys(sheet.cssRules).forEach((key) => {
+			if (
+				(sheet.cssRules as any)[key].type === 7 &&
+				(sheet.cssRules as any)[key].name.startsWith("pops-anim-")
+			) {
+				(result as any)[(sheet.cssRules as any)[key].name] = (
+					sheet.cssRules as any
+				)[key];
+			}
+		});
+		return result;
+	}
 }
 
 const popsDOMUtils = new PopsDOMUtils();

package/src/utils/PopsInstanceUtils.ts

@@ -11,7 +11,8 @@ import type { PopsLayerMode } from "../types/main";
 import { popsDOMUtils } from "./PopsDOMUtils";
 import { popsUtils } from "./PopsUtils";
 import { PopsCore } from "../Core";
-import { pops } from "../Pops";
+import { PopsLayer } from "../PopsLayer";
+import { PopsAnimation } from "../PopsAnimation";
 
 export const PopsInstanceUtils = {
 	/**
@@ -120,8 +121,8 @@ export const PopsInstanceUtils = {
 		function isVisibleNode($css: CSSStyleDeclaration): boolean {
 			return $css.position !== "static" && $css.display !== "none";
 		}
-		Object.keys(pops.config.layer).forEach((layerName) => {
-			let layerList = pops.config.layer[layerName as PopsLayerMode];
+		Object.keys(PopsLayer).forEach((layerName) => {
+			let layerList = PopsLayer[layerName as PopsLayerMode];
 			for (let index = 0; index < layerList.length; index++) {
 				const layer = layerList[index];
 				let nodeStyle = window.getComputedStyle(layer.animElement);
@@ -155,25 +156,6 @@ export const PopsInstanceUtils = {
 	getMaxZIndex(deviation = 1): number {
 		return this.getMaxZIndexNodeInfo(deviation).zIndex;
 	},
-	/**
-	 * 获取CSS Rule
-	 * @param sheet
-	 * @returns
-	 */
-	getKeyFrames(sheet: CSSStyleSheet) {
-		let result = {};
-		Object.keys(sheet.cssRules).forEach((key) => {
-			if (
-				(sheet.cssRules as any)[key].type === 7 &&
-				(sheet.cssRules as any)[key].name.startsWith("pops-anim-")
-			) {
-				(result as any)[(sheet.cssRules as any)[key].name] = (
-					sheet.cssRules as any
-				)[key];
-			}
-		});
-		return result;
-	},
 	/**
 	 * 删除配置中对应的对象
 	 * @param moreLayerConfigList 配置实例列表
@@ -206,17 +188,17 @@ export const PopsInstanceUtils = {
 				// 移除全部或者guid相同
 				if (isAll || layerConfigItem["guid"] === guid) {
 					// 判断是否有动画
-					if (
-						pops.config.animation.hasOwnProperty(
-							layerConfigItem.animElement.getAttribute("anim") as string
-						)
-					) {
+					let animName = layerConfigItem.animElement.getAttribute(
+						"anim"
+					) as string;
+					if (PopsAnimation.hasAnim(animName)) {
+						let reverseAnimName = animName + "-reverse";
 						layerConfigItem.animElement.style.width = "100%";
 						layerConfigItem.animElement.style.height = "100%";
 						(layerConfigItem.animElement.style as any)["animation-name"] =
-							layerConfigItem.animElement.getAttribute("anim") + "-reverse";
+							reverseAnimName;
 						if (
-							pops.config.animation.hasOwnProperty(
+							PopsAnimation.hasAnim(
 								(layerConfigItem.animElement.style as any)["animation-name"]
 							)
 						) {
@@ -296,7 +278,7 @@ export const PopsInstanceUtils = {
 					(layerConfigItem.animElement.style as any)["animation-name"] =
 						layerConfigItem.animElement.getAttribute("anim") + "-reverse";
 					if (
-						pops.config.animation.hasOwnProperty(
+						PopsAnimation.hasAnim(
 							(layerConfigItem.animElement.style as any)["animation-name"]
 						)
 					) {
@@ -394,7 +376,7 @@ export const PopsInstanceUtils = {
 							.animElement!.getAttribute("anim")!
 							.replace("-reverse", "");
 					if (
-						pops.config.animation.hasOwnProperty(
+						PopsAnimation.hasAnim(
 							(layerConfigItem.animElement.style as any)["animation-name"]
 						)
 					) {

package/src/utils/PopsUtils.ts

@@ -1,6 +1,5 @@
 import { PopsCore } from "../Core";
 import type { PopsUtilsOwnObject } from "../types/main";
-import { popsDOMUtils } from "./PopsDOMUtils";
 import {
 	clearInterval as WorkerClearInterval,
 	clearTimeout as WorkerClearTimeout,
@@ -182,21 +181,6 @@ class PopsUtils {
 			);
 		}
 	}
-	/**
-	 * 字符串转HTMLElement
-	 * @param elementString
-	 * @returns
-	 */
-	parseTextToDOM<R extends HTMLElement>(elementString: string): R {
-		/* 去除前后的换行和空格 */
-		elementString = elementString
-			.replace(/^[\n|\s]*/g, "")
-			.replace(/[\n|\s]*$/g, "");
-		let targetElement = popsDOMUtils.createElement("div", {
-			innerHTML: elementString,
-		});
-		return targetElement.firstChild as any as R;
-	}
 	/**
 	 * 判断元素/页面中是否包含该元素
 	 * @param target 需要判断的元素
@@ -389,6 +373,13 @@ class PopsUtils {
 	AnyTouch = () => {
 		return AnyTouch;
 	};
+	/**
+	 * 通过navigator.userAgent判断是否是手机访问
+	 * @param userAgent
+	 */
+	isPhone(userAgent = PopsCore.globalThis.navigator.userAgent): boolean {
+		return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
+	}
 	/**
 	 * 自动使用 Worker 执行 setTimeout
 	 */