feat(tooltip): added tooltipStateChanged and exporting the directive (#…

…939)
valor-software · Oct 4, 2016 · 650b4f7 · 650b4f7
1 parent cd58c3b
commit 650b4f7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
@@ -8,7 +8,10 @@ import { TooltipModule } from 'ng2-bootstrap/components/tooltip';
 ### Annotations
 ```typescript
 // class Tooltip implements OnInit
-@Directive({ selector: '[tooltip]' })
+@Directive({ 
+  selector: '[tooltip]',
+  exportAs: 'bs-tooltip'
+})
 export class TooltipDirective {
   @Input('tooltip') public content:string;
   @Input('tooltipHtml') public htmlContent:string | TemplateRef<any>;
@@ -18,6 +21,7 @@ export class TooltipDirective {
   @Input('tooltipAppendToBody') private appendToBody:boolean;
   @Input('tooltipClass') public popupClass:string;
   @Input('tooltipContext') public tooltipContext:any;
+  @Output() public tooltipStateChanged:EventEmitter<boolean>;
 }
 ```
 
@@ -33,3 +37,6 @@ export class TooltipDirective {
   - `tooltipClass` (`?string`) - custom tooltip class applied to the tooltip container
   - `tooltipIsOpen` (`?boolean=false`) - if `true` tooltip is currently visible
   - `tooltipContext` (`any`) - if a template is used for the content, then this property can be used to specify a context for that template. The template variable exposed is called 'model'.
+
+### Tooltip events
+  - `tooltipStateChanged` - This event fires each time the state of the tooltip is changed. Argument is boolean stating if the tooltip is visible or not.
diff --git a/components/tooltip/tooltip.directive.ts b/components/tooltip/tooltip.directive.ts
@@ -1,13 +1,16 @@
 import {
-  ComponentRef, Directive, HostListener, Input, ReflectiveInjector, TemplateRef, ViewContainerRef
+  ComponentRef, Directive, HostListener, Input, ReflectiveInjector, TemplateRef, ViewContainerRef, Output, EventEmitter
 } from '@angular/core';
 
 import { TooltipContainerComponent } from './tooltip-container.component';
 import { TooltipOptions } from './tooltip-options.class';
 import { ComponentsHelper } from '../utils/components-helper.service';
 
 /* tslint:disable */
-@Directive({selector: '[tooltip], [tooltipHtml]'})
+@Directive({
+  selector: '[tooltip], [tooltipHtml]',
+  exportAs: 'bs-tooltip'
+})
 /* tslint:enable */
 export class TooltipDirective {
   /* tslint:disable */
@@ -22,6 +25,8 @@ export class TooltipDirective {
   @Input('tooltipContext') public tooltipContext:any;
   /* tslint:enable */
 
+  @Output() public tooltipStateChanged:EventEmitter<boolean> = new EventEmitter<boolean>();
+
   public viewContainerRef:ViewContainerRef;
   public componentsHelper:ComponentsHelper;
 
@@ -58,6 +63,8 @@ export class TooltipDirective {
 
     this.tooltip = this.componentsHelper
       .appendNextToLocation(TooltipContainerComponent, this.viewContainerRef, binding);
+
+    this.triggerStateChanged();
   }
 
   // params event, target
@@ -69,5 +76,10 @@ export class TooltipDirective {
     }
     this.visible = false;
     this.tooltip.destroy();
+    this.triggerStateChanged();
+  }
+
+  private triggerStateChanged():void {
+    this.tooltipStateChanged.emit(this.visible);
   }
 }
diff --git a/demo/components/tooltip/tooltip-demo.html b/demo/components/tooltip/tooltip-demo.html
@@ -23,7 +23,7 @@
 </p>
 
 <p>
-  I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip">Check me out!</a>
+  I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip" (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
 </p>
 
 <template #toolTipTemplate let-model="model">
@@ -32,8 +32,18 @@ <h5>With context binding: {{model.text}}</h5>
 </template>
 
 <p>
-  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate" [tooltipContext]="tooltipModel">Check me out!</a>
+  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate" 
+                                    [tooltipContext]="tooltipModel" 
+                                    (tooltipStateChanged)="tooltipStateChanged($event)">Check me out!</a>
+</p>
 <p>
+  Programatically show/hide tooltip
+   <a href="#" [tooltip]="'Foo'" 
+               (tooltipStateChanged)="tooltipStateChanged($event)"
+               #tooltip="bs-tooltip">Check me out!</a>
+   <button class="btn btn-primary" (click)="tooltip.show()">Show tooltip</button>
+   <button class="btn btn-danger" (click)="tooltip.hide()">Hide tooltip</button>
+ </p>
 
 <p>
   I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltipClass="customClass">Check me out!</a>

diff --git a/demo/components/tooltip/tooltip-demo.ts b/demo/components/tooltip/tooltip-demo.ts
@@ -13,4 +13,8 @@ export class TooltipDemoComponent {
   public dynamicTooltipText:string = 'dynamic';
   public htmlTooltip:string = 'I\'ve been made <b>bold</b>!';
   public tooltipModel:any = {text: 'foo', index: 1};
+
+  public tooltipStateChanged(state: boolean):void {
+    console.log(`Tooltip is open: ${state}`);
+  }
 }