Future
Future plans for SA5 dynamic attributes
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)
-
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.
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
<div abc="123" ghi="456">789</div>
12{{#abc}}
String "12"
Attribute abc value
12123
{{#abc}}def{{#ghi}}
Attribute abc value
String def
Attribute ghi value
123def456
Removing Attributes After processing
Default false, but can enable this as a lib config option.
Prefix and Postfix
x:(attr):pre
= ( value )
x:(attr):post
= ( value )
Future;
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;
<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.
Use cases;
In a CMS-bound link, append
#hash
or?query=foo
data.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
<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
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
"
/x0022
Ideally design this so that it can also support Hyperflow processing.
Transforms
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.
The data needed for the transformation
For example
sa5:transform:attr
Targeting
target
selector
attr
Transform
transform = append | replace | prepend, etc
Data
val = (value)
Typically a field embed. This would be HTML encoded
decode
= html | noneencode
We're looking at adding
// Some code
<script type="sa5:transform:attr"
target="closest"
selector="'a'"
transform="append"
attr="href"
val="{{wf {"path":"name","type":"PlainText"\} }}"
encode="querystring"
></script>
// Some code
<script type="sa5:transform:attr"
target="closest"
selector="'a'"
transform="append"
attr="href"
val="{{wf {"path":"name","type":"PlainText"\} }}"
encode="querystring"
></script>
Last updated
Was this helpful?