Class Marquee<StaticProps, ChangeableProps, CallbacksTypes>

Custom Marquee

Type Parameters

StaticProps extends NMarquee.IStaticProps = NMarquee.IStaticProps
ChangeableProps extends NMarquee.IChangeableProps = NMarquee.IChangeableProps
CallbacksTypes extends NMarquee.ICallbacksTypes = NMarquee.ICallbacksTypes

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- Marquee

Constructors

constructor

new Marquee<StaticProps, ChangeableProps, CallbacksTypes>(initialProps?, canInit?): Marquee<StaticProps, ChangeableProps, CallbacksTypes>
Type Parameters
- StaticProps extends NMarquee.IStaticProps = NMarquee.IStaticProps
- ChangeableProps extends NMarquee.IChangeableProps = NMarquee.IChangeableProps
- CallbacksTypes extends NMarquee.ICallbacksTypes = NMarquee.ICallbacksTypes
Parameters
- Optional initialProps: StaticProps & ChangeableProps
- canInit: boolean = true
Returns Marquee<StaticProps, ChangeableProps, CallbacksTypes>
Overrides Component.constructor
- Defined in src/components/Marquee/index.ts:68

Properties

`Protected` `Optional` _animationFrame

_animationFrame?: AnimationFrame<NAnimationFrame.IStaticProps, NAnimationFrame.IChangeableProps, NAnimationFrame.ICallbacksTypes>

Animation frame

`Protected` _canPlay

_canPlay: boolean

Can play

`Protected` _container

_container: HTMLElement

Marquee container

`Protected` _initialHTML

_initialHTML: string

Initial html

`Protected` _itemWidth

_itemWidth: number

Single item width

`Protected` _items

_items: HTMLElement[]

Items

`Protected` `Optional` _mutationObserver

_mutationObserver?: MutationObserver

Mutation observer

`Protected` _quantity

_quantity: number

Items quantity

`Protected` _xCoord

_xCoord: number

X Coordinate

Accessors

app

get app(): Application
Vevet Application

Returns Application
Inherited from ComponentClass.app
- Defined in src/base/Module/index.ts:68

callbacks

get callbacks(): Callbacks<CallbacksTypes>
Module Callbacks

Returns Callbacks<CallbacksTypes>
Inherited from ComponentClass.callbacks
- Defined in src/base/Module/index.ts:47

container

get container(): HTMLElement
Marquee container

Returns HTMLElement
- Defined in src/components/Marquee/index.ts:40

isDestroyed

get isDestroyed(): boolean
The module is destroyed

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

isInitialized

get isInitialized(): boolean
The module is initialized

Returns boolean
Inherited from ComponentClass.isInitialized
- Defined in src/base/Module/index.ts:86

name

get name(): string
Module name

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

prefix

get prefix(): string
Module prefix

Returns string
Overrides ComponentClass.prefix
- Defined in src/components/Marquee/index.ts:32

props

get props(): TRequiredModuleProp<StaticProps & ChangeableProps>
Current properties

Returns TRequiredModuleProp<StaticProps & ChangeableProps>
Inherited from ComponentClass.props
- Defined in src/base/Module/index.ts:34

Methods

`Protected` _createItem

_createItem(isFirst?): HTMLDivElement
Create a single item
Parameters
- isFirst: boolean = false
Returns HTMLDivElement
- Defined in src/components/Marquee/index.ts:212

`Protected` _createItems

_createItems(): void
Returns void
- Defined in src/components/Marquee/index.ts:162

`Protected` _destroy

_destroy(): void
Destroy the component

Returns void
Overrides Component._destroy
- Defined in src/components/Marquee/index.ts:318

`Protected` _disconnectMutations

_disconnectMutations(): void
Destroy mutation observer

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

`Protected` _getDefaultProps

_getDefaultProps(): DeepRequired<StaticProps & ChangeableProps> & {
    container: string;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    pauseOnHover: boolean;
    prependWhitespace: boolean;
    resizeDebounce: number;
    speed: number;
    viewportTarget: string;
}
Get Default properties (should be extended)

Returns DeepRequired<StaticProps & ChangeableProps> & {
    container: string;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    pauseOnHover: boolean;
    prependWhitespace: boolean;
    resizeDebounce: number;
    speed: number;
    viewportTarget: string;
}
Overrides Component._getDefaultProps
- Defined in src/components/Marquee/index.ts:18

`Protected` _init

_init(): void
Init the class

Returns void
Overrides Component._init
- Defined in src/components/Marquee/index.ts:93

`Protected` _observeMutations

_observeMutations(): void
Observe DOM changes If a change happens inside the parent element, we recreate the marquee element

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

`Protected` _onPropsMutate

_onPropsMutate(): void
Handle properties mutation

Returns void
Overrides Component._onPropsMutate
- Defined in src/components/Marquee/index.ts:100

`Protected` _render

_render(speedProp?): void
Render marquee
Parameters
- Optional speedProp: number
Returns void
- Defined in src/components/Marquee/index.ts:283

`Protected` _setEvents

_setEvents(): void
Set module event

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

addCallback

addCallback<T>(target, action, settings?): IAddedCallback
Add a module callback
Type Parameters
- T extends string | number | symbol
Parameters
- target: T
- action: TAction<CallbacksTypes[T]>
- settings: ISettings = {}
Returns IAddedCallback
Inherited from Component.addCallback
- Defined in src/base/Module/index.ts:245

`Protected` addDestroyableAction

addDestroyableAction(action): void
Add destroyable actions
Parameters
- action: (() => void)
  - - (): void
    - Returns void
Returns void
Inherited from Component.addDestroyableAction
- Defined in src/base/Module/index.ts:224

addEventListener

addEventListener<El, Target, Callback>(el, target, callback, options?): IAddEventListener
Add a DOM event listener
Type Parameters
- El extends ListenerElement
- Target extends keyof HTMLElementEventMap
- Callback extends ((evt) => void)
Parameters
- el: El
- target: Target
- callback: Callback
- Optional options: IAddEventListenerOptions
Returns IAddEventListener
Inherited from Component.addEventListener
- Defined in src/base/Module/index.ts:254

addPlugin

addPlugin<T>(plugin): void
Add a single plugin
Type Parameters
- T extends Plugin<any, any, any, any>
Parameters
- plugin: T
Returns void
Inherited from Component.addPlugin
- Defined in src/base/Component/index.ts:21

addResponsiveProps

addResponsiveProps(rules): void
Add responsive rules
Parameters
- rules: IResponsive<ChangeableProps>
Returns void
Inherited from Component.addResponsiveProps
- Defined in src/base/Module/index.ts:173

addViewportCallback

addViewportCallback(target, action, data?): void
Add a viewport callback that will be removed on class destroy
Parameters
- target: keyof NViewport.ICallbacksTypes
- action: ((arg) => void)
  - - (arg): void
    - Parameters
      
      arg: IChanges
      
      Returns void
- data: undefined | ISettings = {}
Returns void
Inherited from Component.addViewportCallback
- Defined in src/base/Module/index.ts:231

changeProps

changeProps(props): void
Change module properties
Parameters
- props: Partial<ChangeableProps>
Returns void
Inherited from Component.changeProps
- Defined in src/base/Module/index.ts:184

`Protected` className

className(...classNames): string
Parameters
- Rest ...classNames: string[]
Returns string
Inherited from Component.className
- Defined in src/base/Module/index.ts:279

destroy

destroy(): void
Destroy the module

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

init

init(): void
Initializes the class

Returns void
Inherited from Component.init
- Defined in src/base/Module/index.ts:202

render

render(speed?): void
Render marquee
Parameters
- speed: number = ...
Returns void
- Defined in src/components/Marquee/index.ts:278

resize

resize(): void
Returns void
- Defined in src/components/Marquee/index.ts:154

`Protected` toggleClassName

toggleClassName(element, className, isActive): void
Toggle classList
Parameters
- element: Element
- className: string
- isActive: boolean
Returns void
Inherited from Component.toggleClassName
- Defined in src/base/Module/index.ts:284