Compare commits
2 Commits
Author | SHA1 | Date |
---|---|---|
|
de089b6348 | |
|
06039e55c9 |
|
@ -1,3 +1,7 @@
|
|||
## v3.0.1
|
||||
|
||||
- Исправлена работа событий
|
||||
|
||||
## v3.0.0
|
||||
|
||||
- Исправлено название опции с `virtialReference` на `virtualReference`
|
||||
|
|
60
index.js
60
index.js
|
@ -289,6 +289,18 @@ export const createTooltip = ($el, content, options) => {
|
|||
$el._tooltip.isVisible = true;
|
||||
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);
|
||||
}
|
||||
|
@ -337,39 +349,29 @@ export const createTooltip = ($el, content, options) => {
|
|||
);
|
||||
};
|
||||
|
||||
const hideOnClickListener = ({ target }) => {
|
||||
$el._tooltip.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);
|
||||
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
|
||||
$el._tooltip.hide();
|
||||
}
|
||||
};
|
||||
|
||||
const clickListener = () => {
|
||||
$el._tooltip.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.mouseEnterListener = () => {
|
||||
$el._tooltip.show();
|
||||
};
|
||||
|
||||
const mouseLeaveListener = ({ relatedTarget }) => {
|
||||
$el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
|
||||
if (options.interactive) {
|
||||
if ($el._tooltip.$tooltip.contains(relatedTarget)) {
|
||||
$el._tooltip.$tooltip.addEventListener(
|
||||
|
@ -395,48 +397,36 @@ export const createTooltip = ($el, content, options) => {
|
|||
for (const trigger of options.trigger.split(' ')) {
|
||||
switch (trigger) {
|
||||
case 'mouseenter': {
|
||||
$el.addEventListener('mouseenter', mouseEnterListener);
|
||||
$el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener);
|
||||
listeners.push({
|
||||
el: $el,
|
||||
event: 'mouseenter',
|
||||
listener: mouseEnterListener,
|
||||
listener: $el._tooltip.mouseEnterListener,
|
||||
});
|
||||
|
||||
$el.addEventListener('mouseleave', mouseLeaveListener);
|
||||
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
|
||||
listeners.push({
|
||||
el: $el,
|
||||
event: 'mouseleave',
|
||||
listener: mouseLeaveListener,
|
||||
listener: $el._tooltip.mouseLeaveListener,
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
case 'click': {
|
||||
$el.addEventListener('click', clickListener);
|
||||
$el.addEventListener('click', $el._tooltip.clickListener);
|
||||
listeners.push({
|
||||
el: $el,
|
||||
event: 'click',
|
||||
listener: clickListener,
|
||||
listener: $el._tooltip.clickListener,
|
||||
});
|
||||
|
||||
if (!options.interactive) {
|
||||
$el.addEventListener('mouseleave', mouseLeaveListener);
|
||||
$el.addEventListener('mouseleave', $el._tooltip.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,
|
||||
listener: $el._tooltip.mouseLeaveListener,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@advdominion/tooltip",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.1",
|
||||
"type": "module",
|
||||
"packageManager": "yarn@4.5.3",
|
||||
"main": "index.js",
|
||||
|
|
Loading…
Reference in New Issue