Class UFDialogHelper

Add data-uf-show-dialog attribute to a clickable element. The value of the data element should be a selector of a dialog element. When the clickable element is clicked, the following actions are performed:

  • For every data attribute in the clickable element, the code checks if the dialog contains one or more child elements referencing the same data attribute. For each found element, the value of the data element either gets assigned to the value property if the element is a select or input element. Else the value of the data element gets assigned to the inner text of the found element. Note that the value of the data element in the found element is not used; only the name is of importance. Data attributes starting with data-uf- are ignored.
  • The dialog is shown.

Example

<button data-uf-show-dialog="#dialog" data-user-name="User Name" data-user-id="123">
  Show dialog
</button>
...
<dialog id="dialog">
  ...
  <p>Edit the user <span data-user-name></span></p>
  ...
  <input type="hidden" name="user-id" data-user-id />
  ...
</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