Class UFFilterHelper

Helper class that adds support for a filter to show or hide children within some container.

Create an input element with the attribute data-uf-filter-input containing a selector that selects one or more elements that contain child elements that should be shown or hidden based on the value of the input element.

A child element is hidden if any part of innerText does not match the value of the input element (case-insensitive matching).

Add the attribute data-uf-no-filter to a child element to skip it from filtering.

Add the attribute data-uf-filter-group with some value to a child element to group the child elements using the same value. If any of the child elements in the group matches the filter, all the child elements in the group will be shown.

Filterable elements can also be grouped via a container element. Add the attribute data-uf-filter-container to a container element. The container element is shown or hidden depending on if any of the children matches the filter. Children that use the data-uf-no-filter attribute are skipped.

A child or container element is hidden by adding the attribute data-uf-filter-no-match to the child or container element.

This class will add a css style to hide all elements with that data attribute (using display: none).

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