Element Actions ❺🧪

Actions are a developing concept in the SA5 Element Lib, which refers to the ability to tag an element with attributes, that "remote control" another element on the page.

Use cases;

• Navigate a swiper, tab, or accordion element

  • First, last, next, prev, specific item #

• Change the locale

• ? Hide and show elements

Conceptual rules;

• Actions consist of;

  • An action

  • A target

  • Optional data

  • A trigger type ( default click )

• Actions are the center of the config

  • Target is optional for some actions

Action	Tabs, Swiper, Accordion		Locale Switcher	Any
Navigation
first	Yes		-	-
last	Yes		-	-
next	Yes		-	-
nextLoop	Yes		-	-
prev	Yes		-	-
prevLoop	Yes		-	-
goto	Yes, specify item #		Yes, specify locale code
Visibility 🧪
hide	Yes			Yes
show	Yes			Yes
toggle	Yes			Yes
Collapsing 🧪
open	-
close	-
Forms 🧪
check

On elements which

wfu-action = ( method )

Required. I want my button or link to perform the following action on the targeted deck element.

Method is one of;

• first - select the first item

• prev - select the previous item

  • prevLoop - select the previous item or loop if we're on the first item

• next - select the next item

  • nextLoop - select the next item or loop if we're on the last item

• last - select the last item

• goto - select the specified item, as specified by wfu-deck-action-item

wfu-action-target = ( target element name )

Optional. Specifies the wfu-name, wfu-tabs, wfu-slider or wfu-accordion name you want your action to target.

If unspecified, it will look for the nearest named parent element as the target.

wfu-action-item = ( item number | name )

Required for the goto action only. Specifies the tab / slide you want to navigate to.

• a number - indicates the item number, 1, 2, 3...

• a string - activates the item with the specified name

wfu-action-trigger = ( trigger-type )

One of;

• click ( default )

• scrollTo

• scrollPercent

• timer

• exitIntent