Class Marquee

A custom marquee component that smoothly scrolls its child elements.

This component is designed to loop elements horizontally within a container, with support for customization such as speed, gap, pause on hover, and more.

Documentation

Hierarchy (View Summary)

Module<TC, TS, TM>
- Marquee

Index

Constructors

constructor

new Marquee(
    props?: IMarqueeStaticProps & IMarqueeMutableProps & Partial<
        {
            onDestroy: (data: undefined, ctx: Marquee) => void;
            onProps: (data: Partial, ctx: Marquee) => void;
            onRender: (data: undefined, ctx: Marquee) => void;
            onResize: (data: undefined, ctx: Marquee) => void;
        },
    >,
    onCallbacks?: Partial<
        {
            onDestroy: (data: undefined, ctx: Marquee) => void;
            onProps: (data: Partial, ctx: Marquee) => void;
            onRender: (data: undefined, ctx: Marquee) => void;
            onResize: (data: undefined, ctx: Marquee) => void;
        },
    >,
): Marquee
Parameters
- Optionalprops: IMarqueeStaticProps & IMarqueeMutableProps & Partial<
      {
          onDestroy: (data: undefined, ctx: Marquee) => void;
          onProps: (data: Partial, ctx: Marquee) => void;
          onRender: (data: undefined, ctx: Marquee) => void;
          onResize: (data: undefined, ctx: Marquee) => void;
      },
  >
- OptionalonCallbacks: Partial<
      {
          onDestroy: (data: undefined, ctx: Marquee) => void;
          onProps: (data: Partial, ctx: Marquee) => void;
          onRender: (data: undefined, ctx: Marquee) => void;
          onResize: (data: undefined, ctx: Marquee) => void;
      },
  >
Returns Marquee
Overrides Module.constructor
- Defined in src/components/Marquee/index.ts:76

Accessors

callbacks

get callbacks(): Callbacks<CallbacksMap, this>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap, this>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:76

coord

get coord(): number
The current marquee coordinate.

Returns number
- Defined in src/components/Marquee/index.ts:124
set coord(value: number): void
Parameters
- value: number
Returns void
- Defined in src/components/Marquee/index.ts:128

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/base/Module/index.ts:66

isVertical

get isVertical(): boolean
Check if the marquee is vertical

Returns boolean
- Defined in src/components/Marquee/index.ts:146

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:56

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Inherited from Module.prefix
- Defined in src/base/Module/index.ts:51

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:46

totalSize

get totalSize(): number
Total size of all elements in the marquee (width or height depending on direction)

Returns number
- Defined in src/components/Marquee/index.ts:111

totalWidth

get totalWidth(): number
Total width of all elements in the marquee

Returns number
Deprecated
Use totalSize instead
- Defined in src/components/Marquee/index.ts:119

x

get x(): number
The current coordinate of the marquee.

Returns number
Deprecated
Use coord instead
- Defined in src/components/Marquee/index.ts:137
set x(value: number): void
Parameters
- value: number
Returns void
- Defined in src/components/Marquee/index.ts:141

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, className: string): void
Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
Parameters
- element: Element
  The target DOM element.
- className: string
  The class name to toggle.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:209

`Protected`_cn

_cn(...classNames: string[]): string
Helper function to generate classnames with the module's prefix.
Parameters
- ...classNames: string[]
  The class names to generate.
Returns string
A string of class names with the module's prefix applied.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:199

`Protected`_destroy

_destroy(): void
Destroys the instance and cleans up resources

Returns void
Overrides Module._destroy
- Defined in src/components/Marquee/index.ts:364

_getMutable

_getMutable(): {
    __mutableProp: true;
    adjustSpeed: boolean;
    centered: boolean;
    enabled: boolean;
    gap: string
    | number;
    pauseOnHover: boolean;
    pauseOnOut: boolean;
    speed: string | number;
}
Get default mutable properties.

Returns {
    __mutableProp: true;
    adjustSpeed: boolean;
    centered: boolean;
    enabled: boolean;
    gap: string | number;
    pauseOnHover: boolean;
    pauseOnOut: boolean;
    speed: string | number;
}
- __mutableProp: true
- adjustSpeed: boolean
  When need to use dynamic FPS factor to adjust the speed of the marquee.
  Default
  true
- centered: boolean
  Centers the marquee content within the container.
  Default
  false
- enabled: boolean
  Enables or disables the marquee animation. When false, the marquee will be paused.
  Default
  true
- gap: string | number
  The gap between the marquee elements. Supports css units like px, rem, vw, vh, svh.
  Default
  0
- pauseOnHover: boolean
  Pauses the marquee when the mouse hovers over it.
  Default
  false
- pauseOnOut: boolean
  Pauses the marquee when the element leaves the viewport.
  Default
  true
- speed: string | number
  The speed of the marquee animation. Supports css units like px, rem, vw, vh, svh.
  Default
  1
Overrides Module._getMutable
- Defined in src/components/Marquee/index.ts:48

_getStatic

_getStatic(): {
    __staticProp: true;
    cloneNodes: boolean;
    container: HTMLElement;
    direction: "horizontal"
    | "vertical";
    hasWillChange: boolean;
    resizeDebounce: number;
}
Get default static properties.

Returns {
    __staticProp: true;
    cloneNodes: boolean;
    container: HTMLElement;
    direction: "horizontal" | "vertical";
    hasWillChange: boolean;
    resizeDebounce: number;
}
- __staticProp: true
- cloneNodes: boolean
  Indicates whether to clone the marquee nodes. Can be set to false if DOM cloning is not preferred.
  Default
  true
- container: HTMLElement
  The container element that holds the marquee content.
- direction: "horizontal" | "vertical"
  Indicates the direction of the marquee animation.
  Default
  'horizontal'
- hasWillChange: boolean
  Determines whether to apply the will-change CSS property to the marquee elements to optimize rendering. Setting this to true may improve performance.
  Default
  true
- resizeDebounce: number
  The debounce delay for the resize event in milliseconds.
  Default
  0
Overrides Module._getStatic
- Defined in src/components/Marquee/index.ts:43

`Protected`_handleProps

_handleProps(props: Partial<IMarqueeMutableProps>): void
Handles property changes
Parameters
- props: Partial<IMarqueeMutableProps>
Returns void
Overrides Module._handleProps
- Defined in src/components/Marquee/index.ts:156

`Protected`_setEvents

_setEvents(): void
Set marquee events

Returns void
- Defined in src/components/Marquee/index.ts:171

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Module.destroy
- Defined in src/base/Module/index.ts:223

on

on<T extends keyof IMarqueeCallbacksMap>(
    target: T,
    listener: TCallbacksAction<IMarqueeCallbacksMap[T], Marquee>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends keyof IMarqueeCallbacksMap
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<IMarqueeCallbacksMap[T], Marquee>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:185

onDestroy

onDestroy(action: () => void): void
Adds a callback on the module's destruction.
Parameters
- action: () => void
  The function to execute during destruction.
Returns void
Inherited from Module.onDestroy
- Defined in src/base/Module/index.ts:167

render

render(step?: number): void
Renders the marquee, adjusting element positions.
Parameters
- Optionalstep: number
Returns void
- Defined in src/components/Marquee/index.ts:289

resize

resize(): void
Resizes the marquee, recalculating element positions and cloning if necessary.

Returns void
- Defined in src/components/Marquee/index.ts:251

updateProps

updateProps(props: Partial<IMarqueeMutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<IMarqueeMutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:137

Class Marquee

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Marquee

Accessors

callbacks

Returns Callbacks<CallbacksMap, this>

coord

Returns number

Parameters

Returns void

isDestroyed

Returns boolean

isVertical

Returns boolean

name

Returns string

prefix

Returns string

props

Returns TRequiredProps<MutableProps & StaticProps>

totalSize

Returns number

totalWidth

Returns number

Deprecated

x

Returns number

Deprecated

Parameters

Returns void

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

_getMutable

Returns { __mutableProp: true; adjustSpeed: boolean; centered: boolean; enabled: boolean; gap: string | number; pauseOnHover: boolean; pauseOnOut: boolean; speed: string | number;}

__mutableProp: true

adjustSpeed: boolean

Default

centered: boolean

Default

enabled: boolean

Default

gap: string | number

Default

pauseOnHover: boolean

Default

pauseOnOut: boolean

Default

speed: string | number

Default

_getStatic

Returns { __staticProp: true; cloneNodes: boolean; container: HTMLElement; direction: "horizontal" | "vertical"; hasWillChange: boolean; resizeDebounce: number;}

__staticProp: true

cloneNodes: boolean

Default

container: HTMLElement

direction: "horizontal" | "vertical"

Default

hasWillChange: boolean

Default

resizeDebounce: number

Default

Protected_handleProps

Parameters

Returns void

Protected_setEvents

Returns void

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

Returns {
__mutableProp: true;
adjustSpeed: boolean;
centered: boolean;
enabled: boolean;
gap: string | number;
pauseOnHover: boolean;
pauseOnOut: boolean;
speed: string | number;
}

Returns {
__staticProp: true;
cloneNodes: boolean;
container: HTMLElement;
direction: "horizontal" | "vertical";
hasWillChange: boolean;
resizeDebounce: number;
}

`Protected`_handleProps

`Protected`_setEvents