Get animation layer
Description:
The animation layer is a full-screen division (div) that acts as a layer above the standard user interface (UI). It is fixed in position, meaning it does not impact the rest of the UI when items are manipulated within this layer. This layer is primarily utilized for creating animated effects, such as drag-and-drop motions or other dynamic animations. For instance, to illustrate a card collapsing towards a button, which upon clicking would reopen the card, this animation would be performed on the animation layer. The div for this purpose is assigned an ID of “animation-layer”. The ‘get_animation_layer’ action can be used to either establish this animation layer if it’s not already present, or to retrieve it if it exists. Additionally, the animation layer can be employed for other functions like preventing pointer events from affecting the main UI. An example of this is creating a “picking” feature, which allows for selecting an element without triggering its click event. Essentially, this action sets up the full-screen fixed layer, leaving the specific usage to the developer’s discretion.
{
"type": "dom_interactive",
"action": "get_animation_layer",
"args": {
"target": "$data.layer"
}
}Clear the animation layer
Description:
When you need to clear the animation layer by removing all elements from it, you can use the “clear_animation_layer” action. This will effectively empty the layer.
{
"type": "dom_interactive",
"action": "clear_animation_layer"
}Remove the animation layer
Description:
We are done with the animation layer and no longer require it, remove it from the dom.
{
"type": "dom_interactive",
"action": "remove_animation_layer"
}Highlight element
Description:
To emphasize a specific element, especially in cases like highlighting an error on the screen, you can create a temporary highlight UI over that element. This highlight acts as a visually striking overlay, drawing the user’s attention to the element for a set period. You have the option to use a predefined template element for this highlight, or by default, a division (div) will be created. Additionally, you can specify class names to be added to the highlight’s class list, which determines the appearance and behavior of the overlay. This highlighted element is placed on an animation layer, positioned over the target element, and sized to match its width and height. The highlight’s duration is managed using a setTimeout function, ensuring that it is automatically removed after the specified delay.
If you use a template it should reference a HTMLTemplate element.
Standard example:
{
"type": "dom_interactive",
"action": "highlight",
"args": {
"target": "my-list",
"classes": ["highlight"],
"duration": 1000
}
}Using a template example:
{
"type": "dom_interactive",
"action": "highlight",
"args": {
"target": "my-list",
"classes": ["highlight"],
"duration": 1000,
"template": "$data.highlightTemplateElement"
}
}Clone element for movement
Description:
When executing drag and drop operations, it’s essential to have the capability to replicate an element, including its attributes and styles, to animate its movement from one location to another. The ‘clone_for_movement’ action facilitates this by not only cloning the element but also setting the copy to be absolutely positioned at the same screen space coordinates as the original element.
This process does not make any assumptions about the layer where you want the element to be placed. You have the option to specify a parent element in the arguments. If a parent is provided, the new instance of the element will be appended to that specified parent. To use the animation layer, you need to follow a two-step approach. Firstly, create the animation layer, and then, in the second step, use this layer as the parent when calling this action.
{
"type": "dom_interactive",
"action": "clone_for_movement",
"args": {
"element": "my-list",
"parent": "$data.animationLayerElement"
}
}Additionally you can also provide attributes, styles and classes to add to the new element.
{
"type": "dom_interactive",
"action": "clone_for_movement",
"args": {
"element": "my-list",
"parent": "$data.animationLayerElement",
"attributes": {
"data-id": "test"
},
"styles": {
"opacity": 0.5
},
"classes": "dropshadow"
}
}Enable element resize
Description:
For dynamically created elements, you might want to make the container element resizable. The “enable_resize” action allows for this functionality. Additionally, you can set specific parameters to control the resizing process, such as defining a minimum and maximum width and height. You also have the option to designate which element triggers the resize operation.
{
"type": "dom_interactive",
"action": "enable_resize",
"args": {
"element": "my-list",
"resize_query": ".resizer",
"options": {
"zIndex": 1,
"dropShadow": true,
"min": {
"width": 200,
"height": 200
},
"max": {
"width": 400,
"height": 400
}
}
}
}All of the option values are optional.
Disable element resize
Description:
If you have previously enabled resizing as described, you can subsequently disable it using this action.
{
"type": "dom_interactive",
"action": "disable_resize",
"args": {
"element": "my-list"
}
}Enable movement of element
Description:
This functionality allows for the drag and drop movement of elements that are either fixed or absolutely positioned, using the mouse.
{
"type": "dom_interactive",
"action": "enable_move",
"args": {
"element": "my-list",
"move_query": ".mover"
}
}In the provided example, an element with the class “mover” is designated as the initiator of movement. This is the element you will drag to manipulate the target element specified in the arguments. The element that is identified by the move_query should be a child of the target element.
Disable move of element
Description:
If you have previously enabled movement as mentioned above, you can disable it again using this action.
{
"type": "dom_interactive",
"action": "disable_move",
"args": {
"element": "my-list"
}
}