Modal Handler

Modal handlers in ReqEase allow you to adapt the library's actions, such as showing modals or displaying progress, to custom modal behaviors or packages. While the default modal handler is 'bootstrap,' you have the flexibility to use 'jquery-confirm' (by including the jQuery Confirm script) or create your custom modal handler for specific modal libraries. Modal handlers are used by both the loading indicator and response handlers in ReqEase.

Base Modal Handler

The foundation of all modal handlers in ReqEase is the ModalHandler class:

export class ModalHandler {
    protected options: ModalOptions;
    requester: Requester;
    static label: string;
    private readonly _modalCallbacks: ModalCallbacks[];
    private readonly _internalCallbacks: ModalCallbacks;
    $modal: JQuery = null;
    retry: () => void = () => {};

    constructor(requester: Requester, options: ModalOptions) {
        // Constructor details
    }

    // Methods to show and close the modal
    show(): void {}
    close(): void {}

    modalIsShowed(): boolean {
        return false;
    }

    // Other protected methods for building modal types
    protected build() {}

    // More protected methods for building specific modal types
    protected buildLoadingModal(_options: ModalLoadingOptions) {}
    protected buildProgressModal(_options: ModalProgressOptions) {}
    protected buildMessageModal(_options: ModalMessageOptions) {}
    protected buildConfirmationModal(_options: ModalConfirmationOptions) {}
    protected buildDataNeededModal(_options: ModalDataNeededOptions) {}

    // Additional protected methods
    protected buildIcon(): string {}

    // Callbacks to customize modal behavior
    get modalCallbacks(): ModalCallbacks {
        return this._internalCallbacks;
    }

    set modalCallbacks(value: ModalCallbacks) {
        this._modalCallbacks.push(value);
    }
}

Modal Handlers in ReqEase

Modal handlers in ReqEase allow you to adapt the library's actions, such as showing modals or displaying progress, to custom modal behaviors or packages. While the default modal handler is 'bootstrap,' you have the flexibility to use 'jquery-confirm' (by including the jQuery Confirm script) or create your custom modal handler for specific modal libraries. Modal handlers are used by both the loading indicator and response handlers in ReqEase.

Base Modal Handler

The foundation of all modal handlers in ReqEase is the ModalHandler class:

export class ModalHandler {
    protected options: ModalOptions;
    requester: Requester;
    static label: string;
    private readonly _modalCallbacks: ModalCallbacks[];
    private readonly _internalCallbacks: ModalCallbacks;
    $modal: JQuery = null;
    retry: () => void = () => {};

    constructor(requester: Requester, options: ModalOptions) {
        // Constructor details
    }

    // Methods to show and close the modal
    show(): void {}
    close(): void {}

    modalIsShowed(): boolean {
        return false;
    }

    // Other protected methods for building modal types
    protected build() {}

    // More protected methods for building specific modal types
    protected buildLoadingModal(_options: ModalLoadingOptions) {}
    protected buildProgressModal(_options: ModalProgressOptions) {}
    protected buildMessageModal(_options: ModalMessageOptions) {}
    protected buildConfirmationModal(_options: ModalConfirmationOptions) {}
    protected buildDataNeededModal(_options: ModalDataNeededOptions) {}

    // Additional protected methods
    protected buildIcon(): string {}

    // Callbacks to customize modal behavior
    get modalCallbacks(): ModalCallbacks {
        return this._internalCallbacks;
    }

    set modalCallbacks(value: ModalCallbacks) {
        this._modalCallbacks.push(value);
    }
}

• protected options: ModalOptions: The modal's configuration options.

• requester: Requester: A reference to the Requester instance.

• static label: string: Each modal handler has a label to identify its type.

• _modalCallbacks and _internalCallbacks: Callbacks to customize modal behavior.

• show() and close(): Methods to show and close the modal.

• modalIsShowed(): A method to check if the modal is currently displayed.

• Various protected methods for building different modal types.

Custom Modal Handler Example

Suppose you want to create a custom modal handler for a specific modal library called 'my-modal-library.' Here's how you can do it:

1. Create your custom modal handler class, extending ModalHandler:

export class MyModalHandler extends ModalHandler {
    static label = "my-modal-library";

    constructor(requester: Requester, options: ModalOptions) {
        super(requester, options);
    }

    show(): void {
        // Custom logic to show 'my-modal-library'
    }

    close(): void {
        // Custom logic to close 'my-modal-library'
    }

    // Additional custom methods and logic for 'my-modal-library'
}

2. Register your custom modal handler in the Requester configuration using the modalHandlersToRegister option:

const myRequester = new Requester({
    // Other options
    modalHandlersToRegister: [MyModalHandler],
});

By creating and registering a custom modal handler, you can seamlessly integrate ReqEase with your chosen modal library, providing a consistent and user-friendly experience in your web application.