@formixru/b2b-ui 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## v2.1.0
+
+- В Request добавлены `reloadOnHideSidebar`/`hideSidebar`, а так же параметр `hideLoaderOnSuccess`
+- В Request добавлена функция `__FORMIX__REQUEST__INIT_CONTENT` вместо `__FORMIX__FORM__INIT_CONTENT`/`__FORMIX__DIALOG__INIT_CONTENT`/`__FORMIX__SIDEBAR_INIT_CONTENT`
+- Поддержка id диалогового окна или сайдбара как c `#`, так и без неё
+
+## v2.0.1
+
+- Исправлена работа `Request`
+- Исправлена работа `cssVar`
+
 ## v2.0.0
 
 - Добавлен новый компонент - универсальный AJAX-контроллер `Request`, который используется внутри `Dialog`/`Form`/`Sidebar` и может использоваться как отдельный компонент

package/package.json

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

package/src/components/dialog/index.js

@@ -2,8 +2,9 @@ import _throttle from 'lodash-es/throttle.js';
 
 import { cssVar } from '../../helpers/css-var.js';
 import { mm } from '../../helpers/mm.js';
+import { hide as hideLoader } from '../loader/index.js';
 import { disableScroll, enableScroll } from '../overlay/index.js';
-import { request } from '../request/index.js';
+import { initRequestContent, request } from '../request/index.js';
 
 const isDialogOverflow = ($b) => {
     return $b.scrollHeight > $b.clientHeight;
@@ -42,7 +43,7 @@ export const init = ($b) => {
 };
 
 export const show = async ($b) => {
-    if ($b && $b.hidden) {
+    if ($b?.hidden) {
         $b.dispatchEvent(new CustomEvent('dialog-show'));
 
         disableScroll();
@@ -88,35 +89,30 @@ export const hide = async ($b) => {
 
         $b.hidden = true;
         enableScroll();
+
         $b.dispatchEvent(new CustomEvent('dialog-hidden'));
     } else {
         enableScroll();
     }
 };
 
-export const initDialogContent = ($b) => {
-    try {
-        window.__FORMIX__DIALOG__INIT_CONTENT($b);
-    } catch {
-        console.warn('Функция __FORMIX__DIALOG__INIT_CONTENT не установлена');
-    }
-};
-
 export const get = async (id, url) => {
+    const elementId = id.startsWith('#') ? id : `#${id}`;
     if (url && url !== '#') {
-        const { content } = await request({ url });
+        const { content } = await request({ url, hideLoaderOnSuccess: false });
         if (content) {
-            const $b = document.querySelector(id);
+            const $b = document.querySelector(elementId);
             if ($b) {
                 $b.querySelector('.dialog__container').innerHTML = content;
                 await show($b);
-                initDialogContent($b);
+                initRequestContent($b);
+                hideLoader();
             } else {
-                console.error(`Диалоговое окно с id ${id} не найдено`);
+                console.error(`Диалоговое окно с id ${elementId} не найдено`);
             }
         }
     } else {
-        const $b = document.querySelector(id);
+        const $b = document.querySelector(elementId);
         show($b);
     }
 };

package/src/components/form/index.js

@@ -2,16 +2,7 @@
 
 import { getSmartCaptcha } from '../../helpers/get-smart-captcha.js';
 import { scrollTo } from '../../helpers/scroll-to.js';
-import { initDialogContent } from '../dialog/index.js';
-import { request } from '../request/index.js';
-
-const initFormContent = ($b) => {
-    try {
-        window.__FORMIX__FORM__INIT_CONTENT($b);
-    } catch {
-        console.warn('Функция __FORMIX__FORM__INIT_CONTENT не установлена');
-    }
-};
+import { initRequestContent, request } from '../request/index.js';
 
 export const send = async ($b, url, method, data) => {
     const { success, content } = await request({
@@ -27,7 +18,7 @@ export const send = async ($b, url, method, data) => {
         const $dialog = $b.closest('.dialog');
         if ($dialog) {
             $dialog.querySelector('.dialog__container').innerHTML = content;
-            initDialogContent($dialog);
+            initRequestContent($dialog);
             setTimeout(() => {
                 scrollToError($dialog);
             });
@@ -37,7 +28,7 @@ export const send = async ($b, url, method, data) => {
             const $form = $parent.querySelector('.form');
             if ($form) {
                 init($form);
-                initFormContent($form);
+                initRequestContent($form);
                 setTimeout(() => {
                     scrollToError($form);
                 });

package/src/components/request/index.js

@@ -3,11 +3,27 @@
 import { is } from '@advdominion/is';
 
 import { errorHandler } from '../../helpers/error-handler.js';
-import { hide as hideDialog, initDialogContent, show as showDialog } from '../dialog/index.js';
+import { hide as hideDialog, show as showDialog } from '../dialog/index.js';
 import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../loader/index.js';
-import { initSidebarContent, show as showSidebar } from '../sidebar/index.js';
+import { hide as hideSidebar, show as showSidebar } from '../sidebar/index.js';
 
-export const request = async ({ $b, url = '', method = 'GET', data = {}, loader = true, showLoaderDelay }) => {
+export const initRequestContent = ($b) => {
+    try {
+        window.__FORMIX__REQUEST__INIT_CONTENT($b);
+    } catch {
+        console.warn('Функция __FORMIX__REQUEST__INIT_CONTENT не установлена');
+    }
+};
+
+export const request = async ({
+    $b,
+    url = '',
+    method = 'GET',
+    data = {},
+    loader = true,
+    showLoaderDelay,
+    hideLoaderOnSuccess = true,
+}) => {
     url = new URL(url, location.origin);
     const options = {
         method,
@@ -44,11 +60,15 @@ export const request = async ({ $b, url = '', method = 'GET', data = {}, loader
         if (!response.ok) {
             throw response;
         }
-        const data = await response.json().catch(async () => {
+
+        const raw = await response.text();
+        let data;
+        try {
+            data = JSON.parse(raw);
+        } catch {
             console.warn('Ошибка при попытке преобразования ответа в JSON');
-            const content = await response.text();
-            return { content };
-        });
+            data = { content: raw };
+        }
 
         if (is(data.redirect, 'String')) {
             if (data.redirect) {
@@ -65,7 +85,7 @@ export const request = async ({ $b, url = '', method = 'GET', data = {}, loader
             }
         } else {
             try {
-                await window.__FORMIX__REQ__INTERCEPT_DATA(data);
+                await window.__FORMIX__REQUEST__INTERCEPT_DATA(data);
             } catch {
                 console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
             }
@@ -74,7 +94,7 @@ export const request = async ({ $b, url = '', method = 'GET', data = {}, loader
                 if ($dialog) {
                     $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
                     await showDialog($dialog);
-                    initDialogContent($dialog);
+                    initRequestContent($dialog);
                 } else {
                     console.error(`Диалоговое окно с id ${data.trigger} не найдено`);
                 }
@@ -106,11 +126,33 @@ export const request = async ({ $b, url = '', method = 'GET', data = {}, loader
                 if ($sidebar) {
                     $sidebar.innerHTML = data.sidebar.content;
                     await showSidebar($sidebar);
-                    initSidebarContent($sidebar);
+                    initRequestContent($sidebar);
                 } else {
                     console.error(`Сайдбар с id ${data.trigger} не найден`);
                 }
             }
+            if (data.reloadOnHideSidebar) {
+                if (data.sidebar) {
+                    const $sidebar = document.querySelector(data.sidebar.id);
+                    $sidebar?.addEventListener('sidebar-hide', () => {
+                        location.reload();
+                    });
+                } else {
+                    $b?.closest('.sidebar').addEventListener('sidebar-hide', () => {
+                        location.reload();
+                    });
+                }
+            }
+            if (data.hideSidebar) {
+                if (data.sidebar) {
+                    const $sidebar = document.querySelector(data.sidebar.id);
+                    if ($sidebar) {
+                        hideSidebar($sidebar);
+                    }
+                } else if ($b) {
+                    hideSidebar($b.closest('.sidebar'));
+                }
+            }
             if (data.trigger) {
                 const $trigger = document.querySelector(data.trigger);
                 if ($trigger) {
@@ -122,7 +164,13 @@ export const request = async ({ $b, url = '', method = 'GET', data = {}, loader
                     }
                 }
             }
-            if (!(data.reloadOnHideDialog && data.hideDialog) && (!data.trigger || data.hideDialog) && loader) {
+            if (
+                !(data.reloadOnHideDialog && data.hideDialog) &&
+                !(data.reloadOnHideSidebar && data.hideSidebar) &&
+                (!data.trigger || data.hideDialog || data.hideSidebar) &&
+                loader &&
+                hideLoaderOnSuccess
+            ) {
                 hideLoader();
             }
         }
@@ -151,7 +199,7 @@ document.body.addEventListener('click', (event) => {
         }
         if ($el.dataset.requestData) {
             try {
-                options.method = JSON.parse($el.dataset.requestData);
+                options.data = JSON.parse($el.dataset.requestData);
             } catch {
                 console.warn('Ошибка при попытке преобразования значения data-request-data в JSON');
             }

package/src/components/sidebar/index.js

@@ -1,67 +1,83 @@
 import { cssVar } from '../../helpers/css-var.js';
 import { mm } from '../../helpers/mm.js';
+import { hide as hideLoader } from '../loader/index.js';
 import { disableScroll, enableScroll, hide as hideOverlay, show as showOverlay } from '../overlay/index.js';
-import { request } from '../request/index.js';
+import { initRequestContent, request } from '../request/index.js';
 
 export const show = async ($b) => {
-    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;
+    if ($b?.hidden) {
+        $b.dispatchEvent(new CustomEvent('sidebar-show'));
+
+        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'));
     }
-    await $b.animate([{ transform: `translateX(${width}px)` }, { transform: 'translateX(0px)' }], {
-        duration: cssVar('--duration-enter-m'),
-        easing: cssVar('--easing-deceleration'),
-    }).finished;
+
+    return new Promise((resolve) => {
+        resolve();
+    });
 };
 
 export const hide = async ($b) => {
-    hideOverlay();
-    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.hidden = true;
-    if ($b.id !== 'settings-generator') {
-        enableScroll();
-    }
-};
+    if ($b && !$b.hidden) {
+        $b.dispatchEvent(new CustomEvent('sidebar-hide'));
 
-export const initSidebarContent = ($b) => {
-    try {
-        window.__FORMIX__SIDEBAR__INIT_CONTENT($b);
-    } catch {
-        console.warn('Функция __FORMIX__SIDEBAR__INIT_CONTENT не установлена');
+        hideOverlay();
+
+        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.hidden = true;
+        if ($b.id !== 'settings-generator') {
+            enableScroll();
+        }
+
+        $b.dispatchEvent(new CustomEvent('sidebar-hidden'));
+    } else if ($b.id !== 'settings-generator') {
+        enableScroll();
     }
 };
 
 export const get = async (id, url, showLoaderDelay) => {
+    const elementId = id.startsWith('#') ? id : `#${id}`;
     if (url && url !== '#') {
-        const { content } = await request({ url, showLoaderDelay });
+        const { content } = await request({ url, showLoaderDelay, hideLoaderOnSuccess: false });
         if (content) {
-            const $b = document.querySelector(id);
+            const $b = document.querySelector(elementId);
             if ($b) {
                 $b.innerHTML = content;
                 await show($b);
-                initSidebarContent($b);
+                initRequestContent($b);
+                hideLoader();
             } else {
-                console.error(`Сайдбар с id ${id} не найден`);
+                console.error(`Сайдбар с id ${elementId} не найден`);
             }
         }
     } else {
-        const $b = document.querySelector(id);
+        const $b = document.querySelector(elementId);
         show($b);
     }
 };

package/src/helpers/css-var.js

@@ -1,8 +1,9 @@
 export const cssVar = (name, element = document.documentElement) => {
     const value = window.getComputedStyle(element).getPropertyValue(name);
-    const durationRegExp = new RegExp(/(^[\d.]+)s$/);
+    const durationRegExp = /(^[\d.]+)(ms|s)$/;
     if (durationRegExp.test(value)) {
-        return durationRegExp.exec(value)[1] * 1000;
+        const [, numericValue, unit] = durationRegExp.exec(value);
+        return unit === 's' ? numericValue * 1000 : Number(numericValue);
     }
     return value;
 };

package/src/helpers/request.js

@@ -1,126 +0,0 @@
-/* globals BX */
-
-import { is } from '@advdominion/is';
-
-import { hide as hideDialog, initDialogContent, show as showDialog } from '../components/dialog/index.js';
-import { clearLoaderTimeout, hide as hideLoader, show as showLoader } from '../components/loader.js';
-import { initSidebarContent, show as showSidebar } from '../components/sidebar/index.js';
-import { errorHandler } from './error-handler.js';
-
-export const req = async ({ $b, url = '', method = 'GET', data = {}, loader = true, showLoaderDelay }) => {
-    url = new URL(url, location.origin);
-    const options = {
-        method,
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-Session-Id': BX.message('bitrix_sessid'),
-        },
-    };
-    if (method === 'GET') {
-        for (const [name, value] of data) {
-            url.searchParams.append(name, value);
-        }
-    } else {
-        options.body = data;
-    }
-    if (loader) {
-        showLoader(showLoaderDelay);
-    }
-    try {
-        const response = await fetch(url, options);
-        if (!response.ok) {
-            throw response;
-        }
-        const data = await response.json().catch(async () => {
-            console.warn('Ошибка при попытке преобразования ответа в JSON.');
-            const content = await response.text();
-            return { content };
-        });
-
-        if (is(data.redirect, 'String')) {
-            if (data.redirect) {
-                location.assign(data.redirect);
-                if (data.redirect.startsWith('tg:')) {
-                    if (loader) {
-                        hideLoader();
-                    }
-                } else {
-                    clearLoaderTimeout();
-                }
-            } else {
-                location.reload();
-            }
-        } else {
-            try {
-                await window.__FORMIX__REQ__INTERCEPT_DATA(data);
-            } catch {
-                console.warn('Функция __FORMIX__REQUEST__INTERCEPT_DATA не установлена');
-            }
-            if (data.dialog) {
-                const $dialog = document.querySelector(data.dialog.id);
-                if ($dialog) {
-                    $dialog.querySelector('.dialog__container').innerHTML = data.dialog.content;
-                    await showDialog($dialog);
-                    initDialogContent($dialog);
-                } else {
-                    console.error(`Диалоговое окно с id ${data.trigger} не найдено`);
-                }
-            }
-            if (data.reloadOnHideDialog) {
-                if (data.dialog) {
-                    const $dialog = document.querySelector(data.dialog.id);
-                    $dialog?.addEventListener('dialog-hide', () => {
-                        location.reload();
-                    });
-                } else {
-                    $b?.closest('.dialog').addEventListener('dialog-hide', () => {
-                        location.reload();
-                    });
-                }
-            }
-            if (data.hideDialog) {
-                if (data.dialog) {
-                    const $dialog = document.querySelector(data.dialog.id);
-                    if ($dialog) {
-                        hideDialog($dialog);
-                    }
-                } else if ($b) {
-                    hideDialog($b.closest('.dialog'));
-                }
-            }
-            if (data.sidebar) {
-                const $sidebar = document.querySelector(data.sidebar.id);
-                if ($sidebar) {
-                    $sidebar.innerHTML = data.sidebar.content;
-                    await showSidebar($sidebar);
-                    initSidebarContent($sidebar);
-                } else {
-                    console.error(`Сайдбар с id ${data.trigger} не найден`);
-                }
-            }
-            if (data.trigger) {
-                const $trigger = document.querySelector(data.trigger);
-                if ($trigger) {
-                    $trigger?.click();
-                    console.error(`Элемент с селектором ${data.trigger} не найден`);
-                } else if (loader) {
-                    hideLoader();
-                }
-            }
-            if (!(data.reloadOnHideDialog && data.hideDialog) && (!data.trigger || data.hideDialog) && loader) {
-                hideLoader();
-            }
-        }
-
-        return data;
-    } catch (error) {
-        if (error.status === 401) {
-            location.reload();
-        } else {
-            if (loader) {
-                hideLoader();
-            }
-            errorHandler(error);
-        }
-    }
-};