Base component
Explore the foundation of JTB_MD with the jtbComponent element, detailing its core functionality, available listeners, callbacks, and methods that power the library’s components.
About
The base component in JTB_MD serves as the foundation for all UI components, ensuring consistency, flexibility, and scalability. Built on the jtbComponent element, it standardizes component behavior and lifecycle management.
This component supports essential functionalities such as listeners, callbacks, and methods that allow developers to define interactive behaviors efficiently. It includes some pre-defined lifecycle methods ensuring smooth component state transitions.
The base component also provides a structured way to observe attribute changes, manage dynamic updates, and control component visibility through predefined methods.
Observed attributes
Each component in JTB_MD has its own special attributes, but the Base Component ensures that essential attributes are handled consistently across all components.
The Base Component tracks specific attributes dynamically, allowing for flexible and reactive behavior. These attributes are divided into four categories:
- Attributes with values: These attributes store configurable values that can be set dynamically.
- Attributes without values (Boolean flags): These act as simple flags that enable or disable a feature.
- Internal attributes: Used internally within the component for performance and state management.
- Callback attributes: These attributes trigger lifecycle methods, allowing custom logic execution.
Listeners & callbacks
The base component provides built-in listeners and callbacks to handle different stages of a component's lifecycle. These allow for custom logic execution when specific events occur.
_create
Triggered when the component is initialized and added to the DOM. This is useful for setting up the component, initializing properties, or attaching event listeners.
<!-- specifying _create listener -->
<jtb-component _create='alert("I have been created!");'></jtb-component>
/*----- Create element -----*/
var jtbComponent = document.createElement('jtb-component');
/*----- Define _create listener -----*/
jtbComponent._create = () => {
alert("I have been created!");
};
_destroy
Triggered when the component is removed from the DOM, allowing for cleanup operations such as removing event listeners or freeing resources.
<!-- specifying _destroy listener -->
<jtb-component _destroy='alert("I have been destroyed!")'></jtb-component>
/*----- Create element -----*/
var jtbComponent = document.createElement('jtb-component');
/*----- Define _destroy listener -----*/
jtbComponent._destroy = () => {
alert("I have been destroyed!");
};
_show
Triggered when the component is made visible. This can be used for animations, lazy-loading content, or initializing dynamic elements.
<!-- specifying _show listener -->
<jtb-component _show='alert("My time has come!")'></jtb-component>
/*----- Create element -----*/
var jtbComponent = document.createElement('jtb-component');
/*----- Define _show listener -----*/
jtbComponent._show = () => {
alert("My time has come!");
};
_hide
Triggered when the component is hidden. It ensures that necessary actions, such as pausing animations or disabling interactions, are handled properly.
<!-- specifying _hide listener -->
<jtb-component _hide='alert("I am in shadows... ;)")'></jtb-component>
/*----- Create element -----*/
var jtbComponent = document.createElement('jtb-component');
/*----- Define _hide listener -----*/
jtbComponent._hide = () => {
alert("I am in shadows... ;)");
};
Methods
The base component includes several methods to facilitate interaction and customization. These methods are:
reload() - Reloads the content of the element, allowing updates based on attribute changes.show() - Makes the hidden component visible.hide() - Hides the component without removing it from the DOM.destroy() - Hides the component first, then removes it from the DOM completely.
These methods can be invoked directly on any component that extends the base component.
/*----- Hide a component using the hide() method ------*/
document.getElementById("yourComponentID").hide();