Triggers

Triggers #

This section lists and documents most triggers available in Varv.

Reference: A list of actions can also be found in the Reference. The reference might also contain more triggers, that are currently in development and which specification might change in the future.

Reactive Triggers #

"action" Trigger #

A trigger that triggers when another action is run.

Parameters:

Parameter Required Default Description
"action" Yes - The name of the action the trigger should react on.
"hook" - after Whether the trigger should react after or before the other action was run.

Properties:

Properties Description
Shorthand Parameter "action"
Event Target The event of the other action before or after it was executed.

Event Variables:

The event will carry the same variables as the event of the other action.

Examples:

Trigger before another action is run:

{
    "action": {
        "action": "myActionName",
        "hook": "before"
    }
}

Trigger after another action is run:

{
    "action": {
        "action": "myActionName",
        "hook": "after"
    }
}

Trigger after another action is run (shorthand version):

{ "action": "myActionName" }

Trigger after an action of a specific concept is run (shorthand version):

{ "action": "myConcept.myActionName" }

Triggers after another action (“super-shorthand” version):

"myActionName"

"interval" Trigger #

A trigger that is activated in a given time interval.

Parameters:

Parameter Required Default Description
"interval" Yes - The time interval in which the trigger should be activated (in milliseconds).

Properties:

Properties Description
Shorthand Parameter "interval"
Event Target None

Event Variables:

Variable Type Description
repetition number The number of repetitions the trigger has been activated

Examples:

Trigger every second:

{ "interval": { "interval": 1000 }}

Trigger every second (shorthand version):

{ "interval": 1000 }

"stateChanged" Trigger #

A trigger that is activated when state of concept instances or their properties changes.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to state changes of the given concept.
"property" - - Restricts the trigger to state changes of the given property. Only the first concept that has the property is checked.

Properties:

Properties Description
Shorthand Parameter Either "concept", "property", or an array of either (see examples).
Event Target The concept instance that was changed.

Event Variables:

Variable Type Description
property string The name of the property that changed.
currentValue The type of the property Returns the new value of the changed property.

Examples:

Triggers when any property on a given concept changes:

{ "stateChanged": { "concept": "myConcept" }}

Triggers when a given property changes (only the first concept that has the property is checked):

{ "stateChanged": { "property": "myProperty" }}

Triggers when a given property changes on a given concept:

{
    "stateChanged": {
        "concept": "myConcept",
        "property": "myProperty"
    }
}

Triggers when any property on a given concept changes (shorthand version):

{ "stateChanged": "myConcept" }

Triggers when a given property changes (shorthand version):

{ "stateChanged": "myProperty" }

Triggers when a given property changes on a given concept (shorthand version):

{ "stateChanged": { "myConcept": "myProperty" }}

Triggers when any property on myConcept changes, or if myProperty changes, on the first concept it was found on:

{ "stateChanged": [ "myConcept", "myProperty" ] }

View Triggers #

"click" Trigger #

A trigger that listens for mouse clicks in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to clicks on elements of the given concept.
"property" - - Restricts the trigger to clicks on the given property.
"view" - - Restricts the trigger to clicks on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a user clicked on.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (always left).
x number The x-coordinate of the mouse click event in pixels.
y number The y-coordinate of the mouse click event in pixels.

Examples:

Click trigger on concepts:

{ "click": { "concept": "theConceptIWantToClickTriggerOn" }}

Click trigger on concepts (shorthand version):

{ "click": "theConceptIWantToClickTriggerOn" }

Click trigger on views:

{ "click": { "view": "aViewBindingIWantToClickTriggerOn" }}

Click trigger on properties:

{ "click": { "property": "aPropertyIWantToClickTriggerOn" }}

"contextmenu" Trigger #

A trigger that listens for mouse right-clicks in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to right-clicks on elements of the given concept.
"property" - - Restricts the trigger to right-clicks on the given property.
"view" - - Restricts the trigger to right-clicks on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a user right-clicked on.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (always right).
x number The x-coordinate of the mouse click event in pixels.
y number The y-coordinate of the mouse click event in pixels.

Examples:

Context menu trigger on concepts:

{ "contextmenu": { "concept": "theConceptIWantToRightClickTriggerOn" }}

Context menu trigger on concepts (shorthand version):

{ "contextmenu": "theConceptIWantToRightClickTriggerOn" }

Context menu trigger on views:

{ "contextmenu": { "view": "aViewBindingIWantToRightClickTriggerOn" }}

Context menu trigger on properties:

{ "contextmenu": { "property": "aPropertyIWantToRightClickTriggerOn" }}

"key" Trigger #

A trigger that listens key events in the DOM View.

Parameters:

Parameter Required Default Description
"event" - keyPress The key event type the trigger should listen for (keyDown, keyPress, or keyUp).
"key" - - The key that the trigger should listen for (e.g., a or Enter).
"ctrl" - - A Boolean flag on whether the ctrl modifier needs to be pressed (if omitted the state is not checked).
"alt" - - A Boolean flag on whether the alt modifier needs to be pressed (if omitted the state is not checked).
"shift" - - A Boolean flag on whether the shift modifier needs to be pressed (if omitted the state is not checked).
"meta" - - A Boolean flag on whether the meta modifier needs to be pressed (if omitted the state is not checked).
"focus" - - A parameter to define that a concept, property, or view needs to be in focus for the trigger to be activated.

Properties:

Properties Description
Shorthand Parameter None
Event Target If the focus is on an element in a concept instance, this concept instance will be passed as the target (this is independent of the "focus" parameter).

Event Variables:

Variable Type Description
key string The key that was pressed.
ctrl boolean Returns whether the ctrl modifier was pressed.
alt boolean Returns whether the alt modifier was pressed.
shift boolean Returns whether the shift modifier was pressed.
meta boolean Returns whether the meta modifier was pressed.

Examples:

Trigger when the “Enter” key is pressed and “shift” is held:

{
    "key": {
        "event": "keyPress",
        "key": "Enter",
        "shift": true
    }
}

Trigger when the “Enter” key is pressed and “ctrl” is held, and a view is in focus:

{
    "key": {
        "event": "keyPress",
        "key": "Enter",
        "ctrl": true,
        "focus": {"view": "myView"}
    }
}

"mousedown" Trigger #

A trigger that listens for “mousedown” events in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to “mousedown” events on elements of the given concept.
"property" - - Restricts the trigger to “mousedown” events on the given property.
"view" - - Restricts the trigger to “mousedown” events on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a “mousedown” event was detected.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (left, right, or middle).
x number The x-coordinate of the “mousedown” event in pixels.
y number The y-coordinate of the “mousedown” event in pixels.

Examples:

Mousedown trigger on concepts:

{ "mousedown": { "concept": "theConceptIWantToMousedownTriggerOn" }}

Mousedown trigger on concepts (shorthand version):

{ "mousedown": "theConceptIWantToMousedownTriggerOn" }

Mousedown trigger on views:

{ "mousedown": { "view": "aViewBindingIWantToMousedownTriggerOn" }}

Mousedown trigger on properties:

{ "mousedown": { "property": "aPropertyIWantToMousedownTriggerOn" }}

"mousemove" Trigger #

A trigger that listens for mouse “mousemove” events in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to “mousemove” events on elements of the given concept.
"property" - - Restricts the trigger to “mousemove” events on the given property.
"view" - - Restricts the trigger to “mousemove” events on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a “mousemove” event was detected.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (left, right, or middle).
x number The x-coordinate of the “mousemove” event in pixels.
y number The y-coordinate of the “mousemove” event in pixels.

Examples:

Mousemove trigger on concepts:

{ "mousemove": { "concept": "theConceptIWantToMousemoveTriggerOn" }}

Mousemove trigger on concepts (shorthand version):

{ "mousemove": "theConceptIWantToMousemoveTriggerOn" }

Mousemove trigger on views:

{ "mousemove": { "view": "aViewBindingIWantToMousemoveTriggerOn" }}

Mousemove trigger on properties:

{ "mousemove": { "property": "aPropertyIWantToMousemoveTriggerOn" }}

"mouseup" Trigger #

A trigger that listens for mouse “mouseup” events in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to “mouseup” events on elements of the given concept.
"property" - - Restricts the trigger to “mouseup” events on the given property.
"view" - - Restricts the trigger to “mouseup” events on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a “mouseup” event was detected.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (left, right, or middle).
x number The x-coordinate of the “mouseup” event in pixels.
y number The y-coordinate of the “mouseup” event in pixels.

Examples:

Mouseup trigger on concepts:

{ "mouseup": { "concept": "theConceptIWantToMouseupTriggerOn" }}

Mouseup trigger on concepts (shorthand version):

{ "mouseup": "theConceptIWantToMouseupTriggerOn" }

Mouseup trigger on views:

{ "mouseup": { "view": "aViewBindingIWantToMouseupTriggerOn" }}

Mouseup trigger on properties:

{ "mouseup": { "property": "aPropertyIWantToMouseupTriggerOn" }}

"wheel" Trigger #

A trigger that listens for mouse wheel events in the DOM View.

Parameters:

Parameter Required Default Description
"concept" - - Restricts the trigger to mouse wheel events on elements of the given concept.
"property" - - Restricts the trigger to mouse wheel events on the given property.
"view" - - Restricts the trigger to mouse wheel events on elements of the given view.

Note: Only one of the three parameters can be used at a time.

Properties:

Properties Description
Shorthand Parameter "concept"
Event Target The concept instance a mouse wheel event was detected.

Event Variables:

Variable Type Description
button string The mouse button used when clicking (always left).
x number The x-coordinate of the mouse wheel event in pixels.
y number The y-coordinate of the mouse wheel event in pixels.

Examples:

Mouse wheel trigger on concepts:

{ "wheel": { "concept": "theConceptIWantToMousewheelTriggerOn" }}

Mouse wheel trigger on concepts (shorthand version):

{ "wheel": "theConceptIWantToMousewheelTriggerOn" }

Mouse wheel trigger on views:

{ "wheel": { "view": "aViewBindingIWantToMousewheelTriggerOn" }}

Mouse wheel trigger on properties:

{ "wheel": { "property": "aPropertyIWantToMousewheelTriggerOn" }}

© 2022 Aarhus University | Made by cavi.au.dk | Contact Person: Clemens Nylandsted Klokmose