Options and Parameters

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.

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'

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 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"
    }
}'

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}}

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'

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"
}'

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"
}'

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"
}'

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"
}'

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"
}'

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"
}'

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"
}'