Uihub

Appearance

Installation ​

Download ​

Clone the project and copy uihub-core folder into your assets or public directory. You can also download the uihub-core.zip and extract into your public or assets directory


└── project_root
    └── assets
        ├── .
        ├── ..
        └── uihub-core
            ├── js
            |   └── uihub-core.min.js
            └── css
                └── uihub-core.min.css

Installation ​

Local ​

Include in in your html file

html
<link rel="stylesheet" href="project_root/assets/uihub-core/css/uihub-core.min.css">
<script src="project_root/assets/uihub-core/js/uihub-core.min.js"></script>

Content Delivery Network (CDN) ​

Uihub can be seamlessly integrated into your projects using a Content Delivery Network (CDN). This method offers several advantages, including ease of use, quick setup, and the ability to leverage the latest versions of UIHub without manual updates.

html
<link rel="stylesheet" href="https://cdn.greyparrot.io/uihub-core/latest/css/uihub-core.min.css">
<script src="https://cdn.greyparrot.io/uihub-core/latest/js/uihub-core.min.js"></script>

Initialisation ​

Browser environment ​

Initialise by calling UIhub.init() after loading the uihub-core.min.js scripts

html
<script>
    document.addEventListener("DOMContentLoaded", () => {
        UIhub.init()
    })
</script>

Node environment ​

Dynamic import

js
// Do this in a Lifecycle hook. e.g when DOM / component is initialised / mounted
await import("../uihub-core.min.js").then(() => {
    UIhub.init()
})

Browser + Node environment ​

Include cdn in your index.html file and then initialise when page or component is mounted

Fine grain initialisation ​

Uihub exposes other methods apart from init

js
{
    init: () => {
        initSideNavigation()
        initDynamicLayout()
        initToast()
        initModals()
        initTooltip()
    
        loadTabComponent()
        loadSelectComponent()
        loadStepComponent()
        loadTableComponent()
        loadCalendarComponent()
    },
    destroy: () => {
        destroySideNavigation()
        destroyDynamicLayout()
        destroyModals()
        destroyToast()
        destroyTooltip()
    },
    components: {
        loadTabComponent,
        loadSelectComponent,
        loadStepComponent,
        loadTableComponent,
        loadCalendarComponent
    },
    services: {
        initSideNavigation,
        initDynamicLayout,
        destroySideNavigation,
        destroyDynamicLayout,
        modalService: {
            initModals,
            reInitModals,
            closeDrawer,
            closePopup,
            triggerPopup,
            triggerDrawer,
            destroyModals
        },
        toastService: {
            initToast,
            triggerToast,
            destroyToast
        },
        tooltipService: {
            initTooltip,
            destroyTooltip
        }
    }
}

API Overview ​

This API provides a comprehensive suite of methods for initializing, managing, and destroying various UI components and services.

init() ​

Initializes all core UI components and services in a single method call.

javascript
UIhub.init();

Initialization Steps: ​

  • Side Navigation
  • Dynamic Layout
  • Toast Notifications
  • Modals
  • Tooltips
  • Tab Component
  • Select Component
  • Step Component
  • Table Component
  • Calendar Component

Destruction ​

destroy() ​

Cleanly removes and destroys initialized UI components and services.

javascript
// Destroy all initialized components
UIhub.destroy();

Destruction Steps: ​

  • Side Navigation
  • Dynamic Layout
  • Modals
  • Toast Notifications
  • Tooltips

Component Loading ​

components ​

Provides direct access to individual component loading methods.

javascript
// Load specific components individually
UIhub.components.loadTabComponent();
UIhub.components.loadSelectComponent();

Available Component Loaders:

  • loadTabComponent()
  • loadSelectComponent()
  • loadStepComponent()
  • loadTableComponent()
  • loadCalendarComponent()

Services ​

javascript
// Modal service methods
UIhub.services.modalService.initModals();
UIhub.services.modalService.triggerPopup(/*<popup-selector>*/);
UIhub.services.modalService.closeDrawer(/*<drawer-selector>*/);

Modal Service Methods:

  • initModals(): Initialize modal components
  • reInitModals(): Reinitialize modals
  • closeDrawer(/*<drawer-selector>*/): Close target drawer
  • closePopup(/*<popup-selector>*/): Close target popup
  • triggerPopup(/*<popup-selector>*/): Open a popup
  • triggerDrawer(/*<drawer-selector>*/): Open a drawer
  • destroyModals(): Remove all modal components

Toast Service ​

javascript
// Toast service methods
UIhub.services.toastService.triggerToast(htmlString);

Toast Service Methods:

  • initToast(): Initialize toast notification system
  • triggerToast(htmlString): Show a toast notification
  • destroyToast(): Remove toast notification system

Tooltip Service ​

javascript
// Tooltip service methods
UIhub.services.tooltipService.initTooltip();

Tooltip Service Methods:

  • initTooltip(): Initialize tooltips
  • destroyTooltip(): Remove all tooltips
javascript
// Navigation service methods
UIhub.services.initSideNavigation();
UIhub.services.initDynamicLayout();

Navigation Service Methods:

  • initSideNavigation(): Initialize side navigation
  • destroySideNavigation(): Remove side navigation
  • initDynamicLayout(): Initialize dynamic page layout
  • destroyDynamicLayout(): Reset page layout

Example Usage ​

javascript
// Complete initialization
UIhub.init();

// Use specific services
UIhub.services.modalService.triggerPopup("#popup");

UIhub.services.toastService.triggerToast('<h1>Welcome Back</h1>');

// Cleanup when done
UIhub.destroy();

Best Practices ​

  1. Always call init() before using any components
  2. Use destroy() when navigating away or cleaning up
  3. Leverage individual component and service methods for granular control