public
/
tooltip
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.0.0

This commit is contained in:
Valentin Silytuin 2024-12-19 22:45:52 +04:00
commit 72dc9167f4
11 changed files with 1653 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.editorconfig Normal file
View File

@ -0,0 +1,8 @@
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

4
.gitattributes vendored Normal file
View File

@ -0,0 +1,4 @@
.yarn/** linguist-vendored
.yarn/releases/* binary
.yarn/plugins/**/* binary
.pnp.* binary linguist-generated

98
.gitignore vendored Executable file
View File

@ -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

6
.npmignore Normal file
View File

@ -0,0 +1,6 @@
.yarn
.editorconfig
.pnp.cjs
.pnp.loader.mjs
.prettierrc
.yarnrc.yml

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"printWidth": 120,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "all"
}

934
.yarn/releases/yarn-4.5.3.cjs vendored Executable file
View File

File diff suppressed because one or more lines are too long

5
.yarnrc.yml Normal file
View File

@ -0,0 +1,5 @@
compressionLevel: mixed
enableGlobalCache: false
yarnPath: .yarn/releases/yarn-4.5.3.cjs

131
README.md Normal file
View File

@ -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);
}
}
}
```

432
index.js Normal file
View File

@ -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();
};

15
package.json Normal file
View File

@ -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"
}
}

14
yarn.lock Normal file
View File

@ -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