turbodombuilder - v0.9.5
    Preparing search index...

    Class StatefulReifect<State, ClassType>

    StatefulReifect

    A class to manage and apply dynamic state-based properties, styles, classes, and transitions to a set of objects.

    Type Parameters

    • State extends string | number | symbol

      The type of the reifier's states.

    • ClassType extends object = Node

      The object type this reifier will be applied to.

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    timeRegex: RegExp = ...
    attachedObjects: ReifectObjectData<State, ClassType>[] = []
    _states: State[]

    Accessors

    • get states(): State[]

      Returns State[]

      All possible states.

    • set states(value: State[]): void

      Parameters

      Returns void

    • set enabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set propertiesEnabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set stylesEnabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set classesEnabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set replaceWithEnabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set transitionEnabled(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • set properties(
          value: PropertyConfig<
              PartialRecord<keyof ClassType, any>,
              State,
              ClassType,
          >,
      ): void

      Parameters

      Returns void

      The properties to be assigned to the objects. It could take:

      • A record of {key: value} pairs.
      • A record of {state: {key: value} pairs or an interpolation function that would return a record of {key: value} pairs}.
      • An interpolation function that would return a record of {key: value} pairs based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set styles(value: PropertyConfig<StylesType, State, ClassType>): void

      Returns void

      The styles to be assigned to the objects (only if they are eligible elements). It could take:

      • A record of {CSS property: value} pairs.
      • A record of {state: {CSS property: value} pairs or an interpolation function that would return a record of {key: value} pairs}.
      • An interpolation function that would return a record of {key: value} pairs based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set classes(value: PropertyConfig<string | string[], State, ClassType>): void

      Parameters

      Returns void

      The classes to be assigned to the objects (only if they are eligible elements). It could take:

      • A string of space-separated classes.
      • An array of classes.
      • A record of {state: space-separated class string, array of classes, or an interpolation function that would return any of the latter}.
      • An interpolation function that would return a string of space-separated classes or an array of classes based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set replaceWith(value: PropertyConfig<ClassType, State, ClassType>): void

      Returns void

      The object that should replace (in the DOM as well if eligible) the attached objects. It could take:

      • The object to be replaced with.
      • A record of {state: object to be replaced with, or an interpolation function that would return an object to be replaced with}.
      • An interpolation function that would return the object to be replaced with based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set transitionProperties(
          value: PropertyConfig<string | string[], State, ClassType>,
      ): void

      Parameters

      Returns void

      The property(ies) to apply a CSS transition on, on the attached objects. Defaults to "all". It could take:

      • A string of space-separated CSS properties.
      • An array of CSS properties.
      • A record of {state: space-separated CSS properties string, array of CSS properties, or an interpolation function that would return any of the latter}.
      • An interpolation function that would return a string of space-separated CSS properties or an array of CSS properties based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set transitionDuration(value: PropertyConfig<number, State, ClassType>): void

      Parameters

      Returns void

      The duration of the CSS transition to apply on the attached objects. Defaults to 0. It could take:

      • A numerical value (in seconds).
      • A record of {state: duration (number in seconds) or an interpolation function that would return a duration (number in seconds)}.
      • An interpolation function that would return a duration (number in seconds) based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set transitionTimingFunction(
          value: PropertyConfig<string, State, ClassType>,
      ): void

      Parameters

      Returns void

      The timing function of the CSS transition to apply on the attached objects. Defaults to "linear." It could take:

      • A string representing the timing function to apply.
      • A record of {state: timing function (string) or an interpolation function that would return a timing function (string)}.
      • An interpolation function that would return a timing function (string) based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.
    • set transitionDelay(value: PropertyConfig<number, State, ClassType>): void

      Parameters

      Returns void

      The delay of the CSS transition to apply on the attached objects. Defaults to 0. It could take:

      • A numerical value (in seconds).
      • A record of {state: delay (number in seconds) or an interpolation function that would return a delay (number in seconds)}.
      • An interpolation function that would return a delay (number in seconds) based on the state value.

      The interpolation function would take as arguments:

      • state: State: the state being applied to the object(s). Only passed to the callback function if it is defined for the whole field (and not for a specific state).
      • index: number: the index of the object in the applied list.
      • total: number: the total number of objects in the applied list.
      • object: ClassType: the object itself.

    Methods

    • attach

      Parameters

      • object: ClassType

        The object to attach.

      • OptionalonSwitch: (state: State, index: number, total: number, object: ClassType) => void

        Optional callback fired when the reifier is applied to the object. The callback takes as parameters:

        • state: State: The state being applied to the object.
        • index: number: the index of the object in the applied list.
        • total: number: the total number of objects in the applied list.
        • object: ClassType: the object itself.
      • Optionalindex: number

        Optional index to specify the position at which to insert the object in the reifier's attached list.

      Returns this

      • The reifier itself, for method chaining.

      Attaches an object to the reifier.

    • attachAll

      Parameters

      • ...objects: ClassType[]

        The objects to attach.

      Returns this

      • The reifier itself, for method chaining.

      Attaches multiple objects to the reifier.

    • attachAllAt

      Parameters

      • index: number

        The index to specify the position at which to insert the objects in the reifier's attached list.

      • ...objects: ClassType[]

        The objects to attach.

      Returns this

      • The reifier itself, for method chaining.

      Attaches multiple objects to the reifier at a specified index.

    • detach

      Parameters

      • ...objects: ClassType[]

        The objects to detach.

      Returns this

      • The reifier itself, for method chaining.

      Detaches one or more objects from the reifier.

    • Protected

      attachObject

      Parameters

      • object: ClassType

        The object to attach

      • Optionalindex: number

        Optional index to specify the position at which to insert the object in the reifier's attached list.

      • OptionalonSwitch: (state: State, index: number, total: number, object: ClassType) => void

        Optional callback fired when the reifier is applied to the object. The callback takes as parameters:

        • state: State: The state being applied to the object.
        • index: number: the index of the object in the applied list.
        • total: number: the total number of objects in the applied list.
        • object: ClassType: the object itself.

      Returns ReifectObjectData<State, ClassType>

      • The created data entry.

      Function used to generate a data entry for the given object, and add it to the attached list at the provided index (if any).

    • Protected

      detachObject

      Parameters

      Returns void

      Function used to remove a data entry from the attached objects list.

    • stateOf

      Parameters

      • object: ClassType

        The object to determine the state for.

      Returns State

      • The current state of the reifect or undefined if not determinable.

      Determine the current state of the reifect on the provided object.

    • Returns State[]

    • Protected

      parseState

      Parameters

      • value: boolean | State

        The value to parse.

      Returns State

      The parsed value, or null if the boolean could not be parsed.

      Parses a boolean into the corresponding state value.

    • enable

      Parameters

      • value: boolean | ReifectEnabledObject

        The value to set/update with. Setting it to a boolean will accordingly update the value of enabled.global.

      • Optionalobject: ClassType

        The object to set the state of.

      Returns void

      Sets/updates the enabled value corresponding to the provided object for this reifier.

    • getObjectEnabledState

      Parameters

      • object: ClassType

        The object to get the state of.

      Returns ReifectEnabledObject

      • The corresponding enabled state.

      Returns the enabled value corresponding to the provided object for this reifier.

    • reloadFor

      Parameters

      • object: ClassType

        The element to apply the string to.

      Returns this

      Itself for method chaining.

      Generates the transition CSS string for the provided transition with the correct interpolation information.

    • Parameters

      Returns this

    • Parameters

      Returns void

    • Returns void

    • Returns void

    • Returns void

    • Returns void

    • Returns void

    • Returns void