My MDB5 Project

Using Xojo

by wardiam

TypeScript

interface JQuery {
    toast: any;
}

interface ToastCommand {
    tcType: string;
    tcTitle?: string;
    tcTextColor?: string;
    tcBackground?: string;
    tcFa_icon?: string;
    tcTimeAgo?: string;
    tcBody?: string;
    tcHideAuto?: boolean;
    tcHideDelay?: number;
    tcIndex?: number;
}

namespace Bootstrap46 {
    export class Toast extends XojoWeb.XojoControl {
        private mWrapperElementID: string = 'bs46-toast-wrapper';
        private mToastWrapper: HTMLDivElement | null = null;

        updateControl(data: string) {
            const js = JSON.parse(data);
            const commands = JSON.parse(Toast.decode(js.commands));
            if (typeof commands === 'object' && commands.length > 0) {
                commands.forEach((command: ToastCommand) => this.parseCommand(command));
            }
        }

        toast(mTitle: string, mTextColor: string, mBackground: string, mFa_icon: string, mTimeAgo: string, mBody: string, mHideAuto: boolean = true, mHideDelay: number = 2000) {
            this.createWrapperIfNeeded();
            const element = document.createElement('div');
            this.mToastWrapper?.appendChild(element);
            const toastId = 'bs46-toast-' + Date.now();

            // The HTML template is coming almost verbatim from MDBootstrap's documentation:
            // https://mdbootstrap.com/docs/standard/components/toasts/
            element.outerHTML =
                `
                <!-- Toasts -->
                <div
                     class="toast fade mx-auto ${mBackground}"
                     id="${toastId}"
                     role="alert"
                     data-animation="true"
                     aria-live="assertive"
                     aria-atomic="true"
                     data-mdb-autohide="${mHideAuto}"
                     data-mdb-delay="${mHideDelay}"
                     data-mdb-position="top-right"
                     data-mdb-append-to-body="true"
                    ...