Class TJSPosition

Provides an advanced compound store for positioning elements dynamically including an optimized pipeline for updating an associated element. Essential tweening / animation is supported in addition to a validation API to constrain positional updates.

Implements

WritableExt

Constructors

constructor

new TJSPosition(
    parentOrOptions?:
        | Partial<TJSPosition.Options.Config & TJSPositionDataExtra>
        | PositionParent,
    options?: ConfigAll,
): TJSPosition
Parameters
- OptionalparentOrOptions: Partial<TJSPosition.Options.Config & TJSPositionDataExtra> | PositionParent
  A potential parent element or object w/ elementTarget accessor. You may also forego setting the parent and pass in the configuration options object.
- Optionaloptions: ConfigAll
  The configuration options object.
Returns TJSPosition

Accessors

animate

get animate(): TJSPosition.API.Animation
Returns the animation API.

Returns TJSPosition.API.Animation
Animation instance API.

dimension

get dimension(): Readonly<
    {
        height: number
        | "auto"
        | "inherit"
        | null;
        width: number | "auto" | "inherit" | null;
    },
>
Returns the dimension data for the readable store.

Returns Readonly<
    {
        height: number
        | "auto"
        | "inherit"
        | null;
        width: number | "auto" | "inherit" | null;
    },
>
Dimension data.

element

get element(): HTMLElement
Returns the current HTMLElement being positioned.

Returns HTMLElement
Current HTMLElement being positioned.

elementUpdated

get elementUpdated(): Promise<number>
Returns a promise that is resolved on the next element update with the time of the update.

Returns Promise<number>
Promise resolved on element update.

enabled

get enabled(): boolean
Returns the enabled state.

Returns boolean
Enabled state.
set enabled(enabled: boolean): void
Sets the enabled state.
Parameters
- enabled: boolean
  Newly enabled state.
Returns void

height

get height(): number | "auto" | "inherit"
Returns number | "auto" | "inherit"
height
set height(height: string | number): void
Parameters
- height: string | number
Returns void

left

get left(): number
Returns number
left
set left(left: string | number): void
Parameters
- left: string | number
Returns void

maxHeight

get maxHeight(): number
Returns number
maxHeight
set maxHeight(maxHeight: string | number): void
Parameters
- maxHeight: string | number
Returns void

maxWidth

get maxWidth(): number
Returns number
maxWidth
set maxWidth(maxWidth: string | number): void
Parameters
- maxWidth: string | number
Returns void

minHeight

get minHeight(): number
Returns number
minHeight
set minHeight(minHeight: string | number): void
Parameters
- minHeight: string | number
Returns void

minWidth

get minWidth(): number
Returns number
minWidth
set minWidth(minWidth: string | number): void
Parameters
- minWidth: string | number
Returns void

parent

get parent(): PositionParent
Returns the associated TJSPosition.PositionParent instance.

Returns PositionParent
The current position parent instance.
set parent(parent: PositionParent): void
Sets the associated TJSPosition.PositionParent instance. Resets the style cache and default data.
Parameters
- parent: PositionParent
  A PositionParent instance or undefined to disassociate
Returns void

resizeObservable

get resizeObservable(): boolean
Returns the resize observable state which is true whenever width or height is auto or inherit.

Returns boolean

resizeObservableHeight

get resizeObservableHeight(): boolean
Returns the resize observable state which is true whenever height is auto or inherit.

Returns boolean

resizeObservableWidth

get resizeObservableWidth(): boolean
Returns the resize observable state which is true whenever width is auto or inherit.

Returns boolean

rotateX

get rotateX(): number
Returns number
rotateX
set rotateX(rotateX: string | number): void
Parameters
- rotateX: string | number
Returns void

rotateY

get rotateY(): number
Returns number
rotateY
set rotateY(rotateY: string | number): void
Parameters
- rotateY: string | number
Returns void

rotateZ

get rotateZ(): number
Returns number
rotateZ
set rotateZ(rotateZ: string | number): void
Parameters
- rotateZ: string | number
Returns void

rotation

get rotation(): number
Returns number
Alias for rotateZ
set rotation(rotateZ: string | number): void
Parameters
- rotateZ: string | number
  alias for rotateZ
Returns void

scale

get scale(): number
Returns number
scale
set scale(scale: number): void
Parameters
- scale: number
Returns void

state

get state(): TJSPosition.API.State
Returns the state API.

Returns TJSPosition.API.State
TJSPosition state API.

stores

get stores(): TJSPosition.API.Stores
Returns the derived writable stores for individual data variables.

Returns TJSPosition.API.Stores
Derived / writable stores.

top

get top(): number
Returns number
top
set top(top: string | number): void
Parameters
- top: string | number
Returns void

transform

get transform(): TransformData
Returns the transform data for the readable store.

Returns TransformData
Transform Data.

transformOrigin

get transformOrigin(): TransformOrigin
Returns TransformOrigin
transformOrigin
set transformOrigin(transformOrigin: TransformOrigin): void
Parameters
- transformOrigin: TransformOrigin
Returns void

translateX

get translateX(): number
Returns number
translateX
set translateX(translateX: string | number): void
Parameters
- translateX: string | number
Returns void

translateY

get translateY(): number
Returns number
translateY
set translateY(translateY: string | number): void
Parameters
- translateY: string | number
Returns void

translateZ

get translateZ(): number
Returns number
translateZ
set translateZ(translateZ: string | number): void
Parameters
- translateZ: string | number
Returns void

validators

get validators(): TJSPosition.API.Validators
Returns the validators.

Returns TJSPosition.API.Validators
Validators API

width

get width(): number | "auto" | "inherit"
Returns number | "auto" | "inherit"
width
set width(width: string | number): void
Parameters
- width: string | number
Returns void

zIndex

get zIndex(): number
Returns number
z-index
set zIndex(zIndex: number): void
Parameters
- zIndex: number
Returns void

`Static`Animate

get Animate(): AnimationGroup
Returns AnimationGroup
Public Animation Group API.

`Static`Data

get Data(): TJSPositionDataConstructor
Returns TJSPositionDataConstructor
TJSPositionData constructor.

`Static`Initial

get Initial(): Readonly<DefaultInitial>
Returns Readonly<DefaultInitial>
TJSPosition default initial systems.

`Static`SystemBase

get SystemBase(): SystemBaseConstructor
Returns SystemBaseConstructor
SystemBase constructor.

`Static`TransformData

get TransformData(): TransformDataConstructor
Returns TJSTransformData class / constructor.

Returns TransformDataConstructor
TransformData class / constructor.

`Static`transformOrigins

get transformOrigins(): readonly TransformOrigin[]
Returns a list of supported transform origins.

Returns readonly TransformOrigin[]
The supported transform origin strings.

`Static`Validators

get Validators(): Readonly<DefaultValidators>
Returns default validator systems.

Returns Readonly<DefaultValidators>
Available validators.

Methods

get

get(
data?: { [key: string]: any },
options?: TJSPosition.Options.Get,
): Partial<TJSPositionData>
Assigns current position data to the given object data object. By default, null position data is not assigned. Other options allow configuration of the data assigned, including setting default numeric values for any properties that are null.
Parameters
- Optionaldata: { [key: string]: any }
  Target to assign current position data.
- Optionaloptions: TJSPosition.Options.Get
  Defines options for specific keys and substituting null for numeric default values. By default, nullable keys are included.
Returns Partial<TJSPositionData>
Any passed in data object with current position data.

set

set(position?: TJSPositionDataRelative, options?: TJSPosition.Options.Set): this
All calculation and updates of position are implemented in TJSPosition. This allows position to be fully reactive and in control of updating inline styles for a connected HTMLElement.

The initial set call with a target element will always set width / height as this is necessary for correct calculations.

When a target element is present, updated styles are applied after validation. To modify the behavior of set, implement one or more validator functions and add them via the validator API available from TJSPosition.validators.

Updates to any target element are decoupled from the underlying TJSPosition data. This method returns this instance that you can then await on the target element inline style update by using TJSPosition.elementUpdated.

Relative updates to any property of TJSPositionData are possible by specifying properties as strings. This string should be in the form of '+=', '-=', or '*=' and float / numeric value. IE '+=0.2'. TJSPosition.set will apply the addition, subtraction, or multiplication operation specified against the current value of the given property. Please see Data.TJSPositionDataRelative for a detailed description.
Parameters
- Optionalposition: TJSPositionDataRelative
  TJSPosition data to set.
- Optionaloptions: TJSPosition.Options.Set
  Additional options.
Returns this
This TJSPosition instance.

Implementation of WritableExt.set

subscribe(handler: Subscriber<Readonly<TJSPositionData>>): Unsubscriber
Parameters
- handler: Subscriber<Readonly<TJSPositionData>>
  Callback function that is invoked on update / changes. Receives a readonly copy of the TJSPositionData.
Returns Unsubscriber
Unsubscribe function.

Implementation of WritableExt.subscribe

toJSON

toJSON(): TJSPositionData
Returns TJSPositionData
Current position data.

update

update(updater: Updater<TJSPositionDataRelative>): void
Provides the Writable store update method. Receive and return a TJSPositionData instance to update the position state. You may manipulate numeric properties by providing relative adjustments described in TJSPositionDataRelative.
Parameters
- updater: Updater<TJSPositionDataRelative>
Returns void
Implementation of WritableExt.update

`Static`copyData

copyData(
source: Partial<TJSPositionData>,
target?: TJSPositionData,
): TJSPositionData
Convenience to copy from source to target of two TJSPositionData like objects. If a target is not supplied a new TJSPositionData instance is created.
Parameters
- source: Partial<TJSPositionData>
  The source instance to copy from.
- Optionaltarget: TJSPositionData
  Target TJSPositionData like object; if one is not provided a new instance is created.
Returns TJSPositionData
The target instance with all TJSPositionData fields.

`Static`duplicate

duplicate(position: TJSPosition, options?: ConfigAll): TJSPosition
Returns a duplicate of a given position instance copying any options and validators. The position parent is not copied, and a new one must be set manually via the TJSPosition.parent setter.
Parameters
- position: TJSPosition
  A position instance.
- Optionaloptions: ConfigAll
  Unique new options to set.
Returns TJSPosition
A duplicate position instance.

Class TJSPosition

Implements

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns TJSPosition

Accessors

animate

Returns TJSPosition.API.Animation

dimension

Returns Readonly< { height: number | "auto" | "inherit" | null; width: number | "auto" | "inherit" | null; },>

element

Returns HTMLElement

elementUpdated

Returns Promise<number>

enabled

Returns boolean

Parameters

Returns void

height

Returns number | "auto" | "inherit"

Parameters

Returns void

left

Returns number

Parameters

Returns void

maxHeight

Returns number

Parameters

Returns void

maxWidth

Returns number

Parameters

Returns void

minHeight

Returns number

Parameters

Returns void

minWidth

Returns number

Parameters

Returns void

parent

Returns PositionParent

Parameters

Returns void

resizeObservable

Returns boolean

resizeObservableHeight

Returns boolean

resizeObservableWidth

Returns boolean

rotateX

Returns number

Parameters

Returns void

rotateY

Returns number

Parameters

Returns void

rotateZ

Returns number

Parameters

Returns void

rotation

Returns number

Parameters

Returns void

scale

Returns number

Parameters

Returns void

state

Returns TJSPosition.API.State

stores

Returns Readonly<
{
height: number
| "auto"
| "inherit"
| null;
width: number | "auto" | "inherit" | null;
},
>

`Static`Animate

`Static`Data

`Static`Initial

`Static`SystemBase

`Static`TransformData

`Static`transformOrigins

`Static`Validators

`Static`copyData

`Static`duplicate