@nospamproxy/core
    Preparing search index...

    Class PopoutControl

    A generic overlay that takes a specific position on the screen relative to an anchor element.

    Note, that the content element is moved to the document body when attached so that absolute positioning works correctly. When testing use the provided test helpers instead of querySelector to get the content element

    Implements

    • ICustomElementViewModel
    Index

    Constructors

    constructor

    Properties

    alignment allowHide contentHotkeys foreignEvent inline placement preparePlacement preserveFocus stateChanged stateChangedEvent stretch updatePlacement

    Accessors

    isVisible

    Methods

    attached detaching getAnchor getContent hide show toggle

    Constructors

    • Returns PopoutControl

    Properties

    alignment: Alignment = 'start'

    Set how the popout is aligned to the anchor perpendicular to the placement axis.

    Example:

    • If placement is "top" or "bottom" and alignment is "start", the left side of the popout is aligned to the left side of the anchor.
    • If placement is "right" or "left" and alignment is "start", the top side of the popout is aligned to the top side of the anchor.
    allowHide: boolean = true

    If false, the popout can not be closed by the user or via the .hide method.

    contentHotkeys: Hotkeys = {}

    If specified these hotkeys are available while the popout is visible and focused.

    foreignEvent: ((popout: PopoutControl, event: Event) => void) | null = null

    A function that is called when a user action occurs outside of the popout's content while it is open.

    inline: boolean = false

    If false, this is a block element. Otherwise an inline element if PopoutControl.stretch is false and an inline block if true.

    placement: Side = 'top'

    Set the direction in which the popout opens relative to the anchor.

    preparePlacement: ((popout: PopoutControl) => void) | null = null

    A function that is called before the content placement is calculated.

    This should be used together with PopoutControl.updatePlacement to undo any side effects that were needed for placement calculation.

    preserveFocus: boolean = false

    If true, the popout will not create a focus layer for it's contents. Note that the content of the popout will be inaccessible by keyboard.

    stateChanged: ((popout: PopoutControl) => void) | null = null

    A function that is called when this popout has been opened or closed.

    stateChangedEvent: string = ...

    An event that is published when this popout has been opened or closed.

    stretch: boolean = false

    If true, the content is at least the size of the alignment axis.

    Example:

    • If placement is "top" or "bottom", the width of the content is at least the width of the anchor.
    • If placement is "right" or "left", the height of the content is at least the height of the anchor.
    updatePlacement:
        | (
            (
                popout: PopoutControl,
                anchor: Record<Side, number>,
                placement: Side,
                start: number,
                end: number,
            ) => void
        )
        | null = null

    A function that is called when the placement of the popout content has been updated.

    Accessors

    • get isVisible(): boolean

      Check if the popout content is visible.

      Returns boolean

    Methods

    • Parameters

      • _initiator: IHydratedController

      Returns void | Promise<void>

    • Parameters

      • _initiator: IHydratedController
      • _parent: IHydratedController | null

      Returns void | Promise<void>

    • Returns HTMLElement

    • Get the content container element.

      Returns HTMLElement

    • Hide the popout content.

      Returns void

    • Show the popout content.

      Parameters

      • forcePlacement: boolean = false

      Returns void

    • Convenience function for showing or hiding popout content.

      Parameters

      • show: boolean = ...

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods