@whitesev/pops 3.3.5 → 4.0.1

package/src/handler/PopsInstHandler.ts

@@ -0,0 +1,557 @@
+import type { PopsAlertConfig } from "../components/alert/types";
+import type { PopsConfirmConfig } from "../components/confirm/types";
+import type { PopsDrawerConfig } from "../components/drawer/types";
+import type { PopsFolderConfig } from "../components/folder/types";
+import type { PopsIframeConfig } from "../components/iframe/types";
+import type { PopsLoadingConfig } from "../components/loading/types";
+import type { PopsPanelConfig } from "../components/panel/types";
+import type { PopsPromptConfig } from "../components/prompt/types";
+import type { PopsRightClickMenuConfig } from "../components/rightClickMenu/types";
+import type { PopsToolTipConfig } from "../components/tooltip/types";
+import { PopsAnimation } from "../PopsAnimation";
+import { PopsCore } from "../PopsCore";
+import { PopsInstData } from "../PopsInst";
+import type { PopsInstGeneralConfig } from "../types/inst";
+import type { PopsInstStoreType } from "../types/main";
+import { popsDOMUtils } from "../utils/PopsDOMUtils";
+import { popsUtils } from "../utils/PopsUtils";
+
+export const PopsInstHandler = {
+  /**
+   * 删除配置中对应的对象
+   * @param totalInstConfigList 配置实例列表
+   * @param  guid 唯一标识
+   * @param isAll 是否全部删除
+   */
+  async removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll = false) {
+    /**
+     * 移除元素实例
+     * @param instCommonConfig
+     */
+    const removeInst = async (instCommonConfig: PopsInstGeneralConfig) => {
+      await instCommonConfig.emitter.emit("pops:before-destory", instCommonConfig);
+      instCommonConfig?.$anim?.remove();
+      instCommonConfig?.$pops?.remove();
+      instCommonConfig?.$mask?.remove();
+      instCommonConfig?.$shadowContainer?.remove();
+      await instCommonConfig.emitter.emit("pops:destory");
+      // 再清空全部监听的事件
+      await instCommonConfig.emitter.offAll();
+    };
+    const asyncInstTask: Promise<void>[] = [];
+    // [ inst[], inst[],...]
+    for (const instConfigList of totalInstConfigList) {
+      for (let index = 0; index < instConfigList.length; index++) {
+        const instConfigItem = instConfigList[index];
+        // 移除全部或者guid相同
+        if (isAll || (typeof guid === "string" && instConfigItem.guid === guid)) {
+          // 判断是否有动画
+          const animName = instConfigItem.$anim.getAttribute("anim")!;
+          if (PopsAnimation.hasAnim(animName)) {
+            const reverseAnimName = animName + "-reverse";
+            popsDOMUtils.css(instConfigItem.$anim, "width", "100%");
+            popsDOMUtils.css(instConfigItem.$anim, "height", "100%");
+            popsDOMUtils.css(instConfigItem.$anim, "animation-name", reverseAnimName);
+            if (PopsAnimation.hasAnim(popsDOMUtils.css(instConfigItem.$anim, "animation-name"))) {
+              asyncInstTask.push(
+                new Promise<void>((resolve) => {
+                  popsDOMUtils.on(
+                    instConfigItem.$anim,
+                    popsDOMUtils.getAnimationEndNameList(),
+                    async () => {
+                      await removeInst(instConfigItem);
+                      resolve();
+                    },
+                    {
+                      capture: true,
+                    }
+                  );
+                })
+              );
+            } else {
+              asyncInstTask.push(removeInst(instConfigItem));
+            }
+          } else {
+            asyncInstTask.push(removeInst(instConfigItem));
+          }
+          instConfigList.splice(index, 1);
+          index--;
+        }
+      }
+    }
+    await Promise.all(asyncInstTask);
+    return totalInstConfigList;
+  },
+  /**
+   * 隐藏
+   * @param popsType
+   * @param instConfigList
+   * @param guid
+   * @param config
+   * @param $anim
+   * @param $mask
+   */
+  hide(
+    config:
+      | PopsAlertConfig
+      | PopsDrawerConfig
+      | PopsPromptConfig
+      | PopsConfirmConfig
+      | PopsIframeConfig
+      | PopsLoadingConfig
+      | PopsPanelConfig
+      | PopsFolderConfig,
+    popsType: PopsInstStoreType,
+    instConfigList: PopsInstGeneralConfig[],
+    guid: string,
+    $anim: HTMLElement,
+    $mask?: HTMLElement
+  ) {
+    // 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 startAnim = async () => {
+          if (popsType === "drawer") {
+            // drawer是抽屉
+            // 单独处理动画
+            const drawerConfig = config as Required<PopsDrawerConfig>;
+            await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+            if ($mask) {
+              popsDOMUtils.css($mask, "display", "none");
+            }
+            const direction = drawerConfig.direction!;
+            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);
+            }
+          } else {
+            instConfigItem.$anim.style.width = "100%";
+            instConfigItem.$anim.style.height = "100%";
+            Reflect.set(
+              instConfigItem.$anim.style,
+              "animation-name",
+              instConfigItem.$anim.getAttribute("anim") + "-reverse"
+            );
+          }
+        };
+        const endCallback = () => {
+          instConfigItem.$anim.style.display = "none";
+          if (instConfigItem.$mask) {
+            instConfigItem.$mask.style.display = "none";
+          }
+          fintInst.emitter.emit("pops:hide", instConfigItem);
+        };
+        const instConfigItem = fintInst;
+        fintInst.emitter.emit("pops:before-hide", instConfigItem);
+        await startAnim();
+        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+          /**
+           * 动画结束的回调
+           */
+          const animationendCallBack = () => {
+            listener.off();
+            endCallback();
+            resolve();
+          };
+          const listener = popsDOMUtils.on(
+            instConfigItem.$anim,
+            popsDOMUtils.getAnimationEndNameList(),
+            animationendCallBack,
+            {
+              capture: true,
+              once: true,
+            }
+          );
+        } else {
+          endCallback();
+          resolve();
+        }
+      } else {
+        console.error("hide-error: 该实例未存储");
+        resolve();
+      }
+    });
+  },
+  /**
+   * 显示
+   * @param popsType
+   * @param instConfigList
+   * @param guid
+   * @param config
+   * @param $anim
+   * @param $mask
+   */
+  show(
+    config:
+      | PopsAlertConfig
+      | PopsDrawerConfig
+      | PopsPromptConfig
+      | PopsConfirmConfig
+      | PopsIframeConfig
+      | PopsLoadingConfig
+      | PopsPanelConfig
+      | PopsFolderConfig,
+    popsType: PopsInstStoreType,
+    instConfigList: PopsInstGeneralConfig[],
+    guid: string,
+    $anim: HTMLElement,
+    $mask?: HTMLElement
+  ) {
+    // 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 startAnim = async () => {
+          if (popsType === "drawer") {
+            // drawer是抽屉
+            // 单独处理动画
+            const drawerConfig = config as Required<PopsDrawerConfig>;
+            await popsUtils.sleep(drawerConfig.openDelay ?? 0);
+            if ($mask) {
+              popsDOMUtils.css($mask, "display", "");
+            }
+            const direction = drawerConfig.direction!;
+            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);
+            }
+          } else {
+            instConfigItem.$anim.style.width = "";
+            instConfigItem.$anim.style.height = "";
+            Reflect.set(
+              instConfigItem.$anim.style,
+              "animation-name",
+              instConfigItem.$anim!.getAttribute("anim")!.replace("-reverse", "")
+            );
+          }
+        };
+        const endCallback = () => {
+          instConfigItem.$anim.style.display = "";
+          if (instConfigItem.$mask) {
+            instConfigItem.$mask.style.display = "";
+          }
+          fintInst.emitter.emit("pops:show", instConfigItem);
+        };
+        const instConfigItem = fintInst;
+        fintInst.emitter.emit("pops:before-show", instConfigItem);
+        await startAnim();
+        if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+          /**
+           * 动画结束的回调
+           */
+          const animationendCallBack = () => {
+            listener.off();
+            endCallback();
+            resolve();
+          };
+          const listener = popsDOMUtils.on(
+            instConfigItem.$anim,
+            popsDOMUtils.getAnimationEndNameList(),
+            animationendCallBack,
+            {
+              capture: true,
+            }
+          );
+        } else {
+          endCallback();
+          resolve();
+        }
+      } else {
+        console.error("show-error: 该实例未存储");
+        resolve();
+      }
+    });
+  },
+  /**
+   * 关闭
+   * @param popsType
+   * @param instConfigList
+   * @param guid
+   * @param config
+   * @param $anim
+   */
+  async close(
+    config:
+      | PopsAlertConfig
+      | PopsDrawerConfig
+      | PopsPromptConfig
+      | PopsConfirmConfig
+      | PopsIframeConfig
+      | PopsLoadingConfig
+      | PopsPanelConfig
+      | PopsFolderConfig,
+    popsType: string,
+    instConfigList: PopsInstGeneralConfig[],
+    guid: string,
+    $anim: HTMLElement
+  ) {
+    // 判断组件内部是否有rightClickMenu、tooltip、searchSuggestion组件
+    // 有的话也需要关闭
+    PopsInstData.rightClickMenu.forEach((itemConfig) => {
+      const config = itemConfig.config as PopsRightClickMenuConfig;
+      if (config.$target instanceof HTMLElement) {
+        const $root = config.$target.getRootNode();
+        if ($root instanceof HTMLElement && $root.parentElement == null) {
+          // 触发销毁元素
+          itemConfig.emitter.emit("pops:before-destory", itemConfig);
+        }
+      }
+    });
+    PopsInstData.tooltip.forEach((itemConfig) => {
+      const config = itemConfig.config as PopsToolTipConfig;
+      if (config.$target instanceof HTMLElement) {
+        const $root = config.$target.getRootNode();
+        if ($root instanceof HTMLElement && $root.parentElement == null) {
+          // 触发销毁元素
+          itemConfig.emitter.emit("pops:before-destory", itemConfig);
+        }
+      }
+    });
+    // eslint-disable-next-line no-async-promise-executor
+    await new Promise<void>(async (resolve) => {
+      const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
+      const drawerConfig = config as Required<PopsDrawerConfig>;
+      const start = () => {
+        /**
+         * 弹窗已关闭的回调
+         */
+        const transtionEndCallback = async (event: Event) => {
+          if ((event as TransitionEvent).propertyName !== "transform") {
+            return;
+          }
+          listener.off();
+          await PopsInstHandler.removeInstance([instConfigList], guid);
+          resolve();
+        };
+        // 监听过渡结束
+        const listener = popsDOMUtils.on($pops, popsDOMUtils.getTransitionEndNameList(), transtionEndCallback, {
+          once: true,
+        });
+        const popsTransForm = globalThis.getComputedStyle($pops).transform;
+        if (popsTransForm !== "none") {
+          // 不存在动画
+          // 直接移除实例
+          listener.emit({ propertyName: "transform" });
+          return;
+        }
+        if (["top"].includes(drawerConfig.direction)) {
+          $pops.style.setProperty("transform", "translateY(-100%)");
+        } else if (["bottom"].includes(drawerConfig.direction)) {
+          $pops.style.setProperty("transform", "translateY(100%)");
+        } else if (["left"].includes(drawerConfig.direction)) {
+          $pops.style.setProperty("transform", "translateX(-100%)");
+        } else if (["right"].includes(drawerConfig.direction)) {
+          $pops.style.setProperty("transform", "translateX(100%)");
+        } else {
+          console.error("未知direction: ", drawerConfig.direction);
+        }
+      };
+      if (popsType === "drawer") {
+        await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+        start();
+      } else {
+        await PopsInstHandler.removeInstance([instConfigList], guid);
+        resolve();
+      }
+    });
+  },
+  /**
+   * 拖拽元素
+   * 说明：
+   * + 元素的position为absolute或者fixed
+   * + 会为元素的
+   * @param $move 需要拖拽的元素
+   * @param options 配置
+   */
+  drag(
+    $move: HTMLElement,
+    options: {
+      dragElement: HTMLElement;
+      limit: boolean;
+      emitClick?: boolean;
+      extraDistance: number;
+      container?: Window | typeof globalThis | HTMLElement;
+      startCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+      moveCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+      endCallBack?: (moveElement: HTMLElement, left: number, top: number) => void;
+      preventEvent?: (event: TouchEvent | PointerEvent) => boolean;
+    }
+  ) {
+    options = Object.assign(
+      {
+        limit: true,
+        extraDistance: 3,
+        container: PopsCore.globalThis,
+        emitClick: true,
+      },
+      options
+    );
+    let isMove = false;
+    // 点击元素，left偏移
+    let clickElementLeftOffset = 0;
+    // 点击元素，top偏移
+    let clickElementTopOffset = 0;
+    const AnyTouch = popsUtils.AnyTouch();
+    const anyTouchElement = new AnyTouch(options.dragElement, {
+      preventDefault(event: Event) {
+        if (typeof options.preventEvent === "function") {
+          return options.preventEvent(event as any);
+        } else {
+          // 返回true阻止滑动
+          return true;
+        }
+      },
+    });
+    popsDOMUtils.css(options.dragElement, {
+      cursor: "move",
+    });
+    /**
+     * 修改移动的元素的style
+     */
+    function changeMoveElementStyle(element: HTMLElement) {
+      const old_transitionDuration = element.style.transitionDuration;
+      if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
+        element.style.transitionDuration = "0s";
+      }
+      return () => {
+        element.style.transitionDuration = old_transitionDuration;
+      };
+    }
+    /**
+     * 获取容器的高度、宽度，一般是window为容器
+     */
+    function getContainerWidthOrHeight(container: HTMLElement | Window | typeof globalThis) {
+      container = container ?? globalThis;
+      return {
+        width: popsDOMUtils.width(container),
+        height: popsDOMUtils.height(container),
+      };
+    }
+    /**
+     * 获取容器的最小left、top偏移
+     */
+
+    function getContainerTopOrLeft(container: HTMLElement | Window | typeof globalThis) {
+      container = container ?? globalThis;
+      if (popsUtils.isWin(container)) {
+        return {
+          left: 0,
+          top: 0,
+        };
+      } else {
+        const rect = (container as HTMLElement).getBoundingClientRect();
+        return {
+          left: rect.left,
+          top: rect.top,
+        };
+      }
+    }
+    // 获取transform偏移
+    let transformInfo = popsDOMUtils.getTransform($move);
+
+    let resumeMoveElementStyle: ((...args: any[]) => any) | null = null;
+
+    anyTouchElement.on("pan", function (event) {
+      if (!isMove) {
+        isMove = true;
+        const rect = options.dragElement.getBoundingClientRect();
+        clickElementLeftOffset = event.x - rect.left;
+        clickElementTopOffset = event.y - rect.top;
+        transformInfo = popsDOMUtils.getTransform($move);
+        resumeMoveElementStyle = changeMoveElementStyle($move);
+        if (typeof options.startCallBack === "function") {
+          options.startCallBack($move, clickElementLeftOffset, clickElementTopOffset);
+        }
+      }
+
+      /** 当前移动的left偏移 */
+      let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformInfo.transformLeft;
+      /** 当前移动的top偏移 */
+      let currentMoveTopOffset = event.y - clickElementTopOffset + transformInfo.transformTop;
+      // 拖拽移动
+      if (event.phase === "move") {
+        if (options.limit) {
+          // 限制在容器内移动
+          // left偏移最大值
+          const maxLeftOffset =
+            getContainerWidthOrHeight(options.container!).width -
+            popsDOMUtils.width($move) +
+            transformInfo.transformLeft;
+          const { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container!);
+          // top偏移的最大值
+          const maxTopOffset =
+            getContainerWidthOrHeight(options.container!).height -
+            popsDOMUtils.height($move) +
+            transformInfo.transformTop;
+          if (currentMoveLeftOffset > maxLeftOffset) {
+            // 不允许超过容器的最大宽度
+            currentMoveLeftOffset = maxLeftOffset;
+          }
+          if (currentMoveTopOffset > maxTopOffset) {
+            // 不允许超过容器的最大高度
+            currentMoveTopOffset = maxTopOffset;
+          }
+          if (currentMoveLeftOffset - options.extraDistance * 2 < minLeftOffset + transformInfo.transformLeft) {
+            // 不允许left偏移小于容器最小值
+            currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
+            // 最左边 +额外距离
+            currentMoveLeftOffset += options.extraDistance;
+          } else {
+            // 最右边 -额外距离
+            currentMoveLeftOffset -= options.extraDistance;
+          }
+          if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformInfo.transformTop) {
+            // 不允许top偏移小于容器最小值
+            currentMoveTopOffset = minTopOffset + transformInfo.transformTop;
+            // 最上面 +额外距离
+            currentMoveTopOffset += options.extraDistance;
+          } else {
+            // 最下面 -额外距离
+            currentMoveTopOffset -= options.extraDistance;
+          }
+        }
+        if (typeof options.moveCallBack === "function") {
+          options.moveCallBack($move, currentMoveLeftOffset, currentMoveTopOffset);
+        }
+
+        popsDOMUtils.css($move, {
+          left: currentMoveLeftOffset + "px",
+          top: currentMoveTopOffset + "px",
+        });
+      }
+
+      // 停止拖拽
+      if (event.phase === "end") {
+        isMove = false;
+        if (typeof resumeMoveElementStyle === "function") {
+          resumeMoveElementStyle();
+          resumeMoveElementStyle = null;
+        }
+        if (typeof options.endCallBack === "function") {
+          options.endCallBack($move, currentMoveLeftOffset, currentMoveTopOffset);
+        }
+      }
+    });
+    if (options.emitClick) {
+      // 因为会覆盖上面的点击事件，主动触发一下
+      anyTouchElement.on(["tap"], function (event) {
+        event.changedPoints.forEach((item) => {
+          popsDOMUtils.emit(item.target! as HTMLElement, "click", void 0, true);
+        });
+      });
+    }
+  },
+};

package/src/types/EventEmitter.d.ts

@@ -0,0 +1,18 @@
+import type { PopsInstGeneralConfig } from "./inst";
+
+export type EventMap = {
+  "pops:before-show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:show": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:hide": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:before-destory": (config: PopsInstGeneralConfig) => IPromise<void>;
+  "pops:destory": () => IPromise<void>;
+  "pops:before-append-to-page": (
+    $shadowRoot: ShadowRoot | HTMLElement,
+    $shadowContainer: HTMLDivElement
+  ) => IPromise<void>;
+};
+
+export type CustomEventMap = {
+  [K in string]: (...args: any[]) => IPromise<void>;
+};

package/src/types/PopsDOMUtilsEventType.d.ts

@@ -34,6 +34,10 @@ export type PopsDOMUtils_MouseEventType = keyof PopsDOMUtils_MouseEvent;
  */
 export interface PopsDOMUtils_KeyboardEvent {
   keydown: KeyboardEvent;
+  /**
+   * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event
+   * @deprecated
+   */
   keypress: KeyboardEvent;
   keyup: KeyboardEvent;
 }

package/src/types/button.d.ts

@@ -1,3 +1,4 @@
+import type { EventEmiter } from "../event/EventEmiter";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "./event";
 import type { PopsIconType } from "./icon";
 
@@ -63,7 +64,7 @@ export interface PopsGlobalButtonConfig<T = object> {
    *
    * 如果传入该值，那么将不会自动关闭弹窗
    */
-  callback(eventConfig: PopsHandlerEventConfig & T, event: PointerEvent | MouseEvent): void;
+  callback(eventConfig: PopsHandlerEventConfig<EventEmiter> & T, event: PointerEvent | MouseEvent): void;
 }
 
 /**

package/src/types/event.d.ts

@@ -1,9 +1,11 @@
+import type { EventEmiter } from "../event/EventEmiter";
+import type { CustomEventMap } from "./EventEmitter";
 import type { PopsType } from "./main";
 
 /**
  * 事件配置
  */
-export interface PopsEventConfig {
+export interface PopsEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>> {
   /** 最外层包裹的元素 */
   $shadowContainer: HTMLDivElement;
   /** ShadowRoot */
@@ -20,6 +22,8 @@ export interface PopsEventConfig {
   mode: PopsType;
   /** 唯一id */
   guid: string;
+  /** 事件发送器 */
+  emitter: E;
   /**
    * 关闭弹窗
    */
@@ -37,7 +41,7 @@ export interface PopsEventConfig {
 /**
  * 处理过的事件配置
  */
-export interface PopsHandlerEventConfig extends PopsEventConfig {
+export interface PopsHandlerEventConfig<E extends EventEmiter<CustomEventMap>> extends PopsEventConfig<E> {
   /** 当前按钮类型 */
   type: "cancel" | "close" | "ok" | "other";
 }

package/src/types/inst.d.ts

@@ -1,3 +1,5 @@
+import type { EventEmiter } from "../event/EventEmiter";
+
 /**
  * config实例配置
  */
@@ -19,10 +21,8 @@ export interface PopsInstGeneralConfig extends PopsInstConfig {
   $shadowContainer: HTMLDivElement;
   /** shadow容器的shandowRoot */
   $shadowRoot: ShadowRoot | HTMLElement;
-  /** 移除实例前的回调函数 */
-  beforeRemoveCallBack?: (instCommonConfig: PopsInstGeneralConfig) => void;
   /** 配置 */
   config: any;
-  /** 销毁元素 */
-  destory(): void | Promise<void>;
+  /** 事件发送器 */
+  emitter: EventEmiter;
 }