@whitesev/pops 1.8.9 → 1.9.0

package/dist/index.amd.js

@@ -1666,6 +1666,8 @@ define((function () { 'use strict';
         /**
          * 获取页面中最大的z-index的元素信息
          * @param deviation 获取最大的z-index值的偏移，默认是+1
+         * @param node 进行判断的元素，默认是document
+         * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
          * @example
          * Utils.getMaxZIndexNodeInfo();
          * > {
@@ -1673,11 +1675,11 @@ define((function () { 'use strict';
          *   zIndex: 1001
          * }
          **/
-        getMaxZIndexNodeInfo(deviation = 1) {
+        getMaxZIndexNodeInfo(deviation = 1, target = PopsCore.document, ignoreCallBack) {
             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;
@@ -1697,6 +1699,12 @@ define((function () { 'use strict';
              * @param $ele
              */
             function queryMaxZIndex($ele) {
+                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 */
@@ -1717,48 +1725,48 @@ define((function () { 'use strict';
                     }
                 }
             }
-            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) {
-            return this.getMaxZIndexNodeInfo(deviation).zIndex;
-        },
         /**
          * 获取pops所有弹窗中的最大的z-index
          * @param deviation
          */
         getPopsMaxZIndex(deviation = 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;
+            /**
+             * 元素是否可见
+             * @param $css
+             */
+            function isVisibleNode($css) {
+                return $css.position !== "static" && $css.display !== "none";
+            }
             Object.keys(pops.config.layer).forEach((layerName) => {
                 let layerList = pops.config.layer[layerName];
                 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) {
@@ -1770,14 +1778,22 @@ define((function () { 'use strict';
                 }
             });
             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) {
+            return this.getMaxZIndexNodeInfo(deviation).zIndex;
+        },
         /**
          * 获取CSS Rule
          * @param sheet
@@ -2761,6 +2777,8 @@ define((function () { 'use strict';
         },
         /**
          * 处理遮罩层
+         *
+         * + 设置遮罩层的点击事件
          * @param details 传递的配置
          */
         handleMask(details = {}) {
@@ -2794,22 +2812,29 @@ define((function () { 'use strict';
                 }
                 return false;
             }
-            function isAnimElement(element) {
-                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) {
+                    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]);
+                    let $click = event.composedPath()[0];
+                    isMaskClick = isAnimElement($click);
                 });
                 /* 如果有动画层，在动画层上监听点击事件 */
                 popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
-                    if (isAnimElement(event.composedPath()[0]) &&
-                        isMaskClick) {
+                    let $click = event.composedPath()[0];
+                    if (isAnimElement($click) && isMaskClick) {
                         return clickEvent(event);
                     }
                 });
@@ -2824,7 +2849,7 @@ define((function () { 'use strict';
         },
         /**
          * 处理获取元素
-         * @param {HTMLDivElement} animElement
+         * @param animElement
          * @param type
          */
         handleQueryElement(animElement, type) {
@@ -8223,25 +8248,25 @@ define((function () { 'use strict';
             /**
              * 已创建的元素列表
              */
-            let elementList = [$anim];
+            let isCreatedElementList = [$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);
             }
             /* 处理返回的配置 */
             let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
             /* 为顶部右边的关闭按钮添加点击事件 */
             PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
             /* 创建到页面中 */
-            popsDOMUtils.append($shadowRoot, elementList);
+            popsDOMUtils.append($shadowRoot, isCreatedElementList);
             if (typeof config.beforeAppendToPageCallBack === "function") {
                 config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
             }