v1.0.0
This commit is contained in:
Valentin Silytuin
432
index.js
Normal file
432
index.js
Normal 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();
|
||||
};
|
||||
Reference in New Issue
Block a user