@whitesev/pops 1.8.9 → 1.9.0

package/dist/types/src/Pops.d.ts

@@ -146,15 +146,15 @@ declare class Pops {
         };
         /** pops创建的实例使用的工具类 */
         InstanceUtils: {
-            getMaxZIndexNodeInfo(deviation?: number): {
+            getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
                 node: Element;
                 zIndex: number;
             };
-            getMaxZIndex(deviation?: number): number;
             getPopsMaxZIndex(deviation?: number): {
                 zIndex: number;
                 animElement: HTMLDivElement | null;
             };
+            getMaxZIndex(deviation?: number): number;
             getKeyFrames(sheet: CSSStyleSheet): {};
             removeInstance(moreLayerConfigList: PopsLayerCommonConfig[][], guid: string, isAll?: boolean): PopsLayerCommonConfig[][];
             hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): void;

package/dist/types/src/handler/PopsHandler.d.ts

@@ -25,6 +25,8 @@ export declare const PopsHandler: {
     handleInit($shadowRoot?: ShadowRoot, cssText?: string | string[]): void;
     /**
      * 处理遮罩层
+     *
+     * + 设置遮罩层的点击事件
      * @param details 传递的配置
      */
     handleMask(details?: {
@@ -38,7 +40,7 @@ export declare const PopsHandler: {
     };
     /**
      * 处理获取元素
-     * @param {HTMLDivElement} animElement
+     * @param animElement
      * @param type
      */
     handleQueryElement(animElement: HTMLDivElement, type: PopsType): {

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

@@ -12,6 +12,8 @@ export declare const PopsInstanceUtils: {
     /**
      * 获取页面中最大的z-index的元素信息
      * @param deviation 获取最大的z-index值的偏移，默认是+1
+     * @param node 进行判断的元素，默认是document
+     * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
      * @example
      * Utils.getMaxZIndexNodeInfo();
      * > {
@@ -19,18 +21,10 @@ export declare const PopsInstanceUtils: {
      *   zIndex: 1001
      * }
      **/
-    getMaxZIndexNodeInfo(deviation?: number): {
+    getMaxZIndexNodeInfo(deviation?: number, target?: Element | ShadowRoot | Document, ignoreCallBack?: ($ele: Element | HTMLElement | ShadowRoot) => boolean | void): {
         node: Element;
         zIndex: number;
     };
-    /**
-     * 获取页面中最大的z-index
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @example
-     * Utils.getMaxZIndex();
-     * > 1001
-     **/
-    getMaxZIndex(deviation?: number): number;
     /**
      * 获取pops所有弹窗中的最大的z-index
      * @param deviation
@@ -39,6 +33,14 @@ export declare const PopsInstanceUtils: {
         zIndex: number;
         animElement: HTMLDivElement | null;
     };
+    /**
+     * 获取页面中最大的z-index
+     * @param deviation 获取最大的z-index值的偏移，默认是+1
+     * @example
+     * Utils.getMaxZIndex();
+     * > 1001
+     **/
+    getMaxZIndex(deviation?: number): number;
     /**
      * 获取CSS Rule
      * @param sheet

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/panel/index.ts

@@ -93,19 +93,19 @@ export class PopsPanel {
 		/**
 		 * 已创建的元素列表
 		 */
-		let elementList: HTMLElement[] = [$anim];
+		let isCreatedElementList: HTMLElement[] = [$anim];
 
 		/* 遮罩层元素 */
 		if (config.mask.enable) {
-			let _handleMask_ = PopsHandler.handleMask({
+			let { maskElement } = PopsHandler.handleMask({
 				type: PopsType,
 				guid: guid,
 				config: config,
 				animElement: $anim,
 				maskHTML: maskHTML,
 			});
-			$mask = _handleMask_.maskElement;
-			elementList.push($mask);
+			$mask = maskElement;
+			isCreatedElementList.push($mask);
 		}
 
 		/* 处理返回的配置 */
@@ -128,7 +128,7 @@ export class PopsPanel {
 		);
 
 		/* 创建到页面中 */
-		popsDOMUtils.append($shadowRoot, elementList);
+		popsDOMUtils.append($shadowRoot, isCreatedElementList);
 		if (typeof config.beforeAppendToPageCallBack === "function") {
 			config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
 		}

package/src/handler/PopsHandler.ts

@@ -62,6 +62,8 @@ export const PopsHandler = {
 	},
 	/**
 	 * 处理遮罩层
+	 *
+	 * + 设置遮罩层的点击事件
 	 * @param details 传递的配置
 	 */
 	handleMask(
@@ -130,27 +132,32 @@ export const PopsHandler = {
 			}
 			return false;
 		}
-		function isAnimElement(element: HTMLDivElement) {
-			return Boolean(
-				element?.localName?.toLowerCase() === "div" &&
-					element.className &&
-					element.className === "pops-anim" &&
-					element.hasAttribute("anim")
-			);
-		}
+		// 判断是否启用了遮罩层点击动作
 		if (
 			details.config.mask.clickEvent!.toClose ||
 			details.config.mask.clickEvent!.toHide
 		) {
+			/**
+			 * 判断点击的元素是否是动画层的元素
+			 * @param element
+			 * @returns
+			 */
+			function isAnimElement(element: HTMLElement) {
+				return Boolean(
+					element?.localName?.toLowerCase() === "div" &&
+						element.className &&
+						element.className === "pops-anim" &&
+						element.hasAttribute("anim")
+				);
+			}
 			/* 判断按下的元素是否是pops-anim */
 			popsDOMUtils.on(
 				details.animElement,
 				["touchstart", "mousedown"],
 				void 0,
 				(event) => {
-					isMaskClick = isAnimElement(
-						event.composedPath()[0] as HTMLDivElement
-					);
+					let $click = event.composedPath()[0] as HTMLElement;
+					isMaskClick = isAnimElement($click);
 				}
 			);
 			/* 如果有动画层，在动画层上监听点击事件 */
@@ -159,10 +166,8 @@ export const PopsHandler = {
 				"click",
 				void 0,
 				(event) => {
-					if (
-						isAnimElement(event.composedPath()[0] as HTMLDivElement) &&
-						isMaskClick
-					) {
+					let $click = event.composedPath()[0] as HTMLElement;
+					if (isAnimElement($click) && isMaskClick) {
 						return clickEvent(event);
 					}
 				}
@@ -183,7 +188,7 @@ export const PopsHandler = {
 	},
 	/**
 	 * 处理获取元素
-	 * @param {HTMLDivElement} animElement
+	 * @param animElement
 	 * @param type
 	 */
 	handleQueryElement(animElement: HTMLDivElement, type: PopsType) {

package/src/utils/PopsInstanceUtils.ts

@@ -17,6 +17,8 @@ export const PopsInstanceUtils = {
 	/**
 	 * 获取页面中最大的z-index的元素信息
 	 * @param deviation 获取最大的z-index值的偏移，默认是+1
+	 * @param node 进行判断的元素，默认是document
+	 * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
 	 * @example
 	 * Utils.getMaxZIndexNodeInfo();
 	 * > {
@@ -24,14 +26,20 @@ export const PopsInstanceUtils = {
 	 *   zIndex: 1001
 	 * }
 	 **/
-	getMaxZIndexNodeInfo(deviation = 1): {
+	getMaxZIndexNodeInfo(
+		deviation = 1,
+		target: Element | ShadowRoot | Document = PopsCore.document,
+		ignoreCallBack?: (
+			$ele: Element | HTMLElement | ShadowRoot
+		) => boolean | void
+	): {
 		node: Element;
 		zIndex: number;
 	} {
 		deviation = Number.isNaN(deviation) ? 1 : deviation;
-		// 最大值2147483647
-		const maxZIndex = Math.pow(2, 31) - 1;
-		// 比较值2000000000
+		// 最大值 2147483647
+		// const maxZIndex = Math.pow(2, 31) - 1;
+		// 比较值 2000000000
 		const maxZIndexCompare = 2 * Math.pow(10, 9);
 		// 当前页面最大的z-index
 		let zIndex = 0;
@@ -51,6 +59,12 @@ export const PopsInstanceUtils = {
 		 * @param $ele
 		 */
 		function queryMaxZIndex($ele: Element) {
+			if (typeof ignoreCallBack === "function") {
+				let ignoreResult = ignoreCallBack($ele);
+				if (typeof ignoreResult === "boolean" && !ignoreResult) {
+					return;
+				}
+			}
 			/** 元素的样式 */
 			const nodeStyle = PopsCore.window.getComputedStyle($ele);
 			/* 不对position为static和display为none的元素进行获取它们的z-index */
@@ -71,50 +85,49 @@ export const PopsInstanceUtils = {
 				}
 			}
 		}
-		PopsCore.document.querySelectorAll("*").forEach(($ele, index) => {
+		target.querySelectorAll("*").forEach(($ele, index) => {
 			queryMaxZIndex($ele);
 		});
 		zIndex += deviation;
 		if (zIndex >= maxZIndexCompare) {
 			// 最好不要超过最大值
-			zIndex = maxZIndex;
+			zIndex = maxZIndexCompare;
 		}
 		return {
 			node: maxZIndexNode,
 			zIndex: zIndex,
 		};
 	},
-	/**
-	 * 获取页面中最大的z-index
-	 * @param deviation 获取最大的z-index值的偏移，默认是+1
-	 * @example
-	 * Utils.getMaxZIndex();
-	 * > 1001
-	 **/
-	getMaxZIndex(deviation = 1): number {
-		return this.getMaxZIndexNodeInfo(deviation).zIndex;
-	},
 	/**
 	 * 获取pops所有弹窗中的最大的z-index
 	 * @param deviation
 	 */
 	getPopsMaxZIndex(deviation: number = 1) {
 		deviation = Number.isNaN(deviation) ? 1 : deviation;
-		// 最大值2147483647
-		let maxZIndex = Math.pow(2, 31) - 1;
-
+		// 最大值 2147483647
+		// 最大值 2147483647
+		// const maxZIndex = Math.pow(2, 31) - 1;
+		// 比较值 2000000000
+		const maxZIndexCompare = 2 * Math.pow(10, 9);
 		// 当前页面最大的z-index
 		let zIndex = 0;
 		// 当前的最大z-index的元素，调试使用
 		let maxZIndexNode = null as HTMLDivElement | null;
 
+		/**
+		 * 元素是否可见
+		 * @param $css
+		 */
+		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];
 			for (let index = 0; index < layerList.length; index++) {
 				const layer = layerList[index];
 				let nodeStyle = window.getComputedStyle(layer.animElement);
 				/* 不对position为static和display为none的元素进行获取它们的z-index */
-				if (nodeStyle.position !== "static" && nodeStyle.display !== "none") {
+				if (isVisibleNode(nodeStyle)) {
 					let nodeZIndex = parseInt(nodeStyle.zIndex);
 					if (!isNaN(nodeZIndex)) {
 						if (nodeZIndex > zIndex) {
@@ -126,14 +139,22 @@ export const PopsInstanceUtils = {
 			}
 		});
 		zIndex += deviation;
-		// 用于比较的值2000000000，大于该值就取该值
-		let maxZIndexCompare = 2 * Math.pow(10, 9);
 		if (zIndex >= maxZIndexCompare) {
 			// 最好不要超过最大值
-			zIndex = maxZIndex;
+			zIndex = maxZIndexCompare;
 		}
 		return { zIndex: zIndex, animElement: maxZIndexNode };
 	},
+	/**
+	 * 获取页面中最大的z-index
+	 * @param deviation 获取最大的z-index值的偏移，默认是+1
+	 * @example
+	 * Utils.getMaxZIndex();
+	 * > 1001
+	 **/
+	getMaxZIndex(deviation = 1): number {
+		return this.getMaxZIndexNodeInfo(deviation).zIndex;
+	},
 	/**
 	 * 获取CSS Rule
 	 * @param sheet