@rxdrag/website-lib-core 0.0.102 → 0.0.104

package/src/controller/OpenableController.ts

@@ -1,367 +0,0 @@
-import { DATA_MOTION_OPENABLE, OpenableAnimationConfig } from "../motion";
-import { applyAnimation } from "./applyAnimation";
-import { gsap } from "gsap/dist/gsap";
-import {
-  EVENT_OPEN,
-  EVENT_CLOSE,
-  DATA_OPENABLE,
-  DATA_OPENABLE_ROLE,
-  OpenAble,
-  EVENT_SELECT,
-  EVENT_UNSELECT,
-  DATA_POPUP_CTA,
-} from "./consts";
-import { applyInitialState } from "./applyInitialState";
-
-export type PopupEvent = {
-  //控件组的唯一标识
-  key: string;
-  //发出事件的element，popover对应Container，modal对应Trigger
-  target?: HTMLElement;
-};
-
-export type SelectionEvent = {
-  //控件组的唯一标识
-  key: string;
-  //发出事件的element
-  target: HTMLElement;
-  selection: string;
-};
-
-// 事件类型映射，用于类型安全的事件处理
-type EventMap = {
-  [EVENT_OPEN]: PopupEvent;
-  [EVENT_CLOSE]: PopupEvent;
-  [EVENT_SELECT]: SelectionEvent;
-  [EVENT_UNSELECT]: SelectionEvent;
-};
-
-export class EventBus {
-  // 事件监听器存储，使用类型安全的映射
-  private eventListeners: {
-    [K in keyof EventMap]?: Array<(data: EventMap[K]) => void>;
-  } & {
-    [key: string]: Array<(data: unknown) => void>;
-  } = {};
-
-  /**
-   * 触发自定义事件
-   * @param event - 事件名称
-   * @param options - 事件数据
-   */
-  emit = <K extends keyof EventMap>(event: K, options?: EventMap[K]): void => {
-    try {
-      // 获取该事件的所有监听器
-      const listeners = this.eventListeners[event] || [];
-
-      // 调用所有监听器
-      listeners.forEach((callback) => {
-        try {
-          // 使用类型断言，因为我们知道监听器期望的类型与发送的类型匹配
-          if (event in this.eventListeners) {
-            // 对于已知的事件类型，我们可以安全地断言类型
-            (callback as (data: typeof options) => void)(options);
-          } else {
-            // 对于未知的事件类型，我们使用更通用的类型
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            callback(options as any);
-          }
-        } catch (error) {
-          console.error(`处理事件回调失败: ${event}`, error);
-        }
-      });
-    } catch (error) {
-      console.error(`触发事件失败: ${event}`, error);
-    }
-  };
-
-  /**
-   * 监听自定义事件
-   * @param event - 事件名称
-   * @param callback - 事件回调函数
-   * @returns 取消监听的函数
-   */
-
-  public on = <T = PopupEvent | SelectionEvent>(
-    event: string,
-    callback: (options: T) => void
-  ): (() => void) => {
-    try {
-      // 确保事件监听器数组已初始化
-      if (!this.eventListeners[event]) {
-        this.eventListeners[event] = [];
-      }
-      //console.log("===$on", event, this.eventListeners);
-
-      // 将回调函数转换为适当的类型并添加到监听器列表中
-      const typedCallback = callback as unknown as (data: unknown) => void;
-      this.eventListeners[event].push(typedCallback);
-
-      // 返回取消监听的函数
-      return () => {
-        try {
-          if (this.eventListeners[event]) {
-            // 找到并移除监听器
-            const index = this.eventListeners[event].indexOf(typedCallback);
-            if (index !== -1) {
-              this.eventListeners[event].splice(index, 1);
-
-              // 如果没有更多监听器，清理数组
-              if (this.eventListeners[event].length === 0) {
-                delete this.eventListeners[event];
-              }
-            }
-          }
-        } catch (error) {
-          console.error(`解除事件监听失败: ${event}`, error);
-        }
-      };
-    } catch (error) {
-      console.error(`注册事件监听失败: ${event}`, error);
-      return () => {};
-    }
-  };
-
-  destroy() {
-    this.eventListeners = {};
-  }
-}
-
-export class OpenableController {
-  constructor(protected doc: Document | undefined) {}
-  protected unmountHandlers: (() => void)[] = [];
-  protected eventBus = new EventBus();
-  public lastCta?: string | null;
-
-  mount() {
-    this.unmount();
-    this.initOpenableAnimations();
-  }
-
-  unmount() {
-    this.unmountHandlers.forEach((handler) => handler());
-    this.unmountHandlers = [];
-  }
-  /**
-   * 打开弹出层
-   * @param openableKey - 弹出层的唯一标识
-   * @param target - 触发打开的目标元素
-   */
-  open = (openableKey: string, target: HTMLElement): void => {
-    if (!this.doc) return;
-
-    try {
-      // 查找 Modal 容器
-      const modalContainer = this.getOpenableContainer(openableKey);
-      if (modalContainer) {
-        if (target.getAttribute(DATA_POPUP_CTA)) {
-          this.lastCta = target.getAttribute(DATA_POPUP_CTA);
-        }
-        modalContainer.classList.add("open");
-        this.eventBus.emit(EVENT_OPEN, { key: openableKey, target });
-      } else {
-        console.warn(`未找到弹出层: ${openableKey}`);
-      }
-    } catch (error) {
-      console.error(`打开弹出层失败: ${openableKey}`, error);
-    }
-  };
-
-  /**
-   * 关闭弹出层
-   * @param openableKey - 弹出层的唯一标识
-   * @param target - 可选的目标元素，如果提供则使用该元素，否则查找容器
-   */
-  close = (openableKey: string, target?: HTMLElement): void => {
-    if (!this.doc) return;
-
-    try {
-      const container = target || this.getOpenableContainer(openableKey);
-      if (!container) {
-        console.warn(`找不到弹出层容器: ${openableKey}`);
-        return;
-      }
-
-      // 移除open类
-      container.classList.remove("open");
-
-      // 触发关闭事件
-      this.eventBus.emit(EVENT_CLOSE, {
-        key: openableKey,
-        target: container,
-      });
-    } catch (error) {
-      console.error(`关闭弹出层失败: ${openableKey}`, error);
-    }
-  };
-
-  /**
-   * 获取弹出层容器元素
-   * @param openableKey - 弹出层的唯一标识
-   * @returns 弹出层容器元素，如果未找到则返回undefined
-   */
-  getOpenableContainer = (openableKey: string): HTMLElement | undefined => {
-    if (!this.doc) return undefined;
-
-    try {
-      return this.doc.querySelector(
-        `[${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.ModalContainer}"], 
-         [${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.PopoverContainer}"], 
-         [${DATA_OPENABLE}="${openableKey}"][${DATA_OPENABLE_ROLE}="${OpenAble.CollapseContainer}"]`
-      ) as HTMLElement | undefined;
-    } catch (error) {
-      console.error(`获取弹出层容器失败: ${openableKey}`, error);
-      return undefined;
-    }
-  };
-
-  /**
-   * 初始化弹窗动画
-   * @returns 清理函数
-   */
-  initOpenableAnimations = () => {
-    const unsubscribe = this.onOpenAll((event) => {
-      const openResponseElements = this.doc?.querySelectorAll(
-        `[${DATA_MOTION_OPENABLE}]`
-      );
-      const containerElement = this.getOpenableContainer(event.key);
-      //处理循环嵌套的情况
-      const subContainers = containerElement?.querySelectorAll(
-        `[${DATA_OPENABLE_ROLE}="${OpenAble.CollapseContainer}"], 
-         [${DATA_OPENABLE_ROLE}="${OpenAble.ModalContainer}"], 
-         [${DATA_OPENABLE_ROLE}="${OpenAble.PopoverContainer}"]`
-      );
-      //响应open事件
-      openResponseElements?.forEach((element) => {
-        let isInSubContainer = false;
-        subContainers?.forEach((subContainer) => {
-          if (subContainer.contains(element)) {
-            isInSubContainer = true;
-            return;
-          }
-        });
-        if (
-          this.doc?.defaultView &&
-          element instanceof this.doc.defaultView?.HTMLElement &&
-          containerElement?.contains(element) &&
-          !isInSubContainer
-        ) {
-          if (element.dataset.motionOpenable) {
-            const animation = JSON.parse(element.dataset.motionOpenable) as
-              | OpenableAnimationConfig
-              | undefined;
-            if (animation?.initial) {
-              applyInitialState(element, animation.initial);
-            }
-            if (animation?.open) {
-              applyAnimation(element, animation.open);
-            }
-          }
-        }
-      });
-
-      return () => {
-        const closeResponseElements = this.doc?.querySelectorAll(
-          `[${DATA_MOTION_OPENABLE}]`
-        );
-
-        //响应close事件
-        closeResponseElements?.forEach((element) => {
-          if (
-            this.doc?.defaultView &&
-            element instanceof this.doc?.defaultView.HTMLElement
-          ) {
-            if (
-              element.dataset.motionOpenable &&
-              containerElement?.contains(element)
-            ) {
-              const animation = JSON.parse(element.dataset.motionOpenable) as
-                | OpenableAnimationConfig
-                | undefined;
-              if (animation?.close) {
-                // 首先终止该元素上可能正在进行的所有动画（包括open动画）
-                gsap.killTweensOf(element);
-
-                // 然后应用close动画
-                applyAnimation(element, animation.close);
-              }
-            }
-          } else {
-            console.log("===Not an HTMLElement somehow?");
-          }
-        });
-      };
-    });
-
-    this.unmountHandlers.push(() => {
-      unsubscribe();
-    });
-  };
-
-  public onOpen = (
-    openableKey: string,
-    callback: (event: PopupEvent) => VoidFunction | void
-  ): (() => void) => {
-    return this.onOpenAll((event) => {
-      if (event.key === openableKey) {
-        return callback(event);
-      }
-    });
-  };
-
-  public onClose = (
-    openableKey: string,
-    callback: (event: PopupEvent) => void
-  ) => {
-    return this.onCloseAll((event) => {
-      if (event.key === openableKey) {
-        callback(event);
-      }
-    });
-  };
-
-  public onCloseAll = (callback: (event: PopupEvent) => void) => {
-    return this.eventBus.on(EVENT_CLOSE, callback);
-  };
-
-  /**
-   * 用于在脚本中监听弹出层的打开/关闭事件，并处理相关动画效果
-   * 注意：此函数主要用于脚本中的事件处理，组件内部已有相应实现，无需使用
-   *
-   * @param callback - 弹出层打开时的回调函数，可返回关闭时的清理函数
-   * @returns 取消监听的函数
-   */
-  public onOpenAll = (
-    callback: (event: PopupEvent) => VoidFunction | void
-  ): (() => void) => {
-    let unsubscribe: ((event: PopupEvent) => void) | void;
-
-    const handleOpen = (event: PopupEvent) => {
-      try {
-        unsubscribe = callback?.(event);
-      } catch (error) {
-        console.error("处理弹出层打开事件失败", error);
-      }
-    };
-
-    const unsubscribeOpen = this.eventBus.on(EVENT_OPEN, handleOpen);
-
-    const handleClose = (event: PopupEvent) => {
-      try {
-        unsubscribe?.(event);
-      } catch (error) {
-        console.error("处理弹出层关闭事件失败", error);
-      }
-    };
-    const unsubscribeClose = this.eventBus.on(EVENT_CLOSE, handleClose);
-
-    return () => {
-      unsubscribeOpen();
-      unsubscribeClose();
-    };
-  };
-
-  destroy = () => {
-    this.eventBus.destroy();
-  };
-}

package/src/controller/PageLoader.ts

@@ -1,154 +0,0 @@
-export interface IPageLoader {
-  onLoaded: (callback: () => void) => () => void;
-  destroy: () => void;
-}
-
-export type PageLoaderKey = "runtime" | "preview" | "design";
-export class PageLoader implements IPageLoader {
-  private static instances: Record<string, PageLoader> = {};
-  private doc?: Document;
-  private key: string;
-  private callbacks: Set<() => void> = new Set();
-  private isSwapEventRegistered = false;
-
-  private constructor(key: PageLoaderKey, doc?: Document) {
-    this.key = key;
-    this.doc = doc;
-    if (doc) {
-      this.registerMainEventListeners();
-    }
-  }
-
-  /**
-   * 获取 PageLoader 实例
-   * @param key 实例的唯一标识，默认为 "preview"
-   * @param doc 文档对象
-   * @returns PageLoader 实例
-   */
-  public static getInstance(
-    key: PageLoaderKey = "preview",
-    doc?: Document
-  ): PageLoader {
-    if (!PageLoader.instances[key]) {
-      PageLoader.instances[key] = new PageLoader(key, doc);
-    } else if (doc) {
-      PageLoader.instances[key].setDoc(doc);
-    }
-    return PageLoader.instances[key];
-  }
-
-  /**
-   * 销毁指定 key 的实例
-   * @param key 实例的唯一标识
-   */
-  public static destroyInstance(key: PageLoaderKey = "preview"): void {
-    if (PageLoader.instances[key]) {
-      PageLoader.instances[key].destroy();
-      delete PageLoader.instances[key];
-    }
-  }
-
-  /**
-   * 设置文档对象
-   * @param doc 文档对象
-   */
-  private setDoc(doc?: Document) {
-    if (this.doc !== doc) {
-      this.doc = doc;
-      if (doc) {
-        this.registerMainEventListeners();
-      }
-    }
-  }
-
-  private registerMainEventListeners() {
-    if (!this.doc || this.isSwapEventRegistered) return;
-
-    try {
-      // 使用标志来确保回调只执行一次
-      //let hasExecuted = false;
-
-      // 主事件处理函数，调用所有注册的回调
-      const handleEvent = () => {
-        console.log("===>页面转场事件触发，执行回调");
-        // 如果已经执行过，则不再执行
-        //if (hasExecuted) return;
-
-        //hasExecuted = true;
-
-        // 执行所有回调
-        this.callbacks.forEach((callback) => {
-          try {
-            callback();
-          } catch (error) {
-            console.error("执行回调失败", error);
-          }
-        });
-
-        // 重置执行标志，允许下一次页面转场时再次执行
-        // setTimeout(() => {
-        //   hasExecuted = false;
-        // }, 100);
-      };
-
-      // 只监听一个事件，优先使用 astro:page-load
-      if (typeof window !== "undefined") {
-        // 在客户端环境中
-        this.doc.addEventListener("astro:page-load", handleEvent, {
-          //once: true,
-        });
-        // 只监听页面转场事件
-        this.doc.addEventListener("astro:after-swap", handleEvent);
-      }
-
-      this.isSwapEventRegistered = true;
-    } catch (error) {
-      console.error("注册事件监听器失败", error);
-    }
-  }
-
-  public onLoaded = (callback: () => void): (() => void) => {
-    // 如果不是 runtime，直接执行回调
-    if (this.key && this.key !== "runtime") {
-      callback();
-      return () => {};
-    }
-    // 检查回调是否已经注册过
-    if (this.callbacks.has(callback)) {
-      // 如果已注册，直接返回清理函数
-      return () => {
-        this.callbacks.delete(callback);
-      };
-    }
-
-    // 添加回调到集合
-    this.callbacks.add(callback);
-
-    // 不再在这里立即执行回调，而是完全依赖事件系统
-
-    // 返回清理函数
-    return () => {
-      this.callbacks.delete(callback);
-    };
-  };
-
-  public destroy(): void {
-    if (this.doc && this.isSwapEventRegistered) {
-      // 移除所有事件监听器
-      const noop = () => {};
-      this.doc.removeEventListener("astro:after-swap", noop);
-      this.doc.removeEventListener("astro:page-load", noop);
-
-      // 清空回调集合
-      this.callbacks.clear();
-      this.isSwapEventRegistered = false;
-    }
-    this.doc = undefined;
-  }
-}
-
-// 导出单例实例，方便直接使用
-export const pageLoader = PageLoader.getInstance(
-  "runtime",
-  typeof document !== "undefined" ? document : undefined
-);

package/src/controller/PopoverController.ts

@@ -1,116 +0,0 @@
-import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "./consts";
-import { OpenableController } from "./OpenableController";
-
-export class PopoverController extends OpenableController {
-  private static instances: Record<string, PopoverController> = {};
-  private constructor(doc?: Document) {
-    super(doc);
-  }
-  /**
-   * 获取 PopoverController 实例
-   * @param key 实例的唯一标识，默认为 "runtime"
-   * @param doc 文档对象
-   * @returns PopoverController 实例
-   */
-  public static getInstance(
-    key: string = "runtime",
-    doc?: Document
-  ): PopoverController {
-    if (!PopoverController.instances[key]) {
-      PopoverController.instances[key] = new PopoverController(doc);
-    } else if (doc) {
-      PopoverController.instances[key].setDoc(doc);
-    }
-    return PopoverController.instances[key];
-  }
-
-  /**
-   * 销毁指定 key 的实例
-   * @param key 实例的唯一标识
-   */
-  public static destroyInstance(key: string = "runtime"): void {
-    if (PopoverController.instances[key]) {
-      PopoverController.instances[key].destroy();
-      delete PopoverController.instances[key];
-    }
-  }
-
-  private setDoc(doc?: Document) {
-    this.doc = doc;
-  }
-
-  public getDocument(): Document | null {
-    return this.doc ?? null;
-  }
-
-  mount() {
-    //console.log("====> mount popover", this.doc);
-    super.mount();
-    // 获取所有的 Popover 实例
-    const popups = this.doc?.querySelectorAll(`[${DATA_OPENABLE}]`);
-    popups?.forEach((popup) => {
-      const openableKey = popup.getAttribute(DATA_OPENABLE);
-      //处理鼠标交互事件
-      if (openableKey && popup) {
-        if (
-          popup.getAttribute(DATA_OPENABLE_ROLE) === OpenAble.PopoverContainer
-        ) {
-          const unsub = this.initPopover(openableKey, popup as HTMLElement);
-          this.unmountHandlers.push(unsub);
-        }
-      }
-    });
-  }
-
-  unmount(): void {
-    super.unmount();
-  }
-
-  /**
-   * 初始化Popover的鼠标交互事件
-   * @param openableKey - 弹出层的唯一标识
-   * @param element - 弹出层的 DOM 元素
-   * @returns 清理函数，用于移除事件监听器
-   */
-  public initPopover = (
-    openableKey: string,
-    element: HTMLElement
-  ): (() => void) => {
-    if (!this.doc) return () => {};
-
-    try {
-      // 创建新的事件处理函数
-      const handleMouseEnter = () => {
-        this.open(openableKey, element);
-      };
-
-      const handleMouseLeave = () => {
-        this.close(openableKey);
-      };
-
-      // 添加新的事件监听器
-      element.addEventListener("mouseenter", handleMouseEnter);
-      element.addEventListener("mouseleave", handleMouseLeave);
-      
-      // 使用类型断言来解决 TypeScript 类型问题
-      const options = { passive: true };
-      element.addEventListener("touchstart", handleMouseEnter, options as EventListenerOptions);
-      element.addEventListener("touchend", handleMouseLeave, options as EventListenerOptions);
-
-      return () => {
-        element.removeEventListener("mouseenter", handleMouseEnter);
-        element.removeEventListener("mouseleave", handleMouseLeave);
-        element.removeEventListener("touchstart", handleMouseEnter, options as EventListenerOptions);
-        element.removeEventListener("touchend", handleMouseLeave, options as EventListenerOptions);
-      };
-    } catch (error) {
-      console.error(`初始化Popover事件失败: ${openableKey}`, error);
-      return () => {};
-    }
-  };
-}
-
-export const popover = PopoverController.getInstance(
-  "runtime",
-  typeof document !== "undefined" ? document : undefined
-);