Script Actions 🧪
Invoke a script as an SA5 Action.
IMPORTANT: Differentiate;
"Sequence" action specifications from
JS actions that run a function
Goals;
Use cases;
Start a video after an interaction has completed
Display a pop-up in the middle of an interaction sequence
Technical notes
sa-action-script = ( ... )
This Action requires an SA5 config block
<script type="application/sa+json" handler="action.script" event="alert1">
{
"@context": "https://attr.sygnal.com",
"@version": "0.1",
"script": [
{ "action": "class-add", "data": "class1" },
{ "action": "class-remove", "data": "class1" },
{ "action": "scroll-into-view", "behavior": "instant", "block": "start" }
]
}
</script>
This Action requires an SA5 config block
<script type="application/sa+json" handler="action.script" event="alert1">
function test1() {
sa.events.invoke("test1");
}
</script>
This Action requires an SA5 config block;
<script type="application/sa+json" handler="action.script" event="alert1">
{
"@context": "https://attr.sygnal.com",
"@version": "0.1",
"function": "myFunc1"
}
</script>
Actions
Triggers;
User action
Click
Scroll
Hover
Variable change ( reactive );
e.g. x > 1000
Timer
Interaction step
Form submit
Alpine.js triggers
Actions;
Click ( other elements )
Interaction
Scroll ( other elements )
Code execution
Class add/remove
Form submit
Mechanic;
Define triggers
e.g. attribute wfu-click = ( name )
https://codepen.io/memetican/pen/pvzXrKQ/30243a91b6fb117a92b0e5b3b5b69503?editors=1111
Last updated
Was this helpful?