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

Рефакторинг кода и устранение ошибок

Browse Source
This commit is contained in:
Valentin Silyutin
2026-05-19 23:53:43 +04:00
parent f1e8f86ce9
commit 04e29c7987
1 changed files with 30 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.js
View File

@@ -25,6 +25,15 @@ const handleVisibilityChange = () => {
}
};
const 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: [
@@ -70,7 +79,9 @@ export const createTooltip = ($el, content, options) => {
$interactive: undefined,
_showTimeout: undefined,
_hideTimeout: undefined,
_currentAnimation: undefined,
autoUpdateCleanup: () => {},
updatePosition: async () => {},
setContent(updatedContent) {
if (updatedContent !== undefined) {
@@ -94,15 +105,7 @@ export const createTooltip = ($el, content, options) => {
if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
if (options.arrow) {
if (!$el._tooltip.$arrow) {
$el._tooltip.$tooltip.insertAdjacentHTML(
'afterbegin',
`
<div
class="tooltip__arrow"
style="pointer-events: none; position: absolute; transform: rotate(45deg);">
</div>
`,
);
$el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
$el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
}
} else {
@@ -120,15 +123,7 @@ export const createTooltip = ($el, content, options) => {
if ($el._tooltip.$tooltip) {
if (options.interactive) {
if (!$el._tooltip.$interactive) {
$el._tooltip.$tooltip.insertAdjacentHTML(
'afterbegin',
`
<div
class="tooltip__interactive-helper"
style="position: absolute; z-index: -1;">
</div>
`,
);
$el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.interactiveHelper());
$el._tooltip.$interactive =
$el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
}
@@ -169,6 +164,7 @@ export const createTooltip = ($el, content, options) => {
clearTimeout($el._tooltip._showTimeout);
clearTimeout($el._tooltip._hideTimeout);
$el._tooltip._currentAnimation?.cancel();
cancelAnimationFrame(rafId);
$el._tooltip.$tooltip?.remove();
@@ -183,6 +179,8 @@ export const createTooltip = ($el, content, options) => {
}
listeners.length = 0;
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
delete $el._tooltip;
},
};
@@ -204,26 +202,8 @@ export const createTooltip = ($el, content, options) => {
$el._tooltip.$tooltip.innerHTML = `
<div class="tooltip__root">
${
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>
`
: ''
}
${options.interactive ? templates.interactiveHelper() : ''}
${options.arrow ? templates.arrow() : ''}
<div class="tooltip__container"></div>
</div>
`;
@@ -332,10 +312,13 @@ export const createTooltip = ($el, content, options) => {
}
try {
await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
$el._tooltip._currentAnimation?.cancel();
const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
duration: immediately ? 0 : options.duration[0],
easing: options.easing[0],
}).finished;
});
$el._tooltip._currentAnimation = animation;
await animation.finished;
} catch {} // eslint-disable-line no-empty
if (options.onShown) {
@@ -359,11 +342,16 @@ export const createTooltip = ($el, content, options) => {
options.onHide($el._tooltip);
}
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
try {
await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
$el._tooltip._currentAnimation?.cancel();
const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
duration: immediately ? 0 : options.duration[1],
easing: options.easing[1],
}).finished;
});
$el._tooltip._currentAnimation = animation;
await animation.finished;
} catch {} // eslint-disable-line no-empty
// Ещё одна проверка на сущестование $el._tooltip после await
@@ -392,17 +380,14 @@ export const createTooltip = ($el, content, options) => {
if (options.hideOnClick === 'all') {
$el._tooltip.hide();
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
} else if (options.hideOnClick === 'toggle') {
if ($el.contains(target)) {
$el._tooltip.hide();
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
}
} else {
// options.hideOnClick === true
if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
$el._tooltip.hide();
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
}
}
};