Interface OpenableProperties

interface OpenableProperties {
    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: 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.

className?: string | string[]

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

undefined
closeButton: boolean

Add a close button at the top right.

This is true by default for Modal and Offcanvas.

id?: string

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

undefined
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: 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: string

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

onSetup?: () => void

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

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

undefined
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.
undefined
wrapTriggers?: boolean

Whether to wrap each trigger in a new element.

false