# Future

## Smart options

* Force overwrite
* Overwrite only if non-blank ( coalesce ) 

## Multiple Suffixes  

### Prefix & postfix 

`:post` - Add as a suffix.

`:pre` - Add as a prefix. 

### Data-binding 

`:bind` - Indicates the value will be pulled from a datasource 

### Localization

Applies this dynamic attribute rule only when the locale matches. 

`:locale(en)` - 

`:locale(en-gb)` - 

{% hint style="info" %}
Locale is always lowercased for matching. 
{% endhint %}

### Transform 

`:transform(lower)` - Lowercase   

`:transform(upper)` - Uppercase  

## Binding to SA5 Simple Data Sources 

```
x:attr:bind = ?query
```

? Use cases ?? 

## Transformer Functions      

Combine information from several sources and set it as a dynamic attribute value. 

* Other attributes on this element
* Other attributes on other elements 
* Static text 

```
x:attr:transform = {{#abc}}def{{#ghi}}
```

This technique can also be adjusted to the target the parent element's attribute or immediate siblings.  

| Target Element                 | Attribute                                                      | InnerText    | InnerHTML    |
| ------------------------------ | -------------------------------------------------------------- | ------------ | ------------ |
|                                | Here `attr` is an example attribute name we want to reference. |              |              |
| Current element attribute      | `{x:myval=#attr}}`                                             |              |              |
| Parent element attribute       | `{{^#attr}}`                                                   |              |              |
| Prev sibling element attribute | `{{<#attr}}`                                                   |              |              |
| Next sibling element attribute | `{{>#attr}}`                                                   |              |              |
| Current element innerText      |                                                                |              |              |
| Specific named element         | `{{name.#attr}}`                                               | `{{name.$}}` | `{{name.%}}` |
|                                |                                                                |              |              |

## Examples&#x20;

```
<div abc="123" ghi="456">789</div>
```

|                       | Interpreted As                                                                       | Resulting Value |
| --------------------- | ------------------------------------------------------------------------------------ | --------------- |
| `12{{#abc}}`          | <ul><li>String "12"</li><li>Attribute abc value</li></ul>                            | `12123`         |
|                       |                                                                                      |                 |
|                       |                                                                                      |                 |
| `{{#abc}}def{{#ghi}}` | <ul><li>Attribute abc value</li><li>String def</li><li>Attribute ghi value</li></ul> | `123def456`     |
|                       |                                                                                      |                 |

## Removing Attributes After processing

Default false, but can enable this as a lib config option.&#x20;

## Prefix and Postfix

`x:(attr):pre` = ( value )&#x20;

`x:(attr):post` = ( value )

Future;&#x20;

`x:(attr):format` = ( value )

```
<img 
  x:src="image.jpg" 
  
  
  x:src:pre="https://cdn.example.com/" 
  x:src:post="?version=123">
  
  
  
  x:src:start
  x:src:end
  
  x:src:before
  x:src:after
  
  
  
  
```

Would result in;

```
<img src="https://cdn.example.com/img.jpg?version=123"> 
```

```
<img 
    src="image.jpg" 
    x:src:pre="https://cdn.example.com/" 
    x:src:post="?version=123"  
/>
```

Future;&#x20;

```
<img 
    src="image.jpg" 
    x:src:pre="https://cdn.example.com/" 
    x:src:post="?version=123" 
    x:src:format="{x:pre:src}{src}{x:post:src}" 
    x:src:transform="funcName" 
/>
```

Calls a JS function on window\.funcName, and passes the element.  The function returns a value, which is then applied to the attribute. &#x20;

Use cases;

* In a CMS-bound link, append `#hash` or `?query=foo` data.&#x20;
* Append classes to your class list without overwriting them

```
<div class="foo" x:post:class="bar"></div>
```

Result;

```
<div class="foo bar"></div>
```

Use cases;

## Smart Attributes

[Learn more](https://attr.sygnal.com/sa5-html/sa5-dynamic-attributes/future/smart-attributes).

## \<script> based transforms

Generate an attribute from a specially-typed script block within it, with the purpose being to;

* Easily mix static text and dynamic attributes
* Support larger strings, e.g. JSON chunks
* Resolve attribute content limitations in Webflow
  * Inability to include double-quotes `"` in content&#x20;
* Resolve attribute name limitations in Webflow

Targeting can be parent, prev sibling or next sibling, or a target element(?) with an SA5 identifier

<https://discourse.webflow.com/t/embed-cal-com-pop-up-via-element-click/277487/3>

Supporting JSON chunks in the designer

`&quot;` `/x0022`&#x20;

Ideally design this so that it can also support Hyperflow processing.&#x20;

## Transforms

[Learn more](https://attr.sygnal.com/sa5-html/transform)

Dynamic Attributes are likely to become a facet of a larger SA5 concept we'll call DOM Transforms. Transforms allow for broad changes to happen, and have a specific instructional paradigm;

* What to target, relative to the transform's position- useful for collection lists.
* What kind of transformation to do.&#x20;
* The data needed for the transformation

For example

`sa5:transform:attr`&#x20;

* Targeting
  * `target`&#x20;
  * `selector`
  * `attr`
* Transform&#x20;
  * `transform = append | replace | prepend, etc`   &#x20;
* Data
  * `val = (value)`&#x20;
    * Typically a field embed. This would be HTML encoded&#x20;
  * `decode` = html | none
  * `encode`

We're looking at adding&#x20;

```
// Some code
<script type="sa5:transform:attr"
   target="closest"
   selector="'a'"
   transform="append"
   attr="href"   
   val="{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"
   encode="querystring" 
   ></script>
```

```
// Some code
<script type="sa5:transform:attr"
   target="closest"
   selector="'a'"
   transform="append"
   attr="href"   
   val="{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"
   encode="querystring" 
   ></script>
```