types.ts

  1. import { IArrayFormat } from "@daybrush/utils";
  2. import { SceneItem } from ".";
  4. /**
  5.  * @typedef
  6.  */
  7. export interface EasingFunction extends Function {
  8.     easingName?: string;
  9. }
  11. /**
  12.  * @typedef
  13.  */
  14. export type FillModeType = "forwards" | "backwards" | "both";
  15. /**
  16.  * @typedef
  17.  */
  18. export type IterationCountType = number | "infinite";
  19. /**
  20.  * @typedef
  21.  */
  22. export type EasingType = 0 | EasingFunction;
  23. /**
  24.  * @typedef
  25.  */
  26. export type DirectionType = "normal" | "reverse" | "alternate" | "alternate-reverse";
  28. /**
  29.  * @typedef
  30.  */
  31. export type PlayStateType = "paused" | "running";
  33. /**
  34. * @typedef - The Animator options. Properties used in css animation.
  35. * @property - The id represents the unique key of the animator.
  36. * @property - The easing(timing-function) specifies the speed curve of an animation.
  37. * @property - The iterationCount property specifies the number of times an animation should be played.
  38. * @property - The delay property specifies a delay for the start of an animation.
  39. * @property - The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
  40. * @property - The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
  41. * @property - The playspeed define the speed at which the play is performed.
  42. * @property - The duration property defines how long an animation should take to complete one cycle.
  44. */
  45. export interface AnimatorOptions {
  46.     id: number | string;
  47.     easing: string | EasingType;
  48.     iterationCount: IterationCountType;
  49.     delay: number;
  50.     fillMode: FillModeType;
  51.     direction: DirectionType;
  52.     playSpeed: number;
  53.     duration: number;
  54. }
  55. /**
  56.  * @typedef
  57.  * @extends AnimatorOptions
  58.  * @see AnimatorOptions
  59.  */
  60. export interface AnimatorState extends AnimatorOptions {
  61.     easingName: string;
  62.     iterationTime: number;
  63.     currentTime: number;
  64.     tickTime: number;
  65.     iteration: number;
  66.     prevTime: number;
  67.     playState: PlayStateType;
  68. }
  70. /**
  71.  * @typedef
  72.  * @extends AnimatorState
  73.  * @see AnimatorState
  74.  */
  75. export interface SceneState extends AnimatorState {
  76.     selector: string | boolean | ((id: number | string) => string);
  77.     playCSS: boolean;
  78.     exportEvent?: boolean;
  79. }
  81. /**
  82.  * @typedef
  83.  * @extends AnimatorOptions
  84.  * @see AnimatorOptions
  85.  */
  86. export interface SceneOptions extends AnimatorOptions {
  87.     selector: string | boolean | ((id: number | string) => string);
  88. }
  89. /**
  90.  * @typedef
  91.  * @extends AnimatorState
  92.  * @see AnimatorState
  93.  */
  94. export interface SceneItemState extends AnimatorState {
  95.     playCSS: boolean;
  96.     cssText: string;
  97.     selector: string;
  98.     exportEvent?: boolean;
  99. }
  100. /**
  101.  * @typedef
  102.  * @extends AnimatorOptions
  103.  * @see AnimatorOptions
  104.  */
  105. export interface SceneItemOptions extends AnimatorOptions {
  106.     selector: string | boolean | ((id: number | string) => string);
  107.     elements: IArrayFormat<AnimateElement> | AnimateElement;
  108.     element: IArrayFormat<AnimateElement> | AnimateElement;
  109.     target: any;
  110. }
  112. /**
  113.  * @typedef
  114.  */
  115. export interface PropertyObjectState {
  116.     prefix: string;
  117.     suffix: string;
  118.     model: string;
  119.     type: string;
  120.     separator: string;
  121. }
  123. /**
  124.  * @typedef
  125.  */
  126. export type Role = true | RoleObject;
  128. /**
  129.  * @typedef
  130.  */
  131. export type ElementsType = HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>;
  132. /**
  133.  * @typedef
  134.  */
  135. export type CallbackType<T = any> = (...args: any[]) => T;
  137. /**
  138.  * @typedef
  139.  */
  140. export interface EventParameter {
  141.     [name: string]: CallbackType | CallbackType[];
  142. }
  143. /**
  144.  * @typedef
  145.  */
  146. export interface RoleObject {
  147.     [role: string]: Role;
  148. }
  149. /**
  150.  * @typedef
  151.  */
  152. export type NameType = string | number;
  153. /**
  154.  * @typedef
  155.  */
  156. export type OptionType = ["duration", "fillMode", "direction", "iterationCount", "delay", "easing", "playSpeed"];
  157. /**
  158.  * @typedef
  159.  */
  160. export type EventType = ["paused", "ended", "timeupdate", "animate", "play", "iteration"];
  162. /**
  163.  * @typedef
  164.  */
  165. export type AnimateElement = HTMLElement | SVGElement;
  167. /**
  168.  * @typedef
  169.  */
  170. export interface PlayCondition {
  171.     className?: string;
  172.     selector?: string | ((item: SceneItem, selector: string) => string);
  173. }