@formixru/b2b-ui 4.2.1 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "4.2.1",
+    "version": "4.3.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/base.scss

@@ -28,7 +28,7 @@
 
     --input-delay: 300ms;
     --change-delay: 900ms;
-    --loader-delay: 600ms;
+    --loader-delay: 500ms; // Значение подобрано так, чтобы при открытии .dialog/.sidebar не было мерцания
     --loader-delay-min: 300ms;
     --loader-min-time: 600ms;
     --fallback-timeout: 3000ms;

package/src/components/dialog/index.js

@@ -15,8 +15,9 @@ export const init = ($b) => {
     if (!mm('tablet-landscape-up')) {
         $b.prepend($b.querySelector('.dialog__close'));
     }
-    // Отключаем скролл у body, если при загрузке на странице есть видимое диалоговое окно
     if (!$b.hidden) {
+        $b.classList.add('dialog_backdrop');
+        // Отключаем скролл у body, если при загрузке на странице есть видимое диалоговое окно
         disableScroll();
         $b.classList.toggle('dialog_overflow', isDialogOverflow($b));
     }
@@ -34,58 +35,76 @@ export const init = ($b) => {
     });
 };
 
-export const show = async ($b) => {
-    if ($b?.hidden) {
-        $b.dispatchEvent(new CustomEvent('dialog-show'));
+export const show = async ($b, showBackdrop = 'before') => {
+    if (!$b?.hidden) {
+        return;
+    }
 
-        disableScroll();
-        $b.hidden = false;
+    $b.dispatchEvent(new CustomEvent('dialog-show'));
+
+    if (showBackdrop === 'before') {
+        $b.classList.add('dialog_backdrop');
+    }
 
-        await Promise.all([
-            $b.animate([{ opacity: 0 }, { opacity: 1 }], {
-                duration: cssVar('--duration-enter-m'),
-                easing: cssVar('--easing-deceleration'),
-            }).finished,
+    disableScroll();
+    $b.hidden = false;
+
+    const promises = [
+        $b.animate([{ opacity: 0 }, { opacity: 1 }], {
+            duration: cssVar('--duration-enter-m'),
+            easing: cssVar('--easing-deceleration'),
+        }).finished,
+    ];
+    if (mm('tablet-landscape-up')) {
+        promises.push(
             $b
                 .querySelector('.dialog__wrapper')
                 .animate([{ transform: 'translateY(-15px)' }, { transform: 'translateY(0)' }], {
                     duration: cssVar('--duration-enter-m'),
                     easing: cssVar('--easing-deceleration'),
                 }).finished,
-        ]);
+        );
+    }
+    await Promise.all(promises);
 
-        $b.dispatchEvent(new CustomEvent('dialog-shown'));
+    if (showBackdrop === 'after') {
+        $b.classList.add('dialog_backdrop');
     }
 
-    return new Promise((resolve) => {
-        resolve();
-    });
+    $b.dispatchEvent(new CustomEvent('dialog-shown'));
 };
 
 export const hide = async ($b) => {
-    if ($b && !$b.hidden) {
-        $b.dispatchEvent(new CustomEvent('dialog-hide'));
-
-        await Promise.all([
-            $b.animate([{ opacity: 1 }, { opacity: 0 }], {
-                duration: cssVar('--duration-leave-m'),
-                easing: cssVar('--easing-acceleration'),
-            }).finished,
+    if (!$b || $b.hidden) {
+        enableScroll();
+        return;
+    }
+
+    $b.dispatchEvent(new CustomEvent('dialog-hide'));
+
+    const promises = [
+        $b.animate([{ opacity: 1 }, { opacity: 0 }], {
+            duration: cssVar('--duration-leave-m'),
+            easing: cssVar('--easing-acceleration'),
+        }).finished,
+    ];
+    if (mm('tablet-landscape-up')) {
+        promises.push(
             $b
                 .querySelector('.dialog__wrapper')
                 .animate([{ transform: 'translateY(0)' }, { transform: 'translateY(-15px)' }], {
                     duration: cssVar('--duration-leave-m'),
                     easing: cssVar('--easing-acceleration'),
                 }).finished,
-        ]);
+        );
+    }
+    await Promise.all(promises);
 
-        $b.hidden = true;
-        enableScroll();
+    $b.hidden = true;
+    $b.classList.remove('dialog_overflow', 'dialog_backdrop');
+    enableScroll();
 
-        $b.dispatchEvent(new CustomEvent('dialog-hidden'));
-    } else {
-        enableScroll();
-    }
+    $b.dispatchEvent(new CustomEvent('dialog-hidden'));
 };
 
 export const get = async (id, url) => {
@@ -96,9 +115,9 @@ export const get = async (id, url) => {
             const $b = document.querySelector(elementId);
             if ($b) {
                 $b.querySelector('.dialog__container').innerHTML = content;
-                hideLoader();
-                await show($b);
+                await show($b, 'after');
                 initRequestContent($b);
+                hideLoader(0);
             } else {
                 console.error(`Диалоговое окно с id ${elementId} не найдено`);
             }

package/src/components/dialog/index.scss

@@ -3,7 +3,7 @@
 $b: '.dialog';
 
 #{$b} {
-    background-color: $dialog-backdrop-color;
+    background-color: $dialog-bg;
     height: calc(100% - var(--tab-bar-height));
     left: 0;
     overflow: auto;
@@ -14,6 +14,7 @@ $b: '.dialog';
     z-index: 990;
 
     @media (--tablet-landscape-up) {
+        background-color: transparent;
         align-items: center;
         display: flex;
         flex-direction: column;
@@ -22,10 +23,6 @@ $b: '.dialog';
         padding: 4px * 10 0;
     }
 
-    body:has(.loader_active) & {
-        background-color: transparent;
-    }
-
     &_overflow {
         @media (--tablet-landscape-up) {
             justify-content: flex-start;
@@ -41,18 +38,33 @@ $b: '.dialog';
     &_l {
     }
 
+    &_backdrop {
+        @media (--tablet-landscape-up) {
+            background-color: $dialog-backdrop-color;
+        }
+
+        // Т. к. .loader исчезает постепенно, с таким же эффектом показываем оверлей, чтобы не было мерцания
+        body:has(.loader_active) & {
+            @media (--tablet-landscape-up) {
+                transition-duration: var(--duration-leave-m);
+                transition-property: background-color;
+                transition-timing-function: var(--easing-standard);
+            }
+        }
+    }
+
     &__wrapper {
         background-color: $dialog-bg;
         color: $dialog-color;
         min-height: 100%;
-        padding: 4px * 8 4px * 4;
+        padding: 32px 16px;
         width: 100%;
 
         @media (--tablet-landscape-up) {
             border-radius: $dialog-radius;
             box-shadow: $dialog-shadow;
             min-height: auto;
-            padding: 4px * 10;
+            padding: 40px;
             position: relative;
         }
 
@@ -81,15 +93,15 @@ $b: '.dialog';
         color: $dialog-close-color;
         cursor: pointer;
         display: flex;
-        height: 4px * 10;
+        height: 40px;
         justify-content: center;
         position: fixed;
-        right: 4px * 2;
-        top: 4px * 2;
+        right: 8px;
+        top: 8px;
         transition-duration: var(--duration-micro-s);
         transition-property: color;
         transition-timing-function: var(--easing-standard);
-        width: 4px * 10;
+        width: 40px;
         z-index: 1;
 
         @media (--tablet-landscape-up) {
@@ -104,8 +116,8 @@ $b: '.dialog';
 
     &__close-icon {
         fill: currentcolor;
-        height: 4px * 5;
-        width: 4px * 5;
+        height: 20px;
+        width: 20px;
     }
 
     &__container {
@@ -120,18 +132,18 @@ $b: '.dialog';
         border: $dialog-header-image-border-width solid $dialog-header-image-border-color;
         border-radius: $dialog-radius;
         flex-shrink: 0;
-        height: 4px * 20;
-        margin-right: 4px * 6;
+        height: 80px;
+        margin-right: 24px;
         object-fit: contain;
-        width: 4px * 20;
+        width: 80px;
 
         @media (--tablet-portrait-down) {
             display: none;
         }
 
         @media (--desktop-up) {
-            height: 4px * 22;
-            width: 4px * 22;
+            height: 88px;
+            width: 88px;
         }
     }
 
@@ -151,23 +163,23 @@ $b: '.dialog';
     }
 
     &__descr {
-        margin-top: 4px * 6;
+        margin-top: 24px;
         max-width: 672px;
     }
 
     &__form {
-        margin-top: 4px * 6;
+        margin-top: 24px;
     }
 
     &__product-table {
-        margin-top: 4px * 6;
+        margin-top: 24px;
     }
 
     &__action-list {
         align-items: center;
         display: flex;
         flex-direction: column;
-        margin-top: 4px * 6;
+        margin-top: 24px;
 
         @media (--tablet-landscape-up) {
             flex-direction: row;
@@ -181,14 +193,14 @@ $b: '.dialog';
     }
 
     &__action-item {
-        max-width: 4px * 62;
+        max-width: 248px;
         white-space: normal;
 
         &:not(:first-child) {
-            margin-top: 4px * 6;
+            margin-top: 24px;
 
             @media (--tablet-landscape-up) {
-                margin-left: 4px * 6;
+                margin-left: 24px;
                 margin-top: 0;
             }
         }

package/src/components/loader/index.js

@@ -1,10 +1,12 @@
+import { cssVar } from '@advdominion/css-var';
+
 let loaderTimeout;
 
 export const clearLoaderTimeout = () => {
     clearTimeout(loaderTimeout);
 };
 
-export const show = (delay) => {
+export const show = (delayOverride) => {
     if (!document.querySelector('.loader')) {
         document.body.insertAdjacentHTML(
             'beforeend',
@@ -19,45 +21,60 @@ export const show = (delay) => {
             `,
         );
     }
+
     const $b = document.querySelector('.loader');
+    const delay = delayOverride ?? cssVar('--loader-delay');
     clearLoaderTimeout();
     return new Promise((resolve) => {
-        loaderTimeout = setTimeout(
-            () => {
-                if (!$b.classList.contains('loader_active')) {
+        loaderTimeout = setTimeout(async () => {
+            if (!$b.classList.contains('loader_active')) {
+                $b.style.translate = 'none';
+                try {
+                    await $b.animate([{ opacity: 0 }, { opacity: 1 }], {
+                        duration: cssVar('--duration-enter-m'),
+                        easing: cssVar('--easing-standard'),
+                    }).finished;
                     $b.classList.add('loader_active');
+                } catch {
+                    // Анимация появления может прерваться в hide()
                 }
-                resolve();
-            },
-            delay === undefined ? window.__FORMIX__LOADER__DELAY || 500 : delay,
-        );
+            }
+            resolve();
+        }, delay);
     });
 };
 
-export const hide = (delay) => {
+export const hide = (delayOverride) => {
     const $b = document.querySelector('.loader');
+    const delay = delayOverride ?? cssVar('--loader-delay');
     clearLoaderTimeout();
     return new Promise((resolve) => {
-        loaderTimeout = setTimeout(
-            () => {
-                if ($b.classList.contains('loader_active')) {
-                    $b.classList.remove('loader_active');
-                }
-                resolve();
-            },
-            delay === undefined ? window.__FORMIX__LOADER__DELAY || 500 : delay,
-        );
-    });
-};
+        loaderTimeout = setTimeout(async () => {
+            // Получаем текущее значение прозрачности, чтобы начать анимацию с него
+            const currentOpacity = window.getComputedStyle($b).opacity;
 
-window.showLoader = (delay) => {
-    show(delay);
-};
+            for (const animation of $b.getAnimations()) {
+                animation.cancel();
+            }
+
+            // Если лоадер хоть немного виден, скрываем его из текущего значения
+            if (Number(currentOpacity) > 0) {
+                await $b.animate([{ opacity: currentOpacity }, { opacity: 0 }], {
+                    duration: cssVar('--duration-leave-m'),
+                    easing: cssVar('--easing-standard'),
+                }).finished;
+            }
 
-window.hideLoader = (delay) => {
-    hide(delay);
+            $b.style.translate = '';
+            $b.classList.remove('loader_active');
+            resolve();
+        }, delay);
+    });
 };
 
+window.showLoader = show;
+window.hideLoader = hide;
+
 window.addEventListener('pageshow', (event) => {
     if (event.persisted && document.querySelector('.loader_active')) {
         hide(0);

package/src/components/loader/index.scss

@@ -27,18 +27,12 @@ $b: '.loader';
     opacity: 0;
     position: fixed;
     top: 0;
-    transform: translateX(-100%);
-    transition-duration: var(--duration-leave-s);
-    transition-property: opacity;
-    transition-timing-function: var(--easing-acceleration);
+    translate: -100%;
     width: 100%;
     z-index: 1000;
 
     &_active {
         opacity: 1;
-        transform: translateX(0);
-        transition-duration: var(--duration-enter-s);
-        transition-timing-function: var(--easing-deceleration);
     }
 
     &__dots {
@@ -54,12 +48,12 @@ $b: '.loader';
         animation-timing-function: var(--easing-standard);
         background-color: $loader-color;
         border-radius: 50%;
-        height: 4px * 6;
-        width: 4px * 6;
+        height: 24px;
+        width: 24px;
 
         @media (--tablet-landscape-up) {
-            height: 4px * 8;
-            width: 4px * 8;
+            height: 32px;
+            width: 32px;
         }
 
         &_1 {
@@ -67,10 +61,10 @@ $b: '.loader';
 
         &_2 {
             animation-delay: 100ms;
-            margin: 0 4px * 2;
+            margin: 0 8px;
 
             @media (--tablet-landscape-up) {
-                margin: 0 4px * 3;
+                margin: 0 12px;
             }
         }
 
@@ -81,17 +75,17 @@ $b: '.loader';
 
     &__message {
         color: $loader-label-color;
-        margin-left: 4px * 4;
-        margin-right: 4px * 4;
-        margin-top: 4px * 4;
+        margin-left: 16px;
+        margin-right: 16px;
+        margin-top: 16px;
         text-align: center;
 
         @include font($loader-label-mobile-font);
 
         @media (--tablet-landscape-up) {
-            margin-left: 4px * 8;
-            margin-right: 4px * 8;
-            margin-top: 4px * 6;
+            margin-left: 32px;
+            margin-right: 32px;
+            margin-top: 24px;
 
             @include font($loader-label-desktop-font);
         }

package/src/components/overlay/index.js

@@ -37,18 +37,15 @@ const defaultBlockingSelectors = ['.dialog', '.sidebar'];
 
 export const disableScroll = () => {
     const scrollbarWidth = getScrollbarWidth();
-    document.body.style = `
-        overflow: hidden;
-        margin-right: ${scrollbarWidth}px;
-    `;
+
+    document.body.style.overflow = 'hidden';
+    document.body.style.marginRight = `${scrollbarWidth}px`;
 
     if (mm('desktop-up') && window.__FORMIX__OVERLAY__FIXED_ELEMENTS?.length > 0) {
         const fixedElements = [...document.querySelectorAll(window.__FORMIX__OVERLAY__FIXED_ELEMENTS.join(','))];
 
         for (const element of fixedElements) {
-            element.style = `
-                width: calc(100% - ${scrollbarWidth}px);
-            `;
+            element.style.width = `calc(100% - ${scrollbarWidth}px)`;
         }
     }
 };
@@ -64,18 +61,14 @@ export const enableScroll = () => {
     const hasVisibleBlockingElements = blockingSelements.some((el) => !el.hidden);
 
     if (!hasVisibleBlockingElements) {
-        document.body.style = `
-            overflow: '';
-            margin-right: '';
-        `;
+        document.body.style.overflow = '';
+        document.body.style.marginRight = '';
 
         if (mm('desktop-up') && window.__FORMIX__OVERLAY__FIXED_ELEMENTS?.length > 0) {
             const fixedElements = [...document.querySelectorAll(window.__FORMIX__OVERLAY__FIXED_ELEMENTS.join(','))];
 
             for (const element of fixedElements) {
-                element.style = `
-                    width: '';
-                `;
+                element.style.width = '';
             }
         }
     }

package/src/components/overlay/index.scss

@@ -14,17 +14,16 @@ $b: '.overlay';
     position: fixed;
     top: 0;
     transform: translateX(-100%);
-    transition-duration: var(--duration-leave-s);
+    transition-duration: var(--duration-leave-m);
     transition-property: opacity;
-    transition-timing-function: var(--easing-acceleration);
+    transition-timing-function: var(--easing-standard);
     width: 100%;
     z-index: var(--overlay-z-index);
 
     &_active {
         opacity: 1;
         transform: translateX(0);
-        transition-duration: var(--duration-enter-s);
-        transition-timing-function: var(--easing-deceleration);
+        transition-duration: var(--duration-enter-m);
     }
 
     body:has(.loader_active) & {

package/src/components/request/index.js

@@ -1,10 +1,11 @@
 /* globals BX */
 
+import { cssVar } from '@advdominion/css-var';
 import { isString } from 'es-toolkit';
 
 import { errorHandler } from '../../utils/error-handler.js';
 import { hide as hideDialog, show as showDialog } from '../dialog/index.js';
-import { hide as hideLoader, show as showLoader } from '../loader/index.js';
+import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
 import { hide as hideSidebar, show as showSidebar } from '../sidebar/index.js';
 
 export const initRequestContent = ($b) => {
@@ -22,11 +23,20 @@ const getElementId = (id) => {
     return `#${id}`;
 };
 
+export const redirect = (url) => {
+    if (!url || String(location.pathname + location.search) === url.replace(/#.*$/, '')) {
+        location.reload();
+    } else {
+        location.assign(url);
+    }
+    clearLoaderTimeout();
+};
+
 export const request = async ({
     $b,
     url = '',
     method = 'GET',
-    data = {},
+    data: requestData = {},
     signal,
     loader = true,
     showLoaderDelay,
@@ -35,6 +45,7 @@ export const request = async ({
     ...unknownParams
 }) => {
     let hideLoaderOnSuccess = initialHideLoaderOnSuccess;
+    let loaderDelay;
 
     const unknownKeys = Object.keys(unknownParams);
     if (unknownKeys.length > 0) {
@@ -57,21 +68,21 @@ export const request = async ({
 
     if (method === 'GET') {
         let entries;
-        if (data instanceof FormData) {
-            entries = data.entries();
-        } else if (isString(data)) {
-            entries = Object.entries(JSON.parse(data));
+        if (requestData instanceof FormData) {
+            entries = requestData.entries();
+        } else if (isString(requestData)) {
+            entries = Object.entries(JSON.parse(requestData));
         } else {
-            entries = Object.entries(data);
+            entries = Object.entries(requestData);
         }
         for (const [name, value] of entries) {
             reqUrl.searchParams.append(name, value);
         }
     } else {
-        if (data instanceof FormData || isString(data)) {
-            options.body = data;
+        if (requestData instanceof FormData || isString(requestData)) {
+            options.body = requestData;
         } else {
-            options.body = JSON.stringify(data);
+            options.body = JSON.stringify(requestData);
             options.headers['Content-Type'] = 'application/json';
         }
     }
@@ -87,133 +98,124 @@ export const request = async ({
         }
 
         const raw = await response.text();
-        let data;
+        let responseData;
         try {
-            data = JSON.parse(raw);
+            responseData = JSON.parse(raw);
         } catch {
             console.warn('Ошибка при попытке преобразования ответа в JSON');
-            data = { content: raw };
+            responseData = { content: raw };
         }
 
-        if (isString(data.redirect)) {
-            if (data.redirect) {
-                location.assign(data.redirect);
-            } else {
-                location.reload();
-            }
+        if (
+            isString(responseData.redirect) &&
+            !responseData.redirectOnHideDialog &&
+            !responseData.redirectOnHideSidebar
+        ) {
+            redirect(responseData.redirect);
+            loaderDelay = cssVar('--fallback-timeout');
         } else {
             if (interceptData) {
                 try {
-                    await window.__FORMIX__REQUEST__INTERCEPT_DATA(data);
+                    await window.__FORMIX__REQUEST__INTERCEPT_DATA(responseData);
                 } catch {
                     console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
                 }
             }
 
-            if (data.dialog) {
-                const elementId = getElementId(data.dialog.id);
-                const $dialog = document.querySelector(elementId);
+            const $dialog = responseData.dialog
+                ? document.querySelector(getElementId(responseData.dialog.id))
+                : undefined;
+            const $sidebar = responseData.sidebar
+                ? document.querySelector(getElementId(responseData.sidebar.id))
+                : undefined;
+
+            if (responseData.dialog) {
                 if ($dialog) {
-                    $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
-                    // Вызываем hideLoader так же как в основном компоненте - до функции show()
+                    $dialog.querySelector('.dialog__container').innerHTML = responseData.dialog.content;
+                    await showDialog($dialog, 'after');
+                    initRequestContent($dialog);
                     if (loader) {
-                        hideLoader();
+                        hideLoader(0);
                         hideLoaderOnSuccess = false;
                     }
-                    await showDialog($dialog);
-                    initRequestContent($dialog);
                 } else {
-                    console.warn(`Диалоговое окно с id ${elementId?.replace(/^#/, '')} не найдено`);
+                    console.warn(`Диалоговое окно с id ${responseData.dialog.id?.replace(/^#/, '')} не найдено`);
                 }
             }
 
-            if (data.reloadOnHideDialog) {
-                if (data.dialog) {
-                    const elementId = getElementId(data.dialog.id);
-                    const $dialog = document.querySelector(elementId);
-                    $dialog?.addEventListener('dialog-hide', () => {
-                        location.reload();
-                    });
-                } else {
-                    $b?.closest('.dialog').addEventListener('dialog-hide', () => {
-                        location.reload();
-                    });
+            if (responseData.redirectOnHideDialog || responseData.reloadOnHideDialog) {
+                if (responseData.reloadOnHideDialog) {
+                    console.warn(`Параметр reloadOnHideDialog - устаревший, используйте redirectOnHideDialog`);
                 }
-            }
 
-            if (data.hideDialog) {
-                if (data.dialog) {
-                    const elementId = getElementId(data.dialog.id);
-                    const $dialog = document.querySelector(elementId);
-                    if ($dialog) {
-                        hideDialog($dialog);
+                const $targetDialog = $dialog || $b?.closest('.dialog');
+                $targetDialog?.addEventListener('dialog-hide', () => {
+                    if (responseData.redirectOnHideDialog) {
+                        redirect(responseData.redirect);
+                    } else {
+                        location.reload();
                     }
-                } else if ($b) {
-                    hideDialog($b.closest('.dialog'));
+                });
+            }
+
+            if (responseData.hideDialog) {
+                const $targetDialog = $dialog || $b?.closest('.dialog');
+                if ($targetDialog) {
+                    hideDialog($targetDialog);
                 }
             }
 
-            if (data.sidebar) {
-                const elementId = getElementId(data.sidebar.id);
-                const $sidebar = document.querySelector(elementId);
+            if (responseData.sidebar) {
                 if ($sidebar) {
-                    $sidebar.innerHTML = data.sidebar.content;
-                    // Вызываем hideLoader так же как в основном компоненте - до функции show()
+                    $sidebar.innerHTML = responseData.sidebar.content;
+                    await showSidebar($sidebar, 'after');
+                    initRequestContent($sidebar);
                     if (loader) {
-                        hideLoader();
+                        hideLoader(0);
                         hideLoaderOnSuccess = false;
                     }
-                    await showSidebar($sidebar);
-                    initRequestContent($sidebar);
                 } else {
-                    console.warn(`Сайдбар с id ${elementId?.replace(/^#/, '')} не найден`);
+                    console.warn(`Сайдбар с id ${responseData.sidebar.id?.replace(/^#/, '')} не найден`);
                 }
             }
 
-            if (data.reloadOnHideSidebar) {
-                if (data.sidebar) {
-                    const elementId = getElementId(data.sidebar.id);
-                    const $sidebar = document.querySelector(elementId);
-                    $sidebar?.addEventListener('sidebar-hide', () => {
-                        location.reload();
-                    });
-                } else {
-                    $b?.closest('.sidebar').addEventListener('sidebar-hide', () => {
-                        location.reload();
-                    });
+            if (responseData.redirectOnHideSidebar || responseData.reloadOnHideSidebar) {
+                if (responseData.reloadOnHideSidebar) {
+                    console.warn(`Параметр reloadOnHideSidebar - устаревший, используйте redirectOnHideSidebar`);
                 }
-            }
 
-            if (data.hideSidebar) {
-                if (data.sidebar) {
-                    const elementId = getElementId(data.sidebar.id);
-                    const $sidebar = document.querySelector(elementId);
-                    if ($sidebar) {
-                        hideSidebar($sidebar);
+                const $targetSidebar = $sidebar || $b?.closest('.sidebar');
+                $targetSidebar?.addEventListener('sidebar-hide', () => {
+                    if (responseData.redirectOnHideSidebar) {
+                        redirect(responseData.redirect);
+                    } else {
+                        location.reload();
                     }
-                } else if ($b) {
-                    hideSidebar($b.closest('.sidebar'));
+                });
+            }
+
+            if (responseData.hideSidebar) {
+                const $targetSidebar = $sidebar || $b?.closest('.sidebar');
+                if ($targetSidebar) {
+                    hideSidebar($targetSidebar);
                 }
             }
 
-            if (data.trigger) {
-                const $trigger = document.querySelector(data.trigger);
+            if (responseData.trigger) {
+                const $trigger = document.querySelector(responseData.trigger);
                 if ($trigger) {
                     $trigger.click();
                 } else {
-                    console.warn(`Элемент с селектором ${data.trigger} не найден`);
-                    if (loader) {
-                        hideLoader();
-                    }
+                    console.warn(`Элемент с селектором ${responseData.trigger} не найден`);
                 }
             }
         }
 
         if (loader && hideLoaderOnSuccess) {
-            hideLoader(isString(data.redirect) ? 3000 : undefined);
+            hideLoader(loaderDelay);
         }
 
-        return data;
+        return responseData;
     } catch (error) {
         if (error.status === 401) {
             location.reload();

package/src/components/sidebar/index.js

@@ -2,64 +2,83 @@ import { cssVar } from '@advdominion/css-var';
 
 import { mm } from '../../utils/mm.js';
 import { hide as hideLoader } from '../loader/index.js';
-import { disableScroll, enableScroll, hide as hideOverlay, show as showOverlay } from '../overlay/index.js';
+import { disableScroll, enableScroll } from '../overlay/index.js';
 import { initRequestContent, request } from '../request/index.js';
 
-export const show = async ($b) => {
-    if ($b?.hidden) {
-        $b.dispatchEvent(new CustomEvent('sidebar-show'));
-
+const $sidebars = document.querySelectorAll('.sidebar');
+for (const $b of $sidebars) {
+    if (!$b.hidden) {
+        $b.classList.add('sidebar_backdrop');
+        // Отключаем скролл у body, если при загрузке на странице есть открытый сайдбар
         if ($b.id !== 'settings-generator') {
             disableScroll();
         }
-        $b.hidden = false;
-        showOverlay();
-
-        let width = mm('tablet-landscape-up')
-            ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
-            : $b.offsetWidth;
-        if ($b.classList.contains('sidebar_left')) {
-            width = width * -1;
-        }
-        await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
-            duration: cssVar('--duration-enter-m'),
-            easing: cssVar('--easing-deceleration'),
-        }).finished;
+    }
+}
 
-        $b.dispatchEvent(new CustomEvent('sidebar-shown'));
+export const show = async ($b, showBackdrop = 'before') => {
+    if (!$b?.hidden) {
+        return;
     }
 
-    return new Promise((resolve) => {
-        resolve();
-    });
-};
+    $b.dispatchEvent(new CustomEvent('sidebar-show'));
 
-export const hide = async ($b) => {
-    if ($b && !$b.hidden) {
-        $b.dispatchEvent(new CustomEvent('sidebar-hide'));
+    if (showBackdrop === 'before') {
+        $b.classList.add('sidebar_backdrop');
+    }
 
-        hideOverlay();
+    if ($b.id !== 'settings-generator') {
+        disableScroll();
+    }
+    $b.hidden = false;
 
-        let width = mm('tablet-landscape-up')
-            ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
-            : $b.offsetWidth;
-        if ($b.classList.contains('sidebar_left')) {
-            width = width * -1;
-        }
-        await $b.animate([{ transform: 'translateX(0px)' }, { transform: `translateX(${width}px)` }], {
-            duration: cssVar('--duration-leave-m'),
-            easing: cssVar('--easing-acceleration'),
-        }).finished;
+    let width = mm('tablet-landscape-up')
+        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
+        : $b.offsetWidth;
+    if ($b.classList.contains('sidebar_left')) {
+        width = width * -1;
+    }
+    await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
+        duration: cssVar('--duration-enter-m'),
+        easing: cssVar('--easing-deceleration'),
+    }).finished;
+
+    if (showBackdrop === 'after') {
+        $b.classList.add('sidebar_backdrop');
+    }
+
+    $b.dispatchEvent(new CustomEvent('sidebar-shown'));
+};
 
-        $b.hidden = true;
+export const hide = async ($b) => {
+    if (!$b || $b.hidden) {
         if ($b.id !== 'settings-generator') {
             enableScroll();
         }
+        return;
+    }
+
+    $b.dispatchEvent(new CustomEvent('sidebar-hide'));
+
+    $b.classList.remove('sidebar_backdrop');
+
+    let width = mm('tablet-landscape-up')
+        ? $b.offsetWidth + $b.querySelector('.sidebar__aside').offsetWidth
+        : $b.offsetWidth;
+    if ($b.classList.contains('sidebar_left')) {
+        width = width * -1;
+    }
+    await $b.animate([{ transform: 'translateX(0px)' }, { transform: `translateX(${width}px)` }], {
+        duration: cssVar('--duration-leave-m'),
+        easing: cssVar('--easing-acceleration'),
+    }).finished;
 
-        $b.dispatchEvent(new CustomEvent('sidebar-hidden'));
-    } else if ($b.id !== 'settings-generator') {
+    $b.hidden = true;
+    if ($b.id !== 'settings-generator') {
         enableScroll();
     }
+
+    $b.dispatchEvent(new CustomEvent('sidebar-hidden'));
 };
 
 export const get = async (id, url, showLoaderDelay) => {
@@ -70,9 +89,9 @@ export const get = async (id, url, showLoaderDelay) => {
             const $b = document.querySelector(elementId);
             if ($b) {
                 $b.innerHTML = content;
-                hideLoader();
-                await show($b);
+                await show($b, 'after');
                 initRequestContent($b);
+                hideLoader(0);
             } else {
                 console.error(`Сайдбар с id ${elementId} не найден`);
             }
@@ -83,17 +102,6 @@ export const get = async (id, url, showLoaderDelay) => {
     }
 };
 
-const $sidebars = document.querySelectorAll('.sidebar');
-for (const $el of $sidebars) {
-    // Отключаем скролл у body, если при загрузке на странице есть открытый сайдбар
-    if (!$el.hidden) {
-        if ($el.id !== 'settings-generator') {
-            disableScroll();
-        }
-        showOverlay();
-    }
-}
-
 document.body.addEventListener('click', (event) => {
     const { target } = event;
     if (target.closest('[data-sidebar]')) {

package/src/components/sidebar/index.scss

@@ -3,33 +3,41 @@
 $b: '.sidebar';
 
 #{$b} {
-    background-color: $sidebar-bg;
     height: calc(100% - var(--tab-bar-height));
     position: fixed;
-    right: 0;
+    left: 0;
     top: 0;
-    width: calc(100% - 56px);
+    width: 100%;
     z-index: 910;
+    display: flex;
+    justify-content: flex-end;
 
     @media (--tablet-landscape-up) {
         height: 100%;
-        width: 320px;
     }
 
     &_left {
-        left: 0;
-        right: auto;
+        justify-content: flex-start;
     }
 
     &_l {
-        @media (--tablet-landscape-up) {
-            width: 640px;
-        }
     }
 
     &_xl {
+    }
+
+    &_backdrop {
         @media (--tablet-landscape-up) {
-            width: 960px;
+            background-color: $sidebar-backdrop-color;
+        }
+
+        // Т. к. .loader исчезает постепенно, с таким же эффектом показываем оверлей, чтобы не было мерцания
+        body:has(.loader_active) & {
+            @media (--tablet-landscape-up) {
+                transition-duration: var(--duration-leave-m);
+                transition-property: background-color;
+                transition-timing-function: var(--easing-standard);
+            }
         }
     }
 
@@ -41,10 +49,42 @@ $b: '.sidebar';
         right: 100%;
         top: 0;
 
+        @media (--tablet-landscape-up) {
+            right: 320px;
+        }
+
+        #{$b}_l & {
+            @media (--tablet-landscape-up) {
+                right: 640px;
+            }
+        }
+
+        #{$b}_xl & {
+            @media (--tablet-landscape-up) {
+                right: 960px;
+            }
+        }
+
         #{$b}_left & {
             align-items: flex-start;
             left: 100%;
             right: auto;
+
+            @media (--tablet-landscape-up) {
+                left: 320px;
+            }
+        }
+
+        #{$b}_left#{$b}_l & {
+            @media (--tablet-landscape-up) {
+                left: 640px;
+            }
+        }
+
+        #{$b}_left#{$b}_xl & {
+            @media (--tablet-landscape-up) {
+                left: 960px;
+            }
         }
     }
 
@@ -144,6 +184,24 @@ $b: '.sidebar';
         height: 100%;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
+        width: calc(100% - 56px);
+        background-color: $sidebar-bg;
+
+        @media (--tablet-landscape-up) {
+            width: 320px;
+        }
+
+        #{$b}_l & {
+            @media (--tablet-landscape-up) {
+                width: 640px;
+            }
+        }
+
+        #{$b}_xl & {
+            @media (--tablet-landscape-up) {
+                width: 960px;
+            }
+        }
 
         #{$b}_catalog & {
             @media (--tablet-landscape-up) {

package/src/variables.scss

@@ -940,6 +940,7 @@ $dialog-title-desktop-font: ('font-size': $font-size-2xl) !default;
 
 // .sidebar
 
+$sidebar-backdrop-color: $backdrop-color !default;
 $sidebar-bg: $bg-color-tertiary !default;
 
 $sidebar-button-bg: $color-grey-90 !default;