primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 15.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
class Tooltip {
constructor(el, zone) {
this.el = el;
this.zone = zone;
this.tooltipPosition = 'right';
this.tooltipEvent = 'hover';
this.appendTo = 'body';
this.tooltipZIndex = 'auto';
this.escape = true;
}
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = val;
this.deactivate();
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
if (this.tooltipEvent === 'hover') {
this.mouseEnterListener = this.onMouseEnter.bind(this);
this.mouseLeaveListener = this.onMouseLeave.bind(this);
this.clickListener = this.onClick.bind(this);
this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener);
this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener);
this.el.nativeElement.addEventListener('click', this.clickListener);
}
else if (this.tooltipEvent === 'focus') {
this.focusListener = this.onFocus.bind(this);
this.blurListener = this.onBlur.bind(this);
this.el.nativeElement.addEventListener('focus', this.focusListener);
this.el.nativeElement.addEventListener('blur', this.blurListener);
}
});
}
onMouseEnter(e) {
if (!this.container && !this.showTimeout) {
this.activate();
}
}
onMouseLeave(e) {
this.deactivate();
}
onFocus(e) {
this.activate();
}
onBlur(e) {
this.deactivate();
}
onClick(e) {
this.deactivate();
}
activate() {
this.active = true;
this.clearHideTimeout();
if (this.showDelay)
this.showTimeout = setTimeout(() => { this.show(); }, this.showDelay);
else
this.show();
if (this.life) {
let duration = this.showDelay ? this.life + this.showDelay : this.life;
this.hideTimeout = setTimeout(() => { this.hide(); }, duration);
}
}
deactivate() {
this.active = false;
this.clearShowTimeout();
if (this.hideDelay) {
this.clearHideTimeout(); //life timeout
this.hideTimeout = setTimeout(() => { this.hide(); }, this.hideDelay);
}
else {
this.hide();
}
}
get text() {
return this._text;
}
set text(text) {
this._text = text;
if (this.active) {
if (this._text) {
if (this.container && this.container.offsetParent) {
this.updateText();
this.align();
}
else {
this.show();
}
}
else {
this.hide();
}
}
}
create() {
if (this.container) {
this.clearHideTimeout();
this.remove();
}
this.container = document.createElement('div');
let tooltipArrow = document.createElement('div');
tooltipArrow.className = 'p-tooltip-arrow';
this.container.appendChild(tooltipArrow);
this.tooltipText = document.createElement('div');
this.tooltipText.className = 'p-tooltip-text';
this.updateText();
if (this.positionStyle) {
this.container.style.position = this.positionStyle;
}
this.container.appendChild(this.tooltipText);
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else if (this.appendTo === 'target')
DomHandler.appendChild(this.container, this.el.nativeElement);
else
DomHandler.appendChild(this.container, this.appendTo);
this.container.style.display = 'inline-block';
}
show() {
if (!this.text || this.disabled) {
return;
}
this.create();
this.align();
DomHandler.fadeIn(this.container, 250);
if (this.tooltipZIndex === 'auto')
this.container.style.zIndex = ++DomHandler.zindex;
else
this.container.style.zIndex = this.tooltipZIndex;
this.bindDocumentResizeListener();
this.bindScrollListener();
}
hide() {
this.remove();
}
updateText() {
if (this.escape) {
this.tooltipText.innerHTML = '';
this.tooltipText.appendChild(document.createTextNode(this._text));
}
else {
this.tooltipText.innerHTML = this._text;
}
}
align() {
let position = this.tooltipPosition;
switch (position) {
case 'top':
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
}
}
}
break;
case 'bottom':
this.alignBottom();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
}
}
}
break;
case 'left':
this.alignLeft();
if (this.isOutOfBounds()) {
this.alignRight();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
}
}
}
break;
case 'right':
this.alignRight();
if (this.isOutOfBounds()) {
this.alignLeft();
if (this.isOutOfBounds()) {
this.alignTop();
if (this.isOutOfBounds()) {
this.alignBottom();
}
}
}
break;
}
}
getHostOffset() {
if (this.appendTo === 'body' || this.appendTo === 'target') {
let offset = this.el.nativeElement.getBoundingClientRect();
let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
let targetTop = offset.top + DomHandler.getWindowScrollTop();
return { left: targetLeft, top: targetTop };
}
else {
return { left: 0, top: 0 };
}
}
alignRight() {
this.preAlign('right');
let hostOffset = this.getHostOffset();
let left = hostOffset.left + DomHandler.getOuterWidth(this.el.nativeElement);
let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2;
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
}
alignLeft() {
this.preAlign('left');
let hostOffset = this.getHostOffset();
let left = hostOffset.left - DomHandler.getOuterWidth(this.container);
let top = hostOffset.top + (DomHandler.getOuterHeight(this.el.nativeElement) - DomHandler.getOuterHeight(this.container)) / 2;
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
}
alignTop() {
this.preAlign('top');
let hostOffset = this.getHostOffset();
let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2;
let top = hostOffset.top - DomHandler.getOuterHeight(this.container);
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
}
alignBottom() {
this.preAlign('bottom');
let hostOffset = this.getHostOffset();
let left = hostOffset.left + (DomHandler.getOuterWidth(this.el.nativeElement) - DomHandler.getOuterWidth(this.container)) / 2;
let top = hostOffset.top + DomHandler.getOuterHeight(this.el.nativeElement);
this.container.style.left = left + 'px';
this.container.style.top = top + 'px';
}
preAlign(position) {
this.container.style.left = -999 + 'px';
this.container.style.top = -999 + 'px';
let defaultClassName = 'p-tooltip p-component p-tooltip-' + position;
this.container.className = this.tooltipStyleClass ? defaultClassName + ' ' + this.tooltipStyleClass : defaultClassName;
}
isOutOfBounds() {
let offset = this.container.getBoundingClientRect();
let targetTop = offset.top;
let targetLeft = offset.left;
let width = DomHandler.getOuterWidth(this.container);
let height = DomHandler.getOuterHeight(this.container);
let viewport = DomHandler.getViewport();
return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
}
onWindowResize(e) {
this.hide();
}
bindDocumentResizeListener() {
this.zone.runOutsideAngular(() => {
this.resizeListener = this.onWindowResize.bind(this);
window.addEventListener('resize', this.resizeListener);
});
}
unbindDocumentResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
}
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {
if (this.container) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
unbindEvents() {
if (this.tooltipEvent === 'hover') {
this.el.nativeElement.removeEventListener('mouseenter', this.mouseEnterListener);
this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListener);
this.el.nativeElement.removeEventListener('click', this.clickListener);
}
else if (this.tooltipEvent === 'focus') {
this.el.nativeElement.removeEventListener('focus', this.focusListener);
this.el.nativeElement.removeEventListener('blur', this.blurListener);
}
this.unbindDocumentResizeListener();
}
remove() {
if (this.container && this.container.parentElement) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else if (this.appendTo === 'target')
this.el.nativeElement.removeChild(this.container);
else
DomHandler.removeChild(this.container, this.appendTo);
}
this.unbindDocumentResizeListener();
this.unbindScrollListener();
this.clearTimeouts();
this.container = null;
this.scrollHandler = null;
}
clearShowTimeout() {
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = null;
}
}
clearHideTimeout() {
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = null;
}
}
clearTimeouts() {
this.clearShowTimeout();
this.clearHideTimeout();
}
ngOnDestroy() {
this.unbindEvents();
this.remove();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
}
}
Tooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: Tooltip, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
Tooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.4", type: Tooltip, selector: "[pTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: "escape", showDelay: "showDelay", hideDelay: "hideDelay", life: "life", disabled: ["tooltipDisabled", "disabled"], text: ["pTooltip", "text"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: Tooltip, decorators: [{
type: Directive,
args: [{
selector: '[pTooltip]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { tooltipPosition: [{
type: Input
}], tooltipEvent: [{
type: Input
}], appendTo: [{
type: Input
}], positionStyle: [{
type: Input
}], tooltipStyleClass: [{
type: Input
}], tooltipZIndex: [{
type: Input
}], escape: [{
type: Input
}], showDelay: [{
type: Input
}], hideDelay: [{
type: Input
}], life: [{
type: Input
}], disabled: [{
type: Input,
args: ["tooltipDisabled"]
}], text: [{
type: Input,
args: ['pTooltip']
}] } });
class TooltipModule {
}
TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule], exports: [Tooltip] });
TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: TooltipModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.4", ngImport: i0, type: TooltipModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [Tooltip],
declarations: [Tooltip]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Tooltip, TooltipModule };
//# sourceMappingURL=primeng-tooltip.js.map