Class UFEventActionHelper

This helper can be used to perform certain actions for certain events triggered at the element.

Add data-uf-event-action to the element with one of the following values:

  • "remove-from-dom": Removes the target(s) from the DOM.
  • "hide": Hides the target(s) using UFHtmlHelper.showElement.
  • "show": Shows the target(s) using UFHtmlHelper.showElement.
  • "toggle": Shows the target(s) if their display is set to none, hides them otherwise.
  • "toggle-class": Toggles the classes set with data-uf-event-data at the target(s).
  • "remove-from-class": Removes the classes set with data-uf-event-data from the target(s).
  • "add-to-class": Adds the classes set with data-uf-event-data from the target(s).
  • "show-modal": Shows the target(s) as modal dialog. If the target is not a dialog element, nothing happens.
  • "show-non-modal": Shows the target(s) as dialog. If the target is not a dialog element, nothing happens.
  • "close": Closes the target. If the target is not a dialog element, nothing happens.
  • "set-attribute": Sets the attribute specified in data-uf-event-attribute to the value specified in data-uf-event-data at the target(s).
  • "reload": Reloads the web page.
  • "set-value": Sets the value of the target(s) to the value specified in data-uf-event-data. The target(s) must be an input, textarea or select element. If no value is specified, the target will be set to an empty string or unchecked state. To set checkbox to a checked state use the values 'true', '1' or 'checked'. After setting the value, the code will fire a "change" and (when applicable) an "input" event.
  • "set-text": Sets the inner text content of the target(s) to the value specified in data-uf-event-data.
  • "set-html": Sets the inner HTML content of the target(s) to the value specified in data-uf-event-data.

Use data-uf-event-events to specify the events that should trigger the action. The value is one or multiple events separated by a space. This attribute is required. When missing, nothing happens.

Use data-uf-event-target to specify a target. The value can either be a selector (for one or multiple elements) or one of the predefined values:

  • "_self": The clickable element itself.
  • "_parent": The parent element of the clickable element.
  • "_next": The next sibling of the clickable element.
  • "_previous": The previous sibling of the clickable element.
  • "_grandparent": The parent element of the parent of the clickable element.
  • "_dialog": The nearest dialog element that contains the clickable element.

If data-uf-event-target is missing, the "_self" value is used as default unless the action is "close" than "_dialog" is used as default.

Use data-uf-event-data to specify data used by some of the actions.

Use data-uf-event-attribute to specify the attribute to set in case of the "set-attribute" action.

Use data-uf-event-state to specify the state to check when listening for events that have a newState property. Use this attribute with the value "open" together with the "toggle" event to perform an action when for example a dialog is being opened.

Use data-uf-event-key to specify the key that should be pressed to trigger the action. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key for possible values.

Use data-uf-event-prevent-default to prevent the default action of the event if an action was triggered. The value of the attribute is ignored.

Use data-uf-click-action, data-uf-click-target, data-uf-click-data and data-uf-click-attribute as shortcuts for "click" events.

Use data-uf-load-action, data-uf-load-target, data-uf-load-data and data-uf-load-attribute to perform actions when the document is loaded.

It is possible to specify multiple actions by adding a postfix to the data attributes: ('-1', '-2', etc., till '-20'). The postfix should be added to all data attributes. The postfix works for data-uf-event-xxxx, data-uf-click-xxxx, data-uf-load-xxxx,

Example

<button
  data-uf-event-action="hide" data-uf-event-events="click" data-uf-event-target="_parent"
  data-uf-event-action-1="hide" data-uf-event-events-1="click" data-uf-event-target-1="#some-id"
  data-uf-event-action-2="hide" data-uf-event-events-2="click" data-uf-event-target-2="#another-id"
  >
  Hide element
</button>

Example

<dialog
  data-uf-event-action="toggle"
  data-uf-event-events="open close"
  data-uf-event-target="#indicator"
>
....
</dialog>

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