Festi ThemeAssets

A comprehensive package of frontend assets for Festi Framework projects, providing essential JavaScript and CSS libraries to enhance your application's UI and user experience.

• jQuery: Cross-platform JavaScript library for DOM manipulation
• Bootstrap: Responsive CSS and JS framework for modern web development
• jimbo.js: Custom utility library with Festi-specific functionality

Jimbo.JS

The jimbo.js library provides a variety of utility functions for common frontend tasks:

AJAX Operations

• Jimbo.ajax(): Perform AJAX requests with customizable options
• Jimbo.response(): Main function for handling responses from the backend

UI Elements

• Jimbo.showMessages(): Display notification messages
• Jimbo.showLoadingBar()/Jimbo.hideLoadingBar(): Control loading indicators
• Jimbo.dialog(): Show modal dialogs
• Jimbo.confirm(): Display confirmation dialogs
• Jimbo.growlCreate(): Create toast notifications
• Jimbo.addListener(): Attach event listeners to DOM elements

Event Handling

Jimbo provides a robust event system for handling various UI interactions and system events. Here are the key event-related features:

Event Constants

• EVENT_ON_INIT: Triggered when Jimbo is initialized
• EVENT_CALL_GROWL: Triggered when creating notifications
• EVENT_BEFORE_LOAD_FORM: Triggered before loading a form
• EVENT_OPEN_DIALOG: Triggered when opening a dialog
• EVENT_BEFORE_CLOSE_DIALOG: Triggered before closing a dialog
• EVENT_CALL_ERROR_FIELD: Triggered when displaying field errors
• EVENT_ON_DISPLAY_STORE_FORM: Triggered when displaying a store form such as insert, update, or delete.
• EVENT_ON_DISPLAY_WIZARD_STEP: Triggered when a wizard step is displayed (e.g., when navigating between steps in a multi-step form).

Event Methods

• Jimbo.addListener(event, callback): Attach an event listener
• Jimbo.fireEvent(eventName, params): Trigger an event with optional parameters

Example Usage

// Add an event listener
Jimbo.addListener(Jimbo.EVENT_OPEN_DIALOG, function(event) {
    // Handle dialog open event
    console.log('Dialog opened');
});

// Fire an event
Jimbo.fireEvent(Jimbo.EVENT_CALL_GROWL, {
    caption: 'Notification',
    description: 'Event triggered',
    persistent: false
});

Common Event Patterns

1. Form Validation Events:

   // Attach form validation on dialog open
   Jimbo.addListener(Jimbo.EVENT_OPEN_DIALOG, function() {
       Jimbo.util.doAttacheFormValidation();
   });

2. Custom Event Handling:

   // Create custom event handler
   Jimbo.addListener('customEvent', function(event, param1, param2) {
       // Handle custom event
       console.log(param1, param2);
   });
   
   // Trigger custom event
   Jimbo.fireEvent('customEvent', ['value1', 'value2']);

3. Store Form Display Event:

   // Listen for when a store form (insert/update/delete) is displayed
   Jimbo.addListener(Jimbo.EVENT_ON_DISPLAY_STORE_FORM, function(event, formOptions) {
       // formOptions contains details about the form being displayed
       console.log('Store form displayed:', formOptions);
   });

4. Wizard Step Display Event:

   // Listen for when a wizard step is displayed
   Jimbo.addListener(Jimbo.EVENT_ON_DISPLAY_WIZARD_STEP, function(event, wizardInstance) {
       // wizardInstance is the Jimbo.ui.wizard instance
       console.log('Wizard step displayed:', wizardInstance.currentStep);
   });

The event system allows for loose coupling between components and enables extensible application behavior through event-driven architecture.

Examples

Display Loading Bar

// Show loading indicator
Jimbo.showLoadingBar();

// Perform some operation using AJAX
Jimbo.ajax({
    url: 'api/users/save',
    method: 'POST',
    data: {
        id: userId,
        name: userName
    },
    success: function(data) {
        // Hide loading indicator
        Jimbo.hideLoadingBar();

        // Process response
        Jimbo.response(data, function(response) {
            if (response.status === 'success') {
                Jimbo.showMessages('Success', ['User saved successfully']);
            } else {
                Jimbo.showMessages('Error', response.messages || ['Failed to save user']);
            }
        });
    },
    error: function() {
        Jimbo.hideLoadingBar();
        Jimbo.showMessages('Error', ['Network error occurred']);
    }
});

Create Notification

// Create a temporary notification
Jimbo.growlCreate('Information', 'Your changes have been applied', false);

// Create a persistent notification
Jimbo.growlCreate('Warning', 'Please save your changes before leaving', true);