@rxdrag/website-lib-core 0.0.7 → 0.0.8

package/src/controller/NumberController.ts

@@ -0,0 +1,161 @@
+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
+);

package/src/controller/PageLoader.ts

@@ -0,0 +1,163 @@
+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 = () => {
+        // 如果已经执行过，则不再执行
+        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") {
+        // 在客户端环境中
+        if (
+          document.readyState === "complete" ||
+          document.readyState === "interactive"
+        ) {
+          // 如果文档已加载完成，立即执行一次
+          setTimeout(handleEvent, 0);
+        } else {
+          // 否则等待 DOMContentLoaded 事件
+          this.doc.addEventListener("DOMContentLoaded", 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("DOMContentLoaded", 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

@@ -0,0 +1,116 @@
+import { DATA_POPUP, DATA_POPUP_ROLE, PopupRole } from "./consts";
+import { PopupController } from "./popup";
+
+export class PopoverController extends PopupController {
+  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_POPUP}]`);
+    popups?.forEach((popup) => {
+      const popupKey = popup.getAttribute(DATA_POPUP);
+      //处理鼠标交互事件
+      if (popupKey && popup) {
+        if (
+          popup.getAttribute(DATA_POPUP_ROLE) === PopupRole.PopoverContainer
+        ) {
+          const unsub = this.initPopover(popupKey, popup as HTMLElement);
+          this.unmountHandlers.push(unsub);
+        }
+      }
+    });
+  }
+
+  unmount(): void {
+    super.unmount();
+  }
+
+  /**
+   * 初始化Popover的鼠标交互事件
+   * @param popupKey - 弹出层的唯一标识
+   * @param element - 弹出层的 DOM 元素
+   * @returns 清理函数，用于移除事件监听器
+   */
+  public initPopover = (
+    popupKey: string,
+    element: HTMLElement
+  ): (() => void) => {
+    if (!this.doc) return () => {};
+
+    try {
+      // 创建新的事件处理函数
+      const handleMouseEnter = () => {
+        this.open(popupKey, element);
+      };
+
+      const handleMouseLeave = () => {
+        this.close(popupKey);
+      };
+
+      // 添加新的事件监听器
+      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事件失败: ${popupKey}`, error);
+      return () => {};
+    }
+  };
+}
+
+export const popover = PopoverController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);

package/src/controller/TabsController.ts

@@ -0,0 +1,271 @@
+import {
+  DATA_TABS,
+  DATA_TABS_SELECTION,
+  DATA_TABS_TAB,
+  DATA_TABS_PANEL,
+  DATA_MOTION_SELECTION,
+} from "../component-logic";
+import { AnimationConfig } from "../motion";
+import { applyAnimation } from "./applyAnimation";
+import { EVENT_SELECT, EVENT_UNSELECT } from "./consts";
+import { EventBus, SelectionEvent } from "./popup";
+
+export class TabsController {
+  private static instances: Record<string, TabsController> = {};
+  private doc?: Document;
+  protected eventBus = new EventBus();
+  protected unmountHandlers: (() => void)[] = [];
+
+  private constructor(doc?: Document) {
+    this.doc = doc;
+  }
+
+  /**
+   * 获取 TabsController 实例
+   * @param key 实例的唯一标识，默认为 "runtime"
+   * @param doc 文档对象
+   * @returns TabsController 实例
+   */
+  public static getInstance(
+    key: string = "runtime",
+    doc?: Document
+  ): TabsController {
+    if (!TabsController.instances[key]) {
+      TabsController.instances[key] = new TabsController(doc);
+    } else if (doc) {
+      TabsController.instances[key].setDoc(doc);
+    }
+    return TabsController.instances[key];
+  }
+
+  /**
+   * 销毁指定 key 的实例
+   * @param key 实例的唯一标识
+   */
+  public static destroyInstance(key: string = "runtime"): void {
+    if (TabsController.instances[key]) {
+      TabsController.instances[key].destroy();
+      delete TabsController.instances[key];
+    }
+  }
+
+  private setDoc(doc?: Document) {
+    this.doc = doc;
+  }
+
+  mount() {
+    if (!this.doc) return () => {};
+    this.unmount();
+    // 实现标签页的挂载逻辑
+    const tabsList = this.doc.querySelectorAll(`[${DATA_TABS}]`);
+    tabsList.forEach((tabs) => {
+      const tabsId = tabs.getAttribute(DATA_TABS);
+      const tabsSelection = tabs.getAttribute(DATA_TABS_SELECTION);
+      const tabsTabs = tabs.querySelectorAll(`[${DATA_TABS_TAB}]`);
+      const tabsPanels = tabs.querySelectorAll(`[${DATA_TABS_PANEL}]`);
+      if (!tabsId) {
+        return;
+      }
+      // 初始化选中标签
+      tabsTabs.forEach((tab, index) => {
+        if (tabsSelection && tabsSelection === (index + 1).toString()) {
+          tab.classList.add("selected");
+        } else {
+          tab.classList.remove("selected");
+        }
+
+        // 给标签添加点击事件
+        const handleTabClick = () => {
+          const oldSeledction = tabs.getAttribute(DATA_TABS_SELECTION);
+          const newSelection = (index + 1).toString();
+          // 如果标签已经选中，则不进行操作
+          if (oldSeledction === newSelection) {
+            return;
+          }
+          // 设置选中的标签
+          tabs.setAttribute(DATA_TABS_SELECTION, newSelection);
+          // 发出选中事件
+          this.select(tabsId, tab as HTMLElement, newSelection);
+          // 移除所有标签的选中状态
+          tabsTabs.forEach((tab, subIndex) => {
+            const tabKey = (subIndex + 1).toString();
+            if (oldSeledction === tabKey) {
+              tab.classList.remove("selected");
+              // 取消选中
+              this.unselect(tabsId, tab as HTMLElement, tabKey);
+            }
+          });
+          tab.classList.add("selected");
+
+          // 设置选中的面板
+          tabsPanels.forEach((panel, subIndex) => {
+            panel.classList.remove("selected");
+            if (index === subIndex) {
+              panel.classList.add("selected");
+            }
+          });
+        };
+
+        // 添加新的事件监听器
+        tab.addEventListener("click", handleTabClick);
+        this.unmountHandlers.push(() => {
+          tab.removeEventListener("click", handleTabClick);
+        });
+      });
+
+      // 初始化选中面板
+      tabsPanels.forEach((panel, index) => {
+        if (tabsSelection && tabsSelection === (index + 1).toString()) {
+          panel.classList.add("selected");
+        } else {
+          panel.classList.remove("selected");
+        }
+      });
+    });
+    const unsub2 = this.initTabsMotion();
+    this.unmountHandlers.push(unsub2);
+    return () => {
+      // 返回清理函数
+      this.unmountHandlers.forEach((unmountHandler) => {
+        unmountHandler();
+      });
+    };
+  }
+
+  //初始化选项卡Selection动画
+  initTabsMotion() {
+    const unsub = this.onSelected((event: SelectionEvent) => {
+      //查找对应的data-motion-selection元素
+      const tabsElement = this.doc?.querySelector(
+        `[${DATA_TABS}=${event.key}]`
+      );
+
+      if (
+        this.doc?.defaultView &&
+        tabsElement instanceof this.doc?.defaultView.HTMLElement
+      ) {
+        //该容器下，所有带有选中动画的元素
+        tabsElement
+          .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
+          .forEach((element) => {
+            const motions = (element as HTMLElement).dataset.motionSelection;
+            if (motions) {
+              const animation = JSON.parse(motions) as
+                | AnimationConfig
+                | undefined;
+              if (animation) {
+                applyAnimation(element, animation);
+              }
+            }
+          });
+      }
+    });
+
+    const unsub2 = this.onUnSelected((event: SelectionEvent) => {
+      //查找对应的data-motion-selection元素
+      const tabsElement = this.doc?.querySelector(
+        `[${DATA_TABS}=${event.key}]`
+      );
+
+      if (
+        this.doc?.defaultView &&
+        tabsElement instanceof this.doc?.defaultView.HTMLElement
+      ) {
+        //该容器下，所有带有选中动画的元素
+        // tabsElement
+        //   .querySelectorAll(`[${DATA_MOTION_SELECTION}]`)
+        //   .forEach((element) => {
+        //     const motions = (element as HTMLElement).dataset.motionSelection;
+        //     if (motions) {
+        //       const animation = JSON.parse(motions) as
+        //         | AnimationConfig
+        //         | undefined;
+        //       if (animation) {
+        //         applyAnimation(element, animation);
+        //       }
+        //     }
+        //   });
+      }
+    });
+
+    return () => {
+      unsub();
+      unsub2();
+    };
+  }
+
+  unmount() {
+    this.unmountHandlers.forEach((handler) => handler());
+    this.unmountHandlers = [];
+  }
+  /**
+   * 监听选项被选中事件
+   *
+   * @param callback - 选项被选中时的回调函数
+   * @returns 取消监听的函数
+   */
+  public onSelected = (
+    callback: (event: SelectionEvent) => VoidFunction | void
+  ): (() => void) => {
+    if (!this.doc) return () => {};
+
+    return this.eventBus.on(EVENT_SELECT, callback);
+  };
+
+  /**
+   * 监听选项取消选中事件
+   *
+   * @param callback - 选项取消选中时的回调函数
+   * @returns 取消监听的函数
+   */
+  public onUnSelected = (
+    callback: (event: SelectionEvent) => VoidFunction | void
+  ): (() => void) => {
+    if (!this.doc) return () => {};
+
+    return this.eventBus.on(EVENT_UNSELECT, callback);
+  };
+
+  /**
+   * 选择
+   * @param key - 选项的唯一标识
+   * @param target - 触发选择的目标元素
+   * @param selection - 选择的值
+   */
+  select = (key: string, target: HTMLElement, selection: string): void => {
+    if (this.doc) {
+      try {
+        this.eventBus.emit(EVENT_SELECT, { key, target, selection });
+      } catch (error) {
+        console.error(`触发选择事件失败: ${key}`, error);
+      }
+    }
+  };
+
+  /**
+   * 取消选择
+   * @param key - 选项的唯一标识
+   * @param target - 触发取消选择的目标元素
+   * @param selection - 取消选择的值
+   */
+  unselect = (key: string, target: HTMLElement, selection: string): void => {
+    if (this.doc) {
+      try {
+        this.eventBus.emit(EVENT_UNSELECT, { key, target, selection });
+      } catch (error) {
+        console.error(`触发取消选择事件失败: ${key}`, error);
+      }
+    }
+  };
+
+  destroy() {
+    // 实现销毁逻辑
+    this.eventBus.destroy();
+    this.unmount();
+  }
+}
+
+export const tabs = TabsController.getInstance(
+  "runtime",
+  typeof document !== "undefined" ? document : undefined
+);