@rxdrag/website-lib-core 0.0.102 → 0.0.104

package/src/controller/TabsController.ts

@@ -1,271 +0,0 @@
-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 "./OpenableController";
-
-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
-);

package/src/controller/applyAnimation.ts

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

@@ -1,79 +0,0 @@
-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/controller/consts.ts

@@ -1,33 +0,0 @@
-//弹层ID
-export const DATA_OPENABLE = "data-openable";
-
-//弹层角色，取值：Openable
-export const DATA_OPENABLE_ROLE = "data-openable-role";
-
-//弹层CTA，用于跟踪用户点击行为
-export const DATA_POPUP_CTA = "data-popup-cta";
-
-//已经进入过视窗
-export const DATA_VIEWPORT_ENTERED = "data-viewport-entered";
-
-export enum OpenAble {
-  PopoverContainer = "popover-container",
-  PopoverPanel = "popover-panel",
-  ModalContainer = "modal-container",
-  ModalTrigger = "modal-trigger",
-  ModalPanel = "modal-panel",
-  ModalCloser = "modal-closer",
-  CollapseContainer = "collapse-container",
-  CollapsePanel = "collapse-panel",
-  CollapseTrigger = "collapse-trigger",
-}
-
-/** 弹出层打开事件名称 */
-export const EVENT_OPEN = "openable-open";
-/** 弹出层关闭事件名称 */
-export const EVENT_CLOSE = "openable-close";
-
-/** 元素选中事件名称，比如tab切换 */
-export const EVENT_SELECT = "element-select";
-/** 元素取消选中事件名称 */
-export const EVENT_UNSELECT = "element-unselect";

package/src/controller/index.ts

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

package/src/controller/utils.ts

@@ -1,48 +0,0 @@
-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,
-  };
-}