@whitesev/pops 4.0.1 → 4.1.0

package/src/handler/PopsInstHandler.ts

@@ -83,7 +83,7 @@ export const PopsInstHandler = {
     return totalInstConfigList;
   },
   /**
-   * 隐藏
+   * 显示
    * @param popsType
    * @param instConfigList
    * @param guid
@@ -91,7 +91,7 @@ export const PopsInstHandler = {
    * @param $anim
    * @param $mask
    */
-  hide(
+  show(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -110,48 +110,54 @@ export const PopsInstHandler = {
     // oxlint-disable-next-line no-async-promise-executor
     return new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
+
       const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
       if (fintInst) {
-        // 存在实例
+        // 由于是隐蔽状态
+        // 先设置好动画状态
+        // 再显示，会自执行动画
+        const checkVisible = () => {
+          if (!popsDOMUtils.isHide($anim)) {
+            return true;
+          } else {
+            return false;
+          }
+        };
         const startAnim = async () => {
           if (popsType === "drawer") {
             // drawer是抽屉
             // 单独处理动画
             const drawerConfig = config as Required<PopsDrawerConfig>;
-            await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+            await popsUtils.sleep(drawerConfig.openDelay ?? 0);
             if ($mask) {
-              popsDOMUtils.css($mask, "display", "none");
+              popsDOMUtils.css($mask, "display", "");
             }
             const direction = drawerConfig.direction!;
-            const size = "0";
+            const size = drawerConfig.size!.toString();
             if (["top", "bottom"].includes(direction)) {
               $pops.style.setProperty("height", size);
             } else if (["left", "right"].includes(direction)) {
               $pops.style.setProperty("width", size);
             } else {
-              console.error("未知direction: ", direction);
+              console.error("未知direction：", direction);
             }
           } else {
-            instConfigItem.$anim.style.width = "100%";
-            instConfigItem.$anim.style.height = "100%";
-            Reflect.set(
-              instConfigItem.$anim.style,
-              "animation-name",
-              instConfigItem.$anim.getAttribute("anim") + "-reverse"
-            );
+            instConfigItem.$anim.style.width = "";
+            instConfigItem.$anim.style.height = "";
+            Reflect.set(instConfigItem.$anim.style, "animation-name", animName);
           }
-        };
-        const endCallback = () => {
-          instConfigItem.$anim.style.display = "none";
+          instConfigItem.$anim.style.display = "";
           if (instConfigItem.$mask) {
-            instConfigItem.$mask.style.display = "none";
+            instConfigItem.$mask.style.display = "";
           }
-          fintInst.emitter.emit("pops:hide", instConfigItem);
+        };
+        const endCallback = () => {
+          fintInst.emitter.emit("pops:show", instConfigItem);
         };
         const instConfigItem = fintInst;
-        fintInst.emitter.emit("pops:before-hide", instConfigItem);
-        await startAnim();
-        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+        const animName = instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "");
+        fintInst.emitter.emit("pops:before-show", instConfigItem);
+        if (checkVisible() && PopsAnimation.hasAnim(animName)) {
           /**
            * 动画结束的回调
            */
@@ -166,21 +172,22 @@ export const PopsInstHandler = {
             animationendCallBack,
             {
               capture: true,
-              once: true,
             }
           );
+          await startAnim();
         } else {
+          await startAnim();
           endCallback();
           resolve();
         }
       } else {
-        console.error("hide-error: 该实例未存储");
+        console.error("show-error: 该实例未存储");
         resolve();
       }
     });
   },
   /**
-   * 显示
+   * 隐藏
    * @param popsType
    * @param instConfigList
    * @param guid
@@ -188,7 +195,7 @@ export const PopsInstHandler = {
    * @param $anim
    * @param $mask
    */
-  show(
+  hide(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -207,48 +214,55 @@ export const PopsInstHandler = {
     // oxlint-disable-next-line no-async-promise-executor
     return new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
-
       const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
       if (fintInst) {
+        // 由于是已显示状态
+        // 先执行动画
+        // 再隐藏
+        // 存在实例
+        const checkVisible = () => {
+          if (!popsDOMUtils.isHide($anim)) {
+            return true;
+          } else {
+            return false;
+          }
+        };
         const startAnim = async () => {
           if (popsType === "drawer") {
             // drawer是抽屉
             // 单独处理动画
             const drawerConfig = config as Required<PopsDrawerConfig>;
-            await popsUtils.sleep(drawerConfig.openDelay ?? 0);
+            await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
             if ($mask) {
-              popsDOMUtils.css($mask, "display", "");
+              popsDOMUtils.css($mask, "display", "none");
             }
             const direction = drawerConfig.direction!;
-            const size = drawerConfig.size!.toString();
+            const size = "0";
             if (["top", "bottom"].includes(direction)) {
               $pops.style.setProperty("height", size);
             } else if (["left", "right"].includes(direction)) {
               $pops.style.setProperty("width", size);
             } else {
-              console.error("未知direction：", direction);
+              console.error("未知direction: ", direction);
             }
           } else {
-            instConfigItem.$anim.style.width = "";
-            instConfigItem.$anim.style.height = "";
-            Reflect.set(
-              instConfigItem.$anim.style,
-              "animation-name",
-              instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "")
-            );
+            instConfigItem.$anim.style.width = "100%";
+            instConfigItem.$anim.style.height = "100%";
+            Reflect.set(instConfigItem.$anim.style, "animation-name", reverseAnimName);
           }
         };
         const endCallback = () => {
-          instConfigItem.$anim.style.display = "";
+          instConfigItem.$anim.style.display = "none";
           if (instConfigItem.$mask) {
-            instConfigItem.$mask.style.display = "";
+            instConfigItem.$mask.style.display = "none";
           }
-          fintInst.emitter.emit("pops:show", instConfigItem);
+          fintInst.emitter.emit("pops:hide", instConfigItem);
         };
         const instConfigItem = fintInst;
-        fintInst.emitter.emit("pops:before-show", instConfigItem);
-        await startAnim();
-        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+        const animName = instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "");
+        const reverseAnimName = animName + "-reverse";
+        fintInst.emitter.emit("pops:before-hide", instConfigItem);
+        if (!checkVisible() && PopsAnimation.hasAnim(reverseAnimName)) {
           /**
            * 动画结束的回调
            */
@@ -263,14 +277,17 @@ export const PopsInstHandler = {
             animationendCallBack,
             {
               capture: true,
+              once: true,
             }
           );
+          await startAnim();
         } else {
+          await startAnim();
           endCallback();
           resolve();
         }
       } else {
-        console.error("show-error: 该实例未存储");
+        console.error("hide-error: 该实例未存储");
         resolve();
       }
     });
@@ -324,7 +341,7 @@ export const PopsInstHandler = {
     await new Promise<void>(async (resolve) => {
       const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
       const drawerConfig = config as Required<PopsDrawerConfig>;
-      const start = () => {
+      const startAnim = () => {
         /**
          * 弹窗已关闭的回调
          */
@@ -361,7 +378,7 @@ export const PopsInstHandler = {
       };
       if (popsType === "drawer") {
         await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
-        start();
+        startAnim();
       } else {
         await PopsInstHandler.removeInstance([instConfigList], guid);
         resolve();

package/src/types/EventEmitter.d.ts

@@ -1,12 +1,33 @@
 import type { PopsInstGeneralConfig } from "./inst";
 
 export type EventMap = {
+  /**
+   * 调用`.show`时触发
+   */
   "pops:before-show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.show`时触发
+   */
   "pops:show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.hide`时触发
+   */
   "pops:before-hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.hide`时触发
+   */
   "pops:hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.close`时触发
+   */
   "pops:before-destory": (config: PopsInstGeneralConfig) => IPromise<void>;
+  /**
+   * 调用`.close`时触发
+   */
   "pops:destory": () => IPromise<void>;
+  /**
+   * 插入到页面中时触发，但是需要传入`EventEmitter`来监听该事件，否则不触发
+   */
   "pops:before-append-to-page": (
     $shadowRoot: ShadowRoot | HTMLElement,
     $shadowContainer: HTMLDivElement

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -277,7 +277,7 @@ export declare type PopsDOMUtilsEventListenerOption = AddEventListenerOptions &
   isComposedPath?: boolean;
 };
 
-export type PopsDOMUtilsTargetElementType = HTMLElement | string | NodeList | HTMLElement[];
+export type PopsDOMUtilsTargetElementType = IArray<HTMLElement> | string | NodeList;
 
 /**
  * 属性转驼峰

package/src/types/components.d.ts

@@ -2,6 +2,8 @@ import type { PopsAnimation } from "./animation";
 import type { PopsPosition, PopsTextAlign, PopsJustifyContent } from "./position";
 import type { PopsGlobalButtonConfig, PopsButtonConfigAnyType, PopsHeaderCloseButtonConfig } from "./button";
 import type { PopsMaskConfig } from "./mask";
+import type { EventEmiter } from "../event/EventEmiter";
+import type { EventMap } from "./EventEmitter";
 
 /**
  * 标题配置
@@ -139,49 +141,41 @@ export interface PopsDragConfig {
 export interface PopsGeneralConfig {
   /**
    * 是否使用shadowRoot
-   *
    * @default true
    */
   useShadowRoot?: boolean;
   /**
    * 自定义的className
-   *
    * @default ""
    */
   class?: string;
   /**
    * 是否是唯一的
-   *
    * @default false
    */
   only?: boolean;
   /**
    *  宽度
-   *
    * @default "350px"
    */
   width: string;
   /**
    *  高度
-   *
    * @default "200px"
    */
   height: string;
   /**
    * 位置
-   *
    * @default "center"
    */
   position?: PopsPosition;
   /**
    * 动画
-   *
    * @default "pops-anim-fadein-zoom"
    */
-  animation?: PopsAnimation;
+  animation?: PopsAnimation | false;
   /**
    * z-index显示层级
-   *
    * @default 10000
    */
   zIndex?: IFunction<number>;
@@ -193,38 +187,41 @@ export interface PopsGeneralConfig {
    * 是否禁用页面滚动
    *
    * 暂时不会生效
-   *
    * @default false
    */
   forbiddenScroll?: boolean;
   /**
    * （可选）自定义style
-   * @default ""
+   * @default null
    */
   style?: string | null;
   /**
    * （可选）自定义浅色模式的style
    *
-   * 传入的css都在dark内
+   * css都在`@media (prefers-color-scheme: light)`内
+   * @default null
    */
   lightStyle?: string | null;
   /**
    * （可选）自定义深色模式的style
    *
-   * 传入的css都在dark内
+   * css都在`@media (prefers-color-scheme: dark)`内
+   * @default null
    */
   darkStyle?: string | null;
   /**
    * （可选）是否阻止`keydown`事件传播
    *
    * 主要是阻止当`keydown`触发来源为输入框时，即在输入框内按下按键不会触发页面的快捷键
-   * @default true
+   * @default true 阻止
    */
   stopKeyDownEventPropagation?: boolean;
   /**
-   * 在元素添加到页面前的事件
-   * @param $shadowRoot 根元素
-   * @param $shadowContainer 容器
+   * 可传入自定义事件监听器代替内部的eventEmitter
+   *
+   * 一般用于监听内部处理的事件
+   *
+   * 某些事件如：`pops:before-append-to-page`会提前触发，那么就需要自定义的监听器来监听
    */
-  beforeAppendToPageCallBack?: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
+  emitter?: EventEmiter | null | undefined;
 }

package/src/types/global.d.ts

@@ -29,3 +29,5 @@ declare type DeepRequired<T> = T extends any[]
 declare type IPromise<T> = T | Promise<T>;
 
 declare type IFunction<T> = T | (() => T);
+
+declare type IArray<T> = T | T[];

package/src/utils/PopsDOMUtils.ts

@@ -1417,6 +1417,36 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
   getTransitionEndNameList() {
     return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
   }
+  /**
+   * 是否是隐藏状态
+   *
+   * 检测以下项：
+   *
+   * + `display`: none
+   * + `visibility`: hidden
+   * + `opacity`: 0
+   * + `使用了pops的自定义的隐藏class类`
+   * @param $el 需要检测的元素
+   */
+  isHide($el: Element) {
+    let flag = false;
+    if (
+      this.containsClassName($el, PopsCommonCSSClassName.hide) ||
+      this.containsClassName($el, PopsCommonCSSClassName.hideImportant)
+    ) {
+      flag = true;
+    } else {
+      if ($el instanceof HTMLElement) {
+        const style = $el.style;
+        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+      }
+      if (!flag) {
+        const style = globalThis.getComputedStyle($el);
+        flag = style.display.includes("none") || style.visibility.includes("hidden") || style.opacity !== "0";
+      }
+    }
+    return flag;
+  }
   /**
    * 实现jQuery中的$().offset();
    * @param element
@@ -1695,7 +1725,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * @param className className属性
    */
   addClassName(
-    $el: Element | undefined | null | undefined,
+    $el: Element | undefined | null,
     className: string | string[] | (() => string | string[]) | undefined | null
   ) {
     if ($el == null) return;
@@ -1743,7 +1773,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
    * @param $el 目标元素
    * @param className className属性
    */
-  containsClassName($el: HTMLElement | undefined | null, className: string): boolean {
+  containsClassName($el: Element | undefined | null, className: string): boolean {
     if ($el == null) {
       return false;
     }