Publish

- @advdominion/tooltip@7.0.2

packages/lightbox-gallery/README.md

@@ -0,0 +1,98 @@
+# lightbox-gallery
+
+## Требования
+
+- [Swiper](https://github.com/nolimits4web/swiper)
+
+## Подключение и настройка
+
+### HTML
+
+```html
+<div id="list">
+    <a href="/example.jpg">...</a>
+    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
+    <a href="https://vkvideo.ru/video-101556650_456239825">...</a>
+</div>
+```
+
+### Стили
+
+```scss
+@use '@advdominion/lightbox-gallery/styles.css';
+```
+
+### Минимальные настройки
+
+```js
+import { gallery } from '@advdominion/lightbox-gallery';
+
+gallery(document.querySelector('#list'), {
+    icons: {
+        close: `/icons.svg#close`,
+    },
+});
+```
+
+### Все настройки
+
+```js
+import { gallery } from '@advdominion/lightbox-gallery';
+
+gallery(document.querySelector('#list'), {
+    single: false,
+    swiper: {
+        speed: 300,
+        pagination: {
+            el: '.swiper-pagination',
+        },
+        navigation: {
+            prevEl: '.swiper-button-prev',
+            nextEl: '.swiper-button-next',
+        },
+    },
+    pagination: `
+        <div class="swiper-pagination"></div>
+    `,
+    navigation: `
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+    `,
+    animation: {
+        show: {
+            duration: 500,
+            easing: 'linear',
+        },
+        hide: {
+            duration: 500,
+            easing: 'linear',
+        },
+    },
+    icons: {
+        close: `/icons.svg#close`,
+    },
+});
+```
+
+### Одиночный элемент
+
+```js
+import { gallery } from '@advdominion/lightbox-gallery';
+
+gallery(document.querySelector('#list > a:first-child'), {
+    single: true,
+    animation: {
+        show: {
+            duration: 500,
+            easing: 'linear',
+        },
+        hide: {
+            duration: 500,
+            easing: 'linear',
+        },
+    },
+    icons: {
+        close: `/icons.svg#close`,
+    },
+});
+```

packages/lightbox-gallery/index.js

@@ -0,0 +1,424 @@
+/* globals GalleryYTPlayer, YT, GalleryVKPlayer, VK */
+
+import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
+
+const getYTPlayer = () => {
+        const script = document.createElement('script');
+        script.src = 'https://www.youtube.com/player_api';
+        script.async = true;
+        document.body.append(script);
+    },
+    getVKPlayer = () => {
+        const script = document.createElement('script');
+        script.src = 'https://vk.com/js/api/videoplayer.js';
+        script.async = true;
+        document.body.append(script);
+    },
+    playVideo = (slide) => {
+        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
+            vk = slide.querySelector('.advdominion-lg__video_vk'),
+            rt = slide.querySelector('.advdominion-lg__video_rt');
+
+        if (youtube) {
+            if (slide.YTPlayer) {
+                if (slide.classList.contains('swiper-slide-active')) {
+                    slide.YTPlayer.playVideo();
+                }
+            } else if (window.YT) {
+                if (GalleryYTPlayer.state) {
+                    slide.YTPlayer = new YT.Player(youtube, {
+                        videoId: youtube.dataset.id,
+                        events: {
+                            onReady(event) {
+                                if (slide.classList.contains('swiper-slide-active')) {
+                                    event.target.playVideo();
+                                }
+                            },
+                        },
+                    });
+                } else {
+                    GalleryYTPlayer.addListener(() => {
+                        playVideo(slide);
+                    });
+                }
+            } else {
+                getYTPlayer();
+                GalleryYTPlayer.addListener(() => {
+                    playVideo(slide);
+                });
+            }
+        } else if (vk) {
+            if (slide.VKPlayer) {
+                if (slide.classList.contains('swiper-slide-active')) {
+                    slide.VKPlayer.play();
+                }
+            } else if (window.VK?.VideoPlayer) {
+                if (GalleryVKPlayer.state) {
+                    slide.VKPlayer = VK.VideoPlayer(vk);
+                    slide.VKPlayer.on('inited', () => {
+                        if (slide.classList.contains('swiper-slide-active')) {
+                            slide.VKPlayer.play();
+                        }
+                    });
+                } else {
+                    GalleryVKPlayer.addListener(() => {
+                        playVideo(slide);
+                    });
+                }
+            } else {
+                getVKPlayer();
+                GalleryVKPlayer.addListener(() => {
+                    playVideo(slide);
+                });
+            }
+        } else if (rt) {
+            const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1],
+                checkInterval = setInterval(() => {
+                    if (window.GalleryRTPlayer) {
+                        if (window.GalleryRTPlayer.has(videoId)) {
+                            clearInterval(checkInterval);
+                            if (slide.classList.contains('swiper-slide-active')) {
+                                rt.contentWindow.postMessage(
+                                    JSON.stringify({
+                                        type: 'player:play',
+                                        data: {},
+                                    }),
+                                    '*',
+                                );
+                            }
+                        }
+                    } else {
+                        clearInterval(checkInterval);
+                    }
+                }, 100);
+            slide.checkInterval = checkInterval;
+        }
+    },
+    pauseVideo = (slide) => {
+        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
+            vk = slide.querySelector('.advdominion-lg__video_vk'),
+            rt = slide.querySelector('.advdominion-lg__video_rt');
+
+        if (youtube && slide.YTPlayer) {
+            slide.YTPlayer.pauseVideo();
+        } else if (vk && slide.VKPlayer) {
+            slide.VKPlayer.pause();
+        } else if (rt) {
+            rt.contentWindow.postMessage(
+                JSON.stringify({
+                    type: 'player:pause',
+                    data: {},
+                }),
+                '*',
+            );
+        }
+    },
+    setVideoSize = (gallery) => {
+        const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
+        items[0].style.cssText = '';
+        let height = (items[0].getBoundingClientRect().width * 9) / 16,
+            width = '';
+        if (height > items[0].getBoundingClientRect().height) {
+            height = items[0].getBoundingClientRect().height;
+            width = `${(height * 16) / 9}px`;
+        }
+        for (const item of items) {
+            item.style.cssText = `
+            height: ${height}px;
+            width: ${width};
+        `;
+        }
+    },
+    hide = async (duration = 500, easing = 'linear') => {
+        const gallery = document.body.querySelector('.advdominion-lg');
+
+        await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
+            duration,
+            easing,
+        }).finished;
+
+        // Очищаем интервалы проверки для видео
+        for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
+            if (slide.checkInterval) {
+                clearInterval(slide.checkInterval);
+            }
+        }
+
+        gallery.remove();
+        delete window.GalleryRTPlayer;
+
+        document.body.style.cssText = `
+        overflow: '';
+        margin-right: '';
+    `;
+    },
+    show = async (duration = 500, easing = 'linear') => {
+        const gallery = document.body.querySelector('.advdominion-lg');
+
+        document.body.style.cssText = `
+        overflow: hidden;
+        margin-right: ${getScrollbarWidth()}px
+    `;
+
+        await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
+            duration,
+            easing,
+        }).finished;
+    },
+    init = async (items = [], options = {}, index = 0) => {
+        const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
+                import('swiper'),
+                import('swiper/modules'),
+            ]),
+            isVideoInGallery = {
+                yt: false,
+                vk: false,
+                rt: false,
+            };
+        items = items.map(({ url: item, caption }) => {
+            if (/youtube\.com\/watch\?v=/.test(item)) {
+                isVideoInGallery.yt = true;
+                return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-wrapper">
+                        <div
+                            class="advdominion-lg__video advdominion-lg__video_youtube"
+                            data-id="${/v=([\w-]+)/i.exec(item)[1]}">
+                            Загрузка YouTube-плеера...
+                        </div>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                </div>
+            `;
+            } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
+                isVideoInGallery.vk = true;
+                const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
+                if (videoId === null) {
+                    return `
+                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-wrapper">
+                            <div class="advdominion-lg__video advdominion-lg__video_vk">
+                                Ошибка при загрузке VK-плеера
+                            </div>
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    </div>
+                `;
+                }
+                return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-wrapper">
+                        <iframe
+                            class="advdominion-lg__video advdominion-lg__video_vk"
+                            src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
+                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                        </iframe>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                </div>
+            `;
+            } else if (/rutube\.ru/.test(item)) {
+                isVideoInGallery.rt = true;
+                const videoId = /video\/(\w+)/.exec(item);
+                if (videoId === null) {
+                    return `
+                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-wrapper">
+                            <div class="advdominion-lg__video advdominion-lg__video_rt">
+                                Ошибка при загрузке RuTube-плеера
+                            </div>
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    </div>
+                `;
+                }
+                return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-wrapper">
+                        <iframe
+                            class="advdominion-lg__video advdominion-lg__video_rt"
+                            src="https://rutube.ru/play/embed/${videoId[1]}"
+                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                        </iframe>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                </div>
+            `;
+            }
+            return `
+            <div class="advdominion-lg__item swiper-slide">
+                <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
+                ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+            </div>
+        `;
+        });
+
+        if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
+            window.GalleryYTPlayer = {
+                state: false,
+                get init() {
+                    return this.state;
+                },
+                set init(val) {
+                    this.state = val;
+                    for (const i of this.callback) {
+                        i(val);
+                    }
+                },
+                callback: [],
+                addListener(callback) {
+                    this.callback.push(callback);
+                },
+            };
+
+            window.onYouTubeIframeAPIReady = () => {
+                window.GalleryYTPlayer.init = true;
+            };
+        }
+
+        if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
+            window.GalleryVKPlayer = {
+                state: false,
+                get init() {
+                    return this.state;
+                },
+                set init(val) {
+                    this.state = val;
+                    for (const i of this.callback) {
+                        i(val);
+                    }
+                },
+                callback: [],
+                addListener(callback) {
+                    this.callback.push(callback);
+                },
+            };
+
+            const checkInterval = setInterval(() => {
+                if (window.VK?.VideoPlayer) {
+                    clearInterval(checkInterval);
+                    window.GalleryVKPlayer.init = true;
+                }
+            }, 100);
+        }
+
+        if (isVideoInGallery.rt) {
+            window.GalleryRTPlayer = new Set();
+            window.addEventListener('message', (event) => {
+                if (event.origin.includes('rutube.ru') && typeof event.data === 'string') {
+                    const message = JSON.parse(event.data);
+                    if (message.type === 'player:ready') {
+                        window.GalleryRTPlayer.add(message.data.videoId);
+                    }
+                }
+            });
+        }
+
+        document.body.insertAdjacentHTML(
+            'beforeend',
+            `
+            <div class="advdominion-lg">
+                <button class="advdominion-lg__close" type="button">
+                    <svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
+                </button>
+                <div class="advdominion-lg__container swiper">
+                    <div class="advdominion-lg__wrapper swiper-wrapper">
+                        ${items.join('')}
+                    </div>
+                    ${options.pagination || ''}
+                    ${options.navigation || ''}
+                </div>
+            </div>
+        `,
+        );
+
+        const gallery = document.body.querySelector('.advdominion-lg');
+
+        gallery.querySelector('.advdominion-lg__container').style.cssText = `
+        visibility: hidden;
+    `;
+
+        await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
+
+        const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
+            init: false,
+            initialSlide: index,
+            ...options.swiper,
+            modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
+        });
+
+        swiper.on('init', function init() {
+            gallery.querySelector('.advdominion-lg__container').style.cssText = `
+            visibility: '';
+        `;
+
+            if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
+                playVideo(this.slides[this.activeIndex]);
+            }
+
+            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
+                setVideoSize(gallery);
+            }
+        });
+
+        swiper.on('slideChange', function init() {
+            setTimeout(() => {
+                for (const [index, slide] of Object.entries(this.slides)) {
+                    if (slide.classList.contains('advdominion-lg__item_video')) {
+                        if (Number(index) === this.activeIndex) {
+                            playVideo(slide);
+                        } else {
+                            pauseVideo(slide);
+                        }
+                    }
+                }
+            }, 0);
+        });
+
+        swiper.on('resize', () => {
+            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
+                setVideoSize(gallery);
+            }
+        });
+
+        swiper.init();
+
+        const closeHandler = () => {
+                hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
+            },
+            keydownHandler = (e) => {
+                if (e.key === 'Escape') {
+                    closeHandler();
+                    document.body.removeEventListener('keydown', keydownHandler);
+                }
+            };
+
+        gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
+        document.body.addEventListener('keydown', keydownHandler);
+    };
+
+export const gallery = (container, options) => {
+    const items = [];
+    if (options.single) {
+        const element = container.children[0];
+        items.push({
+            url: element.href,
+            caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
+        });
+        container.addEventListener('click', (event) => {
+            event.preventDefault();
+            init(items, options);
+        });
+    } else {
+        for (const [index, element] of [...container.children].entries()) {
+            items.push({
+                url: element.href,
+                caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
+            });
+            element.addEventListener('click', (event) => {
+                event.preventDefault();
+                init(items, options, index);
+            });
+        }
+    }
+};

packages/lightbox-gallery/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@advdominion/lightbox-gallery",
+  "version": "5.0.1",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.optiweb.ru/public/frontend.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@advdominion/get-scrollbar-width": "^2.0.0"
+  },
+  "peerDependencies": {
+    "swiper": "^14.0.0"
+  }
+}

packages/lightbox-gallery/styles.css

@@ -0,0 +1,75 @@
+.advdominion-lg {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 999;
+}
+
+.advdominion-lg__close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+}
+
+.advdominion-lg__close-icon {
+    fill: currentcolor;
+    height: 25px;
+    width: 25px;
+}
+
+.advdominion-lg__container.swiper {
+    height: 100%;
+}
+
+.advdominion-lg__wrapper.swiper-wrapper {
+}
+
+.advdominion-lg__item.swiper-slide {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    justify-content: center;
+}
+
+.advdominion-lg__item_video.swiper-slide {
+}
+
+.advdominion-lg__image {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.advdominion-lg__video-wrapper {
+    height: 100%;
+    position: relative;
+    width: 100%;
+}
+
+.advdominion-lg__video {
+    border: none;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+div.advdominion-lg__video {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.advdominion-lg__video_youtube {
+}
+
+.advdominion-lg__video_vk {
+}
+
+.advdominion-lg__caption {
+}

packages/tooltip/CHANGELOG.md

@@ -0,0 +1,58 @@
+## v7.0.1
+
+- Исправление работы анимации
+
+## v7.0.0
+
+- Изменено значение по умолчанию для параметра `trigger`
+- Рефакторинг кода и устранение ошибок
+
+## v6.0.0
+
+- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
+- Предовтращаем лишние показы всплывающей подсказки
+
+## v5.0.0
+
+- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
+
+## v4.1.1
+
+- Исправление зависаний (в некоторых случаях) всплывающих подсказок
+
+## v4.1.0
+
+- Отключаем события mouseenter/mouseleave для toch-устройств
+
+## v4.0.0
+
+- Переработана логика инициализации и обновления тултипа
+- Добавлены новые триггеры: `focus`, `blur`
+- Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
+- Исправлены ошибки с позиционированием, анимацией и стилями
+- Оптимизировано управление событиями и очистка ресурсов
+
+## v3.0.1
+
+- Исправлена работа событий
+
+## v3.0.0
+
+- Исправлено название опции с `virtialReference` на `virtualReference`
+
+## v2.1.0
+
+- Для опции `appendTo` добавлена возможность указать значение `parent`
+
+## v2.0.0
+
+- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
+- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
+- Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
+- Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
+- Опция `_tooltip._options` переименована в `_tooltip.options`
+- Оптимизция кода, исправление ошибок
+- Доработки по README.md
+- Доработки по .npmignore
+
+## v1.0.0

packages/tooltip/README.md

@@ -0,0 +1,177 @@
+# tooltip
+
+## Требования
+
+- [Floating UI](https://floating-ui.com)
+
+## Подключение и настройка
+
+### HTML
+
+```html
+<button type="button">Кнопка</button>
+```
+
+### JS
+
+#### Минимальные настройки
+
+```js
+import { createTooltip } from '@advdominion/tooltip';
+
+createTooltip(document.querySelector('button'), 'Подсказка');
+```
+
+#### Все настройки со значениями по умолчанию
+
+```js
+import { createTooltip } from '@advdominion/tooltip';
+
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    animation: [
+        [{ opacity: 0 }, { opacity: 1 }],
+        [{ opacity: 1 }, { opacity: 0 }],
+    ],
+    appendTo: document.body,
+    arrow: true,
+    delay: [0, 0],
+    duration: [0, 0],
+    easing: ['linear', 'linear'],
+    hideOnClick: true,
+    interactive: true,
+    offset: [0, 8],
+    placement: 'top',
+    shiftPadding: [8, 0],
+    theme: 'light',
+    trigger: 'mouseenter click',
+    virtualReference: undefined,
+    zIndex: '',
+    // Callback-функции, по умолчанию не заданы
+    onCreate(instance) {},
+    onMount(instance) {},
+    onShow(instance) {},
+    onShown(instance) {},
+    onHide(instance) {},
+    onHidden(instance) {},
+});
+```
+
+#### hideOnClick
+
+- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
+- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
+- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.
+
+##### virtualReference
+
+Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
+
+Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100&times;50, который располагается в левой верхней точке экрана:
+
+```js
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    virtualReference: {
+        getBoundingClientRect() {
+            return {
+                x: 0,
+                y: 0,
+                top: 0,
+                left: 0,
+                bottom: 50,
+                right: 100,
+                width: 100,
+                height: 50,
+            };
+        },
+    },
+});
+```
+
+#### Свойства
+
+#### $tooltip
+
+DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
+
+#### options
+
+Текущие настройки
+
+#### isVisible
+
+Видимость всплывающей подсказки - `true`/`false`
+
+#### Методы
+
+##### show
+
+```js
+document.querySelector('button')._tooltip.show();
+```
+
+##### hide
+
+```js
+document.querySelector('button')._tooltip.hide();
+```
+
+##### setContent
+
+```js
+document.querySelector('button')._tooltip.setContent('Новая подсказка');
+```
+
+##### updateOptions
+
+```js
+document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' });
+```
+
+Настройки так же можно переназначать, используя data-атрибуты:
+
+```html
+<button type="button" data-tooltip-placement="bottom">Кнопка</button>
+```
+
+##### destroy
+
+```js
+document.querySelector('button')._tooltip.destroy();
+```
+
+### Стили
+
+```scss
+$b: '.tooltip';
+
+#{$b} {
+    left: 0;
+    max-width: calc(100vw - 32px);
+    position: absolute;
+    top: 0;
+    width: max-content;
+    z-index: 200;
+
+    @media (min-width: 900px) {
+        max-width: 300px;
+    }
+
+    &__root {
+    }
+
+    &__arrow {
+        #{$b}_theme_light & {
+            background-color: white;
+            height: 8px;
+            width: 8px;
+        }
+    }
+
+    &__container {
+        #{$b}_theme_light & {
+            background-color: white;
+            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+```

packages/tooltip/index.js

@@ -0,0 +1,490 @@
+const roundByDPR = (value) => {
+        const dpr = window.devicePixelRatio || 1;
+        return Math.round(value * dpr) / dpr;
+    },
+    attributeToOption = (attribute) => {
+        attribute = attribute.replace('tooltip', '');
+        return attribute.charAt(0).toLowerCase() + attribute.slice(1);
+    };
+
+let visibilityListenerRegistered = false;
+const handleVisibilityChange = () => {
+        if (document.hidden) {
+            // Скрываем все активные всплывающие подсказки
+            for (const $tooltip of document.querySelectorAll('.tooltip')) {
+                const ref = $tooltip._reference;
+                if (ref?._tooltip) {
+                    // Очищаем таймеры появления при скрытии страницы
+                    clearTimeout(ref._tooltip._showTimeout);
+                    if (ref._tooltip.isVisible) {
+                        ref._tooltip.hide({ immediately: true });
+                    }
+                }
+            }
+        }
+    },
+    templates = {
+        arrow: () => `
+        <div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
+    `,
+        interactiveHelper: () => `
+        <div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
+    `,
+    };
+
+export const createTooltip = ($el, content, options) => {
+    options = {
+        animation: [
+            [{ opacity: 0 }, { opacity: 1 }],
+            [{ opacity: 1 }, { opacity: 0 }],
+        ],
+        appendTo: document.body,
+        arrow: true,
+        delay: [0, 0],
+        duration: [0, 0],
+        easing: ['linear', 'linear'],
+        hideOnClick: true, // Возможные значения: true, 'all', 'toggle'
+        interactive: true,
+        offset: [0, 8],
+        placement: 'top',
+        shiftPadding: [8, 0],
+        theme: 'light',
+        trigger: 'mouseenter click',
+        virtualReference: undefined,
+        zIndex: '',
+        ...options,
+    };
+
+    for (const [key, value] of Object.entries($el.dataset)) {
+        if (key.startsWith('tooltip')) {
+            let parsedValue = value;
+            try {
+                parsedValue = JSON.parse(value);
+            } catch {} // eslint-disable-line no-empty
+            options[attributeToOption(key)] = parsedValue;
+        }
+    }
+
+    let rafId;
+    const listeners = [];
+
+    $el._tooltip = {
+        options,
+        isVisible: false,
+        $tooltip: undefined,
+        $container: undefined,
+        $arrow: undefined,
+        $interactive: undefined,
+        _showTimeout: undefined,
+        _hideTimeout: undefined,
+        _currentAnimation: undefined,
+        autoUpdateCleanup: () => {},
+        updatePosition: async () => {},
+
+        setContent(updatedContent) {
+            if (updatedContent !== undefined) {
+                content = updatedContent;
+            }
+            if ($el._tooltip.$container) {
+                if (content instanceof HTMLElement) {
+                    $el._tooltip.$container.innerHTML = '';
+                    $el._tooltip.$container.append(content);
+                } else {
+                    $el._tooltip.$container.innerHTML = content;
+                }
+            }
+        },
+
+        async updateOptions(updatedOptions = {}) {
+            for (const [name, value] of Object.entries(updatedOptions)) {
+                options[name] = value;
+            }
+
+            if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
+                if (options.arrow) {
+                    if (!$el._tooltip.$arrow) {
+                        $el._tooltip.$tooltip
+                            .querySelector('.tooltip__root')
+                            .insertAdjacentHTML('afterbegin', templates.arrow());
+                        $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+                    }
+                } else {
+                    $el._tooltip.$arrow?.remove();
+                    $el._tooltip.$arrow = undefined;
+                }
+            }
+
+            if (updatedOptions.interactive !== undefined) {
+                for (const { el, event, listener } of listeners) {
+                    el.removeEventListener(event, listener);
+                }
+                listeners.length = 0;
+                registerListeners();
+                if ($el._tooltip.$tooltip) {
+                    if (options.interactive) {
+                        if (!$el._tooltip.$interactive) {
+                            $el._tooltip.$tooltip
+                                .querySelector('.tooltip__root')
+                                .insertAdjacentHTML('afterbegin', templates.interactiveHelper());
+                            $el._tooltip.$interactive =
+                                $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+                        }
+                    } else {
+                        $el._tooltip.$interactive?.remove();
+                        $el._tooltip.$interactive = undefined;
+                    }
+                }
+            }
+
+            if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
+                const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
+                    className.startsWith('tooltip_theme_'),
+                );
+                if (classIndex === -1) {
+                    $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
+                } else {
+                    $el._tooltip.$tooltip.classList.replace(
+                        $el._tooltip.$tooltip.classList[classIndex],
+                        `tooltip_theme_${options.theme}`,
+                    );
+                }
+            }
+
+            if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
+                Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
+            }
+
+            if ($el._tooltip.$tooltip) {
+                await $el._tooltip.updatePosition();
+            }
+        },
+
+        destroy() {
+            if (!$el._tooltip) {
+                return;
+            }
+
+            clearTimeout($el._tooltip._showTimeout);
+            clearTimeout($el._tooltip._hideTimeout);
+            $el._tooltip._currentAnimation?.cancel();
+            cancelAnimationFrame(rafId);
+
+            $el._tooltip.$tooltip?.remove();
+
+            // Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
+            if ($el._tooltip.isVisible) {
+                $el._tooltip.autoUpdateCleanup();
+            }
+
+            for (const { el, event, listener } of listeners) {
+                el.removeEventListener(event, listener);
+            }
+            listeners.length = 0;
+
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
+            delete $el._tooltip;
+        },
+    };
+
+    if (options.onCreate) {
+        options.onCreate($el._tooltip);
+    }
+
+    $el._tooltip.show = async ({ immediately } = {}) => {
+        clearTimeout($el._tooltip._hideTimeout);
+
+        if (!$el._tooltip.$tooltip) {
+            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+
+            $el._tooltip.$tooltip = document.createElement('div');
+            $el._tooltip.$tooltip._reference = $el;
+            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
+            Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
+
+            $el._tooltip.$tooltip.innerHTML = `
+                <div class="tooltip__root">
+                    ${options.interactive ? templates.interactiveHelper() : ''}
+                    ${options.arrow ? templates.arrow() : ''}
+                    <div class="tooltip__container"></div>
+                </div>
+            `;
+
+            $el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
+            $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            $el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+
+            $el._tooltip.setContent();
+
+            $el._tooltip.updatePosition = () => {
+                cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(async () => {
+                    const { x, y, placement, middlewareData } = await computePosition(
+                        options.virtualReference ?? $el,
+                        $el._tooltip.$tooltip,
+                        {
+                            placement: options.placement,
+                            middleware: [
+                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
+                                flip(),
+                                shift({
+                                    padding: {
+                                        top: options.shiftPadding[1],
+                                        right: options.shiftPadding[0],
+                                        bottom: options.shiftPadding[1],
+                                        left: options.shiftPadding[0],
+                                    },
+                                }),
+                                arrow({ element: $el._tooltip.$arrow }),
+                            ],
+                        },
+                    );
+
+                    Object.assign($el._tooltip.$tooltip.style, {
+                        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+                    });
+
+                    const side = placement.split('-')[0],
+                        staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
+
+                    $el._tooltip.$tooltip.classList.remove(
+                        'tooltip_side_top',
+                        'tooltip_side_bottom',
+                        'tooltip_side_left',
+                        'tooltip_side_right',
+                    );
+                    $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+
+                    if ($el._tooltip.$interactive) {
+                        Object.assign($el._tooltip.$interactive.style, {
+                            width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                            height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                            [staticSide]: `-${options.offset[1]}px`,
+                        });
+                    }
+
+                    if ($el._tooltip.$arrow && middlewareData.arrow) {
+                        const { x, y } = middlewareData.arrow;
+                        Object.assign($el._tooltip.$arrow.style, {
+                            left: x === undefined ? '' : `${x}px`,
+                            top: y === undefined ? '' : `${y}px`,
+                            [staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
+                        });
+                    }
+                });
+            };
+
+            if (options.onMount) {
+                options.onMount($el._tooltip);
+            }
+        }
+
+        const { autoUpdate } = await import('@floating-ui/dom');
+
+        $el._tooltip._showTimeout = setTimeout(
+            async () => {
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter'),
+                    isHovering = $el.matches(':hover');
+
+                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
+                if (
+                    !$el._tooltip ||
+                    $el._tooltip.isVisible ||
+                    (isMouseEnterTrigger && !isHovering) ||
+                    document.hidden
+                ) {
+                    return;
+                }
+
+                (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
+                $el._tooltip.isVisible = true;
+                $el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+
+                if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
+                    document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
+                    listeners.push({
+                        el: document.body,
+                        event: 'click',
+                        listener: $el._tooltip.hideOnClickListener,
+                    });
+                }
+
+                if (options.onShow) {
+                    options.onShow($el._tooltip);
+                }
+
+                try {
+                    const animation = $el._tooltip.$tooltip
+                        .querySelector('.tooltip__root')
+                        .animate(options.animation[0], {
+                            duration: immediately ? 0 : options.duration[0],
+                            easing: options.easing[0],
+                        });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                if (options.onShown) {
+                    options.onShown($el._tooltip);
+                }
+            },
+            immediately ? 0 : options.delay[0],
+        );
+    };
+
+    $el._tooltip.hide = ({ immediately } = {}) => {
+        clearTimeout($el._tooltip._showTimeout);
+        $el._tooltip._hideTimeout = setTimeout(
+            async () => {
+                // Проверяем $el._tooltip на сущестование
+                if (!$el._tooltip || !$el._tooltip.isVisible) {
+                    return;
+                }
+
+                if (options.onHide) {
+                    options.onHide($el._tooltip);
+                }
+
+                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
+                try {
+                    const animation = $el._tooltip.$tooltip
+                        .querySelector('.tooltip__root')
+                        .animate(options.animation[1], {
+                            duration: immediately ? 0 : options.duration[1],
+                            easing: options.easing[1],
+                        });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                // Ещё одна проверка на сущестование $el._tooltip после await
+                if (!$el._tooltip) {
+                    return;
+                }
+
+                if ($el._tooltip.$tooltip) {
+                    $el._tooltip.$tooltip.remove();
+                }
+                $el._tooltip.isVisible = false;
+                $el._tooltip.autoUpdateCleanup();
+
+                if (options.onHidden) {
+                    options.onHidden($el._tooltip);
+                }
+            },
+            immediately ? 0 : options.delay[1],
+        );
+    };
+
+    $el._tooltip.hideOnClickListener = ({ target }) => {
+        if (!$el._tooltip.isVisible) {
+            return;
+        }
+
+        if (options.hideOnClick === 'all') {
+            $el._tooltip.hide();
+        } else if (options.hideOnClick === 'toggle') {
+            if ($el.contains(target)) {
+                $el._tooltip.hide();
+            }
+        } else {
+            // options.hideOnClick === true
+            if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
+                $el._tooltip.hide();
+            }
+        }
+    };
+
+    $el._tooltip.clickListener = () => {
+        if (document.hidden) {
+            return;
+        }
+        if (!$el._tooltip.isVisible) {
+            $el._tooltip.show();
+        }
+    };
+
+    $el._tooltip.mouseEnterListener = (event) => {
+        if (event.pointerType !== 'mouse' || document.hidden) {
+            return;
+        }
+        $el._tooltip.show();
+    };
+
+    $el._tooltip.mouseLeaveListener = (event) => {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+
+        if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
+            $el._tooltip.$tooltip.addEventListener(
+                'pointerleave',
+                (event) => {
+                    if (event.pointerType !== 'mouse') {
+                        return;
+                    }
+                    if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
+                        $el._tooltip.hide();
+                    }
+                },
+                { once: true },
+            );
+        } else {
+            $el._tooltip.hide();
+        }
+    };
+
+    $el._tooltip.focusListener = () => {
+        if (document.hidden) {
+            return;
+        }
+        $el._tooltip.show();
+    };
+
+    $el._tooltip.blurListener = () => {
+        $el._tooltip.hide();
+    };
+
+    const registerListeners = () => {
+        for (const trigger of options.trigger.split(' ')) {
+            switch (trigger) {
+                case 'mouseenter': {
+                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
+                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
+
+                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    break;
+                }
+                case 'click': {
+                    $el.addEventListener('click', $el._tooltip.clickListener);
+                    listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
+
+                    if (!options.interactive) {
+                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    }
+                    break;
+                }
+                case 'focus': {
+                    $el.addEventListener('focus', $el._tooltip.focusListener);
+                    listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
+                    break;
+                }
+                case 'blur': {
+                    $el.addEventListener('blur', $el._tooltip.blurListener);
+                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
+                    break;
+                }
+            }
+        }
+    };
+
+    registerListeners();
+
+    if (!visibilityListenerRegistered) {
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        visibilityListenerRegistered = true;
+    }
+};

packages/tooltip/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@advdominion/tooltip",
+  "version": "7.0.2",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.optiweb.ru/public/frontend.git"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.0.0"
+  }
+}

yarn.lock

@@ -20,12 +20,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@advdominion/get-scrollbar-width@workspace:packages/get-scrollbar-width":
+"@advdominion/get-scrollbar-width@npm:^2.0.0, @advdominion/get-scrollbar-width@workspace:packages/get-scrollbar-width":
   version: 0.0.0-use.local
   resolution: "@advdominion/get-scrollbar-width@workspace:packages/get-scrollbar-width"
   languageName: unknown
   linkType: soft
 
+"@advdominion/lightbox-gallery@workspace:packages/lightbox-gallery":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/lightbox-gallery@workspace:packages/lightbox-gallery"
+  dependencies:
+    "@advdominion/get-scrollbar-width": "npm:^2.0.0"
+  peerDependencies:
+    swiper: ^14.0.0
+  languageName: unknown
+  linkType: soft
+
 "@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader":
   version: 0.0.0-use.local
   resolution: "@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader"
@@ -57,6 +67,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@advdominion/tooltip@workspace:packages/tooltip":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/tooltip@workspace:packages/tooltip"
+  peerDependencies:
+    "@floating-ui/dom": ^1.0.0
+  languageName: unknown
+  linkType: soft
+
 "@babel/code-frame@npm:^7.0.0":
   version: 7.27.1
   resolution: "@babel/code-frame@npm:7.27.1"