@rxdrag/website-lib-core 0.0.6 → 0.0.8

package/src/controller/applyAnimation.ts

@@ -0,0 +1,86 @@
+import { AnimationConfig, convertToGsapVars } from "../motion";
+import { gsap } from "gsap/dist/gsap";
+
+/**
+ * 根据AnimationConfig选择并应用正确的GSAP动画方法
+ * @param element 目标元素
+ * @param config 动画配置
+ * @param options 额外选项
+ * @returns GSAP动画实例
+ */
+export function applyAnimation(
+  element: Element,
+  config: AnimationConfig,
+  options: {
+    onComplete?: () => void;
+    ensureVisibleOnComplete?: boolean;
+  } = {}
+): gsap.core.Tween | null {
+  // 处理onComplete回调
+  const addOnComplete = (vars: gsap.TweenVars) => {
+    if (options.ensureVisibleOnComplete || options.onComplete) {
+      const originalOnComplete = vars.onComplete;
+      vars.onComplete = function () {
+        // 确保元素可见（如果需要）
+        if (options.ensureVisibleOnComplete && element instanceof HTMLElement) {
+          element.style.opacity = "1";
+          element.style.visibility = "visible";
+        }
+
+        // 调用原始的onComplete回调（如果有）
+        if (originalOnComplete && typeof originalOnComplete === "function") {
+          originalOnComplete.call(this);
+        }
+
+        // 调用额外的onComplete回调（如果有）
+        if (options.onComplete) {
+          options.onComplete();
+        }
+      };
+    }
+    return vars;
+  };
+
+  // 处理from动画
+  if (config.from) {
+    const fromVars = { ...config.from } as gsap.TweenVars;
+
+    // 复制动画控制参数
+    if (config.duration) fromVars.duration = config.duration;
+    if (config.delay) fromVars.delay = config.delay;
+    if (config.ease) fromVars.ease = config.ease;
+
+    // 添加onComplete回调
+    addOnComplete(fromVars);
+
+    // 使用gsap.from
+    return gsap.from(element, fromVars);
+  }
+  // 处理fromTo动画
+  else if (config.fromTo) {
+    const fromVars = { ...config.fromTo.from };
+    const toVars = { ...config.fromTo.to } as gsap.TweenVars;
+
+    // 复制动画控制参数到toVars
+    if (config.duration) toVars.duration = config.duration;
+    if (config.delay) toVars.delay = config.delay;
+    if (config.ease) toVars.ease = config.ease;
+
+    // 添加onComplete回调
+    addOnComplete(toVars);
+
+    // 使用gsap.fromTo
+    return gsap.fromTo(element, fromVars, toVars);
+  }
+  // 处理to动画（默认）
+  else {
+    // 使用convertToGsapVars转换配置
+    const gsapVars = convertToGsapVars(config);
+
+    // 添加onComplete回调
+    addOnComplete(gsapVars);
+
+    // 使用gsap.to
+    return gsap.to(element, gsapVars);
+  }
+}

package/src/controller/applyInitialState.ts

@@ -0,0 +1,79 @@
+import { AnimationStyles } from "../motion";
+import { gsap } from "gsap/dist/gsap";
+
+/**
+ * 将动画配置应用到元素的初始状态
+ * @param element 目标元素
+ * @param initialConfig 初始配置
+ */
+export function applyInitialState(
+  element: HTMLElement,
+  initialConfig: AnimationStyles
+): void {
+  if (!initialConfig) return;
+
+  // 创建GSAP变量对象
+  const initialVars = {} as gsap.TweenVars;
+
+  // 处理基本动画属性
+  if (initialConfig.opacity !== undefined)
+    initialVars.opacity = Number(initialConfig.opacity);
+  if (initialConfig.scale !== undefined)
+    initialVars.scale = Number(initialConfig.scale);
+  if (initialConfig.rotate !== undefined)
+    initialVars.rotation = Number(initialConfig.rotate);
+
+  // 处理位置相关属性
+  if (initialConfig.x !== undefined)
+    initialVars.x =
+      typeof initialConfig.x === "string"
+        ? initialConfig.x
+        : Number(initialConfig.x);
+  if (initialConfig.y !== undefined)
+    initialVars.y =
+      typeof initialConfig.y === "string"
+        ? initialConfig.y
+        : Number(initialConfig.y);
+  if (initialConfig.z !== undefined)
+    initialVars.z =
+      typeof initialConfig.z === "string"
+        ? initialConfig.z
+        : Number(initialConfig.z);
+
+  // 处理尺寸属性
+  if (initialConfig.width !== undefined)
+    initialVars.width =
+      typeof initialConfig.width === "string"
+        ? initialConfig.width
+        : Number(initialConfig.width);
+  if (initialConfig.height !== undefined)
+    initialVars.height =
+      typeof initialConfig.height === "string"
+        ? initialConfig.height
+        : Number(initialConfig.height);
+
+  // 处理颜色和背景
+  if (initialConfig.color !== undefined)
+    initialVars.color = initialConfig.color;
+  if (initialConfig.backgroundColor !== undefined)
+    initialVars.backgroundColor = initialConfig.backgroundColor;
+
+  // 处理变换原点
+  if (initialConfig.transformOrigin !== undefined)
+    initialVars.transformOrigin = initialConfig.transformOrigin;
+
+  // 处理显示和可见性
+  if (initialConfig.display !== undefined)
+    initialVars.display = initialConfig.display as string;
+  if (initialConfig.visibility !== undefined)
+    initialVars.visibility = initialConfig.visibility as string;
+
+  // 处理自定义transform
+  if (initialConfig.transform !== undefined) {
+    // 直接设置style.transform，而不是通过GSAP
+    element.style.transform = initialConfig.transform;
+  }
+
+  // 设置初始状态
+  gsap.set(element, initialVars);
+}

package/src/{scripts → controller}/consts.ts

@@ -19,8 +19,6 @@ export enum PopupRole {
   ModalCloser = "modal-closer",
 }
 
-export const DEFAULT_ENQUIRY_POPUP = "enquiry-modal";
-
 /** 弹出层打开事件名称 */
 export const EVENT_OPEN = "popup-open";
 /** 弹出层关闭事件名称 */

package/src/controller/index.ts

@@ -0,0 +1,9 @@
+export * from "./consts";
+export * from "./utils";
+export * from "./ModalController";
+export * from "./AnimateController";
+export * from "./AosController";
+export * from "./PopoverController";
+export * from "./PageLoader";
+export * from "./TabsController";
+export * from "./NumberController";

package/src/controller/popup.ts

@@ -0,0 +1,346 @@
+import { DATA_MOTION_POPUP, PopupAnimationConfig } from "../motion";
+import { applyAnimation } from "./applyAnimation";
+import { gsap } from "gsap/dist/gsap";
+import {
+  EVENT_OPEN,
+  EVENT_CLOSE,
+  DATA_POPUP,
+  DATA_POPUP_ROLE,
+  PopupRole,
+  EVENT_SELECT,
+  EVENT_UNSELECT,
+} 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 PopupController {
+  constructor(protected doc: Document | undefined) {}
+  protected unmountHandlers: (() => void)[] = [];
+  protected eventBus = new EventBus();
+
+  mount() {
+    this.unmount();
+    this.initPopupAnimations();
+  }
+
+  unmount() {
+    this.unmountHandlers.forEach((handler) => handler());
+    this.unmountHandlers = [];
+  }
+  /**
+   * 打开弹出层
+   * @param popupKey - 弹出层的唯一标识
+   * @param target - 触发打开的目标元素
+   */
+  open = (popupKey: string, target: HTMLElement): void => {
+    if (!this.doc) return;
+
+    try {
+      // 查找 Modal 容器
+      const modalContainer = this.getPopupContainer(popupKey);
+      if (modalContainer) {
+        modalContainer.classList.add("open");
+        this.eventBus.emit(EVENT_OPEN, { key: popupKey, target });
+      } else {
+        console.warn(`未找到弹出层: ${popupKey}`);
+      }
+    } catch (error) {
+      console.error(`打开弹出层失败: ${popupKey}`, error);
+    }
+  };
+
+  /**
+   * 关闭弹出层
+   * @param popupKey - 弹出层的唯一标识
+   * @param target - 可选的目标元素，如果提供则使用该元素，否则查找容器
+   */
+  close = (popupKey: string, target?: HTMLElement): void => {
+    if (!this.doc) return;
+
+    try {
+      const container = target || this.getPopupContainer(popupKey);
+      if (!container) {
+        console.warn(`找不到弹出层容器: ${popupKey}`);
+        return;
+      }
+
+      // 移除open类
+      container.classList.remove("open");
+
+      // 触发关闭事件
+      this.eventBus.emit(EVENT_CLOSE, {
+        key: popupKey,
+        target: container,
+      });
+    } catch (error) {
+      console.error(`关闭弹出层失败: ${popupKey}`, error);
+    }
+  };
+
+  /**
+   * 获取弹出层容器元素
+   * @param popupKey - 弹出层的唯一标识
+   * @returns 弹出层容器元素，如果未找到则返回undefined
+   */
+  getPopupContainer = (popupKey: string): HTMLElement | undefined => {
+    if (!this.doc) return undefined;
+
+    try {
+      return this.doc.querySelector(
+        `[${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.ModalContainer}"], [${DATA_POPUP}="${popupKey}"][${DATA_POPUP_ROLE}="${PopupRole.PopoverContainer}"]`
+      ) as HTMLElement | undefined;
+    } catch (error) {
+      console.error(`获取弹出层容器失败: ${popupKey}`, error);
+      return undefined;
+    }
+  };
+
+  /**
+   * 初始化弹窗动画
+   * @returns 清理函数
+   */
+  initPopupAnimations = () => {
+    const unsubscribe = this.onOpenAll((event) => {
+      const openResponseElements = this.doc?.querySelectorAll(
+        `[${DATA_MOTION_POPUP}]`
+      );
+      const containerElement = this.getPopupContainer(event.key);
+      //响应open事件
+      openResponseElements?.forEach((element) => {
+        if (
+          this.doc?.defaultView &&
+          element instanceof this.doc.defaultView?.HTMLElement &&
+          containerElement?.contains(element)
+        ) {
+          if (element.dataset.motionPopup) {
+            const animation = JSON.parse(element.dataset.motionPopup) as
+              | PopupAnimationConfig
+              | undefined;
+            if (animation?.initial) {
+              applyInitialState(element, animation.initial);
+            }
+            if (animation?.open) {
+              applyAnimation(element, animation.open);
+            }
+          }
+        }
+      });
+
+      return () => {
+        const closeResponseElements = this.doc?.querySelectorAll(
+          `[${DATA_MOTION_POPUP}]`
+        );
+
+        //响应close事件
+        closeResponseElements?.forEach((element) => {
+          if (
+            this.doc?.defaultView &&
+            element instanceof this.doc?.defaultView.HTMLElement
+          ) {
+            if (
+              element.dataset.motionPopup &&
+              containerElement?.contains(element)
+            ) {
+              const animation = JSON.parse(element.dataset.motionPopup) as
+                | PopupAnimationConfig
+                | 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 = (
+    popupKey: string,
+    callback: (event: PopupEvent) => VoidFunction | void
+  ): (() => void) => {
+    return this.onOpenAll((event) => {
+      if (event.key === popupKey) {
+        return callback(event);
+      }
+    });
+  };
+
+  public onClose = (
+    popupKey: string,
+    callback: (event: PopupEvent) => void
+  ) => {
+    return this.onCloseAll((event) => {
+      if (event.key === popupKey) {
+        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/utils.ts

@@ -0,0 +1,48 @@
+import {
+  SimpleAnimation,
+  ANIMATIONS,
+  DualAnimation,
+  AOS_ANIMATIONS,
+} from "../motion";
+
+export function normalizeSimpleAnimation(animation?: SimpleAnimation) {
+  if (animation?.preset) {
+    const preset = ANIMATIONS[animation?.preset];
+    return {
+      ...preset,
+      keyframes: { ...preset.keyframes, ...animation.keyframes },
+      transition: { ...preset.transition, ...animation.transition },
+    };
+  }
+
+  return animation;
+}
+
+//处理预置动画
+export function normalizeDualAnimation(
+  animation?: DualAnimation
+): DualAnimation | undefined {
+  if (!animation) {
+    return undefined;
+  }
+
+  // 如果有预设，合并预设和自定义配置
+  if (animation.preset) {
+    const preset = AOS_ANIMATIONS[animation.preset];
+    return {
+      ...animation,
+      in: animation.in
+        ? normalizeSimpleAnimation({ ...preset.in, ...animation.in })
+        : preset.in,
+      out: animation.out
+        ? normalizeSimpleAnimation({ ...preset.out, ...animation.out })
+        : preset.out,
+    };
+  }
+
+  // 如果没有预设，但有 in/out 配置
+  return {
+    in: animation.in ? normalizeSimpleAnimation(animation.in) : undefined,
+    out: animation.out ? normalizeSimpleAnimation(animation.out) : undefined,
+  };
+}