Class CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Creates a smooth custom cursor

Type Parameters

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

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- CustomCursor

Constructors

constructor

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

Properties

`Protected` _animationFrame

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

Animation frame

`Protected` _container

_container: Window | Element

Cursor container

`Protected` _coords

_coords: ICoords

Current cursor coordinates

`Protected` `Optional` _hoveredElement

_hoveredElement?: IHoveredElement

Hovered element

`Protected` _innerElement

_innerElement: HTMLElement

Inner cursor element

`Protected` _isContainerWindow

_isContainerWindow: boolean

The container is window

`Protected` _outerElement

_outerElement: HTMLElement

Outer cursor element

`Protected` _targetCoords

_targetCoords: ICoords

Target cursor coordinates

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(): Window | Element
Cursor container

Returns Window | Element
- Defined in src/components/CustomCursor/index.ts:38

coords

get coords(): ICoords
Current cursor coordinates

Returns ICoords
- Defined in src/components/CustomCursor/index.ts:93

domContainer

get domContainer(): HTMLElement
DOM parent for the cursor element

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:49

hoveredElement

get hoveredElement(): undefined | IHoveredElement
Hovered element

Returns undefined | IHoveredElement
- Defined in src/components/CustomCursor/index.ts:77
set hoveredElement(value): void
Hovered element
Parameters
- value: undefined | IHoveredElement
Returns void
- Defined in src/components/CustomCursor/index.ts:82

innerElement

get innerElement(): HTMLElement
Cursor element (inner element)

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:66

isCoordsInterpolated

get isCoordsInterpolated(): boolean
If all coordinates are interpolated

Returns boolean
- Defined in src/components/CustomCursor/index.ts:365

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

outerElement

get outerElement(): HTMLElement
Cursor element (outer element)

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:58

prefix

get prefix(): string
Module prefix

Returns string
Overrides ComponentClass.prefix
- Defined in src/components/CustomCursor/index.ts:33

props

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

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

targetCoords

get targetCoords(): {
    height: number;
    width: number;
    x: number;
    y: number;
}
Target cursor coordinates

Returns {
    height: number;
    width: number;
    x: number;
    y: number;
}
- height: number
- width: number
- x: number
- y: number
- Defined in src/components/CustomCursor/index.ts:101

Methods

`Protected` _calculateCoords

_calculateCoords(): void
Recalculate current coordinates

Returns void
- Defined in src/components/CustomCursor/index.ts:392

`Protected` _createCursor

_createCursor(): void
Create custom cursor

Returns void
- Defined in src/components/CustomCursor/index.ts:185

`Protected` _destroy

_destroy(): void
Destroy the component

Returns void
Inherited from Component._destroy
- Defined in src/base/Component/index.ts:39

`Protected` _disable

_disable(): void
Disable cursor animation

Returns void
- Defined in src/components/CustomCursor/index.ts:443

`Protected` _enable

_enable(): void
Enable cursor animation

Returns void
- Defined in src/components/CustomCursor/index.ts:435

`Protected` _getDefaultProps

_getDefaultProps(): DeepRequired<StaticProps & ChangeableProps> & {
    container: Window & typeof globalThis;
    height: number;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    isNativeCursorHidden: boolean;
    lerp: number;
    shouldAutoStop: boolean;
    width: number;
}
Get Default properties (should be extended)

Returns DeepRequired<StaticProps & ChangeableProps> & {
    container: Window & typeof globalThis;
    height: number;
    isEnabled: boolean;
    isFpsNormalized: boolean;
    isNativeCursorHidden: boolean;
    lerp: number;
    shouldAutoStop: boolean;
    width: number;
}
Overrides Component._getDefaultProps
- Defined in src/components/CustomCursor/index.ts:19

`Protected` _handleMouseDown

_handleMouseDown(evt): void
Event on mouse down
Parameters
- evt: MouseEvent
Returns void
- Defined in src/components/CustomCursor/index.ts:298

`Protected` _handleMouseEnter

_handleMouseEnter(evt): void
Event on mouse enter
Parameters
- evt: MouseEvent
Returns void
- Defined in src/components/CustomCursor/index.ts:271

`Protected` _handleMouseLeave

_handleMouseLeave(): void
Event on mouse leave

Returns void
- Defined in src/components/CustomCursor/index.ts:281

`Protected` _handleMouseMove

_handleMouseMove(evt): void
Event on mouse move
Parameters
- evt: MouseEvent
Returns void
- Defined in src/components/CustomCursor/index.ts:286

`Protected` _handleMouseUp

_handleMouseUp(): void
Event on mouse up

Returns void
- Defined in src/components/CustomCursor/index.ts:306

`Protected` _handleWindowBlur

_handleWindowBlur(): void
Event on window blur

Returns void
- Defined in src/components/CustomCursor/index.ts:312

`Protected` _init

_init(): void
Init the class

Returns void
Overrides Component._init
- Defined in src/components/CustomCursor/index.ts:160

`Protected` _lerp

_lerp(current, target): number
Linear interpolation
Parameters
- current: number
- target: number
Returns number
- Defined in src/components/CustomCursor/index.ts:402

`Protected` _onPropsMutate

_onPropsMutate(): void
Handle properties mutation

Returns void
Overrides Component._onPropsMutate
- Defined in src/components/CustomCursor/index.ts:174

`Protected` _renderElements

_renderElements(): ICoords
Render elements

Returns ICoords
- Defined in src/components/CustomCursor/index.ts:415

`Protected` _setEvents

_setEvents(): void
Set module events

Returns void
- Defined in src/components/CustomCursor/index.ts:230

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

addHoverElement

addHoverElement(settingsProp, enterTimeout?): {
remove: (() => void);
}
Set hover events on an element
Parameters
- settingsProp: IHoveredElement
- enterTimeout: number = 100
Returns {
remove: (() => void);
}
- remove: (() => void)
  - - (): void
    - Returns void
- Defined in src/components/CustomCursor/index.ts:317

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(): void
Render the scene

Returns void
- Defined in src/components/CustomCursor/index.ts:377

`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

Class CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Type Parameters

StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps

ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps

CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps

ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps

CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes

Parameters

Optional initialProps: StaticProps & ChangeableProps

canInit: boolean = true

Returns CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Properties

Protected _animationFrame

Protected _container

Protected _coords

Protected Optional _hoveredElement

Protected _innerElement

Protected _isContainerWindow

Protected _outerElement

Protected _targetCoords

Accessors

app

Returns Application

callbacks

Returns Callbacks<CallbacksTypes>

container

Returns Window | Element

coords

Returns ICoords

domContainer

Returns HTMLElement

hoveredElement

Returns undefined | IHoveredElement

Parameters

value: undefined | IHoveredElement

Returns void

innerElement

Returns HTMLElement

isCoordsInterpolated

Returns boolean

isDestroyed

Returns boolean

isInitialized

Returns boolean

name

Returns string

outerElement

Returns HTMLElement

prefix

Returns string

props

Returns TRequiredModuleProp<StaticProps & ChangeableProps>

targetCoords

Returns { height: number; width: number; x: number; y: number; }

height: number

width: number

x: number

y: number

Methods

Protected _calculateCoords

Returns void

Protected _createCursor

Returns void

Protected _destroy

Returns void

Protected _disable

Returns void

Protected _enable

Returns void

Protected _getDefaultProps

`Optional` initialProps: StaticProps & ChangeableProps

`Protected` _animationFrame

`Protected` _container

`Protected` _coords

`Protected` `Optional` _hoveredElement

`Protected` _innerElement

`Protected` _isContainerWindow

`Protected` _outerElement

`Protected` _targetCoords

Returns {
height: number;
width: number;
x: number;
y: number;
}

`Protected` _calculateCoords

`Protected` _createCursor

`Protected` _destroy

`Protected` _disable

`Protected` _enable

`Protected` _getDefaultProps

Returns DeepRequired<StaticProps & ChangeableProps> & {
container: Window & typeof globalThis;
height: number;
isEnabled: boolean;
isFpsNormalized: boolean;
isNativeCursorHidden: boolean;
lerp: number;
shouldAutoStop: boolean;
width: number;
}

`Protected` _handleMouseDown

`Protected` _handleMouseEnter

`Protected` _handleMouseLeave

`Protected` _handleMouseMove

`Protected` _handleMouseUp

`Protected` _handleWindowBlur

`Protected` _init

`Protected` _lerp

`Protected` _onPropsMutate

`Protected` _renderElements

`Protected` _setEvents

`Protected` addDestroyableAction

`Optional` options: IAddEventListenerOptions

Returns {
remove: (() => void);
}