Class UFFormToggleHelper

Defines class UFFormToggleHelper, a class to make html forms more dynamic by changing styles, visibility and enabled states based on input elements value and valid state.

Use a combination of data-uf-toggle-XXXX at an element. It alters the element depending on if one or more elements matches a condition or not.

If a targeted form element is a radio button, this class will install listeners on all radio buttons. When a radio button fires a change event, the code will dispatch a change event to all other radio buttons in the same group. This fixes the issue that radio buttons do not fire a change event when they are unselected.

The following data attributes can be added:

  • data-uf-toggle-type = 'auto' (default), 'value', 'valid', 'property'

    • 'value' = it is assumed the selector points to an input element, its value is compared to the values set with 'data-uf-toggle-value' or 'data-uf-toggle-values'. If no values are set, the input element is considered valid if the value is not empty.
    • 'valid' = the html5 validation result is used.
    • 'property' = works like 'value' but check the value of a property instead of the value of the element.
    • 'auto' = select the type based on certain conditions:
      • 'value' is selected if 'data-uf-toggle-value' or 'data-uf-toggle-values' is used or if the input element is a file input element.
      • 'property' is selected if the selector points to an input element that is checkbox or radio button.
      • 'valid' is used in all other cases.

    If the selector points to a form, the type is forced to 'valid' since a form does not have a value.

    If 'auto' is used and the selector points to a checkbox or radio button and no values have been set, ['true'] is used for the values list.

  • data-uf-toggle-property = string (default = 'checked') The property of the input element to get the value from. With checked properties use "true" and "false" as values.

  • data-uf-toggle-selector = string (default = '') To select the element or elements to check. If multiple elements are selected, the first element is used in case any of the other options use 'auto'.

    Use empty text to select the parent form this element is contained in.

  • data-uf-toggle-change = 'auto' (default), 'none', 'enable', 'visible'

    • 'enable' = update the disabled property.
    • 'visible' = see UFHtmlHelper on how the element is shown or hidden.
    • 'none' = the elements state is unaltered (except for css classes as set with 'data-uf-toggle-class' and 'data-uf-toggle-class-match').
    • 'auto' = use 'none' if one or more css classes have been defined via 'data-uf-toggle-classes' and/or 'data-uf-toggle-classes-match'. If the element is an input, button or select element use 'enable'. In all other cases use 'visible'.

  • data-uf-toggle-required = '' (default), 'match', 'no-match'

    • '' = do not change required state
    • 'match' = turns on the required state if there is a match.
    • 'no-match' = turns off the required state if there is a match.

  • data-uf-toggle-classes = string (one or more css class names separated by a space) The css classes to add when the elements pointed to by the selector do not match the condition. When the elements match the condition, the css classes get removed.

  • data-uf-toggle-classes-match = string (one or more css class names separated by a space) The css classes to add when the elements pointed to by the selector do match the condition. When the elements no longer match the condition, the css classes get removed.

  • data-uf-toggle-condition = 'any', 'all' (default), 'none' Determines the condition the elements must match. With 'any' only one element must either be valid or be equal to the one of the specified values. With 'all' all elements must either be valid or be equal to one of the specified values. 'none' is the reverse of 'all', none of the elements must be valid or be equal to any of the specified values.

  • data-uf-toggle-compare = equal (default), contain, inside, lt, lte, gt, gte Determines how to compare the value of an element with the values:

    • equal = the value of the element must be equal to one of the values.
    • contain = part of the value of the element must equal one of the values (case incentive).
    • inside = part of one of the values must equal the value of the element (case incentive).
    • lt = the value of the element must be less than one of the values (numeric).
    • lte = the value of the element must be less than or equal to one of the values (numeric).
    • gt = the value of the element must be greater than one of the values (numeric).
    • gte = the value of the element must be greater than or equal to one of the values (numeric).

  • data-uf-toggle-value = string (single value) Alias for data-uf-toggle-values. If data-uf-toggle-values is also specified, this attribute will be ignored.

  • data-uf-toggle-values = string Contains multiple values separated by the separator text as set by data-uf-toggle-values-separator. If both data-uf-toggle-value and data-uf-toggle-values are not set and the checked property is tracked, the value "true" is used.

  • data-uf-toggle-values-separator = string (default = ','). Separator string to split the value of data-uf-toggle-values with.

  • data-uf-toggle-target = string (default = '') When specified, apply the toggle to the target element(s) instead of the element itself. Possible values:

    • '' = apply to the element itself (default).
    • '_parent' = apply to the parent element of the element.
    • '_next' = apply to the next sibling of the element.
    • '_previous' = apply to the previous sibling of the element.
    • '_grandparent' = apply to the parent of the parent of the element.
    • any other value is interpreted as a selector and can select one or multiple elements.

Hierarchy (View Summary)

Constructors

constructor

Methods

addSourceAndTargetElements getTargetElements init scan showElement

Constructors

constructor

Methods

ProtectedaddSourceAndTargetElements

  • addSourceAndTargetElements<
        TTarget extends HTMLElement,
        TSource extends HTMLElement,
    >(
        aSelectorAttribute: string,
        aTargetList: TTarget[],
        aTargetToSourceMap: UFMapOfSet<TTarget, TSource>,
        anEvent?: null | string,
        anHandler?: null | (target: TTarget) => void,
        aGroupName?: string,
    ): void

    Adds elements that have a specific attribute which value is a selector pointing to one or several elements; the target element(s). The elements are grouped per target element pointed to.

    A separate target list is used, so that multiple aTargetToSourceMap instances can be used that use the same target but point to different type of sources.

    The allows for a single event handler. The event handlers should handle all the different types of sources pointing to the same target.

    Type Parameters

    • TTarget extends HTMLElement
    • TSource extends HTMLElement

    Parameters

    • aSelectorAttribute: string

      The attribute that contains the selector. The sources are the elements containing this attribute. The targets are the elements pointed to by the selector value of the attribute.

    • aTargetList: TTarget[]

      Target elements are added to this list. If the target is already in the list, it will not be added again.

    • aTargetToSourceMap: UFMapOfSet<TTarget, TSource>

      A map that contains the source elements grouped per target element.

    • anEvent: null | string = null

      Optional event to listen for at the target element(s). It will be set only once at each target.

    • anHandler: null | (target: TTarget) => void = null

      A handler that is called with the target element that triggered the event.

    • aGroupName: string = ''

      Event group to use. If empty, the event listener just gets added to the target.

    Returns void

ProtectedgetTargetElements

  • getTargetElements(element: HTMLElement, target: string): HTMLElement[]

    Gets the target element(s).

    Parameters

    • element: HTMLElement

      Element to get the target element(s) from.

    • target: string

      Either one of the predefined values or a selector.

    Returns HTMLElement[]

    list of elements (can be empty)

init

scan

ProtectedshowElement

Settings

Member Visibility

On This Page

Constructors
Methods