turbodombuilder - v0.9.22
    Preparing search index...

    Class Reifect<ClassType>

    Reifect

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

    Type Parameters

    • ClassType extends object = Node

      The object type this reifier will be applied to.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    fields timeRegex attachedObjects states

    Accessors

    properties styles classes replaceWith transitionProperties transitionDuration transitionTimingFunction transitionDelay enabled transition

    Methods

    initialize apply attach attachAll attachAllAt detach attachObject detachObject getData getObject stateOf getAllStates parseState enable getObjectEnabledState processTransitionObject processTransitionString toggle reloadFor reloadTransitionFor getEnabledObjectsData applyResolvedValues refreshResolvedValues applyProperties refreshProperties applyReplaceWith refreshReplaceWith applyClasses refreshClasses applyStyles refreshStyles applyTransition refreshTransition filterEnabledObjects processRawProperties clone normalizePropertyConfig

    Constructors

    Properties

    fields: readonly [
        "properties",
        "classes",
        "styles",
        "replaceWith",
        "transitionProperties",
        "transitionDuration",
        "transitionTimingFunction",
        "transitionDelay",
    ] = ...
    timeRegex: RegExp = ...
    attachedObjects: ReifectObjectData<"default", ClassType>[] = []
    states: "default"[]

    All possible states.

    Accessors

    • get properties(): StatelessPropertyConfig<
          PartialRecord<keyof ClassType, any>,
          ClassType,
      >

      Returns StatelessPropertyConfig<PartialRecord<keyof ClassType, any>, ClassType>

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

      • A record of {key: value} pairs.
      • An interpolation function that would return a record of {key: value} pairs.

      The interpolation function would take as arguments:

      • 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 properties(
          value: StatelessPropertyConfig<
              PartialRecord<keyof ClassType, any>,
              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.

    • Returns StatelessPropertyConfig<StylesType, ClassType>

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

      • A record of {CSS property: value} pairs.
      • An interpolation function that would return a record of {key: value} pairs.

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<StylesType, ClassType>): void

      Parameters

      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.
    • get classes(): StatelessPropertyConfig<string | string[], ClassType>

      Returns StatelessPropertyConfig<string | string[], ClassType>

      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.
      • An interpolation function that would return a string of space-separated classes or an array of classes.

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<string | string[], 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.

    • Returns StatelessPropertyConfig<ClassType, ClassType>

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

      • The object to be replaced with.
      • An interpolation function that would return the object to be replaced with.

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<ClassType, ClassType>): void

      Parameters

      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.
    • get transitionProperties(): StatelessPropertyConfig<
          string
          | string[],
          ClassType,
      >

      Returns StatelessPropertyConfig<string | string[], ClassType>

      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.
      • An interpolation function that would return a string of space-separated CSS properties or an array of CSS properties.

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<string | string[], 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.
    • get transitionDuration(): StatelessPropertyConfig<number, ClassType>

      Returns StatelessPropertyConfig<number, ClassType>

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

      • A numerical value (in seconds).
      • An interpolation function that would return a duration (number in seconds).

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<number, 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.
    • get transitionTimingFunction(): StatelessPropertyConfig<string, ClassType>

      Returns StatelessPropertyConfig<string, ClassType>

      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.
      • An interpolation function that would return a timing function (string).

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<string, 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.
    • get transitionDelay(): StatelessPropertyConfig<number, ClassType>

      Returns StatelessPropertyConfig<number, ClassType>

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

      • A numerical value (in seconds).
      • An interpolation function that would return a delay (number in seconds).

      The interpolation function would take as arguments:

      • 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: StatelessPropertyConfig<number, 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.
    • get enabled(): ReifectEnabledObject

      Returns ReifectEnabledObject

    • set enabled(value: boolean | ReifectEnabledObject): void

      Parameters

      Returns void

    • set transition(value: BasicPropertyConfig<string, State>): void

      Parameters

      Returns void

    Methods

    • Function

      attach

      Parameters

      • object: ClassType

        The object to attach.

      • OptionalonSwitch: (state: "default", 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.

    • Function

      attachAll

      Parameters

      • ...objects: ClassType[]

        The objects to attach.

      Returns this

      • The reifier itself, for method chaining.

      Attaches multiple objects to the reifier.

    • Function

      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.

    • Function

      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 Function

      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: "default", 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<"default", 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).

    • Function

      stateOf

      Parameters

      • object: ClassType

        The object to determine the state for.

      Returns "default"

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

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

    • Returns "default"[]

    • Protected Function

      parseState

      Parameters

      • value: boolean | "default"

        The value to parse.

      Returns "default"

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

      Parses a boolean into the corresponding state value.

    • Function

      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.

    • Returns void

    • Returns void

    • Returns void

    • Parameters

      Returns void

    • Returns void

    • Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods