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?