Class LayoutTrigger

LayoutTrigger allows you to run actions when the viewport or a target element's width or aspect ratio matches a given specification, and undo those actions when the target's width or aspect ratio no longer matches.

To use with auto-widgets (HTML API), see registerTrigger for the specification.

Arguments (required): A single DeviceSpec or AspectRatioSpec (see LayoutTriggerConfig.layout). In this case you can use a dash ("-") instead of space if needed (for example if using CSS classes instead of data attributes), e.g. "min-tablet" instead of "min tablet".
Additional trigger options (see LayoutTriggerConfig:
- root: A string element specification. See getReferenceElement.

Example

Show the element when the window width matches "tablet" breakpoint, hide otherwise:

<div data-lisn-on-layout="tablet @show"></div>

Example

As above, but using a CSS class instead of data attribute:

<div class="lisn-on-layout--tablet@show"></div>

Example

Show the element 1000ms after the window width matches "tablet" breakpoint, hide otherwise:

<div data-lisn-on-layout="tablet @show +delay=1000"></div>

Example

Add class tablet when the window width is at least "tablet", hide otherwise:

<div data-lisn-on-layout="min tablet @add-class: tablet"></div>

Example

Add class mobile when the window width is "mobile" or mobile-wide, add class tablet, when it's "tablet" and so on; undo that otherwise:

<div data-lisn-on-layout="max mobile-wide @add-class: mobile ;
                          tablet @add-class: tablet ;
                          desktop @add-class: desktop"
></div>

Example

Show the element when window width is at least "mobile-wide" and at most "tablet", hide otherwise:

<div data-lisn-on-layout="mobile-wide to tablet @show"></div>

Example

When the aspect ratio of the next element with class box is square, then add classes c1 and c2 to the element (that the trigger is defined on) and enable trigger my-trigger defined on this same element; undo all of that otherwise (on other aspect ratios of the reference root):

<div data-lisn-on-layout="square @add-class: c1,c2 @enable: my-trigger +root=next.box"
     data-lisn-on-run="@show +id=my-trigger"
></div>
<div class="box"></div>

Example

As above, but using data-lisn-ref attribute instead of class selector.

<div data-lisn-on-layout="square @add-class: c1,c2 @enable: my-trigger +root=next-box"
     data-lisn-on-run="@show +id=my-trigger"
></div>
<div data-lisn-ref="box"></div>

Hierarchy (View Summary)

Trigger
- LayoutTrigger

Index

Methods

`Static`get

get(element: Element, id: string): null | Trigger
Retrieve an existing widget by element and ID.
Parameters
- element: Element
- id: string
Returns null | Trigger
Inherited from Trigger.get
- Defined in packages/lisn.js/src/ts/triggers/trigger.ts:140

`Static`register

register(): void
Returns void
Overrides Trigger.register
- Defined in packages/lisn.js/src/ts/triggers/layout-trigger.ts:139

Constructors

constructor

new LayoutTrigger(
    element: Element,
    actions: Action[],
    config: LayoutTriggerConfig,
): LayoutTrigger
If no actions are supplied, nothing is done.
Parameters
- element: Element
- actions: Action[]
- config: LayoutTriggerConfig
Returns LayoutTrigger
Throws
LisnUsageError If the config is invalid.
Overrides Trigger.constructor
- Defined in packages/lisn.js/src/ts/triggers/layout-trigger.ts:170

Properties

`Readonly`destroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

`Readonly`disable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

`Readonly`enable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

`Readonly`getActions

getActions: () => Action[]

Returns the trigger's actions.

`Readonly`getConfig

getConfig: () => LayoutTriggerConfig

Returns the trigger config.

`Readonly`getElement

getElement: () => Element

Returns the element passed to the widget constructor.

`Readonly`isDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

`Readonly`isDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

`Readonly`onDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

`Readonly`onDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

`Readonly`onEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

`Readonly`reverse

reverse: () => Promise<void>

"Undo"es all the Actions linked to the trigger.

`Readonly`run

run: () => Promise<void>

"Do"es all the Actions linked to the trigger.

`Readonly`toggle

toggle: () => Promise<void>

"Toggle"s all the Actions linked to the trigger.

`Readonly`toggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Class LayoutTrigger

Example

Example

Example

Example

Example

Example

Example

Example

Hierarchy (View Summary)

Index

Methods

Constructors

Properties

Methods

Staticget

Parameters

Returns null | Trigger

Staticregister

Returns void

Constructors

constructor

Parameters

Returns LayoutTrigger

Throws

Properties

Readonlydestroy

Readonlydisable

Readonlyenable

ReadonlygetActions

ReadonlygetConfig

ReadonlygetElement

ReadonlyisDestroyed

ReadonlyisDisabled

ReadonlyonDestroy

ReadonlyonDisable

ReadonlyonEnable

Readonlyreverse

Readonlyrun

Readonlytoggle

ReadonlytoggleEnable

Settings

On This Page

`Static`get

`Static`register

`Readonly`destroy

`Readonly`disable

`Readonly`enable

`Readonly`getActions

`Readonly`getConfig

`Readonly`getElement

`Readonly`isDestroyed

`Readonly`isDisabled

`Readonly`onDestroy

`Readonly`onDisable

`Readonly`onEnable

`Readonly`reverse

`Readonly`run

`Readonly`toggle

`Readonly`toggleEnable