DevLog - JTB_MD v1.1 - Avocet

We're excited to announce the release of JTB_MD v1.1 - Avocet! This update brings a host of enhancements, bug fixes, and powerful new components designed to make your development experience smoother and more efficient. From a new base-component system to a range of new UI elements, let's dive into everything this version has to offer.

A Unified Core with jtbComponent

One of the most significant updates in this release is the introduction of the jtbComponent base class. This new core class serves as a foundation for all components, standardizing essential features and controls. By unifying core functionalities under jtbComponent, we're not only simplifying the development process but also ensuring a more consistent and bug-free structure across the library.

This approach is a big step forward in making JTB_MD more maintainable and scalable. With a unified core, implementing new features becomes faster and less error-prone, allowing us to focus more on expanding the library’s capabilities rather than fixing fragmented issues. With the introduction of this unification, we can now build on a stable and predictable base, accelerate the creation of custom components, and reduce the need for repetitive code.

In short, jtbComponent is all about laying a stronger foundation for future enhancements while making the present development experience smoother and more reliable.

What's New with jtbComponent

With the jtbComponent, we've introduced a set of new listeners and methods. Let's take a closer look at each of them:

New Listeners

• _create: This listener triggers when a component is first created, allowing you to initialize settings or run custom scripts right from the start.
• _destroy: Activated when a component is removed, this listener helps you clean up resources or detach events gracefully, ensuring a smoother user experience.
• _show: Runs when a component is displayed. Useful for triggering animations, logging, or loading dynamic content when a component becomes visible.
• _hide: Fires when a component is hidden. Ideal for stopping timers, unloading resources, or managing background tasks efficiently.

New Methods

• reload: Refreshes the component’s state and content without the need to recreate it from scratch.
• show: A straightforward method to make a component visible, which can be combined with the _show listener for additional actions.
• hide: Hides the component and works seamlessly with the _hide listener to manage visibility and related tasks.
• destroy: Safely removes a component from the DOM, freeing up memory and ensuring that no event listeners or resources are left hanging.

Components Now Powered by jtbComponent

As part of the v1.1 - Avocet update, we've restructured several components to inherit from the jtbComponent base class. This process, which we refer to as "re-booting," ensures that all components share a consistent core while benefiting from enhanced performance, standardized behaviors, and streamlined development workflows.

Here are the components that have been rebooted to leverage the new base class:

• jtbAlert, jtbBreadcrumb, jtbButton, jtbTable, jtbTag
• jtbContainer-fluid, jtbDropdown
• jtbCheckbox, jtbInput, jtbRadio, jtbSwitch, jtbTextarea

Enhancements to jtbCore

The jtbCore module has received a range of powerful new functions and upgrades aimed at making DOM manipulation and component management smoother and more intuitive. These enhancements not only simplify common tasks but also improve performance and reliability across the board.

• scroll_to_element: Smoothly scrolls to a specific element within a container.
• scroll_to_center: Centers an element within its parent container.
• is_url: A new controller function for validating URLs efficiently.
• generate_id: Updated with a more robust split mechanism for ID generation.
• reposition: Enhanced to support event-related repositioning.

New Components in v1.1 - Avocet

In this update, we're introducing a collection of new components designed to make your development process smoother and more flexible. Each of these components addresses specific needs and scenarios, making it easier to build interactive and user-friendly interfaces. Let's take a closer look at what's new:

• jtb-panel: A flexible container for organizing and displaying content efficiently. We added this component to help developers create structured and modular layouts without extra hassle. Its versatility makes it perfect for dashboards, sidebars, and content cards.
• jtb-contextmenu: A dynamic right-click menu that enhances user interactions by providing quick access to context-specific actions. This component was introduced to reduce clutter in UIs and offer a more streamlined way for users to interact with options related to specific elements.
• jtb-tooltip: A versatile component for displaying contextual information on hover. Tooltips are essential for improving usability by providing additional information without overwhelming users. We added jtb-tooltip to help developers deliver concise guidance and details effectively.
• jtb-select: An advanced dropdown component for selecting options efficiently. Unlike basic select elements, jtb-select comes with enhanced customization options, making it easier to handle large datasets and complex filtering scenarios. This component was created to simplify handling forms and user inputs.
• jtb-notification: An interactive notification component with headers, icons, and actions. Notifications are key to informing users about important events and updates. We introduced jtb-notification to provide a more engaging and customizable way to communicate with users without disrupting their workflow.

These new components not only extend the capabilities of JTB_MD but also aim to make your applications more responsive and user-friendly. We built them with flexibility in mind, so you can easily customize them to fit your project's needs.

Debugging Made Easier

We've introduced a "debug" parameter to jtb_md. When set to true, it pushes helpful alerts to the console, making it way easier to track down and fix issues during development.

Expanded Icon Customization

The new icon_template attribute lets you define custom templates for icons, giving you the flexibility to design your UI exactly how you want.

• Supported components: jtbAlert, jtbBreadcrumb, jtbButton, jtbTag, jtbInput, jtbTextarea

What's Next?

We're super excited about what's coming up for JTB_MD and have plenty more features and improvements in the works. As always, we'd love to hear your thoughts on this update, so let us know what you think. Stay tuned for more updates!