Options

Each area of the Bricksforge Panel provides you with different options, with which you can precisely determine what the panel should do for you. In this lesson, we will go through the different areas such as Events & Actions and look more closely at the various possibilities.

Event Options

The following options are available for event management:

Element Trigger

This allows you to select the specific element (DOM Node) which will trigger the event. You can use the element’s unique ID, class, or even a data attribute to select it.

For example, you could select a button with an ID of “submit-btn” by inputting #submit-btn into the field. Now, when listening to the On Submit action, the event will only be triggered if the “#submit-btn” is clicked. This provides a high level of specificity and control over your event handling.

After you have defined an Element Trigger, you can determine how Bricksforge should handle the selector. For this, you have a select field available, with which you can decide the following:

• Exactly this element: Only the first element with this selector: This option triggers the event only if the first element matching the selector is interacted with.
• All elements with this selector: The event triggers when any element matching the selector is interacted with, not just the first one. This is useful if you have multiple elements with the same selector that should all trigger the same event. For example, if you have several buttons with the class “.buy-now” and you want the On Click event to be triggered for any of these buttons, you would choose this option.
• This element and all siblings: The event triggers when the selected element or any of its sibling elements are interacted with. Sibling elements are those that share the same parent as the selected element.
• Parent Element: This option triggers the event when the parent of the selected element is interacted with. The parent is the direct ancestor element that contains the selected element.
• All children: The event triggers when any child of the selected element is interacted with. Children are the elements directly contained within the selected element.
• Closest: This option triggers the event when the closest element to the selected one, in terms of the DOM hierarchy, is interacted with. The closest element could be a parent, sibling, or child, depending on the structure of your HTML.

As you can see, Bricksforge provides a robust range of settings here, allowing you to have precise control over your triggers.

Delay

This setting allows you to introduce a delay for the event listener. For example, if you set the delay to 2000, the event listener will be created after 2000 milliseconds, or 2 seconds. This can be useful in scenarios where you want to delay the triggering of an event. This can be useful for scenarios where you need to wait for some elements which are included via AJAX.

Create Early

This setting allows you to create the event listener early, before the DOM is fully loaded. However, be mindful that DOM elements may not be available yet when using this setting. In general, it is recommended to only use this setting in scenarios where you are certain the required elements will be available early in the page load process.

Prevent Default

With this setting, you can prevent the default action associated with the event. For example, if the event is a button click, the default action might be to submit a form. By checking this option, clicking the button will not submit the form. Instead, the action you have set up will be triggered. This can be especially useful when you want to set up custom behaviors for certain elements.

Console Log

This option allows you to output data to the browser console, providing additional debugging capabilities. For instance, you can use this setting to display Event Data after an event has been triggered. This can be particularly useful during development and testing phases, allowing you to verify whether the event triggers as expected and to inspect the data that is being passed along with the event.

Loading Conditions

This option allows you to set conditions under which the event will be loaded. You can choose between:

• Everywhere: The event will be loaded on every page.
• Specific pages: The event will be loaded only on the pages with the specified post IDs. You should enter the post IDs as a comma-separated string. For example, 123, 456, 789 would result in the event being loaded on the pages with post IDs 123, 456, and 789.

Context-Dependent Options

Some events

have additional context-dependent options that only apply in certain situations. For example, the On Scroll Position event lets you define the specific scroll position at which the event should trigger. In this lession, we don’t dive into the details of all the context-dependent options. However, it’s important to understand that they provide further customization and control over your events, allowing you to tailor them to your specific needs.

Action Options

Just like with events, actions have a set of options that allow you to precisely control their behavior. Some of these options are global and apply to all actions, while others are specific to each type of action. From specifying the target of an action to defining the necessary conditions for an action to occur, these options provide a level of customization that can cater to a wide range of scenarios.

Target Element

This allows you to specify the element on which the action should be performed. You can select the target element from a variety of options:

• Same Element: This refers to the event trigger selector. In other words, the action will be performed on the same element that you have designated as the trigger for your event.
• Triggered Element: This refers to the element that is currently being triggered. The action will be performed on this element, regardless of what other elements might be present.
• All Elements with This Selector: If you choose this option, the action will be performed on all elements that match the selector of your event trigger. This can be handy when you want to apply an action to a group of similar elements.
• This Element and All Siblings: In this case, the action will be performed not only on your event trigger but also on all of its sibling elements. Sibling elements are those that share the same parent as the selected element.
• Parent Element: Selecting this will cause the action to be performed on the parent of your event trigger. The parent is the direct ancestor element that contains the selected element.
• All Children: If you select this option, the action will be performed on all children of your event trigger. Children are the elements directly contained within the selected element.
• Closest: Here, the action will be performed on the element that is closest to your event trigger in terms of the DOM hierarchy. The closest element could be a parent, sibling, or child, depending on the structure of your HTML.
• Query Selector (Starting Point: Trigger Selector): This option allows you to perform the action on an element that you select through a query selector, starting from your event trigger.
• Custom (Document QuerySelector): With this option, the action will be performed on the element that you select through a custom query selector that scans the entire document.
• Custom (Document QuerySelectorAll): Similar to the above, but in this case, the action will be performed on all elements that are selected through a custom query selector which scans the whole document.
• Window: This option leads to the action being performed on the window object, which represents the browser’s window where the document is displayed.

Each option provides a different level of granularity and scope, giving you the freedom to choose how specific or broad you want your action to be.

When selecting the custom options, you have the ability to specify the exact DOM element via the query selector. This method provides a more direct and precise targeting mechanism, especially useful when dealing with complex document structures.

Delay

Just as with events, you can introduce a delay for the action. By setting the delay, you control when the action is executed after an event is triggered. For instance, setting a delay of 5000 means the action will occur 5 seconds after the triggering event. This is particularly useful in scenarios where you want to create a sequence of actions, or you need to ensure certain conditions are met before the action is performed.

Context-Dependent Options

Similar to events, actions also have context-dependent options that apply under certain conditions. For example, the Show action gives you the ability to define a custom css property value that determines how the element will be displayed when the action is triggered. For instance, you can choose to have the element displayed as block, inline, or flex. These options enable you to tailor the actions to meet your specific requirements.

In the next lesson, we will delve into some examples.