v1.0.0

2024-12-19 22:45:52 +04:00 · 2024-12-19 22:45:52 +04:00 · 72dc9167f4
commit 72dc9167f4
11 changed files with 1653 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,4 @@
+.yarn/**            linguist-vendored
+.yarn/releases/*    binary
+.yarn/plugins/**/*  binary
+.pnp.*              binary linguist-generated
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,98 @@
+# Node.js
+
+node_modules
+
+# Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# ESLint
+
+.eslintcache
+
+# Stylelint
+
+.stylelintcache
+
+# Composer
+
+vendor
+
+# https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
+
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
+
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,6 @@
+.yarn
+.editorconfig
+.pnp.cjs
+.pnp.loader.mjs
+.prettierrc
+.yarnrc.yml
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all"
+}
--- a/.yarn/releases/yarn-4.5.3.cjs
+++ b/.yarn/releases/yarn-4.5.3.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs
--- a/README.md
+++ b/README.md
@ -0,0 +1,131 @@
+# tooltip
+
+## Требования
+
+-   [Floating UI](https://floating-ui.com) версии ^1.0.0
+
+## Подключение и настройка
+
+### 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'), 'Подсказка', {
+    appendTo: document.body,
+    arrow: true,
+    delay: [0, 0],
+    duration: [0, 0],
+    easing: ['linear', 'linear'],
+    hideOnClick: true,
+    interactive: true,
+    offset: [0, 8],
+    placement: 'top',
+    theme: 'light',
+    trigger: 'mouseenter',
+    virtialReference: undefined,
+    zIndex: '',
+    // Callback-функции, по-умолчанию не заданы
+    onCreate(instance) {},
+    onMount(instance) {},
+    onShow(instance) {},
+    onShown(instance) {},
+    onHide(instance) {},
+    onHidden(instance) {},
+});
+```
+
+##### virtialReference
+
+Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
+
+Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100&times;50, который располагается в левой верхней точке экрана:
+
+```js
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    virtialReference: {
+        getBoundingClientRect() {
+            return {
+                x: 0,
+                y: 0,
+                top: 0,
+                left: 0,
+                bottom: 50,
+                right: 100,
+                width: 100,
+                height: 50,
+            };
+        },
+    },
+});
+```
+
+#### Методы
+
+##### 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>
+```
+
+### Стили
+
+```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;
+    }
+
+    &__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);
+        }
+    }
+}
+```
--- a/index.js
+++ b/index.js
@ -0,0 +1,432 @@
+const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+
+export const createTooltip = ($el, content, options) => {
+    options = {
+        appendTo: document.body,
+        arrow: true,
+        delay: [0, 0],
+        duration: [0, 0],
+        easing: ['linear', 'linear'],
+        hideOnClick: true,
+        interactive: true,
+        offset: [0, 8],
+        placement: 'top',
+        theme: 'light',
+        trigger: 'mouseenter',
+        virtialReference: undefined,
+        zIndex: '',
+        ...options,
+    };
+
+    if ($el.dataset.tooltipArrow !== undefined) {
+        options.arrow = $el.dataset.tooltipArrow === 'true';
+    }
+
+    if ($el.dataset.tooltipHideOnClick !== undefined) {
+        switch ($el.dataset.tooltipHideOnClick) {
+            case 'all':
+            case 'toggle': {
+                options.hideOnClick = $el.dataset.tooltipHideOnClick;
+                break;
+            }
+            default: {
+                options.hideOnClick = $el.dataset.tooltipHideOnClick === 'true';
+            }
+        }
+    }
+
+    if ($el.dataset.tooltipInteractive !== undefined) {
+        options.interactive = $el.dataset.tooltipInteractive === 'true';
+    }
+
+    if ($el.dataset.tooltipOffset !== undefined) {
+        options.offset = JSON.parse($el.dataset.tooltipOffset);
+    }
+
+    if ($el.dataset.tooltipPlacement !== undefined) {
+        options.placement = $el.dataset.tooltipPlacement;
+    }
+
+    if ($el.dataset.tooltipTheme !== undefined) {
+        options.theme = $el.dataset.tooltipTheme;
+    }
+
+    if ($el.dataset.tooltipTrigger !== undefined) {
+        options.trigger = $el.dataset.tooltipTrigger;
+    }
+
+    if ($el.dataset.tooltipZIndex !== undefined) {
+        options.zIndex = $el.dataset.tooltipZIndex;
+    }
+
+    let showTimeout;
+    let hideTimeout;
+
+    let autoUpdateCleanup = new Function();
+    const listeners = [];
+
+    $el._tooltip = {
+        _options: options,
+        isVisible: false,
+        setContent(updatedContent) {
+            if (updatedContent !== undefined) {
+                content = updatedContent;
+            }
+            if ($el._tooltip.$tooltip) {
+                const $container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
+                if (content instanceof HTMLElement) {
+                    $container.innerHTML = '';
+                    $container.append(content);
+                } else {
+                    $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.$tooltip.querySelector('.tooltip__arrow')) {
+                        $el._tooltip.$tooltip.insertAdjacentHTML(
+                            'afterbegin',
+                            `
+                                <div
+                                    class="tooltip__arrow"
+                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
+                                </div>
+                            `,
+                        );
+                    }
+                } else {
+                    $el._tooltip.$tooltip.querySelector('.tooltip__arrow')?.remove();
+                }
+            }
+            if (updatedOptions.interactive !== undefined) {
+                for (const { el, event, listener } of listeners) {
+                    el.removeEventListener(event, listener);
+                }
+                registerListeners();
+                if ($el._tooltip.$tooltip) {
+                    if (options.interactive) {
+                        if (!$el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper')) {
+                            $el._tooltip.$tooltip.insertAdjacentHTML(
+                                'afterbegin',
+                                `
+                                    <div
+                                        class="tooltip__interactive-helper"
+                                        style="position: absolute; z-index; -1;">
+                                    </div>
+                                `,
+                            );
+                        }
+                    } else {
+                        $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper')?.remove();
+                    }
+                }
+            }
+            if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
+                const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
+                    className.startsWith('tooltip_theme_'),
+                );
+                $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() {
+            $el._tooltip.$tooltip?.remove();
+            autoUpdateCleanup();
+            for (const { el, event, listener } of listeners) {
+                el.removeEventListener(event, listener);
+            }
+            delete $el._tooltip;
+        },
+    };
+
+    if (options.onCreate) {
+        options.onCreate($el._tooltip);
+    }
+
+    $el._tooltip.show = async () => {
+        clearTimeout(hideTimeout);
+
+        if (!$el._tooltip.$tooltip) {
+            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+
+            $el._tooltip.$tooltip = document.createElement('div');
+            $el._tooltip.updatePosition = async () => {
+                const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+
+                const { x, y, placement, middlewareData } = await computePosition(
+                    options.virtialReference ?? $el,
+                    $el._tooltip.$tooltip,
+                    {
+                        placement: options.placement,
+                        middleware: [
+                            offset({
+                                mainAxis: options.offset[1],
+                                crossAxis: options.offset[0],
+                            }),
+                            flip(),
+                            shift(),
+                            arrow({
+                                element: $arrow,
+                                padding: Number.parseInt(
+                                    getComputedStyle($el._tooltip.$tooltip.querySelector('.tooltip__container'))[
+                                        'border-radius'
+                                    ],
+                                ),
+                            }),
+                        ],
+                    },
+                );
+
+                Object.assign($el._tooltip.$tooltip.style, {
+                    transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+                });
+
+                const side = placement.split('-')[0];
+                const 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}`);
+
+                const $interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+                if ($interactive) {
+                    Object.assign($interactive.style, {
+                        width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                        height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                        top: '',
+                        bottom: '',
+                        left: '',
+                        right: '',
+                        [staticSide]: `-${options.offset[1]}px`,
+                    });
+                }
+
+                if ($arrow && middlewareData.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    Object.assign($arrow.style, {
+                        left: x === undefined ? '' : `${x}px`,
+                        top: y === undefined ? '' : `${y}px`,
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `-${$arrow.offsetWidth / 2}px`,
+                    });
+                }
+            };
+
+            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
+            Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
+            $el._tooltip.$tooltip.innerHTML = `
+                ${
+                    options.interactive
+                        ? `
+                            <div
+                                class="tooltip__interactive-helper"
+                                style="position: absolute; z-index; -1;">
+                            </div>
+                        `
+                        : ''
+                }
+                ${
+                    options.arrow
+                        ? `
+                            <div
+                                class="tooltip__arrow"
+                                style="pointer-events: none; position: absolute; transform: rotate(45deg);">
+                            </div>
+                        `
+                        : ''
+                }
+                <div class="tooltip__container"></div>
+            `;
+            $el._tooltip.setContent();
+
+            if (options.onMount) {
+                options.onMount($el._tooltip);
+            }
+        }
+
+        const { autoUpdate } = await import('@floating-ui/dom');
+
+        showTimeout = setTimeout(async () => {
+            if (!$el._tooltip.isVisible) {
+                options.appendTo.append($el._tooltip.$tooltip);
+                $el._tooltip.isVisible = true;
+                autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+
+                if (options.onShow) {
+                    options.onShow($el._tooltip);
+                }
+
+                await $el._tooltip.$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], {
+                    duration: options.duration[1],
+                    easing: options.easing[1],
+                }).finished;
+
+                if (options.onShown) {
+                    options.onShown($el._tooltip);
+                }
+            }
+        }, options.delay[0]);
+    };
+
+    $el._tooltip.hide = () => {
+        clearTimeout(showTimeout);
+
+        hideTimeout = setTimeout(async () => {
+            if ($el._tooltip.isVisible) {
+                if (options.onHide) {
+                    options.onHide($el._tooltip);
+                }
+
+                await $el._tooltip.$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], {
+                    duration: options.duration[1],
+                    easing: options.easing[1],
+                }).finished;
+
+                $el._tooltip.$tooltip.remove();
+                $el._tooltip.isVisible = false;
+                autoUpdateCleanup();
+
+                if (options.onHidden) {
+                    options.onHidden($el._tooltip);
+                }
+            }
+        }, options.delay[1]);
+    };
+
+    const hideOnClickListener = ({ target }) => {
+        if (
+            $el._tooltip.isVisible &&
+            (options.hideOnClick === 'all' ||
+                $el.contains(target) ||
+                (options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target)))
+        ) {
+            document.body.removeEventListener('click', hideOnClickListener);
+            $el._tooltip.hide();
+        }
+    };
+
+    const clickListener = () => {
+        if (!$el._tooltip.isVisible) {
+            $el._tooltip.show();
+            if (options.hideOnClick) {
+                setTimeout(() => {
+                    document.body.addEventListener('click', hideOnClickListener);
+                    listeners.push({
+                        el: document.body,
+                        event: 'click',
+                        listener: hideOnClickListener,
+                    });
+                });
+            }
+        }
+    };
+
+    const mouseEnterListener = () => {
+        $el._tooltip.show();
+    };
+
+    const mouseLeaveListener = ({ relatedTarget }) => {
+        if (options.interactive) {
+            if ($el._tooltip.$tooltip.contains(relatedTarget)) {
+                $el._tooltip.$tooltip.addEventListener(
+                    'mouseleave',
+                    ({ relatedTarget }) => {
+                        if (!$el.contains(relatedTarget)) {
+                            $el._tooltip.hide();
+                        }
+                    },
+                    {
+                        once: true,
+                    },
+                );
+            } else {
+                $el._tooltip.hide();
+            }
+        } else {
+            $el._tooltip.hide();
+        }
+    };
+
+    const registerListeners = () => {
+        for (const trigger of options.trigger.split(' ')) {
+            switch (trigger) {
+                case 'mouseenter': {
+                    $el.addEventListener('mouseenter', mouseEnterListener);
+                    listeners.push({
+                        el: $el,
+                        event: 'mouseenter',
+                        listener: mouseEnterListener,
+                    });
+
+                    $el.addEventListener('mouseleave', mouseLeaveListener);
+                    listeners.push({
+                        el: $el,
+                        event: 'mouseleave',
+                        listener: mouseLeaveListener,
+                    });
+
+                    break;
+                }
+                case 'click': {
+                    $el.addEventListener('click', clickListener);
+                    listeners.push({
+                        el: $el,
+                        event: 'click',
+                        listener: clickListener,
+                    });
+
+                    if (!options.interactive) {
+                        $el.addEventListener('mouseleave', mouseLeaveListener);
+                        listeners.push({
+                            el: $el,
+                            event: 'mouseleave',
+                            listener: mouseLeaveListener,
+                        });
+                    }
+
+                    break;
+                }
+                case 'manual': {
+                    if (options.hideOnClick) {
+                        document.body.addEventListener('click', hideOnClickListener);
+                        listeners.push({
+                            el: document.body,
+                            event: 'click',
+                            listener: hideOnClickListener,
+                        });
+                    }
+
+                    break;
+                }
+            }
+        }
+    };
+
+    registerListeners();
+};
--- a/package.json
+++ b/package.json
@ -0,0 +1,15 @@
+{
+    "name": "@advdominion/tooltip",
+    "version": "1.0.0",
+    "type": "module",
+    "packageManager": "yarn@4.5.3",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://gitea.optiweb.ru/public/tooltip.git"
+    },
+    "license": "MIT",
+    "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0"
+    }
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -0,0 +1,14 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10
+
+"@advdominion/tooltip@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/tooltip@workspace:."
+  peerDependencies:
+    "@floating-ui/dom": ^1.0.0
+  languageName: unknown
+  linkType: soft