Class UFHtmlHelper

Base class for all HTML helper classes. Subclasses should override the scan method to perform initialization.

To use helpers stand alone, call init to call scan when the DOM has been loaded. Else use UFHtmlHelpers to get all helpers.

The class contains some support methods.

Some helpers will show or hide an element. Subclasses can use the showElement method to do so.

The showElement checks the following attributes: data-uf-display-value, data-uf-show-classes, data-uf-hide-classes.

If data-uf-show-classes and/or data-uf-hide-classes is set, the values are added and removed to the class list of the element depending on the visible state.

If no data-uf-show-classes and data-uf-hide-classes is set, the method checks for data-uf-display-value. It can have the following values:

  • "auto" (default), the method copies the initial display value and uses it to show the element.
  • "disabled", the display style is not changed.
  • in all other cases the value is assigned to the display style when showing the element.

If the data-uf-display-value attribute is not set, the code uses auto.

The code will assign "none" to the display style when hiding the element.

Use getTargetElements to get the target element(s) from a source element.

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

  • scan(): void

    Scans the current dom, update the dom and install listeners where necessary.

    This method must support being called multiple times.

    Returns void

ProtectedshowElement

  • showElement(anElement: HTMLElement, aShow: boolean): void

    Shows an element by update the classes or display style. See the description of the UFHtmlHelper for details.

    Parameters

    • anElement: HTMLElement
    • aShow: boolean

    Returns void

Settings

Member Visibility

On This Page

Constructors
Methods