SignalVisibilityController
Purpose
A controller that responds to SignalInputController notifications. This controller can hide or show its content
based on the expression given in showValue, 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 |
|---|---|---|
hide | The class used to hide the content of the element when the showValue expression evaluates to false | hide |
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. | - |
show | String | A simple expression which will be evaluated against the value received from SignalInputController. If the expression evaluates to true, the hideClass is removed from the element. If the expression evaluates to false, the hideClass is added to the element. | - |
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:visibility:${nameValue}:show | When a signalled value matches the predicate expression and this element is shown | 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:visibility:${nameValue}:hide | When a signalled value fails the predicate expression and this element is hidden | 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