fix(tooltip): updated for beta.12 (fixes #296, closes #332)

valor-software · Mar 28, 2016 · 413c2f1 · 413c2f1
1 parent 6daed6b
commit 413c2f1
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 56 deletions.
diff --git a/components/position.ts b/components/position.ts
@@ -1,7 +1,3 @@
-import {
-  Injectable,
-  ElementRef
-} from 'angular2/core';
 import {IAttribute} from './common';
 
 export class PositionService {
@@ -26,7 +22,6 @@ export class PositionService {
     return nativeEl.style[cssProp];
   }
 
-
   /**
    * Checks if a given element is statically positioned
    * @param nativeEl - raw DOM element
@@ -35,9 +30,9 @@ export class PositionService {
     return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
   }
 
-
   /**
-   * returns the closest, non-statically positioned parentOffset of a given element
+   * returns the closest, non-statically positioned parentOffset of a given
+   * element
    * @param nativeEl
    */
   private parentOffsetEl(nativeEl:any) {
@@ -53,7 +48,7 @@ export class PositionService {
    * Provides read-only equivalent of jQuery's position function:
    * http://api.jquery.com/position/
    */
-  public position(nativeEl:any):{width: number, height: number, top: number, left: number} {
+  public position(nativeEl:any):{width:number, height:number, top:number, left:number} {
     let elBCR = this.offset(nativeEl);
     let offsetParentBCR = {top: 0, left: 0};
     let offsetParentEl = this.parentOffsetEl(nativeEl);
@@ -76,7 +71,7 @@ export class PositionService {
    * Provides read-only equivalent of jQuery's offset function:
    * http://api.jquery.com/offset/
    */
-  public offset(nativeEl:any):{width: number, height: number, top: number, left: number} {
+  public offset(nativeEl:any):{width:number, height:number, top:number, left:number} {
     let boundingClientRect = nativeEl.getBoundingClientRect();
     return {
       width: boundingClientRect.width || nativeEl.offsetWidth,
@@ -89,7 +84,7 @@ export class PositionService {
   /**
    * Provides coordinates for the targetEl in relation to hostEl
    */
-  public positionElements(hostEl:any, targetEl:any, positionStr:any, appendToBody:any):{top: number, left: number} {
+  public positionElements(hostEl:any, targetEl:any, positionStr:any, appendToBody:any):{top:number, left:number} {
     let positionStrParts = positionStr.split('-');
     let pos0 = positionStrParts[0];
     let pos1 = positionStrParts[1] || 'center';
@@ -98,7 +93,6 @@ export class PositionService {
       this.position(hostEl);
     let targetElWidth = targetEl.offsetWidth;
     let targetElHeight = targetEl.offsetHeight;
-
     let shiftWidth:IAttribute = {
       center: function () {
         return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
@@ -123,7 +117,7 @@ export class PositionService {
       }
     };
 
-    let targetElPos:{top: number, left: number};
+    let targetElPos:{top:number, left:number};
     switch (pos0) {
       case 'right':
         targetElPos = {

diff --git a/components/tooltip/tooltip-container.component.ts b/components/tooltip/tooltip-container.component.ts
@@ -1,27 +1,22 @@
-import {
-  Component,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy,
-  ElementRef,
-  Inject, AfterViewChecked
-} from 'angular2/core';
+import {Component, ChangeDetectorRef, ElementRef, Inject, AfterViewInit} from 'angular2/core';
 import {NgClass, NgStyle} from 'angular2/common';
 import {positionService} from '../position';
 import {TooltipOptions} from './tooltip-options.class';
 
 @Component({
   selector: 'tooltip-container',
+  directives: [NgClass, NgStyle],
+  // changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div class="tooltip" role="tooltip"
      [ngStyle]="{top: top, left: left, display: display}"
      [ngClass]="classMap">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         {{content}}
       </div>
-    </div>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    </div>`
 })
-export class TooltipContainer implements AfterViewChecked {
+export class TooltipContainer implements AfterViewInit {
   private classMap:any;
   private top:string = '-1000px';
   private left:string = '-1000px';
@@ -34,29 +29,27 @@ export class TooltipContainer implements AfterViewChecked {
   private appendToBody:boolean;
   private hostEl:ElementRef;
 
-  constructor(
-    private element:ElementRef,
-    private cdr:ChangeDetectorRef,
-    @Inject(TooltipOptions) options:TooltipOptions) {
+  constructor(private element:ElementRef,
+              private cdr:ChangeDetectorRef,
+              @Inject(TooltipOptions) options:TooltipOptions) {
     Object.assign(this, options);
     this.classMap = {'in': false, 'fade': false};
     this.classMap[options.placement] = true;
   }
 
-  ngAfterViewChecked() {
-    setTimeout(() => {
-        let p = positionService
-        .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;
-        if (this.animation) {
-            this.classMap.fade = true;
-        }
-        this.cdr.markForCheck();
-    });
+  ngAfterViewInit() {
+    let p = positionService
+      .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;
+    if (this.animation) {
+      this.classMap.fade = true;
+    }
+    // fix: why time out is really needed here?
+    setTimeout(() => this.cdr.markForCheck());
   }
 }
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
@@ -1,18 +1,7 @@
-import {
-  Directive,
-  OnInit, Input, HostListener,
-  ElementRef, EventEmitter,
-  DynamicComponentLoader, ComponentRef,
-  Provider,
-  Injectable, forwardRef, ResolvedBinding, Injector
-} from 'angular2/core';
-import {NgClass, NgStyle} from 'angular2/common';
-
+import {Directive, OnInit, Input, HostListener, ElementRef, DynamicComponentLoader, ComponentRef, Provider, Injector} from 'angular2/core';
 import {TooltipOptions} from './tooltip-options.class';
 import {TooltipContainer} from './tooltip-container.component';
 
-import {IAttribute} from '../common';
-
 @Directive({selector: '[tooltip]'})
 export class Tooltip implements OnInit {
   @Input('tooltip') public content:string;
@@ -41,7 +30,6 @@ export class Tooltip implements OnInit {
       return;
     }
     this.visible = true;
-
     let options = new TooltipOptions({
       content: this.content,
       placement: this.placement,

diff --git a/demo/components/tooltip/tooltip-demo.html b/demo/components/tooltip/tooltip-demo.html
@@ -16,7 +16,7 @@
   nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
   <a href="#" tooltipPlacement="bottom" tooltip="On the Bottom!">bottom</a>
   pharetra convallis posuere morbi leo urna,
-  <a href="#" tooltipAnimation="false" tooltip="I don't fade. :-(">fading</a>
+  <a href="#" [tooltipAnimation]="false" tooltip="I don't fade. :-(">fading</a>
   at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
   <a href="#" tooltipPopupDelay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
   nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas

diff --git a/demo/components/tooltip/tooltip-demo.ts b/demo/components/tooltip/tooltip-demo.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import {Component, ChangeDetectionStrategy} from 'angular2/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 import {TOOLTIP_DIRECTIVES} from '../../../ng2-bootstrap';
 
@@ -9,6 +9,7 @@ let template = require('./tooltip-demo.html');
   selector: 'tooltip-demo',
   template: template,
   directives: [TOOLTIP_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [`
     /* Specify styling for tooltip contents */
     .tooltip.customClass .tooltip-inner {