🔍About SA5's Trigger Lib

About the SA5 Trigger Library

SA5's Trigger lib was originally about triggering an interaction such as a pop-up modal from a click event. The user clicks something and we trigger an interaction event.

This was useful for;

  • Displaying a modal from a nav button click

  • Displaying a pop-up definition when clicking on a linked term in a blog post

  • Displaying a modal when the user clicks a map pin

How It's Evolving

This concept has expanded significantly, and we're re-conceptualizing everything;

  • The types of trigger events we want to support

  • The resulting actions that we want to support

  • The model connecting those two

At the center of this model is a more versatile structure we refer to as Trigger-Event-Action ( TEA ).

This is the simplest TEA arrangement.

Drawing

Here's the basic mechanic. Elements in your webpage are marked up with attributes that identify the Triggers, Events, and Actions you want configured.

  1. A Trigger is fired, such as a button click

  2. This invokes the specified Event

  3. The Event then performs the specified Actions

Let's look at a simple example;

Here's an example of a click Trigger, which invokes my-event.

<button wfu-trigger-click="my-event">Click me</button> 

When a user clicks this button, SA5 invokes the Event named my-event.

This in turn performs whatever Actions are connected to my-event.

By itself, the above construction does nothing, because the Event is not connected to any Actions.

Let's add an Action to a Webflow tab, so that clicking the button clicks ( and changes to ) that specific tab.

Here's an example;

<div class="w-tab" wfu-action-click="my-event">Tab 1</div> 

When the my-event Event is invoked, a click Action will be performed on this tab.

In this construction;

  • wfu-action-click indicates the type of Action that will be performed

  • my-event indicates the Event

  • The element itself is where the Action will be performed.

More Advanced Eventing

The Event is the center of the TEA architecture, and there are two crucial concepts to understand here that grant you a huge amount of flexibility in your designs;

  • Any number of Triggers can invoke the same Event.

  • When the Event is invoked, any number of Actions may be performed.

Drawing

So Many Types of TEA

If you're familiar with systems engineering, TEA follows a familiar Pub/Sub style pattern.

Triggers

Here are a few types of SA5 Triggers we're working on, which can invoke SA5 Events;

  • User triggers. Click, scroll, hover, etc.

  • Systems triggers. Timers, etc.

  • Webflow triggers.

    • Interactions, at any point in the interaction.

    • Possibly, certain other system.level mechanics... open or close of a hamburger menu

    • Tab switches

    • Slider events

  • Custom triggers. Custom code-triggered events.

  • Breakpoint change triggers.

  • Keyboard triggers.

  • Mutation Observer triggers.

  • Custom triggers.

  • Other triggers.

Event

An SA5 Event is effectively a messaging pipeline, which has a name that you assign. When an event fires, it triggers a series of SA5 Actions.

  • Multiple Triggers can invoke the same Event.

  • An Event can perform several Actions

FUTURE NOTE We're considering the ability for a single Trigger to invoke multiple Events. For example, wfu-trigger-click = event1,event2,event3 If built, this may be limited to certain trigger types, owever at this point we have not identified key use cases where this adds substantial value.

Action

An SA5 Action is a resulting action that can be invoked when an SA5 Event occurs.

Examples;

  • A click on another element

  • Navigation

  • A webhook call

  • A logged event

  • A GTM event

  • etc.

FUTURE NOTE We're also considering the concept of a Trigger as an Action type, so that we can chain Trigger-Event-Action sequences.

Examples

Here are some rough examples;

Drawing

Use Cases

This model handles an unthinkable number of possible use cases.

  • Mirror click. Clicking one button clicks another.

  • Form submit. Clicking a non-form-submit button triggers a form submission.

  • There may evolve a distinction between Named Events and Unnamed Events

  • Named Events can be invoked directly from script

Concept

Triggers are centralized around the concept of a named event.

A

Event Detail

UNDER CONSIDERATION

In some scenarios there may be detail or context bundled into the event, which can affect the Action.

Considering;

  • Sub-triggers, such as ##link items for

    • Invoke dictionary pop-ups

    • Map pin pop-ups

    • Trigger chatbots, with content

    • Trigger AI chatbots ( like Gista ) with a query

    • Trigger GTM datalayer and events

Considerations

  • Need to be mindful of preventing unrestrained circular event firing.

  • E.g. differentiate between user-triggered and code-triggered clicks

Last updated

Was this helpful?