@rxdrag/website-lib-core 0.0.103 → 0.0.104

package/src/controller/FlipController.ts

@@ -1,339 +0,0 @@
-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

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

package/src/controller/NumberController.ts

@@ -1,161 +0,0 @@
-import { DATA_MOTION_NUMBER, DATA_MOTION_NUMBER_ONCE } from "../motion/consts";
-import { gsap } from "gsap/dist/gsap";
-
-export class NumberController {
-  private static instances: Record<string, NumberController> = {};
-  private doc?: Document;
-  private observers = new Map();
-
-  private constructor(doc?: Document) {
-    this.doc = doc;
-  }
-
-  /**
-   * 获取 NumberController 实例
-   * @param key 实例的唯一标识符
-   * @param doc 文档对象
-   * @returns NumberController 实例
-   */
-  public static getInstance(
-    key: string = "runtime",
-    doc?: Document
-  ): NumberController {
-    if (!NumberController.instances[key]) {
-      NumberController.instances[key] = new NumberController(doc);
-    } else if (doc) {
-      NumberController.instances[key].setDoc(doc);
-    }
-    return NumberController.instances[key];
-  }
-
-  /**
-   * 销毁指定 key 的实例
-   * @param key 实例的唯一标识符
-   */
-  public static destroyInstance(key: string = "runtime"): void {
-    if (NumberController.instances[key]) {
-      delete NumberController.instances[key];
-    }
-  }
-
-  /**
-   * 设置文档对象
-   * @param doc 文档对象
-   */
-  public setDoc(doc: Document): void {
-    this.doc = doc;
-  }
-
-  mount() {
-    // 清理之前的观察器
-    this.unmount();
-
-    // 检查文档对象是否存在
-    if (!this.doc) {
-      console.error("文档对象未设置，无法初始化数字动画");
-      return;
-    }
-
-    // 使用正确的属性选择器
-    const elements = this.doc.querySelectorAll(`[${DATA_MOTION_NUMBER}]`);
-
-    elements?.forEach((element) => {
-      if (
-        this.doc?.defaultView?.HTMLElement &&
-        element instanceof this.doc?.defaultView?.HTMLElement
-      ) {
-        const dataAttr = element.getAttribute(DATA_MOTION_NUMBER);
-        if (dataAttr) {
-          try {
-            const data = JSON.parse(dataAttr);
-            // 确保 start 和 end 是数字类型
-            const startValue = Number(data.start);
-            const endValue = Number(data.end);
-            const transition = data.transition;
-            const once =
-              element.getAttribute(DATA_MOTION_NUMBER_ONCE) === "true";
-
-            const numberElement = element.querySelector(
-              ".motion-safe\\:animate-number"
-            ) as HTMLElement;
-            const signElement = element.querySelector(
-              ".motion-safe\\:animate-sign"
-            ) as HTMLElement;
-
-            if (!numberElement) {
-              return;
-            }
-
-            // 重置初始状态
-            numberElement.innerHTML = startValue.toString();
-            if (signElement) {
-              signElement.style.display = "none";
-            }
-
-            // 使用 IntersectionObserver 监听元素进入视口
-            const observer = new IntersectionObserver(
-              (entries) => {
-                if (entries[0].isIntersecting) {
-                  const aleadyRun =
-                    numberElement.dataset.animationNumberRun === "true";
-                  if (aleadyRun && once) {
-                    return;
-                  }
-
-                  numberElement.dataset.animationNumberRun = "true";
-                  // 使用 GSAP 动画替代 motion.animate
-                  const obj = { value: startValue };
-                  gsap.to(obj, {
-                    value: endValue,
-                    duration: transition?.duration || 1,
-                    ease: transition?.ease || "power2.out",
-                    onUpdate: () => {
-                      numberElement.innerHTML = Math.round(
-                        obj.value
-                      )?.toString();
-                    },
-                    onComplete: () => {
-                      if (signElement) {
-                        signElement.style.display = "inline";
-                      }
-                    },
-                  });
-
-                  if (once) {
-                    observer.disconnect();
-                    this.observers.delete(element);
-                  }
-                } else if (!once) {
-                  numberElement.innerHTML = startValue.toString();
-                  if (signElement) {
-                    signElement.style.display = "none";
-                    console.log("隐藏符号元素");
-                  }
-                }
-              },
-              { threshold: 0.1, rootMargin: "0px 0px -10% 0px" }
-            );
-
-            observer.observe(element);
-            this.observers.set(element, observer);
-          } catch (error) {
-            console.error("处理数字动画时出错:", error);
-          }
-        }
-      }
-    });
-  }
-
-  public unmount() {
-    this.observers.forEach((observer) => {
-      observer.disconnect();
-    });
-    this.observers.clear();
-  }
-}
-
-// 导出默认实例
-export const numberController = NumberController.getInstance(
-  "runtime",
-  typeof document !== "undefined" ? document : undefined
-);