@whitesev/utils 2.2.4 → 2.2.6

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

@@ -430,6 +430,20 @@ declare class Utils {
      * > 456
      */
     getMaxValue(val: UtilsOwnObject<number>, handler: (key: any, value: any) => number): number;
+    /**
+     * 获取页面中最大的z-index的元素信息
+     * @param deviation 获取最大的z-index值的偏移，默认是+1
+     * @example
+     * Utils.getMaxZIndexNodeInfo();
+     * > {
+     *   node: ...,
+     *   zIndex: 1001
+     * }
+     **/
+    getMaxZIndexNodeInfo(deviation?: number): {
+        node: Element;
+        zIndex: number;
+    };
     /**
      * 获取页面中最大的z-index
      * @param deviation 获取最大的z-index值的偏移，默认是+1
@@ -1034,6 +1048,10 @@ declare class Utils {
      * @param target 目标元素
      * @param callback 触发的回调
      * @param options 观察器配置
+     * @example
+     * Utils.mutationVisible(document.querySelector("div.xxxx"),(entries,observer)=>{
+     *     console.log("该元素出现在视图内");
+     * }))
      */
     mutationVisible(target: Element | Element[], callback: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: IntersectionObserverInit): void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/utils",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "一个常用的工具库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -44,6 +44,7 @@
     "typescript": "^5.5.4"
   },
   "scripts": {
-    "build": "rollup --config"
+    "build": "rollup --config",
+    "build:all": "rollup --config"
   }
 }

package/src/Utils.ts

@@ -52,7 +52,7 @@ class Utils {
 		this.windowApi = new WindowApi(option);
 	}
 	/** 版本号 */
-	version = "2024.9.4";
+	version = "2024.9.10";
 
 	/**
 	 * 在页面中增加style元素，如果html节点存在子节点，添加子节点第一个，反之，添加到html节点的子节点最后一个
@@ -1225,43 +1225,90 @@ class Utils {
 		}
 	}
 	/**
-	 * 获取页面中最大的z-index
+	 * 获取页面中最大的z-index的元素信息
 	 * @param deviation 获取最大的z-index值的偏移，默认是+1
 	 * @example
-	 * Utils.getMaxZIndex();
-	 * > 1001
+	 * Utils.getMaxZIndexNodeInfo();
+	 * > {
+	 *   node: ...,
+	 *   zIndex: 1001
+	 * }
 	 **/
-	getMaxZIndex(deviation?: number): number;
-	getMaxZIndex(deviation = 1): number {
+	getMaxZIndexNodeInfo(deviation?: number): {
+		node: Element;
+		zIndex: number;
+	};
+	getMaxZIndexNodeInfo(deviation = 1): {
+		node: Element;
+		zIndex: number;
+	} {
 		deviation = Number.isNaN(deviation) ? 1 : deviation;
+		const UtilsContext = this;
 		// 最大值2147483647
-		let maxZIndex = Math.pow(2, 31) - 1;
+		const maxZIndex = Math.pow(2, 31) - 1;
 		// 比较值2000000000
-		let maxZIndexCompare = 2 * Math.pow(10, 9);
+		const maxZIndexCompare = 2 * Math.pow(10, 9);
 		// 当前页面最大的z-index
 		let zIndex = 0;
 		// 当前的最大z-index的元素，调试使用
 		// @ts-ignore
-		let maxZIndexNode = null;
-		this.windowApi.document.querySelectorAll("*").forEach(($ele, index) => {
-			let nodeStyle = this.windowApi.window.getComputedStyle($ele);
+		let maxZIndexNode: Element = null;
+		/**
+		 * 元素是否可见
+		 * @param $css
+		 */
+		function isVisibleNode($css: CSSStyleDeclaration): boolean {
+			return $css.position !== "static" && $css.display !== "none";
+		}
+		/**
+		 * 查询元素的z-index
+		 * 并比较值是否是已获取的最大值
+		 * @param $ele
+		 */
+		function queryMaxZIndex($ele: Element) {
+			/** 元素的样式 */
+			const nodeStyle = UtilsContext.windowApi.window.getComputedStyle($ele);
 			/* 不对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) {
+						// 赋值到全局
 						zIndex = nodeZIndex;
 						maxZIndexNode = $ele;
 					}
 				}
+				// 判断shadowRoot
+				if ($ele.shadowRoot != null && $ele instanceof ShadowRoot) {
+					$ele.shadowRoot.querySelectorAll("*").forEach(($shadowEle) => {
+						queryMaxZIndex($shadowEle);
+					});
+				}
 			}
+		}
+		this.windowApi.document.querySelectorAll("*").forEach(($ele, index) => {
+			queryMaxZIndex($ele);
 		});
 		zIndex += deviation;
 		if (zIndex >= maxZIndexCompare) {
 			// 最好不要超过最大值
 			zIndex = maxZIndex;
 		}
-		return zIndex;
+		return {
+			node: maxZIndexNode,
+			zIndex: zIndex,
+		};
+	}
+	/**
+	 * 获取页面中最大的z-index
+	 * @param deviation 获取最大的z-index值的偏移，默认是+1
+	 * @example
+	 * Utils.getMaxZIndex();
+	 * > 1001
+	 **/
+	getMaxZIndex(deviation?: number): number;
+	getMaxZIndex(deviation = 1): number {
+		return this.getMaxZIndexNodeInfo(deviation).zIndex;
 	}
 	/**
 	 * 获取最小值
@@ -2524,6 +2571,10 @@ class Utils {
 	 * @param target 目标元素
 	 * @param callback 触发的回调
 	 * @param options 观察器配置
+	 * @example
+	 * Utils.mutationVisible(document.querySelector("div.xxxx"),(entries,observer)=>{
+	 *     console.log("该元素出现在视图内");
+	 * }))
 	 */
 	mutationVisible(
 		target: Element | Element[],