dynamicsmobile/lib-backend/controls/backend-toast.js

Allows development of off-line mobile and web business apps over the Dynamics Mobile platform. More info on https://www.dynamicsmobile.com

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.makeBackendToast = void 0;
const tslib_1 = require("tslib");
const jquery_1 = tslib_1.__importDefault(require("jquery"));
const bootstrap_1 = require("bootstrap");
const TOAST_CONTAINER_HTML = `<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>`;
const toastDefaults = {
    position: 'top-right',
    dismissible: true,
    stackable: true,
    //pauseDelayOnHover: true,
    style: {
        toast: '',
        info: '',
        success: '',
        warning: '',
        error: '',
    }
};
// this is moved to backend-task
// $('body').on('hidden.bs.toast', '.toast', function () {
//     $(this).remove();
// });
let toastRunningCount = 1;
function render(opts) {
    /** No container, create our own **/
    if (!(0, jquery_1.default)('#toast-container').length) {
        const position = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'].includes(toastDefaults.position) ? toastDefaults.position : 'top-right';
        (0, jquery_1.default)('body').prepend(TOAST_CONTAINER_HTML);
        (0, jquery_1.default)('#toast-container').addClass(position);
    }
    let toastContainer = (0, jquery_1.default)('#toast-container');
    let html = '';
    let classes = {
        header: {
            fg: '',
            bg: ''
        },
        subtitle: 'text-white',
        dismiss: 'text-white'
    };
    let id = `toast-${toastRunningCount}`;
    let type = opts.type;
    let title = opts.title;
    let subtitle = opts.subtitle;
    let content = opts.content;
    let img = opts.img;
    let delayOrAutohide = opts.delay ? `data-bs-delay="${opts.delay}"` : `data-bs-autohide="false"`;
    let hideAfter = ``;
    let dismissible = toastDefaults.dismissible;
    let globalToastStyles = toastDefaults.style.toast;
    let paused = false;
    if (typeof opts.dismissible !== 'undefined') {
        dismissible = opts.dismissible;
    }
    switch (type) {
        case 'info':
            classes.header.bg = toastDefaults.style.info || 'bg-info';
            classes.header.fg = toastDefaults.style.info || 'text-white';
            break;
        case 'success':
            classes.header.bg = toastDefaults.style.success || 'bg-success';
            classes.header.fg = toastDefaults.style.info || 'text-white';
            break;
        case 'warning':
            classes.header.bg = toastDefaults.style.warning || 'bg-warning';
            classes.header.fg = toastDefaults.style.warning || 'text-white';
            break;
        case 'error':
            classes.header.bg = toastDefaults.style.error || 'bg-danger';
            classes.header.fg = toastDefaults.style.error || 'text-white';
            break;
    }
    if (opts.delay) {
        delayOrAutohide = `data-bs-autohide="true"`;
        hideAfter = `data-bs-delay="${opts.delay}"`;
    }
    html = `<div id="${id}" class="toast ${globalToastStyles}" role="alert" aria-live="assertive" aria-atomic="true" ${delayOrAutohide} ${hideAfter}>`;
    if (title && content) {
        html += `<div class="toast-header ${classes.header.bg} ${classes.header.fg}">`;
        if (img) {
            html += `<img src="${img.src}" class="mr-2 ${img.class || ''}" alt="${img.alt || 'Image'}">`;
        }
        html += `<strong class="me-auto">${title}</strong>`;
        if (subtitle) {
            html += `<small class="${classes.subtitle}">${subtitle}</small>`;
        }
        if (dismissible) {
            html += `<button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>`;
        }
        html += `</div>`; //header end
    }
    html += `<div class="toast-body">
                    ${content ? content : title}
                </div>`;
    html += `</div>`;
    if (!toastDefaults.stackable) {
        toastContainer.find('.toast').each(function () {
            (0, jquery_1.default)(this).remove();
        });
    }
    toastContainer.append(html);
    const element = toastContainer.find('.toast:last').get(0);
    const ts = bootstrap_1.Toast.getOrCreateInstance(element);
    ts.show();
    // if (toastDefaults.pauseDelayOnHover) {
    //     setTimeout(function () {
    //         if (!paused) {
    //             ($(`#${id}`) as any).toast('hide');
    //         }
    //     }, opts.delay);
    //     $('body').on('mouseover', `#${id}`, function () {
    //         paused = true;
    //     });
    //     $(document).on('mouseleave', '#' + id, function () {
    //         const current = Math.floor(Date.now() / 1000),
    //             future = parseInt($(this).data('hideAfter'));
    //         paused = false;
    //         if (current >= future) {
    //             ($(this) as any).toast('hide');
    //         }
    //     });
    //     if (opts.onClick) {
    //         $(`#${id}`).on('click', opts.onClick);
    //     }
    // }
    toastRunningCount++;
}
function makeBackendToast(opts) {
    return render(opts);
}
exports.makeBackendToast = makeBackendToast;
//# sourceMappingURL=backend-toast.js.map