@formixru/b2b-ui 1.0.0

package/src/components/wysiwyg/index.scss

@@ -0,0 +1,344 @@
+@use '../../variables' as *;
+
+$b: '.wysiwyg';
+$block: true !default;
+
+@mixin wysiwyg() {
+    color: $wysiwyg-color;
+
+    @include font($wysiwyg-font);
+
+    a:not(.link, .button) {
+        color: $wysiwyg-link-color;
+        text-decoration: none;
+        transition-duration: var(--duration-micro-s);
+        transition-property: color;
+        transition-timing-function: var(--easing-standard);
+
+        @include ul-solid($wysiwyg-link-color);
+
+        &:hover,
+        &:focus-visible {
+            color: $wysiwyg-link-active-color;
+
+            @include ul-solid($wysiwyg-link-active-color);
+        }
+    }
+
+    h1,
+    #{$b}__h1 {
+        color: $wysiwyg-h1-color;
+
+        @include font($wysiwyg-h1-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($wysiwyg-h1-desktop-font);
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 8;
+        }
+    }
+
+    h2,
+    #{$b}__h2 {
+        color: $wysiwyg-h2-color;
+
+        @include font($wysiwyg-h2-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($wysiwyg-h2-desktop-font);
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+
+            @media (--tablet-landscape-up) {
+                margin-top: 4px * 12;
+            }
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+
+            @media (--tablet-landscape-up) {
+                margin-bottom: 4px * 8;
+            }
+        }
+    }
+
+    h3,
+    #{$b}__h3 {
+        color: $wysiwyg-h3-color;
+
+        @include font($wysiwyg-h3-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($wysiwyg-h3-desktop-font);
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+        }
+    }
+
+    h4,
+    #{$b}__h4 {
+        color: $wysiwyg-h4-color;
+
+        @include font($wysiwyg-h4-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($wysiwyg-h4-desktop-font);
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+        }
+    }
+
+    p {
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+        }
+    }
+
+    ul {
+        list-style-type: disc;
+        margin-left: 1em;
+
+        ul,
+        ol {
+            padding-left: 1em;
+        }
+
+        ul {
+            list-style-type: circle;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+        }
+
+        li {
+        }
+    }
+
+    ol {
+        counter-reset: list;
+
+        ul,
+        ol {
+            padding-left: 1em;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 4;
+        }
+
+        li,
+        li > ol > li {
+            &::before {
+                content: counters(list, '.') '. ';
+                counter-increment: list;
+                font-weight: bold;
+            }
+        }
+    }
+
+    img,
+    svg {
+        border-radius: $wysiwyg-image-radius;
+        display: block;
+        max-width: 100%;
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 8;
+        }
+
+        &#{$b}__float {
+            &_right {
+                @media (--tablet-landscape-up) {
+                    float: right;
+                    margin-bottom: 0;
+                    margin-left: 4px * 6;
+                    margin-top: 0;
+                }
+            }
+
+            &_left {
+                @media (--tablet-landscape-up) {
+                    float: left;
+                    margin-bottom: 0;
+                    margin-right: 4px * 6;
+                    margin-top: 0;
+                }
+            }
+        }
+
+        &#{$b}__fluid-image {
+            width: 100%;
+        }
+    }
+
+    #{$b}__table {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 8;
+        }
+
+        table {
+            width: 100%;
+
+            @include font($wysiwyg-table-font);
+        }
+
+        th,
+        td {
+            padding: 4px * 4 4px * 3;
+
+            &:first-child {
+                padding-left: 4px * 6;
+            }
+
+            &:last-child {
+                padding-right: 4px * 6;
+                text-align: right;
+            }
+        }
+
+        thead {
+            th {
+                background-color: $wysiwyg-table-header-bg;
+                color: $wysiwyg-table-header-color;
+                text-align: left;
+
+                @include font($wysiwyg-table-header-font);
+
+                &:first-child {
+                    border-bottom-left-radius: $wysiwyg-table-radius;
+                    border-top-left-radius: $wysiwyg-table-radius;
+                }
+
+                &:last-child {
+                    border-bottom-right-radius: $wysiwyg-table-radius;
+                    border-top-right-radius: $wysiwyg-table-radius;
+                }
+            }
+        }
+
+        tbody {
+            td {
+                border-bottom: $wysiwyg-table-separator-width solid $wysiwyg-table-separator-color;
+            }
+        }
+
+        &_zebra {
+            background-color: $wysiwyg-table-zebra-bg;
+            border-radius: $wysiwyg-table-radius;
+            box-shadow: $wysiwyg-table-zebra-shadow;
+
+            thead {
+                th {
+                    &:first-child {
+                        border-bottom-left-radius: 0;
+                    }
+
+                    &:last-child {
+                        border-bottom-right-radius: 0;
+                    }
+                }
+            }
+
+            tbody {
+                tr {
+                    &:nth-child(even) {
+                        td {
+                            background-color: $wysiwyg-table-zebra-td-bg;
+                        }
+                    }
+
+                    &:last-child {
+                        td {
+                            &:first-child {
+                                border-bottom-left-radius: $wysiwyg-table-radius;
+                            }
+
+                            &:last-child {
+                                border-bottom-right-radius: $wysiwyg-table-radius;
+                            }
+                        }
+                    }
+                }
+
+                td {
+                    border-bottom-style: none;
+                }
+            }
+        }
+    }
+
+    #{$b}__alert {
+        background-color: $wysiwyg-alert-bg;
+        border-radius: $wysiwyg-alert-radius;
+        color: $wysiwyg-alert-color;
+        padding-top: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            padding: 4px * 6 4px * 8;
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 8;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 4px * 8;
+        }
+
+        &_warning {
+            background-color: $wysiwyg-alert-warning-bg;
+        }
+
+        > * {
+            color: $wysiwyg-alert-color;
+        }
+
+        a:not(.link, .button) {
+            color: $wysiwyg-alert-link-color;
+
+            @include ul-solid($wysiwyg-alert-link-color);
+
+            &:hover,
+            &:focus-visible {
+                color: $wysiwyg-alert-active-link-color;
+
+                @include ul-solid($wysiwyg-alert-active-link-color);
+            }
+        }
+    }
+}
+
+@if $block == true {
+    #{$b} {
+        @include wysiwyg;
+    }
+}

package/src/helpers/css-var.js

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

package/src/helpers/error-handler.js

@@ -0,0 +1,61 @@
+import { is } from '@advdominion/is';
+
+import { show as showDialog } from '../components/dialog/index.js';
+
+export const errorHandler = async (error) => {
+    if (!document.querySelector('#error-handler')) {
+        document.body.insertAdjacentHTML(
+            'beforeend',
+            `
+                <div id="error-handler" class="dialog dialog_s" hidden>
+                    <div class="dialog__wrapper">
+                        <button class="dialog__close" type="button" data-dialog-close>
+                            <svg class="dialog__close-icon"><use href="${window.ICONS_PATH}#close" /></svg>
+                        </button>
+                        <div class="dialog__container">
+                            <div class="dialog__title">Произошла ошибка</div>
+                            <div class="dialog__descr wysiwyg"></div>
+                            <div class="dialog__action-list">
+                                <button class="dialog__action-item button" type="button" data-dialog-close>Закрыть</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `,
+        );
+    }
+    const $dialog = document.querySelector('#error-handler');
+    let content = '<p>Не удаётся выполнить действие. Перезагрузите страницу или попробуйте позже</p>';
+    if (is(error, 'Error')) {
+        content += `<pre>${error.toString()}</pre>`;
+    } else if (is(error, 'Response')) {
+        content = `<pre>${JSON.stringify(
+            {
+                url: error.url,
+                status: error.status,
+                statusText: error.statusText,
+                body: (await error.json()) || (await error.text()) || '',
+            },
+            undefined,
+            4,
+        )}</pre>`;
+    }
+    const $descr = $dialog.querySelector('.dialog__descr');
+    $descr.innerHTML = content;
+    $descr.style = `
+        overflow: auto;
+    `;
+    $dialog.addEventListener(
+        'dialog-hidden',
+        () => {
+            $descr.style = `
+                overflow: '';
+            `;
+        },
+        {
+            once: true,
+        },
+    );
+    showDialog($dialog);
+    console.error(error);
+};

package/src/helpers/get-smart-captcha.js

@@ -0,0 +1,7 @@
+export const getSmartCaptcha = () => {
+    window.smartCaptcha = {};
+    const script = document.createElement('script');
+    script.src = 'https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=initSmartCaptcha';
+    script.async = true;
+    document.body.append(script);
+};

package/src/helpers/is-in-viewport.js

@@ -0,0 +1,10 @@
+export const isInViewport = ($el, offset = {}) => {
+    const rect = $el.getBoundingClientRect();
+    offset = Object.assign({ top: 0, left: 0, bottom: 0, right: 0 }, offset);
+    return (
+        rect.top >= offset.top &&
+        rect.left >= offset.left &&
+        rect.bottom <= window.innerHeight - offset.bottom &&
+        rect.right <= window.innerWidth - offset.right
+    );
+};

package/src/helpers/mm.js

@@ -0,0 +1,52 @@
+import { cssVar } from './css-var.js';
+
+/*
+
+Использование:
+
+mm('tablet-landscape-up')
+mm('tablet-landscape-only')
+
+*/
+
+export const devices = ['phone', 'tablet-portrait', 'tablet-landscape', 'desktop', 'big-desktop'];
+
+export const deviceBreakpoint = (device, returnDeviceIndex = false) => {
+    const deviceIndex = devices.indexOf(device);
+    if (deviceIndex === -1) {
+        throw new Error(`Адаптивной точки ${device} не существует`);
+    }
+    const breakpoint = Number.parseInt(cssVar(`--breakpoint-${device}`));
+    if (returnDeviceIndex) {
+        return {
+            deviceIndex,
+            breakpoint,
+        };
+    }
+    return breakpoint;
+};
+
+export const mm = (query) => {
+    query = query.split('-');
+    const device = query.length > 2 ? `${query[0]}-${query[1]}` : query[0];
+    const condition = query.length > 2 ? query[2] : query[1];
+    const { breakpoint, deviceIndex } = deviceBreakpoint(device, true);
+    let width;
+    switch (condition) {
+        case 'only': {
+            if (deviceIndex === devices.length - 1) {
+                width = `(min-width: ${breakpoint}px)`;
+            } else {
+                const nextDevice = devices[deviceIndex + 1];
+                const nextBreakpoint = Number.parseInt(cssVar(`--breakpoint-${nextDevice}`));
+                width = `(min-width: ${breakpoint}px) and (max-width: ${nextBreakpoint - 1}px)`;
+            }
+            break;
+        }
+        case 'up': {
+            width = `(min-width: ${breakpoint}px)`;
+            break;
+        }
+    }
+    return window.matchMedia(width).matches;
+};

package/src/helpers/scroll-to.js

@@ -0,0 +1,21 @@
+export const scrollTo = ($el, offset = 0) => {
+    return new Promise((resolve) => {
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                observer.disconnect();
+                setTimeout(() => {
+                    resolve();
+                }, 500);
+            }
+        });
+        observer.observe($el);
+
+        const elementTop = $el.getBoundingClientRect().top + window.pageYOffset;
+        const offsetValue = (window.innerHeight * offset) / 100;
+
+        window.scrollTo({
+            top: elementTop - offsetValue,
+            behavior: 'smooth',
+        });
+    });
+};