Class UFPopupHelper

Add data-uf-popup-content to an element to convert it into a floater. The value of the attribute should point to one or more clickable elements. The floater will be shown when the user clicks on one of the clickable elements.

Add data-uf-popup-position the element to adjust the position of the floater relative to the clickable element:

  • 'vertical' will place the floater before or after the clickable element at the same vertical position
  • 'horizontal' will place the floater above or below to the clickable element at the same horizontal position
  • 'overlap' will place the floater so that it overlaps the clickable element

Use data-uf-popup-hide to control when the floater is hidden:

  • 'tree' will hide the floater the user clicks outside the floater and any related other floaters
  • 'always' will hide the floater when the user clicks outside the floater

Use 'data-uf-popup-transition' to use a certain transition animation:

  • 'none' will not use any transition animation
  • 'fade' will use a fade transition animation
  • 'slide-vertical' will use a vertical slide transition animation
  • 'slide-horizontal' will use a horizontal slide transition animation

User data-uf-popup-delta-x and data-uf-popup-delta-y to adjust the position of the floater relative to the clickable element. Its value is a positive or integer value that is added to the position of the floater.

Once a floater is content is processed, the data-uf-popup-content attribute is removed.

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