@rxdrag/website-lib-core 0.0.6 → 0.0.8

package/src/controller/AosController.ts

@@ -0,0 +1,240 @@
+import { merge } from "lodash-es";
+import {
+  AnimationConfig,
+  AosAnimationConfig,
+  DATA_MOTION_INVIEW,
+} from "../motion";
+import { applyAnimation } from "./applyAnimation";
+
+export class AosController {
+  private static instances: Record<string, AosController> = {};
+  private doc?: Document;
+  private unmountHandlers: Array<() => void> = [];
+  private intersectionObserver?: IntersectionObserver;
+
+  private constructor(doc?: Document) {
+    this.doc = doc;
+  }
+
+  /**
+   * 获取 AosController 实例
+   * @param key 实例的唯一标识，默认为 "runtime"
+   * @param doc 文档对象
+   * @returns AosController 实例
+   */
+  public static getInstance(
+    key: string = "runtime",
+    doc?: Document
+  ): AosController {
+    if (!AosController.instances[key]) {
+      AosController.instances[key] = new AosController(doc);
+    } else if (doc) {
+      AosController.instances[key].setDoc(doc);
+    }
+    return AosController.instances[key];
+  }
+
+  /**
+   * 销毁指定 key 的实例
+   * @param key 实例的唯一标识
+   */
+  public static destroyInstance(key: string = "runtime"): void {
+    if (AosController.instances[key]) {
+      AosController.instances[key].destroy();
+      delete AosController.instances[key];
+    }
+  }
+
+  /**
+   * 重置所有实例
+   */
+  public static resetAll(): void {
+    Object.keys(AosController.instances).forEach((key) => {
+      AosController.destroyInstance(key);
+    });
+  }
+
+  /**
+   * 设置文档对象
+   * @param doc 文档对象
+   */
+  private setDoc(doc?: Document) {
+    this.doc = doc;
+  }
+
+  /**
+   * 挂载 AOS 动画控制器
+   * @param clientDoc 文档对象，默认为 document
+   */
+  public mount(): void {
+    // 如果没有可用的文档对象，则直接返回
+    if (!this.doc) return;
+
+    // 清理之前的观察器和处理函数
+    this.destroy();
+
+    // 创建 IntersectionObserver 用于检测元素进入视口
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const element = entry.target as HTMLElement;
+            this.handleElementEnterViewport(element);
+          } else {
+            const element = entry.target as HTMLElement;
+            this.handleElementLeaveViewport(element);
+          }
+        });
+      },
+      {
+        threshold: 0.1, // 元素10%可见时触发
+        root: null, // 使用视口作为根
+      }
+    );
+
+    // 查找所有的data-motion-inview元素
+    const inviewElements = this.doc.querySelectorAll(`[${DATA_MOTION_INVIEW}]`);
+
+    inviewElements.forEach((element) => {
+      if (
+        this.doc?.defaultView &&
+        element instanceof this.doc.defaultView.HTMLElement &&
+        element.dataset.motionInview
+      ) {
+        try {
+          // 初始化元素样式
+          this.initElementStyle(element as HTMLElement);
+
+          // 添加到观察器
+          this.intersectionObserver?.observe(element);
+
+          // 添加清理函数
+          this.unmountHandlers.push(() => {
+            this.intersectionObserver?.unobserve(element);
+          });
+        } catch (error) {
+          console.error("初始化元素AOS动画时出错:", element, error);
+        }
+      }
+    });
+  }
+
+  /**
+   * 初始化元素样式
+   * @param element 要初始化的元素
+   */
+  private initElementStyle(element: HTMLElement): void {
+    try {
+      const inViewAnimation = element.dataset.motionInview
+        ? (JSON.parse(element.dataset.motionInview) as
+            | AosAnimationConfig
+            | undefined)
+        : undefined;
+
+      if (!inViewAnimation) return;
+
+      // 如果设置了once属性，初始化时可能需要设置元素透明度为0
+      if (
+        inViewAnimation.once &&
+        inViewAnimation.enter &&
+        !element.dataset.motionViewportEnter
+      ) {
+        // 如果是淡入动画，初始透明度可能需要设置为0
+        if (!element.style.opacity && inViewAnimation.enter.opacity === 1) {
+          element.style.opacity = "0";
+        }
+      }
+    } catch (error) {
+      console.error("初始化元素样式时出错:", element, error);
+    }
+  }
+
+  /**
+   * 处理元素进入视口
+   * @param element 进入视口的元素
+   */
+  private handleElementEnterViewport(element: HTMLElement): void {
+    try {
+      const animation = element.dataset.motion
+        ? (JSON.parse(element.dataset.motion) as AnimationConfig | undefined)
+        : undefined;
+      const inViewAnimation = element.dataset.motionInview
+        ? (JSON.parse(element.dataset.motionInview) as
+            | AosAnimationConfig
+            | undefined)
+        : undefined;
+
+      if (!inViewAnimation) return;
+
+      const needAction =
+        (!element.dataset.motionViewportEnter && inViewAnimation.once) ||
+        !inViewAnimation.once;
+
+      if (inViewAnimation.enter && needAction) {
+        element.dataset.motionViewportEnter = "true";
+        applyAnimation(element, merge(animation, inViewAnimation.enter), {
+          ensureVisibleOnComplete: inViewAnimation.once,
+        });
+
+        // 如果是一次性动画，不再观察
+        if (inViewAnimation.once) {
+          this.intersectionObserver?.unobserve(element);
+        }
+      }
+    } catch (error) {
+      console.error("处理元素进入视口时出错:", element, error);
+    }
+  }
+
+  /**
+   * 处理元素离开视口
+   * @param element 离开视口的元素
+   */
+  private handleElementLeaveViewport(element: HTMLElement): void {
+    try {
+      const animation = element.dataset.motion
+        ? (JSON.parse(element.dataset.motion) as AnimationConfig | undefined)
+        : undefined;
+      const inViewAnimation = element.dataset.motionInview
+        ? (JSON.parse(element.dataset.motionInview) as
+            | AosAnimationConfig
+            | undefined)
+        : undefined;
+
+      if (!inViewAnimation || inViewAnimation.once) return;
+
+      if (inViewAnimation.exit) {
+        applyAnimation(element, merge(animation, inViewAnimation.exit));
+      }
+    } catch (error) {
+      console.error("处理元素离开视口时出错:", element, error);
+    }
+  }
+
+  /**
+   * 销毁 AOS 动画控制器
+   */
+  public destroy(): void {
+    // 断开所有观察
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+    }
+
+    // 执行所有卸载处理函数
+    this.unmountHandlers.forEach((handler) => {
+      try {
+        handler();
+      } catch (error) {
+        console.error("执行卸载处理函数失败", error);
+      }
+    });
+    this.unmountHandlers = [];
+  }
+}
+
+// 导出默认实例，方便直接使用
+export const aos = AosController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);

package/src/controller/FlipController.ts

@@ -0,0 +1,339 @@
+import { DATA_MOTION_FLIP } from "../component-logic/tabs";
+
+// 全局 Flip 控制器
+export class FlipController {
+  // 单例实例
+  private static instances: Record<string, FlipController> = {};
+  private constructor(private doc?: Document) {}
+
+  // 记录元素的上一个位置（相对于文档的绝对位置）
+  private previousPositions = new Map<
+    string,
+    {
+      left: number;
+      top: number;
+      width: number;
+      height: number;
+      wasVisible?: boolean; // 标记元素是否曾经可见
+    }
+  >();
+  // 标记正在处理的元素，防止递归循环
+  private processingElements = new Set<HTMLElement>();
+  // 观察器
+  private resizeObserver: ResizeObserver | null = null;
+
+  // 获取单例实例
+  static getInstance(key: string = "runtime", doc?: Document): FlipController {
+    if (!FlipController.instances[key]) {
+      FlipController.instances[key] = new FlipController(doc);
+    } else if (doc) {
+      FlipController.instances[key].setDoc(doc);
+    }
+    return FlipController.instances[key];
+  }
+  // 初始化控制器
+  mount() {
+    this.unmount();
+    // 设置观察器
+    this.setupObservers();
+    // 初始化元素
+    this.initElements();
+  }
+
+  unmount() {
+    // 移除观察器
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    // 移除事件监听器
+    this.doc?.defaultView?.removeEventListener("scroll", this.handleScroll);
+    // 清理数据结构
+    this.previousPositions.clear();
+    this.processingElements.clear();
+  }
+
+  // 销毁指定实例
+  static destroyInstance(key: string = "runtime") {
+    if (FlipController.instances[key]) {
+      FlipController.instances[key].unmount();
+      delete FlipController.instances[key];
+    }
+  }
+
+  // 销毁所有实例
+  static destroyAllInstances() {
+    Object.keys(FlipController.instances).forEach((key) => {
+      FlipController.instances[key].unmount();
+    });
+    FlipController.instances = {};
+  }
+
+  private setDoc(doc?: Document) {
+    this.doc = doc;
+  }
+
+  // 滚动事件处理函数
+  private handleScroll = () => {
+    // 页面滚动时，重新计算所有需要动画的元素
+    this.doc
+      ?.querySelectorAll<HTMLElement>("[data-flip]")
+      .forEach((element) => {
+        if (this.previousPositions.has(element.dataset.flip || "")) {
+          this.performAnimation(element);
+        }
+      });
+  };
+
+  // 设置观察器
+  private setupObservers() {
+    // 设置 ResizeObserver 监控元素尺寸变化
+    this.resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        if (
+          this.doc?.defaultView?.HTMLElement &&
+          entry.target instanceof this.doc?.defaultView?.HTMLElement
+        ) {
+          this.performAnimation(entry.target);
+        }
+      });
+    });
+
+    // 监听滚动事件 - 滚动不会影响相对于文档的绝对位置，所以不需要特殊处理
+    this.doc?.defaultView?.addEventListener("scroll", this.handleScroll, {
+      passive: true,
+    });
+  }
+
+  // 初始化元素，记录初始位置
+  private initElements() {
+    // 查找所有带有 data-flip 属性的元素
+    const flipElements = this.doc?.querySelectorAll<HTMLElement>("[data-flip]");
+    flipElements?.forEach((element) => {
+      // 添加到 ResizeObserver 监控
+      if (this.resizeObserver) {
+        this.resizeObserver.observe(element);
+      }
+    });
+
+    // 添加 IntersectionObserver 来监测元素进入视窗
+    if (typeof IntersectionObserver !== "undefined" && this.doc) {
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.target instanceof HTMLElement) {
+              const flipKey = entry.target.dataset.flip;
+              if (flipKey) {
+                const position = this.previousPositions.get(flipKey);
+                if (position && position.wasVisible === false) {
+                  // 元素首次进入视窗，更新位置记录
+                  this.recordPosition(entry.target);
+                }
+              }
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+
+      // 观察所有 flip 元素
+      flipElements?.forEach((element) => {
+        intersectionObserver.observe(element);
+      });
+    }
+
+    // 延迟记录初始位置，确保元素已经渲染完成
+    setTimeout(() => {
+      // 记录每个元素的初始位置
+      flipElements?.forEach((element) => {
+        this.recordPosition(element);
+      });
+    }, 100); // 给予足够的时间让元素渲染完成
+  }
+
+  // 记录元素位置
+  private recordPosition(element: HTMLElement) {
+    const flipKey = element.dataset.flip;
+    if (!flipKey) return;
+
+    // 检查元素是否可见
+    const isCurrentlyVisible = this.isVisible(element);
+    // 获取之前的位置记录
+    const previousPosition = this.previousPositions.get(flipKey);
+
+    // 如果元素不可见且没有之前的记录，我们仍然记录它的位置
+    // 但标记它为不可见，这样当它首次出现时我们可以决定是否应用动画
+    if (!isCurrentlyVisible && !previousPosition) {
+      // 继续执行，记录位置
+    }
+
+    // 获取元素相对于视口的位置
+    const rect = element.getBoundingClientRect();
+
+    // 计算元素相对于文档的绝对位置
+    const absoluteLeft = rect.left + (this.doc?.defaultView?.scrollX || 0);
+    const absoluteTop = rect.top + (this.doc?.defaultView?.scrollY || 0);
+
+    // 记录元素相对于文档的绝对位置
+    this.previousPositions.set(flipKey, {
+      left: absoluteLeft,
+      top: absoluteTop,
+      width: rect.width,
+      height: rect.height,
+      wasVisible: isCurrentlyVisible, // 记录元素是否可见
+    });
+  }
+
+  // 检查元素是否可见
+  private isVisible(element: HTMLElement): boolean {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.width > 0 &&
+      rect.height > 0 &&
+      rect.top < (this.doc?.defaultView?.innerHeight || 0) &&
+      rect.bottom > 0 &&
+      rect.left < (this.doc?.defaultView?.innerWidth || 0) &&
+      rect.right > 0
+    );
+  }
+
+  // 执行 FLIP 动画
+  performAnimation(element: HTMLElement) {
+    // 防止重复处理同一元素
+    if (this.processingElements.has(element)) {
+      return;
+    }
+
+    // 获取元素的 flip key
+    const flipKey = element.dataset.flip;
+    if (!flipKey) {
+      return;
+    }
+
+    // 检查元素是否可见
+    if (!this.isVisible(element)) {
+      return;
+    }
+
+    // 记录当前正在处理的元素
+    this.processingElements.add(element);
+
+    // 获取元素的当前位置（相对于视口）
+    const currentRect = element.getBoundingClientRect();
+
+    // 检查当前位置是否有效
+    if (currentRect.width === 0 || currentRect.height === 0) {
+      this.processingElements.delete(element);
+      return;
+    }
+
+    // 计算当前元素相对于文档的绝对位置
+    const currentAbsoluteLeft =
+      currentRect.left + (this.doc?.defaultView?.scrollX || 0);
+    const currentAbsoluteTop =
+      currentRect.top + (this.doc?.defaultView?.scrollY || 0);
+
+    // 获取元素的上一个位置
+    const previousPosition = this.previousPositions.get(flipKey);
+
+    // 如果没有上一个位置，记录当前位置并返回
+    if (!previousPosition) {
+      this.recordPosition(element);
+      this.processingElements.delete(element);
+      return;
+    }
+
+    // 如果元素之前未曾可见（首次进入视窗），我们可能想要跳过动画
+    // 或者应用特殊的入场动画
+    if (this.isVisible(element) && previousPosition.wasVisible === false) {
+      // 更新位置记录，标记为可见
+      this.recordPosition(element);
+      this.processingElements.delete(element);
+      return;
+    }
+
+    // 检查上一个位置是否有效
+    if (previousPosition.width === 0 || previousPosition.height === 0) {
+      this.recordPosition(element);
+      this.processingElements.delete(element);
+      return;
+    }
+
+    // 计算位置差异（基于绝对位置，不需要考虑滚动）
+    const deltaX = previousPosition.left - currentAbsoluteLeft;
+    const deltaY = previousPosition.top - currentAbsoluteTop;
+    const scaleX = previousPosition.width / currentRect.width;
+    const scaleY = previousPosition.height / currentRect.height;
+
+    // 如果位置没有变化，跳过动画
+    if (
+      Math.abs(deltaX) < 1 &&
+      Math.abs(deltaY) < 1 &&
+      Math.abs(scaleX - 1) < 0.01 &&
+      Math.abs(scaleY - 1) < 0.01
+    ) {
+      this.recordPosition(element);
+      this.processingElements.delete(element);
+      return;
+    }
+
+    try {
+      // 使用原生 Web Animation API 执行动画
+
+      // 先将元素设置为初始位置
+      element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+      element.style.transformOrigin = "0 0";
+
+      // 使用 requestAnimationFrame 确保初始状态已应用
+      requestAnimationFrame(() => {
+        const container = element.closest(`[${DATA_MOTION_FLIP}]`);
+        const transionJSON = (container as HTMLElement | null)?.getAttribute(
+          DATA_MOTION_FLIP
+        );
+        const transion = transionJSON
+          ? JSON.parse(transionJSON)
+          : {
+              duration: 300,
+            };
+        // 创建动画
+        const animation = element.animate(
+          [
+            {
+              transform: `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`,
+            },
+            { transform: "translate(0, 0) scale(1, 1)" },
+          ],
+          transion
+        );
+
+        // 动画完成后的处理
+        animation.onfinish = () => {
+          // 清除样式并更新位置
+          element.style.transform = "";
+          element.style.transformOrigin = "";
+          this.recordPosition(element);
+          this.processingElements.delete(element);
+        };
+
+        // 设置一个备用的超时处理，以防动画事件不触发
+        setTimeout(() => {
+          if (this.processingElements.has(element)) {
+            element.style.transform = "";
+            element.style.transformOrigin = "";
+            this.recordPosition(element);
+            this.processingElements.delete(element);
+          }
+        }, 350); // 略长于动画时间
+      });
+    } catch (error) {
+      // 出错时也要清理
+      element.style.transform = "";
+      element.style.transformOrigin = "";
+      this.recordPosition(element);
+      this.processingElements.delete(element);
+    }
+  }
+}
+
+export const flip = FlipController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);

package/src/controller/ModalController.ts

@@ -0,0 +1,127 @@
+import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "./consts";
+import { PopupController } from "./popup";
+
+export class ModalController extends PopupController {
+  private static instances: Record<string, ModalController> = {};
+
+  private constructor(doc?: Document) {
+    super(doc);
+  }
+
+  public static getInstance(
+    key: string = "runtime",
+    doc?: Document
+  ): ModalController {
+    if (!ModalController.instances[key]) {
+      ModalController.instances[key] = new ModalController(doc);
+    } else if (doc) {
+      ModalController.instances[key].setDoc(doc);
+    }
+    return ModalController.instances[key];
+  }
+
+  /**
+   * 销毁指定 key 的实例
+   * @param key 实例的唯一标识
+   */
+  public static destroyInstance(key: string = "runtime"): void {
+    if (ModalController.instances[key]) {
+      ModalController.instances[key].destroy();
+      delete ModalController.instances[key];
+    }
+  }
+
+  private setDoc(doc?: Document) {
+    this.doc = doc;
+  }
+
+  mount() {
+    super.mount();
+    const popups = this.doc?.querySelectorAll(`[${DATA_POPUP}]`);
+    popups?.forEach((popup) => {
+      const popupKey = popup.getAttribute(DATA_POPUP);
+      //处理鼠标交互事件
+      if (popupKey && popup) {
+        if (popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.ModalTrigger) {
+          const unsub = this.initModalTrigger(popupKey, popup as HTMLElement);
+          this.unmountHandlers.push(unsub);
+        }
+      }
+      //获取所有 ModalCloser 实例，并处理点击事件
+      //TODO：未处理嵌套跟Modal外部关闭的情况
+      const closers = popup?.querySelectorAll(
+        `[${DATA_POPUP_ROLE}="${PopupRole.ModalCloser}"]`
+      );
+
+      closers?.forEach((closer) => {
+        // 使用initModalCloser函数处理关闭按钮事件
+        if (popupKey) {
+          const unsub = this.initModalCloser(popupKey, closer as HTMLElement);
+          this.unmountHandlers.push(unsub);
+        }
+      });
+    });
+  }
+  /**
+   * 初始化Modal的点击交互事件
+   * @param popupKey - 弹出层的唯一标识
+   * @param trigger - 触发器元素
+   * @returns 清理函数，用于移除事件监听器
+   */
+  public initModalTrigger(popupKey: string, trigger: HTMLElement): () => void {
+    if (!this.doc) return () => {};
+
+    try {
+      // 创建新的事件处理函数
+      const handleTriggerClick = () => {
+        // 查找 Modal 容器
+        this.open(popupKey, trigger);
+      };
+
+      // 添加新的事件监听器
+      trigger.addEventListener("click", handleTriggerClick);
+
+      return () => {
+        trigger.removeEventListener("click", handleTriggerClick);
+      };
+    } catch (error) {
+      console.error(`初始化Modal事件失败: ${popupKey}`, error);
+      return () => {};
+    }
+  }
+
+  /**
+   * 初始化Modal关闭按钮的点击交互事件
+   * @param popupKey - 弹出层的唯一标识
+   * @param closer - 关闭按钮元素
+   * @returns 清理函数，用于移除事件监听器
+   */
+  public initModalCloser(popupKey: string, closer: HTMLElement): () => void {
+    if (!this.doc) return () => {};
+
+    try {
+      // 创建新的事件处理函数
+      const handleCloserClick = () => {
+        this.close(popupKey);
+      };
+
+      // 添加新的事件监听器
+      closer.addEventListener("click", handleCloserClick);
+
+      return () => {
+        closer.removeEventListener("click", handleCloserClick);
+      };
+    } catch (error) {
+      console.error(`初始化Modal关闭按钮事件失败: ${popupKey}`, error);
+      return () => {};
+    }
+  }
+  unmount(): void {
+    super.unmount();
+  }
+}
+
+export const modal = ModalController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);