ionic4-tooltips
Version:
Tooltips module for Ionic 2+ and Angular 8+ apps
452 lines (442 loc) • 19.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/animations'), require('@ionic/angular')) :
typeof define === 'function' && define.amd ? define('ionic4-tooltips', ['exports', '@angular/common', '@angular/core', '@angular/animations', '@ionic/angular'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ionic4-tooltips'] = {}, global.ng.common, global.ng.core, global.ng.animations, global['@ionic/angular']));
}(this, (function (exports, common, i0, animations, angular) { 'use strict';
var TooltipBoxComponent = /** @class */ (function () {
function TooltipBoxComponent(elementRef, rnd) {
var _this = this;
this.elementRef = elementRef;
this.rnd = rnd;
this.fadeState = 'invisible';
this.role = 'status';
this.tooltipStyles = {};
this.init = new Promise(function (resolve) {
_this.initResolve = resolve;
});
}
Object.defineProperty(TooltipBoxComponent.prototype, "arrow", {
set: function (side) {
this.rnd.setAttribute(this.getNativeElement(), 'class', 'has-arrow ' + 'arrow-' + side);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TooltipBoxComponent.prototype, "posTop", {
set: function (val) {
this.rnd.setStyle(this.getNativeElement(), 'top', val + 'px');
},
enumerable: false,
configurable: true
});
Object.defineProperty(TooltipBoxComponent.prototype, "posLeft", {
set: function (val) {
this.rnd.setStyle(this.getNativeElement(), 'left', val + 'px');
},
enumerable: false,
configurable: true
});
TooltipBoxComponent.prototype.getNativeElement = function () {
return this.elementRef.nativeElement;
};
TooltipBoxComponent.prototype.ngAfterViewInit = function () {
this.initResolve();
};
return TooltipBoxComponent;
}());
TooltipBoxComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'tooltip-box',
template: "<div class=\"tooltip-box\"\n [attr.aria-role]=\"role\"\n [ngStyle]=\"tooltipStyles\">\n <div *ngIf=\"tooltipHtml; else txt\" [innerHTML]=\"tooltipHtml\"></div>\n\n <ng-template #txt><div [innerHtml]=\"text\"></div></ng-template>\n</div>\n",
animations: [
animations.trigger('fade', [
animations.state('visible', animations.style({ opacity: 1 })),
animations.state('invisible', animations.style({ opacity: 0 })),
animations.transition('visible <=> invisible', animations.animate('300ms linear'))
])
],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: [":host{background-color:rgba(0,0,0,.8);color:#fff;display:inline-block;font-size:15px;padding:15px 25px;position:fixed;z-index:3}:host.has-arrow:before{border:5px solid transparent;content:\"\";height:0;position:absolute;width:0}:host.has-arrow.arrow-top:before{border-bottom:5px solid rgba(0,0,0,.8);top:-10px}:host.has-arrow.arrow-left:before{border-right:5px solid rgba(0,0,0,.8);left:-10px}:host.has-arrow.arrow-right:before{border-left:5px solid rgba(0,0,0,.8);right:-10px}:host.has-arrow.arrow-bottom:before{border-top:5px solid rgba(0,0,0,.8);bottom:-10px}"]
},] }
];
TooltipBoxComponent.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.Renderer2 }
]; };
TooltipBoxComponent.propDecorators = {
fadeState: [{ type: i0.HostBinding, args: ['@fade',] }],
role: [{ type: i0.Input }],
text: [{ type: i0.Input }],
tooltipHtml: [{ type: i0.Input }],
tooltipStyles: [{ type: i0.Input }],
arrow: [{ type: i0.Input }],
posTop: [{ type: i0.Input }],
posLeft: [{ type: i0.Input }]
};
var TooltipController = /** @class */ (function () {
function TooltipController() {
this.allowMultiple = true;
this.activeTooltips = [];
}
TooltipController.prototype.addTooltip = function (instance) {
if (instance.hideOthers || !this.allowMultiple && this.activeTooltips.length > 0) {
this.hideAll();
}
this.activeTooltips.push(instance);
};
TooltipController.prototype.removeTooltip = function (instance) {
this.activeTooltips.splice(this.activeTooltips.indexOf(instance), 1);
};
TooltipController.prototype.hideAll = function () {
this.activeTooltips.forEach(function (tooltip) {
tooltip.removeTooltip();
});
};
return TooltipController;
}());
TooltipController.ɵprov = i0.ɵɵdefineInjectable({ factory: function TooltipController_Factory() { return new TooltipController(); }, token: TooltipController, providedIn: "root" });
TooltipController.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root',
},] }
];
var TooltipEvent;
(function (TooltipEvent) {
TooltipEvent["CLICK"] = "click";
TooltipEvent["HOVER"] = "hover";
TooltipEvent["PRESS"] = "press";
})(TooltipEvent || (TooltipEvent = {}));
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(el, appRef, platform, cfr, tooltipCtrl, vcr) {
this.el = el;
this.appRef = appRef;
this.platform = platform;
this.cfr = cfr;
this.tooltipCtrl = tooltipCtrl;
this.vcr = vcr;
this._active = false;
this._arrow = false;
this._canShow = true;
this._debouncedPromise = null;
this._navTooltip = false;
this.debounce = 0;
this.desktopEvent = TooltipEvent.HOVER;
this.duration = 3000;
this.tooltipStyles = {};
}
Object.defineProperty(TooltipDirective.prototype, "navTooltip", {
get: function () {
return this._navTooltip;
},
set: function (val) {
this._navTooltip = typeof val !== 'boolean' || val !== false;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "arrow", {
get: function () {
return this._arrow;
},
set: function (val) {
this._arrow = typeof val !== 'boolean' || val !== false;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TooltipDirective.prototype, "active", {
get: function () {
return this._active;
},
set: function (val) {
this._active = typeof val !== 'boolean' || val !== false;
this._active && this.canShow ?
this.showTooltip() : this.removeTooltip();
},
enumerable: false,
configurable: true
});
TooltipDirective.prototype.ngOnInit = function () {
if (typeof this.event === 'undefined') {
this.event = this.platform.is('mobile') ?
this.mobileEvent : this.desktopEvent;
}
// if the timer hasn't expired or active is true when the component gets destroyed, the tooltip will remain in the DOM
// this removes it
this.removeTooltip();
};
/**
* Show the tooltip immediately after initiating view if set to
*/
TooltipDirective.prototype.ngAfterViewInit = function () {
if (this._active) {
this.trigger();
}
};
TooltipDirective.prototype.ngOnDestroy = function () {
if (this._tooltipElement && typeof this._tooltipElement.destroy === 'function') {
this._tooltipElement.destroy();
}
};
Object.defineProperty(TooltipDirective.prototype, "canShow", {
/**
* @return TRUE if the tooltip can be shown
*/
get: function () {
return this._canShow &&
((typeof this.tooltip === 'string' && this.tooltip !== '')
|| (typeof this.tooltipHtml === 'string' && this.tooltipHtml !== ''));
},
/**
* Set the canShow property
* Ensure that tooltip is shown only if the tooltip string is not falsey
*/
set: function (show) {
this._canShow = show;
},
enumerable: false,
configurable: true
});
/**
* Handles the click/press event and shows a tooltip.
* If a tooltip already exists, it will just reset it's timer.
*/
TooltipDirective.prototype.trigger = function () {
if (this.canShow) {
if (this._tooltipElement) {
this._resetTimer();
}
else {
this.showTooltip();
}
}
};
/**
* Creates a new tooltip component and adjusts it's properties to show properly.
*/
TooltipDirective.prototype.showTooltip = function () {
var _this = this;
this._debouncedPromise = setTimeout(function () {
_this._debouncedPromise = null;
_this._createTooltipComponent();
var tooltipComponent = _this._tooltipElement.instance;
tooltipComponent.role = _this.role;
tooltipComponent.text = _this.tooltip;
tooltipComponent.tooltipStyles = _this.tooltipStyles;
tooltipComponent.tooltipHtml = _this.tooltipHtml;
tooltipComponent.init.then(function () {
var tooltipPosition = _this._getTooltipPosition();
tooltipComponent.posLeft = tooltipPosition.left;
tooltipComponent.posTop = tooltipPosition.top;
tooltipComponent.fadeState = 'visible';
if (_this.arrow) {
var arrowPosition = void 0;
if (_this.positionV === 'top') {
arrowPosition = 'bottom';
}
else if (_this.positionV === 'bottom') {
arrowPosition = 'top';
}
else if (_this.positionH === 'left') {
arrowPosition = 'right';
}
else {
arrowPosition = 'left';
}
tooltipComponent.arrow = arrowPosition;
}
if (!_this._active) {
_this._tooltipTimeout = setTimeout(_this.removeTooltip.bind(_this), _this.duration);
}
});
}, this.debounce);
};
TooltipDirective.prototype.onClick = function () {
if (this.event === TooltipEvent.CLICK) {
this.trigger();
}
};
TooltipDirective.prototype.onPress = function () {
if (this.event === TooltipEvent.PRESS) {
this.trigger();
}
};
TooltipDirective.prototype.onMouseEnter = function () {
if (this.event === TooltipEvent.HOVER) {
this.active = true;
}
};
TooltipDirective.prototype.onMouseLeave = function () {
if (this.event === TooltipEvent.HOVER) {
this.active = false;
}
};
TooltipDirective.prototype._createTooltipComponent = function () {
var componentFactory = this.cfr.resolveComponentFactory(TooltipBoxComponent);
this._tooltipElement = this.vcr.createComponent(componentFactory);
this.tooltipCtrl.addTooltip(this);
};
TooltipDirective.prototype._getTooltipPosition = function () {
var tooltipNativeElement = this._tooltipElement.instance.getNativeElement(), el = this.el.nativeElement, rect = el.getBoundingClientRect();
var positionLeft, positionTop, spacing = 10;
if (this.navTooltip) {
this.positionV = 'bottom';
this.arrow = false;
spacing = 20;
}
if (this.positionH === 'right') {
positionLeft = rect.right + spacing;
}
else if (this.positionH === 'left') {
positionLeft = rect.left - spacing - tooltipNativeElement.offsetWidth;
// -79, 19
}
else if (this.navTooltip) {
positionLeft = rect.left + el.offsetWidth / 2;
}
else {
positionLeft = rect.left;
}
if (this.positionV === 'top') {
positionTop = rect.top - spacing - tooltipNativeElement.offsetHeight;
}
else if (this.positionV === 'bottom') {
positionTop = rect.bottom + spacing;
}
else {
positionTop = rect.top + el.offsetHeight / 2 - tooltipNativeElement.offsetHeight / 2;
}
this.topOffset++;
if (this.topOffset) {
positionTop += +this.topOffset;
}
this.leftOffset++;
if (this.leftOffset) {
positionLeft += +this.leftOffset;
}
if (positionLeft + tooltipNativeElement.offsetWidth + spacing > this.platform.width()) {
positionLeft = this.platform.width() - tooltipNativeElement.offsetWidth - spacing;
}
else if (positionLeft + tooltipNativeElement.offsetWidth - spacing < 0) {
positionLeft = spacing;
}
if (positionTop + tooltipNativeElement.offsetHeight + spacing > this.platform.height()) {
positionTop = this.platform.height() - tooltipNativeElement.offsetHeight - spacing;
}
else if (positionTop + tooltipNativeElement.offsetHeight - spacing < 0) {
positionTop = spacing;
}
return {
left: positionLeft,
top: positionTop,
};
};
TooltipDirective.prototype.removeTooltip = function () {
var _this = this;
if (this._debouncedPromise) {
clearTimeout(this._debouncedPromise);
this._debouncedPromise = null;
}
if (!this._tooltipElement) {
this._tooltipElement = undefined;
this._tooltipTimeout = undefined;
return;
}
this._tooltipElement.instance.fadeState = 'invisible';
this.canShow = false;
// wait for animation to finish then clear everything out
setTimeout(function () {
if (_this._tooltipElement &&
typeof _this._tooltipElement.destroy === 'function') {
_this._tooltipElement.destroy();
}
_this.tooltipCtrl.removeTooltip(_this);
_this._tooltipElement = _this._tooltipTimeout = undefined;
_this.canShow = true;
}, 300);
};
TooltipDirective.prototype._resetTimer = function () {
var _this = this;
clearTimeout(this._tooltipTimeout);
this._tooltipTimeout = setTimeout(function () {
_this.active = false;
}, this.duration);
};
return TooltipDirective;
}());
TooltipDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[tooltip]',
},] }
];
TooltipDirective.ctorParameters = function () { return [
{ type: i0.ElementRef },
{ type: i0.ApplicationRef },
{ type: angular.Platform },
{ type: i0.ComponentFactoryResolver },
{ type: TooltipController },
{ type: i0.ViewContainerRef }
]; };
TooltipDirective.propDecorators = {
debounce: [{ type: i0.Input }],
desktopEvent: [{ type: i0.Input }],
duration: [{ type: i0.Input }],
event: [{ type: i0.Input }],
hideOthers: [{ type: i0.Input }],
leftOffset: [{ type: i0.Input }],
mobileEvent: [{ type: i0.Input }],
positionV: [{ type: i0.Input }],
positionH: [{ type: i0.Input }],
role: [{ type: i0.Input }],
tooltip: [{ type: i0.Input }],
tooltipHtml: [{ type: i0.Input }],
tooltipStyles: [{ type: i0.Input }],
topOffset: [{ type: i0.Input }],
navTooltip: [{ type: i0.Input }],
arrow: [{ type: i0.Input }],
active: [{ type: i0.Input }],
onClick: [{ type: i0.HostListener, args: ['click',] }],
onPress: [{ type: i0.HostListener, args: ['press',] }],
onMouseEnter: [{ type: i0.HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: i0.HostListener, args: ['mouseleave',] }]
};
var TooltipsModule = /** @class */ (function () {
function TooltipsModule() {
}
TooltipsModule.forRoot = function () {
return {
ngModule: TooltipsModule,
providers: [
TooltipController
],
};
};
return TooltipsModule;
}());
TooltipsModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
TooltipDirective,
TooltipBoxComponent
],
entryComponents: [
TooltipBoxComponent
],
exports: [
TooltipDirective
],
imports: [
common.CommonModule
]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.TooltipBoxComponent = TooltipBoxComponent;
exports.TooltipController = TooltipController;
exports.TooltipDirective = TooltipDirective;
exports.TooltipsModule = TooltipsModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ionic4-tooltips.umd.js.map