kit/tests/bsToastsTest.php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
    app()->service()->assets()->setPlugins([
        'kit:config',
        'kit:flex-kit',
        'kit:core',
        'kit:bsCore',
        'kit:collapse',
        'kit:site',
        'kit:toolkit',
        'kit:theme',
    ])->render();
}
$APPLICATION->ShowHead();

?>
<script>
    kit.ready(['bsToast', 'testing', 'date'], function () {

        var unit = new kit.testing.Unit();
        unit.logger.info('Тест bootstrap.Toast 5.1.3');



        function makeNode(html = '') {
            var nodeWrap = document.createElement('div');
            nodeWrap.innerHTML = html;
            return nodeWrap.firstElementChild;
        }


        var toastContainerTemplate = '<div class="toast-container position-fixed p-3 bottom-0 end-0" style="z-index: 10000;"></div>';


        function getToastNode(title, message, time){
            unit.logger.info(time + ' ' + title, message);
            var toastTemplate = '<div class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"/></svg><strong class="me-auto">'+title+'</strong><small>' + time+ '</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"/></div><div class="toast-body">'+message+'</div></div>';
            return makeNode(toastTemplate);
        }
        var toastContainer = makeNode(toastContainerTemplate);
        document.body.appendChild(toastContainer);

        var audio = new Audio('https://issue.megapolis-it.ru/local/media/new_message-4.mp3');

        var intervalId = setInterval(function(){

            var toastEl = getToastNode('Новая заявка', 'Заявка от Пупкина на дальний склад. Очень срочно! Нужно еще вчера...', kit.date('H:i:s'));
            toastContainer.appendChild(toastEl);
            var toast = new kit.bsToast(toastEl, option = {
                animation: true,
                autohide: true,
                delay: 33000,
            });
            toast.show();
            audio.play();
        }, 5000);


        var stop = function(){
            clearInterval(intervalId);
        };
    });
</script>

<div  class="kit-wrapper">
    <div class="kit-logger"></div>
</div>
    <style>
        .position-fixed {
            position: fixed!important;
        }
        .bottom-0 {
            bottom: 0!important;
        }
        .end-0 {
            right: 0!important;
        }
        .p-3 {
            padding: 1rem !important;
        }
        img, svg {
            vertical-align: middle;
        }
        .me-2 {
            margin-right: 0.5rem !important;
        }
        .rounded {
            border-radius: 0.25rem !important;
        }
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        .me-auto {
            margin-right: auto!important;
        }
    </style>
<?
?>