Trigger and display interactions
An overview to options and parameters using [data]
attributes.
A trigger and certain parameters must be prepared in order to display an interaction. For further customization, we can apply individual options for each interaction.
Event tag
An etag is the combination of a browser event and a keyword tag, separated by a semicolon.
data-fs-etag='click:call-me' data-fs-etag='doubleclick:call-me' data-fs-etag='mouseover:call-me'
Related tag
Trigger We can create a relation using data attributes, to pass the event listener of an etag, to a related tag.
- To pass the event, “on” must precede the event part of an etag.
- The related tag, must use data-fs-{event} without “on”, and its value must match the keyword used in the etag.
- The related tag, must be defined on an element separate of etags and params.
data-fs-etag='onclick:special-element' // On a separate element data-fs-click='special-element'
Parameters
Parameters tag is used to communicate information the server, and will override any behavior presets, and will by directly applied to an interaction.
Specify the body of an interaction by calling a specific module, parsing contextual data using curly bracket markup, delay an interaction…
// On the same element data-fs-etag='onclick:special-element' data-fs-params='{ "trigger": { "moduleid": "$moduleid" } }'
Contextual data
We can send contextual or related information through the parameters, and displayed during an interaction by using curly bracket markup.
// In your HTML data-fs-params='{ "rel": { "interaction": { "subject": "My subject", "body": "The body", "another": "Can be used in form inputs as well", "evenmore": { "extra1": "...", "extra2": "..." } } } }' // While creating a module. {{interaction.subject}} {{interaction.body}} {{interaction.another}} {{interaction.evenmore.extra1}} {{interaction.evenmore.extra2}}
Element tag
A query selector must be defined, in order to find and apply, related options during multiple stages of an interaction.
The el and opt tag, must be defined on an element separate of etags and params.
data-fs-el='@$moduleid'
Options
The option tag is used to manipulate interactions locally. Display, placement, theme, size, offset, addon classnames… .
data-fs-el='@$moduleid' data-fs-opt='{ "placement": "bottom-end", "theme": "white", "size": "xl" }'
Display options
By default an interaction will display and point to the related element tag
[data-fs-el]
.
Alternatively an interaction can be embedded or fixed.
Note: Each display has its own placement properties.
data-fs-el='@$moduleid' data-fs-opt='{ "display": "fixed" "placement": "upper" }'
Class addons
Default CSS can be prevent on an interaction by using addon class names. This method will force interactions to use custom class names
data-fs-el='@$moduleid' // Add a class name to an interaction. data-fs-opt='{ "addon": "custom-class" "className": "same-as-addon" }' // Add a class name to the document body data-fs-opt='{ "bodyAddon": "cover-class" }'
Background color
Changing the background color of an interaction can be achieved by specifying a theme or a backgroundColor
data-fs-el='@$moduleid' data-fs-opt='{ "backgroundColor": "mediumseagreen" }'
Themes
Interactions are not limited to default themes provided by the API. You can supply your own CSS themes.
data-fs-el='@$moduleid' data-fs-opt='{ "theme": "white-translucent" }'
Sizing
Interactions are not limited to default sizes provided by the API. You can supply your own size.
data-fs-el='@$moduleid' data-fs-opt='{ "size": "xl" }'
Interaction offset
Occasionally some CSS markup may cause interactions to shift, which can be neutralized by creating an offset.
In pixels
data-fs-el='@$moduleid' data-fs-opt='{ "up": "100", "down": "100", "right": "100", "left": " 100" }'