SignalActionController
Purpose
A controller that responds to SignalInputController notifications. This controller trigger actions on other stimulus controllers
based on the expression given in whenValue, which it will use to evaluate the value of the input.
based on changes to inputs and their values.
This controller can be anywhere in the DOM tree and it will receive notifications from any SignalInputController with
the same nameValue as the nameValue of this controller.
Actions
| Action | Purpose |
|---|---|
- | - |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
- | - | - |
Values
| Value | Type | Description | Default |
|---|---|---|---|
name | String | The name of the input value whose value to react to. This name should be the same as the nameValue of the SignalInputController you want to sync with. | - |
when | String | A simple expression which will be evaluated against the value received from SignalInputController. If the expression evaluates to true, the controller will emit a match event. If the expression evaluates to false, the controller will emit a no-match event. | - |
Expressions follow the syntax of [operator][value] e.g. <3 or >=3 and can be combined with && and || operators.
Example expressions that can be used:
| Expression | Explanation |
|---|---|
default | will be shown when the value is empty |
>0 | |
>= 50 && <100 | |
==red | |
!=black and yellow | Everything that is not an operator is treated as a value. This is evaluated as inputValue != "black and yellow" |
==23 || ==25 |
Supported operators:
| Operator |
|---|
default evaluates to true when value is empty, e.g. "" |
== |
&& |
|| |
> |
>= |
< |
<= |
Note: Only simple expressions are supported.
Logical groupings e.g. (a || b) && c are not supported.
Variable bindings e.g. <=a are not supported.
You can only use only one type of logical concatenation at a time. i.e. >3 && ==5 && <10, or >3 || ==5 || <10. Expressions that mix the two, i.e. >3 || ==2 && <10 are not supported.
Security Note: This controller is designed to be safe. It does not violate any strong CSP policies, and it does NOT use eval().
The expressions are parsed as strings and predicate functions are created based on the presence or absence of recognised operators in the string, and the values that the SignalInputController broadcasts from the user are tested against the expression using
built-in JavaScript operators for each math operation.
Events
| Event | When | Dispatched on | event.detail | |
|---|---|---|---|---|
signal:match:${nameValue} | When value of the input for nameValue changes, and the expression in whenValue evaluates to true against the new updated value | The controller root element | ||
element | the controller root element | |||
predicate | the expression the controller used to try and match the value | |||
value | the value that was received | |||
signal:no-match:${nameValue} | When value of the input for nameValue changes, and the expression in whenValue evaluates to false against the new updated value | The controller root element | ||
element | the controller root element | |||
predicate | the expression the controller used to try and match the value | |||
value | the value that was received |
Side Effects
None
How to Use
<input type="number" name="foo" data-controller="signal-input">
<div
data-controller="signal-action bar"
data-signal-action-name-value="foo"
data-signal-action-when-value="=3 || =5"
data-action="signal:match:foo->bar#fizzBuzz"
>
<!-- bar controller's `fizzBuzz` action is called when the value of input[name="foo"] is 3 or 5 -->
</div>