Class PressTrigger

PressTrigger allows you to run actions when the user presses and holds a pointing device (or their finger) on a target element, and undo those actions when they release their pointing device or lift their finger off.

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

  • Arguments: none
  • Additional trigger options: none
    • target: A string element specification. See getReferenceElement.
    • prevent-default: boolean
    • prevent-select: boolean

Example

Add classes active and pressed when the user presses and holds (with mouse, finger or any pointer) the element, remove them when they release the mouse.

<div data-lisn-on-press="@add-class=active,pressed"></div>

Example

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

<div class="lisn-on-press--@add-class=active,pressed"></div>

Example

Play the animations on the element 1000ms after the first time the user presses on the element it.

<div data-lisn-on-press="@animate +once +delay=1000"></div>

Example

Add class pressed the first time the user presses on the element, and play the animations on the element while the user is pressing on the element with a delay of 100ms, reverse the animations as soon as the user releases the mouse.

<div data-lisn-on-click="@add-class=pressed +once ;
                         @animate +do-delay=100"
></div>

Example

When the user presses and holds the next element with class box 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 when they release the mouse (or lift their finger/pointer device) from the reference box element.

<div data-lisn-on-press="@add-class=c1,c2 @enable=my-trigger +target=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-press="@add-class=c1,c2 @enable=my-trigger +target=next-box"
     data-lisn-on-run="@show +id=my-trigger"
></div>
<div data-lisn-ref="box"></div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

destroy disable enable getActions getConfig getElement isDestroyed isDisabled onDestroy onDisable onEnable reverse run toggle toggleEnable

Methods

Staticget

Staticregister

Constructors

constructor

Properties

Readonlydestroy

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.

Readonlydisable

disable: () => Promise<void>

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

Readonlyenable

enable: () => Promise<void>

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

ReadonlygetActions

getActions: () => Action[]

Returns the trigger's actions.

ReadonlygetConfig

getConfig: () => PointerTriggerConfig

Returns the trigger config.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

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

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

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

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

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

Readonlyreverse

reverse: () => Promise<void>

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

Readonlyrun

run: () => Promise<void>

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

Readonlytoggle

toggle: () => Promise<void>

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

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

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

Settings

Member Visibility

On This Page

Methods
Constructors
Properties