This commit is contained in:
sasha-astiadi
2024-05-03 06:39:20 +02:00
parent 6bf49421d6
commit 324d5960af
1737 changed files with 254531 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
import type { Instance as PopperInstance } from '@popperjs/core';
import type { TooltipOptions } from './types';
import { TooltipInterface } from './interface';
declare class Tooltip implements TooltipInterface {
_targetEl: HTMLElement | null;
_triggerEl: HTMLElement | null;
_options: TooltipOptions;
_popperInstance: PopperInstance;
_clickOutsideEventListener: EventListenerOrEventListenerObject;
_keydownEventListener: EventListenerOrEventListenerObject;
_visible: boolean;
constructor(targetEl?: HTMLElement | null, triggerEl?: HTMLElement | null, options?: TooltipOptions);
_init(): void;
_setupEventListeners(): void;
_createPopperInstance(): PopperInstance;
_getTriggerEvents(): {
showEvents: string[];
hideEvents: string[];
};
_setupKeydownListener(): void;
_removeKeydownListener(): void;
_setupClickOutsideListener(): void;
_removeClickOutsideListener(): void;
_handleClickOutside(ev: Event, targetEl: HTMLElement): void;
isVisible(): boolean;
toggle(): void;
show(): void;
hide(): void;
}
export declare function initTooltips(): void;
export default Tooltip;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAER,QAAQ,IAAI,cAAc,EAC7B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAU/C,cAAM,OAAQ,YAAW,gBAAgB;IACrC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,0BAA0B,EAAE,kCAAkC,CAAC;IAC/D,qBAAqB,EAAE,kCAAkC,CAAC;IAC1D,QAAQ,EAAE,OAAO,CAAC;gBAGd,QAAQ,GAAE,WAAW,GAAG,IAAW,EACnC,SAAS,GAAE,WAAW,GAAG,IAAW,EACpC,OAAO,GAAE,cAAwB;IAUrC,KAAK;IAML,oBAAoB;IAcpB,qBAAqB;IAcrB,iBAAiB;;;;IAyBjB,qBAAqB;IAarB,sBAAsB;IAQtB,0BAA0B;IAW1B,2BAA2B;IAQ3B,mBAAmB,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW;IAYpD,SAAS;IAIT,MAAM;IAQN,IAAI;IA6BJ,IAAI;CAyBP;AAED,wBAAgB,YAAY,SAyB3B;AAOD,eAAe,OAAO,CAAC"}

View File

@@ -0,0 +1,204 @@
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.initTooltips = void 0;
/* eslint-disable @typescript-eslint/no-empty-function */
var core_1 = require("@popperjs/core");
var Default = {
placement: 'top',
triggerType: 'hover',
onShow: function () { },
onHide: function () { },
onToggle: function () { },
};
var Tooltip = /** @class */ (function () {
function Tooltip(targetEl, triggerEl, options) {
if (targetEl === void 0) { targetEl = null; }
if (triggerEl === void 0) { triggerEl = null; }
if (options === void 0) { options = Default; }
this._targetEl = targetEl;
this._triggerEl = triggerEl;
this._options = __assign(__assign({}, Default), options);
this._popperInstance = this._createPopperInstance();
this._visible = false;
this._init();
}
Tooltip.prototype._init = function () {
if (this._triggerEl) {
this._setupEventListeners();
}
};
Tooltip.prototype._setupEventListeners = function () {
var _this = this;
var triggerEvents = this._getTriggerEvents();
triggerEvents.showEvents.forEach(function (ev) {
_this._triggerEl.addEventListener(ev, function () {
_this.show();
});
});
triggerEvents.hideEvents.forEach(function (ev) {
_this._triggerEl.addEventListener(ev, function () {
_this.hide();
});
});
};
Tooltip.prototype._createPopperInstance = function () {
return (0, core_1.createPopper)(this._triggerEl, this._targetEl, {
placement: this._options.placement,
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
});
};
Tooltip.prototype._getTriggerEvents = function () {
switch (this._options.triggerType) {
case 'hover':
return {
showEvents: ['mouseenter', 'focus'],
hideEvents: ['mouseleave', 'blur'],
};
case 'click':
return {
showEvents: ['click', 'focus'],
hideEvents: ['focusout', 'blur'],
};
case 'none':
return {
showEvents: [],
hideEvents: [],
};
default:
return {
showEvents: ['mouseenter', 'focus'],
hideEvents: ['mouseleave', 'blur'],
};
}
};
Tooltip.prototype._setupKeydownListener = function () {
var _this = this;
this._keydownEventListener = function (ev) {
if (ev.key === 'Escape') {
_this.hide();
}
};
document.body.addEventListener('keydown', this._keydownEventListener, true);
};
Tooltip.prototype._removeKeydownListener = function () {
document.body.removeEventListener('keydown', this._keydownEventListener, true);
};
Tooltip.prototype._setupClickOutsideListener = function () {
var _this = this;
this._clickOutsideEventListener = function (ev) {
_this._handleClickOutside(ev, _this._targetEl);
};
document.body.addEventListener('click', this._clickOutsideEventListener, true);
};
Tooltip.prototype._removeClickOutsideListener = function () {
document.body.removeEventListener('click', this._clickOutsideEventListener, true);
};
Tooltip.prototype._handleClickOutside = function (ev, targetEl) {
var clickedEl = ev.target;
if (clickedEl !== targetEl &&
!targetEl.contains(clickedEl) &&
!this._triggerEl.contains(clickedEl) &&
this.isVisible()) {
this.hide();
}
};
Tooltip.prototype.isVisible = function () {
return this._visible;
};
Tooltip.prototype.toggle = function () {
if (this.isVisible()) {
this.hide();
}
else {
this.show();
}
};
Tooltip.prototype.show = function () {
this._targetEl.classList.remove('opacity-0', 'invisible');
this._targetEl.classList.add('opacity-100', 'visible');
// Enable the event listeners
this._popperInstance.setOptions(function (options) { return (__assign(__assign({}, options), { modifiers: __spreadArray(__spreadArray([], options.modifiers, true), [
{ name: 'eventListeners', enabled: true },
], false) })); });
// handle click outside
this._setupClickOutsideListener();
// handle esc keydown
this._setupKeydownListener();
// Update its position
this._popperInstance.update();
// set visibility
this._visible = true;
// callback function
this._options.onShow(this);
};
Tooltip.prototype.hide = function () {
this._targetEl.classList.remove('opacity-100', 'visible');
this._targetEl.classList.add('opacity-0', 'invisible');
// Disable the event listeners
this._popperInstance.setOptions(function (options) { return (__assign(__assign({}, options), { modifiers: __spreadArray(__spreadArray([], options.modifiers, true), [
{ name: 'eventListeners', enabled: false },
], false) })); });
// handle click outside
this._removeClickOutsideListener();
// handle esc keydown
this._removeKeydownListener();
// set visibility
this._visible = false;
// callback function
this._options.onHide(this);
};
return Tooltip;
}());
function initTooltips() {
document.querySelectorAll('[data-tooltip-target]').forEach(function ($triggerEl) {
var tooltipId = $triggerEl.getAttribute('data-tooltip-target');
var $tooltipEl = document.getElementById(tooltipId);
if ($tooltipEl) {
var triggerType = $triggerEl.getAttribute('data-tooltip-trigger');
var placement = $triggerEl.getAttribute('data-tooltip-placement');
new Tooltip($tooltipEl, $triggerEl, {
placement: placement ? placement : Default.placement,
triggerType: triggerType
? triggerType
: Default.triggerType,
});
}
else {
console.error("The tooltip element with id \"".concat(tooltipId, "\" does not exist. Please check the data-tooltip-target attribute."));
}
});
}
exports.initTooltips = initTooltips;
if (typeof window !== 'undefined') {
window.Tooltip = Tooltip;
window.initTooltips = initTooltips;
}
exports.default = Tooltip;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,23 @@
import { TooltipOptions, TooltipTriggerType, TooltipTriggerEventTypes } from './types';
import type { Instance as PopperInstance } from '@popperjs/core';
export declare interface TooltipInterface {
_targetEl: HTMLElement | null;
_triggerEl: HTMLElement | null;
_options: TooltipOptions;
_popperInstance: PopperInstance;
_clickOutsideEventListener: EventListenerOrEventListenerObject;
_keydownEventListener: EventListenerOrEventListenerObject;
_init(): void;
_setupEventListeners(): void;
_setupClickOutsideListener(): void;
_removeClickOutsideListener(): void;
_setupKeydownListener(): void;
_removeKeydownListener(): void;
_handleClickOutside(ev: Event, targetEl: HTMLElement): void;
_getTriggerEvents(triggerType: TooltipTriggerType): TooltipTriggerEventTypes;
isVisible(): boolean;
show(): void;
hide(): void;
toggle(): void;
}
//# sourceMappingURL=interface.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,cAAc,EACd,kBAAkB,EAClB,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,CAAC,OAAO,WAAW,gBAAgB;IACrC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,0BAA0B,EAAE,kCAAkC,CAAC;IAC/D,qBAAqB,EAAE,kCAAkC,CAAC;IAE1D,KAAK,IAAI,IAAI,CAAC;IACd,oBAAoB,IAAI,IAAI,CAAC;IAC7B,0BAA0B,IAAI,IAAI,CAAC;IACnC,2BAA2B,IAAI,IAAI,CAAC;IACpC,qBAAqB,IAAI,IAAI,CAAC;IAC9B,sBAAsB,IAAI,IAAI,CAAC;IAC/B,mBAAmB,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5D,iBAAiB,CACb,WAAW,EAAE,kBAAkB,GAChC,wBAAwB,CAAC;IAC5B,SAAS,IAAI,OAAO,CAAC;IACrB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;CAClB"}

View File

@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=interface.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../../src/components/tooltip/interface.ts"],"names":[],"mappings":""}

View File

@@ -0,0 +1,15 @@
import { TooltipInterface } from './interface';
import type { Placement } from '@popperjs/core';
export declare type TooltipTriggerType = 'click' | 'hover' | 'none';
export declare type TooltipTriggerEventTypes = {
showEvents: string[];
hideEvents: string[];
};
export declare type TooltipOptions = {
placement?: Placement;
triggerType?: TooltipTriggerType;
onShow?: (tooltip: TooltipInterface) => void;
onHide?: (tooltip: TooltipInterface) => void;
onToggle?: (tooltip: TooltipInterface) => void;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,CAAC,OAAO,MAAM,kBAAkB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,CAAC,OAAO,MAAM,wBAAwB,GAAG;IAC3C,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,CAAC,OAAO,MAAM,cAAc,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAClD,CAAC"}

View File

@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/tooltip/types.ts"],"names":[],"mappings":""}