Interface OpenableConfig

Since

v1.2.1 Previously called OpenableProperties

interface OpenableConfig {
    autoClose: boolean;
    className?: string | string[];
    closeButton: boolean;
    id?: string;
    isModal: boolean;
    isOffcanvas: boolean;
    name: string;
    onSetup?: () => void;
    triggers?: Element[] | Map<Element, null | OpenableTriggerConfig>;
    wrapTriggers?: boolean;
}

Properties

autoClose className? closeButton id? isModal isOffcanvas name onSetup? triggers? wrapTriggers?

Properties

autoClose

autoClose: boolean

Whether to auto-close the widget on clicking outside the content element or on pressing Escape key. Furthermore, if any trigger opens the widget on OpenableTriggerConfig.hover, the widget will be closed when the pointer leaves both the trigger and the root.

This is true by default for Popup, Modal and Offcanvas.

OptionalclassName

className?: string | string[]

Class name(s) or a list of class names to set on the openable. Will result in the top-level root element that's created by us getting these classes.

Default Value

undefined

closeButton

closeButton: boolean

Add a close button at the top right.

This is true by default for Modal and Offcanvas.

Optionalid

id?: string

The DOM ID to set on the openable. Will result in the top-level root element that's created by us getting this ID.

Default Value

undefined

isModal

isModal: boolean

If true, then while the widget is open, the document.body will be set to overflow: hidden.

This is true for Modal.

isOffcanvas

isOffcanvas: boolean

If true, then the content element is assumed to be possibly scrollable and will be scrolled back to its top after the widget is closed.

This is true for Modal and Offcanvas.

name

name: string

The name of the type of the openable. Will set the class prefix to lisn-<name>.

OptionalonSetup

onSetup?: () => void

Hook to run once the widget is fully setup (which happens asynchronously).

It is called during "mutate time". See waitForMutateTime.

Default Value

undefined

Optionaltriggers

triggers?: Element[] | Map<Element, null | OpenableTriggerConfig>

The elements that open the widget when clicked on. You can also pass a map whose keys are the elements and values are OpenableTriggerConfig objects.

If not given, then the elements that will be used as triggers are discovered in the following way (<name> is what is given as name):

  1. If the content element has a data-lisn-<name>-content-id attribute, then it must be a unique (for the current page) ID. In this case, the trigger elements will be any element in the document that has a lisn-<name>-trigger class or data-lisn-<name>-trigger attribute and the same data-lisn-<name>-content-id attribute.
  2. Otherwise, the closest ancestor that has a lisn-<name>-container class, or if no such ancestor then the immediate parent of the content element, is searched for any elements that have a lisn-<name>-trigger class or data-lisn-<name>-trigger attribute and that do not have a data-lisn-<name>-content-id attribute, and that are not children of the content element.

Default Value

undefined

OptionalwrapTriggers

wrapTriggers?: boolean

Whether to wrap each trigger in a new element.

Default Value

false

Settings

Member Visibility

On This Page

Properties