From 87a57f599a56a447602c5e73f60a7d2c65d18b83 Mon Sep 17 00:00:00 2001 From: Olivier Ceulemans Date: Sat, 26 Mar 2016 18:22:34 +0100 Subject: [PATCH] fix(tooltip): fix tooltip after upgrade to angular2 2.0.0-beta.12 --- .../tooltip/tooltip-container.component.ts | 50 ++++++++++--------- components/tooltip/tooltip.directive.ts | 6 ++- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts index 27471ca47f..c5eca555af 100644 --- a/components/tooltip/tooltip-container.component.ts +++ b/components/tooltip/tooltip-container.component.ts @@ -1,8 +1,9 @@ import { Component, - OnInit, Input, HostListener, - ElementRef, EventEmitter, - DynamicComponentLoader, ComponentRef, Inject, AfterViewChecked + ChangeDetectorRef, + ChangeDetectionStrategy, + ElementRef, + Inject, AfterViewChecked } from 'angular2/core'; import {NgClass, NgStyle} from 'angular2/common'; import {positionService} from '../position'; @@ -10,7 +11,6 @@ import {TooltipOptions} from './tooltip-options.class'; @Component({ selector: 'tooltip-container', - directives: [NgClass, NgStyle], template: `` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class TooltipContainer implements AfterViewChecked { private classMap:any; - private positionMap:any; - private top:string; - private left:string; - private display:string; + private top:string = '-1000px'; + private left:string = '-1000px'; + private display:string = 'block'; private content:string; private placement:string; - private appendToBody:boolean; - + private popupClass:string; + private animation:boolean; private isOpen:boolean; + private appendToBody:boolean; private hostEl:ElementRef; - constructor(public element:ElementRef, @Inject(TooltipOptions) options:TooltipOptions) { + constructor( + private element:ElementRef, + private cdr:ChangeDetectorRef, + @Inject(TooltipOptions) options:TooltipOptions) { Object.assign(this, options); - this.classMap = {'in': false}; + this.classMap = {'in': false, 'fade': false}; this.classMap[options.placement] = true; } ngAfterViewChecked() { - if (this.hostEl !== null) { + setTimeout(() => { let p = positionService - .positionElements(this.hostEl.nativeElement, + .positionElements( + this.hostEl.nativeElement, this.element.nativeElement.children[0], this.placement, this.appendToBody); this.top = p.top + 'px'; this.left = p.left + 'px'; - this.classMap['in'] = true; - } - } - - public position(hostEl:ElementRef) { - this.display = 'block'; - this.top = '-1000px'; - this.left = '-1000px'; - this.hostEl = hostEl; + this.classMap.in = true; + if (this.animation) { + this.classMap.fade = true; + } + this.cdr.markForCheck(); + }); } } diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts index c7f60b0df1..5e81fe8218 100644 --- a/components/tooltip/tooltip.directive.ts +++ b/components/tooltip/tooltip.directive.ts @@ -19,6 +19,7 @@ export class Tooltip implements OnInit { @Input('tooltipPlacement') public placement:string = 'top'; @Input('tooltipIsOpen') public isOpen:boolean; @Input('tooltipEnable') public enable:boolean; + @Input('tooltipAnimation') public animation:boolean = true; @Input('tooltipAppendToBody') public appendToBody:boolean; private visible:boolean = false; @@ -43,7 +44,9 @@ export class Tooltip implements OnInit { let options = new TooltipOptions({ content: this.content, - placement: this.placement + placement: this.placement, + animation: this.animation, + hostEl: this.element }); let binding = Injector.resolve([ @@ -53,7 +56,6 @@ export class Tooltip implements OnInit { this.tooltip = this.loader .loadNextToLocation(TooltipContainer, this.element, binding) .then((componentRef:ComponentRef) => { - componentRef.instance.position(this.element); return componentRef; }); }