fix

assets/bsCore/bsCore.css

@@ -11,3 +11,38 @@
 .collapse:not(.show) {
     display: none;
 }
+
+
+
+.btn-close {
+    box-sizing: content-box;
+    width: 1em;
+    height: 1em;
+    padding: 0.25em 0.25em;
+    color: #000;
+    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+    border: 0;
+    border-radius: 0.25rem;
+    opacity: 0.5;
+}
+.btn-close:hover {
+    color: #000;
+    text-decoration: none;
+    opacity: 0.75;
+}
+.btn-close:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    opacity: 1;
+}
+.btn-close:disabled, .btn-close.disabled {
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    opacity: 0.25;
+}
+
+.btn-close-white {
+    filter: invert(1) grayscale(100%) brightness(200%);
+}

assets/bsCore/bsCore.js

@@ -1,7 +1,12 @@
+/** @module bsCore */
 kit.PluginManager.register('bsCore', function(module, exports, require, global){
 
-    /** @class kitBsCore */
+    /**
+     * @memberOf kit
+     * @class bsCore
+     **/
     var bsCore = {};
+
     var dom = {};
     var util = {};
 
@@ -288,7 +293,6 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
 
         const getElementFromSelector = element => {
             const selector = getSelector(element)
-
             return selector ? document.querySelector(selector) : null
         }
 
@@ -520,6 +524,7 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
         return {
             getElement,
             getUID,
+            getSelector,
             getSelectorFromElement,
             getElementFromSelector,
             getTransitionDurationFromElement,
@@ -1263,6 +1268,44 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
         util.index.isElement
     );
 
+    /**
+     * --------------------------------------------------------------------------
+     * Bootstrap (v5.1.3): util/component-functions.js
+     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+     * --------------------------------------------------------------------------
+     */
+
+    util.componentFunctions = function(EventHandler, getElementFromSelector, isDisabled){
+        const enableDismissTrigger = (component, method = 'hide') => {
+            const clickEvent = `click.dismiss${component.EVENT_KEY}`
+            const name = component.NAME
+
+            EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
+                if (['A', 'AREA'].includes(this.tagName)) {
+                    event.preventDefault()
+                }
+
+                if (isDisabled(this)) {
+                    return
+                }
+
+                const target = getElementFromSelector(this) || this.closest(`.${name}`)
+                const instance = component.getOrCreateInstance(target)
+
+                // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
+                instance[method]()
+            })
+        };
+
+        return {
+            enableDismissTrigger
+        };
+    }(
+        dom.EventHandler,
+        util.index.getElementFromSelector,
+        util.index.isDisabled
+    );
+
     /**
      * --------------------------------------------------------------------------
      * Bootstrap (v5.0.2): base-component.js

assets/bsToast/bsToast.css

@@ -0,0 +1,50 @@
+
+.toast {
+    width: 350px;
+    max-width: 100%;
+    font-size: 0.875rem;
+    pointer-events: auto;
+    background-color: rgba(255, 255, 255, 0.85);
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+}
+.toast.showing {
+    opacity: 0;
+}
+.toast:not(.show) {
+    display: none;
+}
+
+.toast-container {
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
+    pointer-events: none;
+}
+.toast-container > :not(:last-child) {
+    margin-bottom: 0.75rem;
+}
+
+.toast-header {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    color: #6c757d;
+    background-color: rgba(255, 255, 255, 0.85);
+    background-clip: padding-box;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
+}
+.toast-header .btn-close {
+    margin-right: -0.375rem;
+    margin-left: 0.75rem;
+}
+
+.toast-body {
+    padding: 0.75rem;
+    word-wrap: break-word;
+}

assets/bsToast/bsToast.js

@@ -0,0 +1,270 @@
+/** @module bsToast */
+kit.PluginManager.register('bsToast', function(module, exports, require){
+    var bsCore = require('bsCore');
+
+    var
+        defineJQueryPlugin = bsCore.util.index.defineJQueryPlugin,
+        getElementFromSelector = bsCore.util.index.getElementFromSelector,
+        isRTL = bsCore.util.index.isRTL,
+        isVisible = bsCore.util.index.isVisible,
+        reflow = bsCore.util.index.reflow,
+        typeCheckConfig = bsCore.util.index.typeCheckConfig,
+        EventHandler = bsCore.dom.EventHandler,
+        Manipulator = bsCore.dom.Manipulator,
+        SelectorEngine = bsCore.dom.SelectorEngine,
+        getSelector = bsCore.util.index.getSelector,
+        isDisabled = bsCore.util.index.isDisabled,
+        enableDismissTrigger = bsCore.util.componentFunctions.enableDismissTrigger,
+        ScrollBarHelper = bsCore.util.ScrollBarHelper,
+        BaseComponent = bsCore.BaseComponent,
+        Backdrop = bsCore.util.Backdrop;
+
+
+    const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
+
+    const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
+    const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
+    const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
+
+    /**
+     * --------------------------------------------------------------------------
+     * Bootstrap (v5.1.3): toast.js
+     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+     * --------------------------------------------------------------------------
+     */
+    /**
+     * ------------------------------------------------------------------------
+     * Constants
+     * ------------------------------------------------------------------------
+     */
+
+    const NAME = 'toast';
+    const DATA_KEY = 'bs.toast';
+    const EVENT_KEY = `.${DATA_KEY}`;
+    const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`;
+    const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`;
+    const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
+    const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`;
+    const EVENT_HIDE = `hide${EVENT_KEY}`;
+    const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
+    const EVENT_SHOW = `show${EVENT_KEY}`;
+    const EVENT_SHOWN = `shown${EVENT_KEY}`;
+    const CLASS_NAME_FADE = 'fade';
+    const CLASS_NAME_HIDE = 'hide'; // @deprecated - kept here only for backwards compatibility
+
+    const CLASS_NAME_SHOW = 'show';
+    const CLASS_NAME_SHOWING = 'showing';
+    const DefaultType = {
+        animation: 'boolean',
+        autohide: 'boolean',
+        delay: 'number'
+    };
+    const Default = {
+        animation: true,
+        autohide: true,
+        delay: 5000
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
+    class Toast extends BaseComponent__default.default {
+        constructor(element, config) {
+            super(element);
+            this._config = this._getConfig(config);
+            this._timeout = null;
+            this._hasMouseInteraction = false;
+            this._hasKeyboardInteraction = false;
+
+            this._setListeners();
+        } // Getters
+
+
+        static get DefaultType() {
+            return DefaultType;
+        }
+
+        static get Default() {
+            return Default;
+        }
+
+        static get NAME() {
+            return NAME;
+        } // Public
+
+
+        show() {
+            const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW);
+
+            if (showEvent.defaultPrevented) {
+                return;
+            }
+
+            this._clearTimeout();
+
+            if (this._config.animation) {
+                this._element.classList.add(CLASS_NAME_FADE);
+            }
+
+            const complete = () => {
+                this._element.classList.remove(CLASS_NAME_SHOWING);
+
+                EventHandler__default.default.trigger(this._element, EVENT_SHOWN);
+
+                this._maybeScheduleHide();
+            };
+
+            this._element.classList.remove(CLASS_NAME_HIDE); // @deprecated
+
+
+            reflow(this._element);
+
+            this._element.classList.add(CLASS_NAME_SHOW);
+
+            this._element.classList.add(CLASS_NAME_SHOWING);
+
+            this._queueCallback(complete, this._element, this._config.animation);
+        }
+
+        hide() {
+            if (!this._element.classList.contains(CLASS_NAME_SHOW)) {
+                return;
+            }
+
+            const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
+
+            if (hideEvent.defaultPrevented) {
+                return;
+            }
+
+            const complete = () => {
+                this._element.classList.add(CLASS_NAME_HIDE); // @deprecated
+
+
+                this._element.classList.remove(CLASS_NAME_SHOWING);
+
+                this._element.classList.remove(CLASS_NAME_SHOW);
+
+                EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
+            };
+
+            this._element.classList.add(CLASS_NAME_SHOWING);
+
+            this._queueCallback(complete, this._element, this._config.animation);
+        }
+
+        dispose() {
+            this._clearTimeout();
+
+            if (this._element.classList.contains(CLASS_NAME_SHOW)) {
+                this._element.classList.remove(CLASS_NAME_SHOW);
+            }
+
+            super.dispose();
+        } // Private
+
+
+        _getConfig(config) {
+            config = { ...Default,
+                ...Manipulator__default.default.getDataAttributes(this._element),
+                ...(typeof config === 'object' && config ? config : {})
+            };
+            typeCheckConfig(NAME, config, this.constructor.DefaultType);
+            return config;
+        }
+
+        _maybeScheduleHide() {
+            if (!this._config.autohide) {
+                return;
+            }
+
+            if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
+                return;
+            }
+
+            this._timeout = setTimeout(() => {
+                this.hide();
+            }, this._config.delay);
+        }
+
+        _onInteraction(event, isInteracting) {
+            switch (event.type) {
+                case 'mouseover':
+                case 'mouseout':
+                    this._hasMouseInteraction = isInteracting;
+                    break;
+
+                case 'focusin':
+                case 'focusout':
+                    this._hasKeyboardInteraction = isInteracting;
+                    break;
+            }
+
+            if (isInteracting) {
+                this._clearTimeout();
+
+                return;
+            }
+
+            const nextElement = event.relatedTarget;
+
+            if (this._element === nextElement || this._element.contains(nextElement)) {
+                return;
+            }
+
+            this._maybeScheduleHide();
+        }
+
+        _setListeners() {
+            EventHandler__default.default.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true));
+            EventHandler__default.default.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false));
+            EventHandler__default.default.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true));
+            EventHandler__default.default.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false));
+        }
+
+        _clearTimeout() {
+            clearTimeout(this._timeout);
+            this._timeout = null;
+        } // Static
+
+
+        static jQueryInterface(config) {
+            return this.each(function () {
+                const data = Toast.getOrCreateInstance(this, config);
+
+                if (typeof config === 'string') {
+                    if (typeof data[config] === 'undefined') {
+                        throw new TypeError(`No method named "${config}"`);
+                    }
+
+                    data[config](this);
+                }
+            });
+        }
+
+    }
+
+    enableDismissTrigger(Toast);
+    /**
+     * ------------------------------------------------------------------------
+     * jQuery
+     * ------------------------------------------------------------------------
+     * add .Toast to jQuery only if jQuery is present
+     */
+
+    defineJQueryPlugin(Toast);
+
+
+    /**
+     * @memberOf kit
+     * @class bsToast
+     **/
+    var bsToast = Toast;
+
+    module.exports = Toast;
+
+    return module.exports;
+});

assets/core/core.register.js

@@ -45,6 +45,15 @@ __PluginManager__.registerPlugins({
             '/bsCore.css'
         ]
     },
+    bsToast: {
+        path: __pmConfig__.assetsPath + '/bsToast',
+        module: '/bsToast.js',
+        type: 'loader',
+        css: [
+            '/bsToast.css'
+        ],
+        deps: ['bsCore'],
+    },
     Tooltip: {
         path: __pmConfig__.assetsPath + '/tooltip',
         module: '/tooltip.js',

assets/core/doc.js

@@ -10,7 +10,6 @@
  * @typedef {Object} kitCorePlugins
  * @property {PluginManager} pm
  * @property {kitPluginManagerRequire} require
- * @property {kitBsCore} bsCore
  * @property {kitToolkit} toolkit
  * @property {kitModal} Modal
  * @property {kitCookie} cookie

assets/modal/modal.js

@@ -1,3 +1,4 @@
+/** @module modal */
 kit.PluginManager.register('modal', function(module, exports, require){
   var bsCore = require('bsCore');
   var
@@ -448,8 +449,9 @@ kit.PluginManager.register('modal', function(module, exports, require){
 
   defineJQueryPlugin(Modal)
 
-  return Modal;
+  module.exports = Modal;
 
+  return module.exports;
 });
 
 

tests/bsToastsTest.php

@@ -0,0 +1,103 @@
+<?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>
+<?
+?>